python结合Vue做登陆页面

1. 创建一个Vue项目：

在命令行中输入以下命令来创建一个Vue项目：

vue create my-project

2. 安装axios：

使用以下命令安装axios库：

npm install axios --save

3. 创建一个登陆页面组件：

在src/components目录下创建一个名为Login.vue的组件，代码如下：

<template>
  <div>
    <form>
      <label>用户名</label>
      <input type="text" v-model="username">
      <label>密码</label>
      <input type="password" v-model="password">
      <button @click.prevent="login">登陆</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password,
      })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
    },
  },
};
</script>

在这个组件中，我们使用了axios库来向后端发送POST请求，将用户名和密码发送到/api/login接口。

4. 在main.js中配置axios：

在src/main.js文件中添加以下代码：

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000';

Vue.prototype.$http = axios;

这个代码片段将axios的基础URL设置为http://localhost:3000，这是我们后端服务器的地址。

5. 在App.vue中引入Login组件：

在src/App.vue文件中引入Login组件，代码如下：

<template>
  <div id="app">
    <Login />
  </div>
</template>

<script>
import Login from './components/Login.vue';

export default {
  name: 'App',
  components: {
    Login,
  },
};
</script>

6. 运行Vue项目：

在命令行中输入以下命令来运行Vue项目：

npm run serve

这个命令将启动一个开发服务器，并在浏览器中打开我们的应用程序。现在，我们可以在浏览器中访问登陆页面，填写表单并点击登陆按钮，向后端服务器发送POST请求。根据后端服务器的响应，我们可以在浏览器的控制台中看到登陆结果。