前期准备
1、vue create 生成项目
2、安装express 、axios
一、 生产项目
vue create vuedemo
二、安装 express 、 axios
npm install express
npm install axios
三、配置项目
配置文件如下
1、添加data 数据
test.json 文件内容
{
"code": 200,
"data": {
"name": "hezs",
"age": 26
}
}
2、 request.js 封装axios
import axios from 'axios'
var baseURL = 'http://localhost:8080'
const service = axios.create({
baseURL: baseURL,
timeout: 100000 // request timeout
})
service.interceptors.request.use(
config => {
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data
// console.log('resp:')
// console.log(res)
// if the custom code is not 200, it is judged as an error.
if (res.code !== 200) {
alert('!==200')
return Promise.reject(res.message || 'error')
} else {
return res.data
}
},
error => {
console.log('err' + error) // for debug
let msg = error.message
console.log(msg);
return Promise.reject(error)
}
)
export default service
3、新建api
import request from '@/utils/request'
export function testList(query) {
return request({
url: '/api/test',
method: 'get',
params: query
})
}
4、在 vue.config.js 引入配置
const test = require('./data/test.json')
const express = require('express')
const app = express()
let apiRoutes = express.Router()
app.use(`/api`, apiRoutes)
module.exports = {
//生成环境部署路径,默认为'/'
publicPath: './',
//当运行 build 时生成的生产环境构建文件的目录
outputDir:'demo',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
before(app) {
app.get('/test', (req, res) => {
res.json(test)
})
}
}
}
四、测试接口
在vue组件中
<template>
<div class="hello">
<div>
<h1>测试接口数据</h1>
<div>
<span><b>name</b>: {{resData.name}}</span>
<br>
<span><b>age</b>: {{resData.age}}</span>
</div>
</div>
</div>
</template>
<script>
import { testList } from '@/api/test'
export default {
name: 'HelloWorld',
data() {
return{
resData: {
name: '',
age: 0
}
}
},
mounted() {
testList().then(res=>{
console.log(res);
this.resData = res
}).catch(err=>{
console.log(err);
})
},
methods: {
}
}
</script>
<style scoped>
</style>
接口数据返回