前期准备
1、vue create 生成项目
2、安装express 、axios
1.生産プロジェクト
vue create vuedemo
2つ、express、axiosをインストールします
npm install express
npm install axios
3、構成項目
配置文件如下
1.データを追加します
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)
})
}
}
}
4、テストインターフェイス
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>
インターフェイスデータの戻り値