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请求。根据后端服务器的响应，我们可以在浏览器的控制台中看到
登陆结果。
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
