新版vue-cli如何使用json-server来mork

新版vue-cli如何使用json-server来mork

原创 2018年03月06日 11:28:32

• 标签：
• vue /
• 前端 /
• webpack /
• vue-cli

• 185

新版的vue-cli由于把dev-server。js合并到webpack.dev.conf.js中，所以在配置json-server的时候文档中的方法就不适应了

第一步：安装：命令行中输入 cnpm install json-server --save

第二步：找到build/webpack.dev.conf.js并在const portfinder = require('portfinder')这一行下面添加如下配置

const express = require('express') //node.js的内置框架
const app = express()//请求server
var appData = require('../static/json-moni/jiekou1.json')//加载本地数据文件

var suibian= appData.suibian//获取对应的本地数据并赋值给变量

var suibian2= appData.suibian2//获取对应的本地数据并赋值给变量

var apiRoutes = express.Router()//express框架的router函数
app.use('/api', apiRoutes)//通过路由请求数据

第三步：设置get请求：在build/webpack.dev.conf.js下找到devServer并在watchOptions: {
      poll: config.dev.poll,
    },后面添加如下配置：

before(app) {
      app.get('api/suibian', (req, res) => {
        res.json({
          errno: 0,
          data: suibian
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用

}),

app.get('api/suibian2', (req, res) => {
        res.json({
          errno: 0,
          data: suibian2
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用

})

}

基本配置就如上所述了，下面就是自己写个json文件和调用接口测试了

一：json文件如下：

{
  "suibian": {
    "supports": [
      {
        "title": "name1",
        "id": "0"
      },
      {
        "title": "name2",
        "id": "1"
      },
      {
        "title": "name3",
        "id": "2"
      }
    ]
  }
}

备注：可以在http://localhost:8080/api/suibian来查看自己写的接口json数据

二：templat中随便写模板，如：

<ul>
      <li v-for="item in itemlis">{{ item.title }}</li>
    </ul>

三：调用可以用vue-resource，书写格式如下：

export default {
  name: 'HelloWorld',
  created:function(){
    this.$http.get('api/suibian').then((res)=>{
        console.log(res)
        this.itemlis=res.data.data.supports  //注意使用箭头函数才可用this不然需要在函数外先定义变量把this赋值给变量
        console.log(this.itemlis)
    },function(err){
        console.log(err)
    })
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      itemlis:[],
    }
  }
}