1：在项目里面新建一个mock文件夹，在mock文件夹里面新建一个test.json文件
test.json:
{ "first":[ {"name":"520","nick":"我爱你"}, {"name":"521","nick":"我愿意"}, {"name":"1314","nick":"一生一世"} ] }
2:在build目录下找到webpack.dev.conf.js文件，编写以下代码
// mock code const express = require('express') const app = express() const posts = require('../mock/test.json') const routes = express.Router() app.use('/api', routes) // 如果是post请求，那么将get改为post即可 devServer: { ... before(app){ app.get('/api/test', (req, res) => { res.json(posts) }) } }
3:浏览器输入http://localhost:8080/api/test
成功看到模拟数据
4:使用第三方http请求库axios进行ajax请求,这里不会，可以从参考上一篇文章内容。
methods: { getData() { axios.get('http://localhost:8080/api/test').then(response => { console.log(response.data); }, response => { console.log("error"); }); } }
vue页面代码参考
<template> <div id="app"> </div> </template> <script> import axios from "axios"; export default { name: "app", data() { return { itemList: [] } }, mounted() { this.getData(); }, methods: { getData() { axios.get('http://localhost:8080/api/test').then(response => { console.log(response.data); }, response => { console.log("error"); }); } } } </script>
5:在浏览器里面，我们可以看到，mock里面的数据请求成功显示如下
