WEB前端程序开发

vue中使用json-server,实现mock数据

2018-01-09  本文已影响476人  F1503

学习各种资料,整理出一份可用的mock方式(如有问题还请各位大神多多指教)

>使用到的技术:

       vue-cli、webpack、node、npm、json-server

完整步骤:

(基础版)

  1、全局安装json-server

       npm i json-server -g

 
2、安装好之后,修改配置文件,config-->index.js-->proxyTable

      proxyTable: {

          '/api/': {

           target: 'http://localhost:3000',

           changeOrigin: true,

           secure: false,

           pathRewrite: {

                  '^/api/': ''

            }

          }

       },

3、在目录下创建一个mock文件夹

      新建一个db.json文件

             {

                  "data":{

                       "data":"world",

                        "status":0,

                         "msg":"success"

                     }

               }

4、修改package.json文件package.json-->scripts

      "scripts": {

              "dev": "node build/dev-server.js",

              "start": "node build/dev-server.js",

              "build": "node build/build.js",

             "mock": "node mock/db.json --post 9090",

             "mockdev": "npm run mock & npm run dev"

        },

5、启动项目,再启动服务

     npm run dev

     npm run mock

或者

    npm run mock

6、页面请求

    this.$http.get('/api/data').then((res)=>{

          console.log(res)

      })


(进阶版)

因为项目内可能不是只是需要一个json文件,可能存在这种情况,如果每个文件都去配置就很麻烦,可以直接在mock文件夹里编写一个server.js

1、2步骤同上,步骤3创建文件夹如上

4、创建server.js



5、修改package.json文件package.json-->scripts

"scripts": {

              "dev": "node build/dev-server.js",

              "start": "node build/dev-server.js",

              "build": "node build/build.js",

             "mock": "node mock/server.js", ///该条配置不一样

             "mockdev": "npm run mock & npm run dev"

        },

6、启动项目并启动服务

然后就是开始你的表演啦^0^

上一篇下一篇

猜你喜欢

热点阅读