vue实现app问题总结（一）vue-cli本地开发数据Mock

迈不过友情╰ 2023-10-11 14:17 33阅读 0赞

方法一采用node的express搭建服务

一.旧版本存在dev-server.js的配置方法  
build下的dev-server.js中配置  
在const app = express()后，const compiler = webpack(webpackConfig)前配置即可，

var appData = require('../data.json')  
var seller = appData.seller  
var goods = appData.goods  
var ratings = appData.ratings  
var foods = appData.foods  
var pice = appData.pice  
var apiRoutes = express.Router()

apiRoutes.post('/foods', function (req, res) \{  
res.json(\{  
errno: 0,  
data: foods  
\});  
\})

apiRoutes.get('/seller', function (req, res) \{  
res.json(\{  
errno: 0,  
data: seller  
\});  
\})

apiRoutes.get('/goods', function (req, res) \{  
res.json(\{  
errno: 0,  
data: goods  
\})  
\})

apiRoutes.get('/ratings', function (req, res) \{  
res.json(\{  
errno: 0,  
data: ratings  
\});  
\})

apiRoutes.get('/pice', function (req, res) \{  
res.json(\{  
errno: 0,  
data: pice  
\});  
\})  
app.use('/api',apiRoutes)  
  
二.新版vue-webpack-template已经删除dev-server.js，改用webpack.dev.conf.js代替，所以 配置本地访问在webpack.dev.conf.js里配置  
webpack.dev.conf.js

//首先  
// nodejs开发框架express，用来简化操作  
const express = require('express')  
// 创建node.js的express开发框架的实例  
const app = express()  
// 引用的json地址  
var appData = require('../data.json')  
// json某一个key  
var seller = appData.seller;  
var goods = appData.goods;  
var ratings = appData.ratings;

var apiRoutes = express.Router()  
app.use('/api', apiRoutes)  
  
第二步，当前js下找到devServer,添加以下代码

get请求配置  
在 const portfinder = require(‘portfinder’)后添加

// 在devServer选项中添加以下内容  
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即可。

post请求配置。  
如果要配置post请求，需要在该文件夹配置如下:

\#webpack.dev.conf.js  
apiRoutes.post('/foods', function (req, res) \{ //注意这里改为post就可以了  
res.json(\{  
error: 0,  
data: foods  
\});  
\})  
// 在组件里面  
\#...vue  
created () \{  
this.$http.post('http://localhost:8080/api/foods').then((res) => \{  
console.log(res)  
\})  
\}  
  
下面的方法原文地址http://www.jianshu.com/p/ccd53488a61b  
方法二 使用 JSON Server 搭建 Mock 服务器  
JSON Server是一个创建伪RESTful服务器的工具，具体使用方法可以看官方文档，这里直接讲在vue-cli 中的用法。  
配置流程

全局安装 $ npm install -g json-server  
项目目录下创建 mock 文件夹  
mock 文件夹下添加 db.json 文件，内容如下  
  
\{  
"posts": \[  
\{ "id": 1, "title": "json-server", "author": "typicode" \}  
\],  
"comments": \[  
\{ "id": 1, "body": "some comment", "postId": 1 \}  
\],  
"profile": \{ "name": "typicode" \}  
\}  
  
package.json 添加命令  
  
"mock": "json-server --watch mock/db.json",  
"mockdev": "npm run mock & npm run dev"  
  
启动 mock 服务器

$ npm run mock 命令 运行 mock server  
访问 http://localhost:3000/  
发现 db.json 下第一级 json 对象被解析成为可访问路径

GET请求具体路径 如：http://localhost:3000/posts 可获取数据  
faker.js 批量生成伪数据

如果需要大量的伪数据，手动构造比较费时费力，可以使用 faker.js 批量生成。faker.js 的具体使用参见官方文档，这里做一个示例。

$ cnpm install faker -G 全局安装 faker  
mock 目录下创建 faker-data.js，内容如下  
  
module.exports = function () \{  
var faker = require("faker");  
faker.locale = "zh\_CN";  
var \_ = require("lodash");  
return \{  
people: \_.times(100, function (n) \{  
return \{  
id: n,  
name: faker.name.findName(),  
avatar: faker.internet.avatar()  
\}  
\}),  
address: \_.times(100, function (n) \{  
return \{  
id: faker.random.uuid(),  
city: faker.address.city(),  
county: faker.address.county()  
\}  
\})  
\}  
\}  
  
  
$ json-server mock/faker-data.js 在 json server 中使用 faker  
请求 http://localhost:3000/address 可以获取到随机生成的100组伪数据  
1  
2  
添加中间件

json server 使用 RESTful 架构，GET请求可以获取数据，POST 请求则是添加数据。  
在开发过程中，有时候想直接模拟获取POST请求返回结果，可以添加 express 中间件 将POST请求转为GET请求。

mock 目录下创建 post-to-get.js，内容如下  
1  
module.exports = function (req, res, next) \{  
req.method = "GET";  
next();  
\}  
  
启动命令添加运行中间件 --m mock/post-to-get.js  
  
"mock": "json-server --watch mock/db.json --m mock/post-to-get.js",  
  
重新启动服务，POST请求就被转换为GET请求了

其他需求也可以通过添加不同的中间件实现。  
代理设置

在 config/index.js 的 proxyTable 将请求映射到 http://localhost:3000

代码中添加请求以测试效果

$ npm run mockdev 启动带mock 数据的本地服务