前期准备
1、vue create 生成项目
2、安装express 、axios
1. Production Project
vue create vuedemo
Two, install express, axios
npm install express
npm install axios
Three, configuration items
配置文件如下
1. Add data
test.json file content
{
"code": 200,
"data": {
"name": "hezs",
"age": 26
}
}
2. Request.js encapsulates 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. New api
import request from '@/utils/request'
export function testList(query) {
return request({
url: '/api/test',
method: 'get',
params: query
})
}
4. Introduce configuration in 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)
})
}
}
}
Four, test interface
In the vue component
<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>
Interface data return
