vue使用json-server 模拟数据

借鉴：

ttps://juejin.cn/post/7043424909472563208#heading-2

json-server：来完全模拟请求以及请求回来的过程

安装json-server

在根目录下全局安装

npm install -g json-server
1

之后会自动生成一个db.json文件。注意是自动生成后的文件所在位置，可以自定义修改里面的内容

存放全部数据

打开终端：设置端口：
该端口作为脚手架的端口号

json-server db.json --port 8080
1

在package.json文件中，scripts中配置一个mock，该端口号作为访问虚拟数据的端口号

vue页面发请求

安装axios

发送请求

运行

这里需要使用多线程，也就是需要再开一个终端

此时可以成功访问

备注

200 成功 服务器已经成功处理了请求
201 创建 表示服务器执行成功并且创建了新的资源

配置proxyTable跨域

安装vue-resource

npm install vue-resource
1

引入

//main.js
import Vue from 'vue'
import App from './App.vue'
import Resource from 'vue-resource';
Vue.use(Resource); //使用resource

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11

配置proxyTable请求数据

//vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        port: 8080,

        host: "localhost",

        https: false,

        // 自动启动浏览器

        open: false,
        proxy: {
            '/api/': {
                target: 'http://localhost:3003', //将http://localhost:3003映射到/api
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '', // 因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'
                }
            }
        },
    }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

网络请求修改

 created() {
        axios({
            method: 'get',
            // url: 'http://httpbin.org',
            url:" /api/posts"
        }).then(res => { console.log(res); })
        axios({
  method: 'post',
  url: 'http://localhost:3003/posts',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res=>{console.log(res);})
  },

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17