Mock.js 是一个流行的 JavaScript 库，用于生成随机数据和模拟 HTTP 接口，常用于前端开发和测试中，以简化数据模拟过程。
Mock.js 官方网站：http://mockjs.com/
1, 官网
http://mockjs.com/
2， 示例
http://mockjs.com/examples.html#
3， 文档安装相关的依赖
#使用 axios 发送 ajax
npm install axios --save
#使用 mock.js 产生随机数据
npm install mockjs --save-dev
#使用 json5 解决json 文件，无法添加注释问题
npm install json5 --save-dev学习mockjs
新建mock文件夹，新建testMock.js
const Mock = require('mockjs') //导入mockjs以来模块
let id = Mock.mock("@id")//得到随机的id,字符串
// console.log(id);//测试
let obj = Mock.mock({
id:'@id()', //得到随机的id
username:'@cname()',//随机生成中文名字
date:'@date()',//随机生成日期
avata:"@image('200x200','red','#fff','avatar')",//生成图片，参数：size,background,foreground,text
descrtption:"@paragraph()",//描述
ip:"@ip()",//ip地址
email:"@email()"//email
})
console.log(obj);
在mockjs中使用json5的操作
通过上面 json5 模块的安装后，还需要相应的 vscode 插件
1.设置一个json5文件 src/mock/userinfo.json5
{
id: "@id()", // 得到随机的id
username: "@cname()", // 随机生成中文名字
date: "@date()", // 随机生成日期
avatar: "@image('200x200','red','#fff','avatar')",
// 生成图片,参数:size,backgroud,foreground,tool
descrtption:"@paragraph()", // 描述
ip: "@ip()", // ip地址
email: "@email()" // email
}
设置一个js文件，通过 fs \ path 查询 之前设置的 json5 文件夹
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传]
在mock文件夹下通过终端获取得到 "字符串形式的结构" src/mock/testJSON5.js
const fs = require('fs') // 文件名称
const path = require('path') // 文件路径
const json = fs.readFileSync(path.join(_dirname, './userinfo.json5'), 'utf-8')
console.log(json);
在testJSON5.js文件中引入 模块 json5，然后利用json的parse() 方法进行字符串转对象的形式输出
const fs = require('fs') // 文件名称
const path = require('path') // 文件路径
const JSON5 = require('json5');
const json = fs.readFileSync(path.join(_dirname, './userinfo.json5'), 'utf-8')
console.log(json);
var obj = JSON5.parse(json)
console.log(obj);
修改前后的对比：
在vue项目中使用mock.js通过devServer配置监听mock请求
1.在新建的vue.config.js文件中进行devServer的配置
module.exports = {
devServer: {
...,
before: require('./mock/index.js')//引入mock/index.js
},
}2.在mock文件夹下，创建 index.js 并引入代码
const fs = require('fs') //文件名称
const path = require('path')//文件路径
const Mock = require('mockjs')//导入mock 依赖
const JSON5 = require('json5');//导入json5
// 读取json文件
function getJsonFile(filePath){
// 读取指定json文件
const json = fs.readFileSync(path.join(__dirname,'./userinfo.json5'),'utf-8')
// console.log(json);
// 解析并返回
return JSON5.parse(json)
// console.log(obj);
}
// 返回一个函数
module.exports = function(app){
// 监听http请求
app.get('/user/userinfo', function(rep,res){
// 每次响应请求时读取 mock data 的json 文件
// getJsonFile 方法定义了如何读取json 文件并解析成数据对象
var json = getJsonFile('./userinfo.json5');
// 将 json 传入 Mock.mock方法中，生成的数据返回给浏览器
res.json(Mock.mock(json));
});
}3.在vue项目中使用mock.js_axios发送请求获取mock提供的数据
3.1 在项目文件夹的HelloWorld.vue文件夹中发送请求
代码设置为：
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted:{
axios.get('/user/userinfo')
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
}
}
获取到数据为：
4.在vue项目中使用mock.js_mock移除（当后台接口已写好的时候移除）
4.1 通过设置 vue cli 的环境变量进行设置
先进行环境变量的判断：
在根目录设置 .env.development 文件 设置环境变量的去向值
5.在vue项目中使用mock.js_mock-json5-devServer-axios职责
6.在jQuery项目中使用mock.js_mock拦截请求的原理
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>
</body>
</html>7.在jQuery项目中使用mock.js_使用mock
Mock.mock('/user/userinfo','get',{
id:"@id()", //得到随机的id
username:"@cname()",//随机生成中文名字
date:"@date()",//随机生成日期
avata:"@image('200x200','red','#fff','avatar')",//生成图片，参数：size,background,foreground,text
descrtption:"@paragraph()",//描述
ip:"@ip()",//ip地址
email:"@email()"//email
})6.2 发送 jQuery 的ajax 请求
<script src="./index.js"></script>
<script>
$.ajax({
url:'/user/userinfo',
dataType:'json',
success:(data) => {
console.log(data);
}
})
</script>
8.在jQuery项目中使用mock.js_移除mock
8.1 : 直接注释或删除引入的mock.js文件
8.2：在编译的mockjs文件中设置判断
测试 mockjs 数据
// 测试 mockjs 数据
router.get('/test', (req, res) => {
let data = Mock.mock({
info: '我是一个单纯的对象'
})
res.send(data)
})
{"info":"我是一个单纯的对象"}
info "我是一个单纯的对象"
数据模板定义
1, 'name|min-max': string
Mock.mock({
"string|1-10": "★"
})
说明:
"start|1-10": "★" 表示可以随机生成 1-10个的五角星配置说明：他的类型后面的赋值，后面如果赋值是一个字符串类型 那他的类型就是字符串，如果后面给他赋的是一个boolean值，他就是一个布尔值。
如果赋值的是一个数组，他就是一个数组，他取决于右侧的属性，右侧变成数字，他就变成数字，是由右侧决定左侧，就好像js是弱类型一样，由你的赋值来决定类型。
2，'name|count': string
Mock.mock({
"string|3": "★★★"
})
说明：
"string|3": "★★★" 表示可以生成3组"★★★" 就是可以生成9个五角星
{
"string": "★★★★★★★★★"
}
// 语法
// "start|1-10": "★",
"string|3": "★★★"
{"info":"我是一个单纯的对象","status":200,"list":[{},{},{},{},{},{}],"string":"★★★★★★★★★"}
{"info":"我是一个单纯的对象","status":200,"list":[{"id":1},{"id":2},{"id":3},{"id":4},{"id":5},{"id":6}],"string":"★★★★★★★★★"}
{"info":"我是一个单纯的对象","status":200,"list":[{"id":100},{"id":101},{"id":102},{"id":103},{"id":104},{"id":105}],"string":"★★★★★★★★★"}
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": false
},
{
"id": 101,
"flag": true
},
{
"id": 102,
"flag": true
},
{
"id": 103,
"flag": false
},
{
"id": 104,
"flag": true
},
{
"id": 105,
"flag": false
}
]
}
-----
'name|count': object 表示从里面随机取 count 个随机数据
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省"
}
},
{
"id": 101,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省"
}
},
{
"id": 102,
"flag": true,
"province": {
"310000": "上海市",
"330000": "浙江省"
}
},
{
"id": 103,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省"
}
},
{
"id": 104,
"flag": false,
"province": {
"310000": "上海市",
"330000": "浙江省"
}
},
{
"id": 105,
"flag": true,
"province": {
"320000": "江苏省",
"340000": "安徽省"
}
}
]
}
'name|count': object 表示从里面随机取 count 个随机数据
'name|min-max': object 表示随机从里面取 最小min个-最大max个 随机数据
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": true,
"province": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
},
{
"id": 101,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省"
}
},
{
"id": 102,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
},
{
"id": 103,
"flag": false,
"province": {
"320000": "江苏省",
"340000": "安徽省"
}
},
{
"id": 104,
"flag": false,
"province": {
"320000": "江苏省",
"340000": "安徽省"
}
},
{
"id": 105,
"flag": true,
"province": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
}
]
}比较 'name|count': object 与 'name|min-max': object
'name|count': object 表示从里面随机取 count 个随机数据
'name|min-max': object 表示随机从里面取 最小min个-最大max个 随机数据
// 写成如下对象，表示随机从里面取两个
"province|2": { // 获取两个省份的数据
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
// 写成如下对象，表示随机从里面取两个到四个省份的随机数据
"province|2-4": { // 获取两到四个省份的随机数据
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}数组 'name|1': array 与 'name|+1': array
'name|1': array 表示随机的一个就可以
'name|+1': array // 依次获取一个数据值，累计获取
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "AMD"
},
{
"id": 101,
"flag": false,
"province": {
"310000": "上海市",
"330000": "浙江省"
},
"arr": "CMD"
},
{
"id": 102,
"flag": false,
"province": {
"310000": "上海市",
"330000": "浙江省"
},
"arr": "UMD"
},
{
"id": 103,
"flag": false,
"province": {
"310000": "上海市",
"330000": "浙江省"
},
"arr": "CLS"
},
{
"id": 104,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "CLEAR"
},
{
"id": 105,
"flag": false,
"province": {
"310000": "上海市",
"330000": "浙江省"
},
"arr": "CLOSE"
}
]
}函数
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "AMD",
"foo": "Syntax Demo",
"name": "Syntax Demo"
},
{
"id": 101,
"flag": false,
"province": {
"320000": "江苏省",
"340000": "安徽省"
},
"arr": "CMD",
"foo": "Syntax Demo",
"name": "Syntax Demo"
},
{
"id": 102,
"flag": true,
"province": {
"330000": "浙江省",
"340000": "安徽省"
},
"arr": "UMD",
"foo": "Syntax Demo",
"name": "Syntax Demo"
},
{
"id": 103,
"flag": false,
"province": {
"330000": "浙江省",
"340000": "安徽省"
},
"arr": "CLS",
"foo": "Syntax Demo",
"name": "Syntax Demo"
},
{
"id": 104,
"flag": true,
"province": {
"310000": "上海市",
"330000": "浙江省"
},
"arr": "CLEAR",
"foo": "Syntax Demo",
"name": "Syntax Demo"
},
{
"id": 105,
"flag": false,
"province": {
"320000": "江苏省",
"340000": "安徽省"
},
"arr": "CLOSE",
"foo": "Syntax Demo",
"name": "Syntax Demo"
}
]
}正则 'name': regexp 代码
// 测试 mockjs 数据
router.get('/test', (req, res) => {
// 使用 mock 生成数据
let data = Mock.mock({
info: '我是一个单纯的对象',
status: 200,
// 生成list字段:数组类型 内容是6个数据 = {} 就是6个对象 +1 id会累加
"list|6": [{
"id|+1": 100, // id 自增的格式 若 id为100 你的起始值就是100
"flag|1-2": true,
// 写成如下对象，表示随机从里面取两个
"province|2": { // 获取两个省份的数据
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
"arr|+1": [ // 依次获取一个数据值，依次获取 数组加1 表示一个一个依次取值
"AMD",
"CMD",
"UMD",
"CLS",
"CLEAR",
"CLOSE"
],
// 过滤数据 或者拼接
'foo': 'Syntax Demo',
'name': function() {
return this.foo
},
// 正则
'regexp': /[a-z][A-Z][0-9]/
}],
})
res.send(data)
})返回数据
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": false,
"province": {
"330000": "浙江省",
"340000": "安徽省"
},
"arr": "AMD",
"foo": "Syntax Demo",
"regexp": "sO9",
"name": "Syntax Demo"
},
{
"id": 101,
"flag": false,
"province": {
"330000": "浙江省",
"340000": "安徽省"
},
"arr": "CMD",
"foo": "Syntax Demo",
"regexp": "sC5",
"name": "Syntax Demo"
},
{
"id": 102,
"flag": true,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "UMD",
"foo": "Syntax Demo",
"regexp": "cF5",
"name": "Syntax Demo"
},
{
"id": 103,
"flag": false,
"province": {
"310000": "上海市",
"330000": "浙江省"
},
"arr": "CLS",
"foo": "Syntax Demo",
"regexp": "bF5",
"name": "Syntax Demo"
},
{
"id": 104,
"flag": true,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "CLEAR",
"foo": "Syntax Demo",
"regexp": "mQ4",
"name": "Syntax Demo"
},
{
"id": 105,
"flag": false,
"province": {
"320000": "江苏省",
"340000": "安徽省"
},
"arr": "CLOSE",
"foo": "Syntax Demo",
"regexp": "gC6",
"name": "Syntax Demo"
}
]
}Path 路径
// 测试 mockjs 数据
router.get('/test', (req, res) => {
// 使用 mock 生成数据
let data = Mock.mock({
info: '我是一个单纯的对象',
status: 200,
// 生成list字段:数组类型 内容是6个数据 = {} 就是6个对象 +1 id会累加
"list|6": [{
"id|+1": 100, // id 自增的格式 若 id为100 你的起始值就是100
"flag|1-2": true,
// 写成如下对象，表示随机从里面取两个
"province|2": { // 获取两个省份的数据
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
"arr|+1": [ // 依次获取一个数据值，依次获取 数组加1 表示一个一个依次取值
"AMD",
"CMD",
"UMD",
"CLS",
"CLEAR",
"CLOSE"
],
// 过滤数据 或者拼接
'foo': 'Syntax Demo',
'name': function() {
return this.foo
},
// 正则
'regexp': /[a-z][A-Z][0-9]/,
// Path 路径
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@/foo1 @/nested/a/b/c"
}],
})
res.send(data)
})返回数据
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": false,
"province": {
"320000": "江苏省",
"330000": "浙江省"
},
"arr": "AMD",
"foo": "Syntax Demo",
"regexp": "wV4",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 101,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "CMD",
"foo": "Syntax Demo",
"regexp": "xQ5",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 102,
"flag": false,
"province": {
"310000": "上海市",
"340000": "安徽省"
},
"arr": "UMD",
"foo": "Syntax Demo",
"regexp": "rQ6",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 103,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "CLS",
"foo": "Syntax Demo",
"regexp": "nN2",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 104,
"flag": false,
"province": {
"330000": "浙江省",
"340000": "安徽省"
},
"arr": "CLEAR",
"foo": "Syntax Demo",
"regexp": "uR1",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 105,
"flag": false,
"province": {
"310000": "上海市",
"340000": "安徽省"
},
"arr": "CLOSE",
"foo": "Syntax Demo",
"regexp": "wX5",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
}
]
}"desc": '@cword(3)',
// 测试 mockjs 数据
router.get('/test', (req, res) => {
// 使用 mock 生成数据
let data = Mock.mock({
info: '我是一个单纯的对象',
status: 200,
// 生成list字段:数组类型 内容是6个数据 = {} 就是6个对象 +1 id会累加
"list|6": [{
"id|+1": 100, // id 自增的格式 若 id为100 你的起始值就是100
"flag|1-2": true,
// 写成如下对象，表示随机从里面取两个
"province|2": { // 获取两个省份的数据
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
"arr|+1": [ // 依次获取一个数据值，依次获取 数组加1 表示一个一个依次取值
"AMD",
"CMD",
"UMD",
"CLS",
"CLEAR",
"CLOSE"
],
"desc": '@cword(20,80)',
// 过滤数据 或者拼接
'foo': 'Syntax Demo',
'name': function() {
return this.foo
},
// 正则
'regexp': /[a-z][A-Z][0-9]/,
// Path 路径
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@/foo1 @/nested/a/b/c"
// date
}],
})
res.send(data)
})返回数据
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": true,
"province": {
"320000": "江苏省",
"340000": "安徽省"
},
"arr": "AMD",
"desc": "着整边正省过给解式备着容律共空安先心原火又有达",
"foo": "Syntax Demo",
"regexp": "xT2",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 101,
"flag": true,
"province": {
"320000": "江苏省",
"340000": "安徽省"
},
"arr": "CMD",
"desc": "状期放把素世制精子治重叫正料选感想律马还基合把给即本八系教离会队却变很龙号确关细土片结西定六不",
"foo": "Syntax Demo",
"regexp": "cJ4",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 102,
"flag": true,
"province": {
"310000": "上海市",
"340000": "安徽省"
},
"arr": "UMD",
"desc": "复集出层始指平任多任更西农太候共理该必委且思京起别七内说出才出都南",
"foo": "Syntax Demo",
"regexp": "bZ4",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 103,
"flag": false,
"province": {
"320000": "江苏省",
"330000": "浙江省"
},
"arr": "CLS",
"desc": "片断厂除使声号分学重非林感后质话总则思立义织每共象记山相大矿受史步型",
"foo": "Syntax Demo",
"regexp": "cK2",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 104,
"flag": true,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "CLEAR",
"desc": "者力转名就听党千米情状得义属关属会号花代相意段直光调多被铁使维九事走用眼存目运出子思能采且可",
"foo": "Syntax Demo",
"regexp": "oC9",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 105,
"flag": false,
"province": {
"320000": "江苏省",
"340000": "安徽省"
},
"arr": "CLOSE",
"desc": "感手总般空作在少管把市通路毛场白月又据在分相县状知深设她办按自越色般报治也信社取般",
"foo": "Syntax Demo",
"regexp": "lD4",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
}
]
}图片 "imgUrl": '@image()',
// 测试 mockjs 数据
router.get('/test', (req, res) => {
// 使用 mock 生成数据
let data = Mock.mock({
info: '我是一个单纯的对象',
status: 200,
// 生成list字段:数组类型 内容是6个数据 = {} 就是6个对象 +1 id会累加
"list|6": [{
"id|+1": 100, // id 自增的格式 若 id为100 你的起始值就是100
"flag|1-2": true,
// 写成如下对象，表示随机从里面取两个
"province|2": { // 获取两个省份的数据
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
"arr|+1": [ // 依次获取一个数据值，依次获取 数组加1 表示一个一个依次取值
"AMD",
"CMD",
"UMD",
"CLS",
"CLEAR",
"CLOSE"
],
// 随机汉字
"desc": '@cword(20,80)',
// 图片
"imgUrl": '@image()',
// "imgUrl": '@Image()',
// 过滤数据 或者拼接
'foo': 'Syntax Demo',
'name': function() {
return this.foo
},
// 正则
'regexp': /[a-z][A-Z][0-9]/,
// Path 路径
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@/foo1 @/nested/a/b/c"
// date
}],
})
res.send(data)
})返回数据
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": false,
"province": {
"320000": "江苏省",
"330000": "浙江省"
},
"arr": "AMD",
"desc": "决集事学石元原包连确民准起每林最技油事精正会",
"imgUrl": "http://dummyimage.com/234x60",
"foo": "Syntax Demo",
"regexp": "mB4",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 101,
"flag": false,
"province": {
"320000": "江苏省",
"330000": "浙江省"
},
"arr": "CMD",
"desc": "路可即程式采况提理风西期速由矿改身江以只据立很积备民技素术回约极商条区体基或团斗称金党值想工查市少改方低多报温离各通厂具把林亲地有造深争海运相市说革设",
"imgUrl": "http://dummyimage.com/160x600",
"foo": "Syntax Demo",
"regexp": "gY5",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 102,
"flag": true,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "UMD",
"desc": "列由候越效一到克于识马风别求家六整始东能选手全往家青度者六却收己状做小收克用指程心米速术规种该每往业地书查研",
"imgUrl": "http://dummyimage.com/125x125",
"foo": "Syntax Demo",
"regexp": "nL7",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 103,
"flag": false,
"province": {
"310000": "上海市",
"340000": "安徽省"
},
"arr": "CLS",
"desc": "消里系原状容前马圆叫例受比厂局具可油切样正本强角参",
"imgUrl": "http://dummyimage.com/180x150",
"foo": "Syntax Demo",
"regexp": "mO1",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 104,
"flag": false,
"province": {
"310000": "上海市",
"330000": "浙江省"
},
"arr": "CLEAR",
"desc": "条时太常还且东空建党物往酸条出际没自热装油毛道但代流产活老权精指称光心种养称率积知展低向两例且便声门无分状质里象青想者自音点规型指南派工属华华种便而志个张",
"imgUrl": "http://dummyimage.com/160x600",
"foo": "Syntax Demo",
"regexp": "gC7",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 105,
"flag": false,
"province": {
"310000": "上海市",
"320000": "江苏省"
},
"arr": "CLOSE",
"desc": "构油按包格至地又工如道形数验量用写外着工产离转而先越美几议切度须场千到",
"imgUrl": "http://dummyimage.com/180x150",
"foo": "Syntax Demo",
"regexp": "pI4",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
}
]
}
-----
{
"info": "我是一个单纯的对象",
"status": 200,
"list": [
{
"id": 100,
"flag": false,
"province": {
"330000": "浙江省",
"340000": "安徽省"
},
"arr": "AMD",
"desc": "生反题传命员龙保统形打细技建它般家成自米如极快必层活实它争按身效会习省存",
"imgUrl": "http://dummyimage.com/728x90",
"foo": "Syntax Demo",
"regexp": "fR1",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 101,
"flag": false,
"province": {
"330000": "浙江省",
"340000": "安徽省"
},
"arr": "CMD",
"desc": "越往布空期就况认没质近都知劳非百色话领计领火市观值众阶拉叫响民列大么少增整为工月开市社技北指员重适深口到江适少万本米",
"imgUrl": "http://dummyimage.com/88x31",
"foo": "Syntax Demo",
"regexp": "cU7",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 102,
"flag": true,
"province": {
"310000": "上海市",
"330000": "浙江省"
},
"arr": "UMD",
"desc": "度极此导产文科目收变只科认又基周结必适规于主交证外满进号况及照过电温制声精部什共好资育部带外同政火近月越才不真计领般派出按根层九农五度打这青小化方正",
"imgUrl": "http://dummyimage.com/336x280",
"foo": "Syntax Demo",
"regexp": "cB6",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 103,
"flag": false,
"province": {
"320000": "江苏省",
"330000": "浙江省"
},
"arr": "CLS",
"desc": "则走记论深直务自必采新子运清她入向开千按会表部权线通应原示称才设程者张至被党多向何利资受片中低采亲民应动农取石连打最新去快究严铁无风构门两众使界她及看日律",
"imgUrl": "http://dummyimage.com/720x300",
"foo": "Syntax Demo",
"regexp": "eP2",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 104,
"flag": false,
"province": {
"320000": "江苏省",
"330000": "浙江省"
},
"arr": "CLEAR",
"desc": "号共问通断两专用线建作于音集为离争铁着近起之报自住光但由达矿世查半使史之低要和达经要广调在看当保计道育保过片素引京劳志市我市平可义节基标",
"imgUrl": "http://dummyimage.com/88x31",
"foo": "Syntax Demo",
"regexp": "eK1",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
},
{
"id": 105,
"flag": false,
"province": {
"310000": "上海市",
"340000": "安徽省"
},
"arr": "CLOSE",
"desc": "美向会保石三采长子已被置必元增元清多我局带可带门斗水节便须会打单务张",
"imgUrl": "http://dummyimage.com/120x600",
"foo": "Syntax Demo",
"regexp": "vH6",
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@foo1 @nested/a/b/c",
"name": "Syntax Demo"
}
]
}
Mock.js模拟数据 实现代码如下
1, server/router.js
// 专门放所有的接口 这里只写一部分大约有二十几个接口
// 导入 express
const express = require('express')
// 使用里面的 Router() 这个方法
const router = express.Router()
// token 导入模块 jsonwebtoken 秘钥
const jwt = require('jsonwebtoken')
// 秘钥 config.jwtSecert
const config = require('./secert.js')
// 导入数据库 sqlFn('sql',[],res=>{})
const sqlFn = require('./mysql.js')
// 图片上传支持的模块 导入 multer 导入 fs
const multer = require('multer')
const fs = require('fs')
// 导入 mockjs 模块
const Mock = require('mockjs');
// 测试接口
// router.get('/', (req, res) => {
// res.send('hello')
// })
// 路由接口
// 登录接口
/**
* 语法
* 如 60，'2 day','10h','7d',expiration time 过期时间
* jwt.sign({},'秘钥','过期时间',{expiresIn: 20*1,'1 day','1h'})
*/
/**
* 登录 login
* 接收的字段: username password
* postman
*/
router.post('/login', (req, res) => {
console.log('获取前端传递的参数', username, password);
let {
username,
password
} = req.body
// 请求数据库
let sql = "select * from userinfo where username=? and password=?";
let arr = [username, password]
console.log(arr);
sqlFn(sql, arr, result => {
if (result.length > 0) {
let token = jwt.sign({
username: result[0].username,
id: result[0].id
}, config.jwtSecert, {
expiresIn: 20 * 1
})
res.send({
status: 200,
data: token
})
} else {
res.send({
status: 404,
msg: '信息错误'
})
}
})
})
// router.post("/login", (req, res) => {
// let {
// username,
// password
// } = req.body
// // 请求数据库
// let sql = "select * from userinfo where username=? and password=?";
// let arr = [username, password]
// sqlFn(sql, arr, result => {
// if (result.length > 0) {
// let token = jwt.sign({
// username: result[0].username,
// id: result[0].id
// }, config.jwtSecert, {
// expiresIn: 20 * 1
// })
// res.send({
// status: 200,
// data: token
// })
// } else {
// res.send({
// status: 404,
// msg: '信息错误'
// })
// }
// })
// })
/**
* 注册接口 /register
*/
/**
* 注册接口 /register
*/
router.post("/register", (req, res) => {
const {
username,
password
} = req.body;
const sql = "insert into userinfo values(null,?,?)";
const arr = [username, password];
sqlFn(sql, arr, (result) => {
if (result.affectedRows > 0) {
res.send({
msg: "注册成功",
status: 200
})
} else {
res.status(401).json({
errors: "用户名密码错误"
})
}
})
})
/**
* 商品列表：获取分页 {total: '',arr:[{},{},{}],pagesize:8,}
* 参数：page 页码
*/
router.get('/projectList', (req, res) => {
const page = req.query.page || 1;
const sqlLen = "select * from project where id";
sqlFn(sqlLen, null, data => {
let len = data.length;
const sql = "select * from project order by id desc limit 8 offset" + (page - 1) * 8;
sqlFn(sql, null, result => {
if (result.length > 0) {
res.send({
status: 200,
data: result,
pageSize: 8,
total: len
})
} else {
res.send({
status: 200,
msg: "暂无数据"
})
}
})
})
})
// router.get('/projectList', (req, res) => {
// // 接收页码 可以不传 默认为1
// const page = req.query.page || 1;
// // 根据 id 去查 project 表
// const sqlLen = "select * from project where id";
// sqlFn(sqlLen, null, data => {
// let len = data.length;
// const sql = "select * from project order by id desc limit 8 offset" + (page - 1) * 8;
// sqlFn(sql, null, result => {
// if (result.length > 0) {
// // 返回数据
// res.send({
// status: 200,
// data: result,
// pageSize: 8,
// total: len
// })
// } else {
// // 返回数据
// res.send({
// status: 500,
// msg: "暂无数据"
// })
// }
// })
// })
// })
/**
* 商品查询接口 search
* 参数： search
*/
router.get("/search", (req, res) => {
var search = req.query.search;
const sql = "select * from project where concat(`title`,`sellPoint`,`descs`) like '%" + search + "%'";
sqlFn(sql, null, (result) => {
if (result.length > 0) {
res.send({
status: 200,
data: result
})
} else {
res.send({
status: 500,
msg: '暂无数据'
})
}
})
})
/** 类目选择
* 接口说明：接口不同的参数 cid 返回不同的类目数据，后台接受变量 id
*/
router.get('/backend/itemCategory/selectItemCategoryByParentId', (req, res) => {
const id = req.query.id || 1;
const sql = 'select * from category where id=?'
var arr = [id];
sqlFn(sql, arr, result => {
if (result.length > 0) {
res.send({
status: 200,
result
// data: result
})
} else {
res.send({
status: 500,
msg: '暂无数据'
})
}
})
})
/**
* 类目结构数据获取
*/
router.get('/category/data', (req, res) => {
var cid = req.query.cid;
var sql = "select * from params where itemCatId=?";
sqlFn(sql, [cid], result => {
if (result.length > 0) {
res.send({
status: 200,
result
// data: result
})
} else {
res.send({
status: 500,
msg: '暂无数据'
})
}
})
})
/**
* 上传图片 post 请求 upload
* 说明：
* 1, 后台安装 multer 图片模块 同时引入 fs 文件模块
* 2，router.js 入口文件导入 模块
* const fs = require('fs') //fs是属于nodejs，只需引入即可
* const multer=require('multer') // multer是需要安装的
* 3, 上传图片 可以跨域 需要配置 cors index.js 导入文件，并配置 cors跨域
* 4, 在服务端 server 根目录下创建 upload 文件夹，专门装图片的文件
*/
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, './upload/')
},
filename: function(req, file, cb) {
cb(null, Date.now() + "-" + file.originalname)
}
})
var createFolder = function(folder) {
try {
fs.accessSync(folder);
} catch (e) {
fs.mkdirSync(folder);
}
}
var uploadFolder = './upload';
createFolder(uploadFolder);
var upload = multer({
storage: storage
});
router.post('/upload', upload.single('file'), function(req, res, next) {
var file = req.file;
console.log('文件类型,%s', file.mimetype);
console.log('原始文件名,%s', file.originalname);
console.log('文件大小,%s', file.size);
console.log('文件保存路径,%s', file.path);
res.json({
res_code: '0',
name: file.originalname,
url: file.path
});
});
/**
* 商品添加接口
* 参数： title cid category sellPoint price num descs paramsInfo image
*/
router.get('/backend/item/insertTbItem', (req, res) => {
// 获取参数
var title = req.query.title || "";
var cid = req.query.cid || "";
var category = req.query.category || "";
var sellPoint = req.query.sellPoint || "";
var price = req.query.price || "";
var num = req.query.num || "";
var desc = req.query.descs || "";
var paramsInfo = req.query.paramsInfo || "";
var image = req.query.image || "";
const sql = "insert into project values (null,?,?,?,?,?,?,?,'',1,'','',?,?)"
var arr = [title, image, sellPoint, price, cid, category, num, desc, paramsInfo];
sqlFn(sql, arr, result => {
if (result.affectedRows > 0) {
res.send({
status: 200,
msg: "添加成功"
})
} else {
res.send({
status: 500,
msg: "添加失败"
})
}
})
})
/**
* 商品删除 接口 id
*/
router.get("/backend/item/deleteItemById", (req, res) => {
// 后端接收前端传递的数据
var id = req.query.id;
const sql = "delete from project where id=?"
const arr = [id];
sqlFn(sql, arr, result => {
if (result.affectedRows > 0) {
res.send({
status: 200,
msg: "删除成功"
})
} else {
res.send({
status: 500,
msg: '删除失败'
})
}
})
})
/**
* 批量删除: batchDelete idArr id 标识
* sql = "delete from A where in in (1,2,3)"
*/
router.get("/batchDelete", (req, res) => {
let arr = req.query.idArr; // []数组格式 需要传递数据是 离散的数字格式
// const sql = 'delete from project where id in (?)';
let sql = '';
function fun(arr) { // sql=`delete from project where id in (101,102,103`;
sql = `delete from project where id in (`
for (let i = 0; i < arr.length; i++) {
sql += arr[i] + ',' // 101,102,
}
sql = sql.slice(0, -1)
sql = sql + ')'
// console.log(sql);
}
fun(arr)
sqlFn(sql, null, result => {
if (result.affectedRows > 0) {
res.send({
status: 200,
msg: "删除成功"
})
} else {
res.send({
status: 500,
msg: "删除失败"
})
}
})
/**
* 修改商品
*/
router.get("/backend/item/updateTbItem", (req, res) => {
var id = req.query.id;
var title = req.query.title || "";
var sellPoint = req.query.sellPoint || "";
var price = req.query.price || "";
var cid = req.query.cid || "";
var category = req.query.category || "";
var num = req.query.num || "";
var desc = req.query.descs || "";
var paramsInfo = req.query.paramsInfo || "";
var image = req.query.image || "";
var sql =
"update project set title=?,sellPoint=?,price=?,cid=?,category=?,num=?,descs=?,paramsInfo=?,image=?"
var arr = [title, sellPoint, price, cid, category, num, descs, paramsInfo, image, id];
sqlFn(sql, arr, result => {
if (result.affectedRows > 0) {
res.send({
status: 200,
msg: "修改成功"
})
} else {
res.send({
status: 500,
msg: "修改失败"
})
}
})
})
})
/**
* 统计数据--销售信息
*/
router.get('/statistical', (req, res) => {
res.send(Mock.mock({
success: true,
status: 200,
"list|4": [{
'id|+1': 100,
"title|+1": ['总销售额', '访问量', '支付总量', '收藏量'],
"current|0-2000": 100,
"total|100-999999": 200
}]
}))
})
/**
* 统计 半年 月销量对比数据
* 月度销售额
*/
router.get('/sellTotal', (req, res) => {
res.send(Mock.mock({
success: true,
status: 200,
info: {
(property)
'id|+1': numer 'id|+1': 100,
date: function() {
var category = [];
var dottedBase = +new Date();
for (var i = 30; i > 0; i--) {
var date = new Date((dottedBase -= 1000 * 3600 * 24 * 30));
category.push([date.getFullYear(), date.getMonth() + 1].join());
}
return category.slice(0, 6);
},
"xResult|3": [{
'xName|+1': ["家具", "手机", "家电"],
"data|6": [{
'num|100-1000': 10
}]
}, ],
}
}))
})
// 测试 mockjs 数据
router.get('/test', (req, res) => {
// 使用 mock 生成数据
let data = Mock.mock({
info: '我是一个单纯的对象',
status: 200,
// 生成list字段:数组类型 内容是6个数据 = {} 就是6个对象 +1 id会累加
"list|6": [{
"id|+1": 100, // id 自增的格式 若 id为100 你的起始值就是100
"flag|1-2": true,
// 写成如下对象，表示随机从里面取两个
"province|2": { // 获取两个省份的数据
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
"arr|+1": [ // 依次获取一个数据值，依次获取 数组加1 表示一个一个依次取值
"AMD",
"CMD",
"UMD",
"CLS",
"CLEAR",
"CLOSE"
],
// 随机汉字
"desc": '@cword(20,80)',
// 图片
// "imgUrl": '@image()',
"imgUrl": '@Image()',
// 过滤数据 或者拼接
'foo': 'Syntax Demo',
'name': function() {
return this.foo
},
// 正则
'regexp': /[a-z][A-Z][0-9]/,
// Path 路径
"foo1": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@/foo1 @/nested/a/b/c"
// date
}],
})
res.send(data)
})
// =====================
/**
* 内容分类管理 内容查询
*/
router.get("/content/selectTbContentAllByCategoryId", (req, res) => {
const pid = req.query.pid;
const sql = "select * from contentinfo where pid=?"
sqlFn(sql, [pid], result => {
if (result.length > 0) {
res.send({
status: 200,
result
})
} else {
res.send({
status: 500,
msg: "暂无数据"
})
}
})
})
module.exports = router