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 使用express 模拟后台数据_第1张图片

上面步骤是用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')

vue 使用express 模拟后台数据_第2张图片

//创建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名称。结构如下图所示

vue 使用express 模拟后台数据_第3张图片

本文的db.json文件里的key

vue 使用express 模拟后台数据_第4张图片

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

vue 使用express 模拟后台数据_第5张图片

在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 模拟后台数据_第6张图片

你可能感兴趣的:(Vue)