vue 使用express 模拟后台数据

vue实现ajax获取后台数据是通过vue-resource，首先通过npm安装vue-resource，进入到项目目录里

npm install vue-resource --save

安装完成以后，将vue-resource引入到src目录下的main.js文件中 src/main.js

import VueResource from 'vue-resource' // 导入vue-resource

使用VueResource

Vue.use(VueResource);

具体如下图：

上面步骤是用vue-resource来进行数据请求的大体流程，作为前端，我们只关注前端的开发，所以使用mock data来模拟后台穿传数据，主要有两种方式：

1）json-server模拟数据；此方法只能发送get请求不能发送post请求

参考另一篇博客https://blog.csdn.net/lxkll/article/details/84284429

2）express启动数据服务；get请求和post请求都可以发送

本文主要说明使用express方式模拟后台数据，是在vue2.0的vue-cli中模拟数据

首先进入项目目录，安装express

npm install express --save

安装完成后，重新启动项目

npm run dev

找到build文件夹下的webpack.dev.config.js：

在头部添加： const express = require('express')

const express = require('express')

//创建node的express框架实例
const app = express() 
// 引用json地址
var appData = require('../db.json')
// json某一个key 可以增加多个key 
var seller = appData.seller;

var apiRoutes = express.Router()
app.use('/api', apiRoutes)

本项目里的json文件在上一级目录中，名为db.json。其中seller是db.json中的key名称。结构如下图所示

本文的db.json文件里的key

完成后仍在webpack.dev.config.js文件中找到devServer

在devServer的{}内添加如下代码，因为我的db.json中有三个key，key值分别是seller、goods、ratings所以是三项，需要根据实际修改名称：

// 在dev-server中加入 before函数
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          // 这里是你的json内容
          errno: 0,
          data: seller
        })
      }),
      app.get('/api/goods', (req, res) => {
          res.json({
            // 这里是你的json内容
            errno: 0,
            data: goods
          })
      }),
      app.get('/api/ratings', (req, res) => {
          res.json({
            // 这里是你的json内容
            errno: 0,
            data: ratings
          })
      })
    }

至此，就配置完成了，重启项目即可

npm run dev

通过http://localhost:8080/api/seller就可以访问到db.json中的数据了

vue 使用express 模拟后台数据

猜你喜欢