简单搭建一个vue项目,测试post请求
时间: 2023-06-26 10:09:07 浏览: 102
搭建一个vue项目
5星 · 资源好评率100%
好的,以下是简单的步骤:
1. 确认已安装Node.js和npm,可在命令行工具中输入以下命令检查版本号:
```
node -v
npm -v
```
2. 安装Vue CLI,可在命令行工具中输入以下命令:
```
npm install -g @vue/cli
```
3. 创建一个新的Vue项目,在命令行工具中输入以下命令:
```
vue create my-project
```
4. 进入项目目录,并安装axios,可在命令行工具中输入以下命令:
```
cd my-project
npm install axios
```
5. 在src目录下创建一个api.js文件,用于封装post请求:
```
import axios from 'axios'
const service = axios.create({
baseURL: 'http://localhost:3000', // 填写后端服务器地址
timeout: 10000 // 请求超时时间
})
export function postRequest(url, params) {
return service({
method: 'post',
url: url,
data: params
})
}
```
6. 在组件中使用post请求,示例代码如下:
```
<template>
<div>
<button @click="postData">发送POST请求</button>
</div>
</template>
<script>
import { postRequest } from '@/api.js'
export default {
methods: {
async postData() {
try {
const res = await postRequest('/api/login', { username: 'test', password: '123456' })
console.log(res.data)
} catch (error) {
console.log(error)
}
}
}
}
</script>
```
7. 运行项目,在命令行工具中输入以下命令:
```
npm run serve
```
8. 在浏览器中访问http://localhost:8080,点击按钮即可发送post请求,并在控制台中查看响应结果。
阅读全文