Vue：json-server搭建本地模拟服务器

系统管理员 2022-03-06 18:24 493阅读 0赞

前端项目需要设定好数据接口以及数据的定义，剩下的就可以各自开发，最后集成测试。

利用json-server快速搭建本地服务器模拟后台数据的请求。

**1.首先你的电脑中需要[安装nodejs][nodejs]，建议使用最新版本，并且[利用vue-cli初始化好项目][vue-cli]，然后安装[json server][]**

npm install json-server --save

2.**提供json数据文件。**  
　　在项目static目录下，新建一个 JSON 文件db.json

![20190323141921488.png][]

例如，我的项目中db.json文件内容如下：

{
      "likesList":[
        {
          "title": "针织衫",
          "url": "/sfjw/dfs",
          "hot":false
        },
        {
            "title": "蛋糕裙",
            "url": "/sfjw/dfs",
            "hot":true
        },
        {
            "title": "百褶裙",
            "url": "/sfjw/dfs",
            "hot":true
          }
      ]
    }

**3.配置json-server**

这部分很尴尬的是对于Vue2.0，官方移除了build文件下的dev-server.js,这时候改成在build/webpack.dev.conf.js里模拟数据

![20190323144010204.png][]

[参考Github的json-server文档说明][Github_json-server]

// server.js
    const jsonServer = require('json-server')
    const server = jsonServer.create()
    const router = jsonServer.router('db.json')
    const middlewares = jsonServer.defaults()
    
    server.use(middlewares)
    server.use(router)
    server.listen(3000, () => {
      console.log('JSON Server is running')
    })

不过我们的json文件在static目录下，需要修改文件目录，在build/webpack.dev.conf.js文件的结尾处添加下面的代码：

（相当于我们把JSON数据放在了http://localhost:3000地址下）

/*----------------jsonServer---------*/
    /*引入json-server*/
    const jsonServer = require('json-server')
    /*搭建一个server*/
    const apiServer = jsonServer.create()
    /*将db.json关联到server*/
    const apiRouter = jsonServer.router('static/db.json')
    const middlewares = jsonServer.defaults()
    apiServer.use(middlewares)
    apiServer.use(apiRouter)
    /*监听端口*/
    apiServer.listen(3000, () => {
      console.log('JSON Server is running')
    })

**4.访问JSON数据**  
　　配置完成后，**一定要在项目位置下的cmd里 利用npm dev run 重启项目**，然后再地址栏输入http://localhost:3000 就可以访问到数据。（这个3000可以随便设置，需要与上面监听的端口对应，只要不是8080就可以，因为设置本地服务器，不能和客户端同源！）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70][]

likesList就是我们的json数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 1][]

**5、设置浏览器代理**

浏览器为了保护用户安全，引入了同源策略，即一个服务器页面无法访问另一个协议、域名、端口不同的服务器数据。当页面需要跨服务器访问另一个服务器的数据时，即产生跨域行为。

按照上面的配置，我们的开发的是 http://localhost:8080的页面，获取的服务器接口地址是http://localhost:3000,**不同端口，所以是跨域请求，所以会导致请求http://localhost:3000下的JSON数据不成功**。Vue通过代理配置proxyTable来解决此问题因此需要在config/index.js 的dev中进行如下配置：

module.exports = {
      dev: {
    
      ...
    
    
      proxyTable: {
        '/api': {
          changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
          target: 'http://localhost:3000',// 接口的域名
          pathRewrite: {
            '^/api': ''
          }
        }
      },
    
    ...
    
    }

**6.验证**

npm run dev重启一下项目。在浏览器中输入[http://localhost:8080/api][http_localhost_8080_api]，出现如下界面就OK了。配置好了之后，怎么使用这个api接口数据呢？

（如果配置好了，还是请求不到数据，建议在重启项目之前，利用npm install 安装缺少的依赖;配置好一定要npm run dev重启项目）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 2][]

**7.使用api接口的JSON数据**

利用 使用vue-resouce发送Ajax获取数据，将请求到的数据显示在前端页面。

安装vue-resoue，参考[vue-resoue的GitHub文档][vue-resoue_GitHub]

this.$http.get('api/likesList')
        .then((res) => {
          this.likesList = res.data
        },(err) => {
          console.log("this is an error")
        })

vue页面的data里定义一下likesList

likesList:''

在页面就可以随意使用了：

<ul>
         <li v-for="like in likesList">
            <a :href="like.url">{
       { like.title }}</a>
            <span v-if="like.hot" class="hot-tag">hot</span>
         </li>
    </ul>

这样就实现了从后台服务器获取数据，并显示到前端页面的过程。

![20190323152126752.png][]

[nodejs]: http://www.runoob.com/nodejs/nodejs-install-setup.html
[vue-cli]: https://blog.csdn.net/qq_33036599/article/details/79656597
[json server]: https://www.npmjs.com/package/json-server
[20190323141921488.png]: /images/20220301/da02636ceb28481f943411583fbc0408.png
[20190323144010204.png]: /images/20220301/af50a6d92d774ea983d10becbebc4d55.png
[Github_json-server]: https://github.com/typicode/json-server
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70]: /images/20220301/ac06b1b2ffea458eaa78b0bde428180e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 1]: /images/20220301/44cd00fd35334cd6bdfd6c3ce130d9e9.png
[http_localhost_8080_api]: http://localhost:8080/api
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 2]: /images/20220301/346e83f450664d9f9203d418269868af.png
[vue-resoue_GitHub]: https://github.com/pagekit/vue-resource
[20190323152126752.png]: /images/20220301/a04ce6eee1014e4d9b4bc10047598431.png