vue-cli项目中用json-sever搭建mock服务器，模拟本地json数据

深碍√TFBOYSˉ_ 2022-05-28 20:40 221阅读 0赞

在使用vue-cli开发项目时，无论后台接口是否开发完成，我们都可以自己使用本地json数据用于模拟，但这些json数据要作为接口开发，json server 作为模拟工具就提供了这样的功能，并且使用十分方便。

**前提：已经使用vue-cli搭建好了项目**

**1、全局安装json-server**

npm install json-server -g
    或使用
    cnpm install json-server -g

**2、在项目目录下创建mock文件夹,并在文件夹下创建db.json文件**  
![这里写图片描述][bede1d2fac3b259225c7977d859b2205.png]

**3、找到package.json文件夹,写入两个命令:**

"mock": "json-server --watch mock/db.json",
     "mockdev": "npm run mock & npm run dev"

![这里写图片描述][2cb415400bbac907d854ed0bc67d0bd4.png]

我这里只写了一个,其实一个两个都可以,写两个直接可以两条命令一起执行  
如果执行npm run mockdev 时一直处于监听db.json的状态,建议使用两条命令分开在两个命令行中执行,可避免在一条命令中重复监听db.json。

![这里写图片描述][4c38d27cd276060d8f27eaa885d9b10b.png]

**4、在config/index.js中设置代理:**

主要是为了将请求映射到http://localhost:3000

proxyTable: {
            '/api/':{
                target:'http://localhost:3000',
                changeOrigin:true,
                pathRewrite:{
                    '^/api.':''
                }
            }
        }

![这里写图片描述][b47081fb258a64d34798b4313d5d3599.png]

注意:如果此时你的服务已经开了(已经npm run dev 了),需重新启动服务

在设置代理之前,可以先进行测试,看是否可以启动mock服务器

运行npm run mock 之后访问http://localhost:3000 ,页面中存在json对象并可访问即可  
![这里写图片描述][4fbc6f4fd9ff9cf7ae375faefb2817e1.png]

![这里写图片描述][d6a6827f947a2c143a2511f8f99b84c8.png]

这样我们就实现了项目用npm run dev启动，而json数据使用npm run mock启动（mock服务器用于模拟后台接口请求）

**最后：我们就可以使用vue的axios进行数据请求啦**

axios({
               url:'/api/table',//api 代理到json文件地址，后面的后缀是文件中的对象或者是数组
               method:'get',//请求方式
               //这里可以添加axios文档中的各种配置
            }).then(function (res) {
              console.log(res,'成功');
            }).catch(function (err) {
              console.log(err,'错误');
            })

[bede1d2fac3b259225c7977d859b2205.png]: /images/20220529/ac53e4a8d0ba4259931ad63b0b961d06.png
[2cb415400bbac907d854ed0bc67d0bd4.png]: /images/20220529/33e340221d014e658244244e9a06676a.png
[4c38d27cd276060d8f27eaa885d9b10b.png]: /images/20220529/0952814e41f24702b47bab3896ed669d.png
[b47081fb258a64d34798b4313d5d3599.png]: /images/20220529/e7378c50b1a641bfacc8171b497abdd3.png
[4fbc6f4fd9ff9cf7ae375faefb2817e1.png]: /images/20220529/843c115c635c4bacbdf2f1455d339df6.png
[d6a6827f947a2c143a2511f8f99b84c8.png]: /images/20220529/22766e2b76df4c12bc858bfb30a8acf1.png