广东东莞网站建设,最新的网站建设软件有哪些,如何规划建设一个企业网站,手机移动端网站做多大有时候#xff0c;在公司里一些项目开发前#xff0c;后端接口没那么快给到前端时#xff0c;前端可以先跟后端约定好各个接口的请求路径、请求参数以及返回数据格式#xff0c;先整理出一份接口文档#xff0c;这样前端可以通过mockjs参考接口文档#xff0c;自己先模拟…有时候在公司里一些项目开发前后端接口没那么快给到前端时前端可以先跟后端约定好各个接口的请求路径、请求参数以及返回数据格式先整理出一份接口文档这样前端可以通过mockjs参考接口文档自己先模拟数据写业务代码等待后端准备好再用后端真实的接口数据替换自己写模拟数据实现前后端同时开发。 一、在Vue中的使用
1、安装mock.js
npm i mockjs -D
2、新建mock文件夹
在项目的根目录下新建mock文件夹打包记得删除或者使用码云托管代码用.gitignore忽略掉在文件夹下新建index.js文件
// mock/index.js// 引入mockjs
import Mock from mockjs; // 拦截请求模拟接口url和数据
Mock.mock(/api/list, get, {message: success,code: 200,data: {name: xxx}
})//带参数
/*
post参数option前端请求的数据option.url请求的地址
option.type 请求的方式
option.body请求的字符参数需要JSON.parse转对象
*/
Mock.mock(/api/list2/, post, function (option) {return {code: 0,msg: 参数成功,data: {title: 信息标题,content: 内容,...JSON.parse(option.body),},};
});
3、在开发环境下引入mock
在配置文件 .env.development 里配置mock开启的标示
// .env.developmentNODE_ENV development
VUE_APP_MOCK true
在main.js中判断是开发环境且有开启mock的标示时引入mock
// main.js// 判断配置文件里mock是否要开启
if(process.env.NODE_ENV development process.env.VUE_APP_MOCK true){import ./mock/index.js
}
4、在具体业务逻辑里使用
// 引入axios
import axios from axios// /接口地址与拦截地址要一致
axios.get(/api/list/).then(res {console.log(res, res)
})//带参数
axios.post(/api/list2/, { id: 111, key: xxx }).then(res {console.log(带参数, res);
}); 二、在react中使用
1、安装mock.js
npm i mockjs -D
2、新建mock文件夹
在项目的根目录下新建mock文件夹打包记得删除或者使用码云托管代码用.gitignore忽略掉在文件夹下新建index.js文件
// mock/index.js// 引入mockjs
import Mock from mockjs; // 拦截请求模拟接口url和数据
Mock.mock(/api/list, get, {message: success,code: 200,data: {name: xxx}
})//带参数
/*
post参数option前端请求的数据option.url请求的地址
option.type 请求的方式
option.body请求的字符参数需要JSON.parse转对象
*/
Mock.mock(/api/list2/, post, function (option) {return {code: 0,msg: 参数成功,data: {title: 信息标题,content: 内容,...JSON.parse(option.body),},};
});
3、在开发环境下引入mock
在配置文件 .env.development 里配置mock开启的标示
// .env.developmentNODE_ENV development
REACT_APP_MOCK true
判断是开发环境且有开启mock的标示时引入mock
if (process.env.NODE_ENV development process.env.REACT_APP_MOCK true) {// import ./mock/index.jsrequire(./mock/index.js)
}4、在具体业务逻辑里使用
// 引入axios
import axios from axios// /接口地址与拦截地址要一致
axios.get(/api/list/).then(res {console.log(res, res)
})//带参数
axios.post(/api/list2/, { id: 111, key: xxx }).then(res {console.log(带参数, res);
}); 三、使用webpack来配置mockjs
除了上面的常规引入mockjs我们也可以使用以webpack的形式来配置mockjs。
1、vue.config.js中引用 注意webpack新版本中间件发生了变化before与after已经不能使用代替的onBeforeSetupMiddleware 与 onAfterSetupMiddleware 也要废弃合二为一成为了setupMiddlewaressetupMiddlewares 代替了 before与after所以mockjs在配置时也发生了变化。 1.1 新版本写法
// mock/useInfo.json{id: id(),username: cname(),date: date(),avatar: image(200x200,red,#fff,avatar),description: paragraph(),ip: ip(),email: email()
}mock/index.js部分主要就是devServer.app.get变成了middlewares.unshift
// mock/index.jsconst fs require(fs)
const path require(path)
const Mock require(mockjs)/*** param {string} filePath*/
function getJsonFile(filePath) {// 读取指定的json文件let json fs.readFileSync(path.resolve(__dirname, filePath), utf-8)// 解析并返回return json
}//重点部分middlewares就是新增加的原本只有devServer。
module.exports function (middlewares, devServer) {// 判断要不要开启mockif(process.env.MOCK true){//middlewares.unshift就是之前的beforemiddlewares.push是aftermiddlewares.unshift({name: mock,// path 是可选的path: /api/test,middleware: (req, res) {let json getJsonFile(./mock/userinfo.json) //mock数据的样式自己新建。res.send(Mock.mock(json))},})}//return别忘了return middlewares
}vue.config.js部分变成了setupMiddlewares
// vue.config.jsconst { defineConfig } require(vue/cli-service)module.exports defineConfig({transpileDependencies: true,devServer: {setupMiddlewares: require(./mock/index.js),},
})1.2 老版本写法
onBeforeSetupMiddleware方式的配置
// mock/index.jsconst fs require(fs)
const path require(path)
const Mock require(mockjs)/*** param {string} filePath*/
function getJsonFile(filePath) {let json fs.readFileSync(path.resolve(__dirname, filePath), utf-8)return json
}module.exports function (devServer) {if(process.env.MOCK true){devServer.app.get(/api/test, (req, res) {let json getJsonFile(./mock/userinfo.json)res.send(Mock.mock(json))}) }
}目前的新版本还是可以用这个的但是文档显示该配置项已弃用以支持 devServer.setupMiddlewares
// vue.config.jsconst { defineConfig } require(vue/cli-service)module.exports defineConfig({transpileDependencies: true,onBeforeSetupMiddleware: {setupMiddlewares: require(./mock/index.js),},
})
before方式的配置
// mock/index.jsconst Mock require(mockjs)
const fs require(fs)
const path require(path)// 用于被index.js进行调用
function getJsonFile (filePath) {// 读取指定的json文件const json fs.readFileSync(path.resolve(__dirname, filePath), utf-8)// 解析并返回console.log(json)return JSON.parse(json)
}module.exports function (app) {if(process.env.MOCK true){// get请求app.get(/api/test1, (rep,res) {let json getJsonFile(./mock/userInfo.json)res.json(Mock.mock(json))})// post请求app.post(/api/test2, (rep,res) {let json getJsonFile(./mock/userInfo.json)res.json(Mock.mock(json))})}}
// vue.config.jsconst { defineConfig } require(vue/cli-service)module.exports defineConfig({devServer: {before: require(./mock/index.js),},
})
配置全部完成之后就可以在需要的组建中使用
import axios from axiosaxios.get(/api/test).then((res){console.log(虚拟数据, res);
}) 2、vite.config.ts中引用
有些项目是用vite这个前端构建工具构建的话配置mockjs会有些区别。
安装 mockjs 和 vite-plugin-mock
npm i mockjs -D
npm i vite-plugin-mock -D
在vite.config.ts进行配置
// vite.config.tsimport { defineConfig } from vite
import vue from vitejs/plugin-vue
// 引入viteMockServe
import { viteMockServe } from vite-plugin-mockexport default defineConfig({plugins: [vue(),viteMockServe({mockPath: ./mock/}),]
})
vite-plugin-mock 中的配置内容的含义
supportTs?: boolean; --是否读取ts文件模块设置为true时不能读取js文件logger?:boolean; --是否在控制台显示请求日志mockPath?: string; --设置模拟数据的存储文件夹如果不是index.js需要写明完整路径ignore?: RegExp | ((fileName: string) boolean);--读取文件时忽略指定格式的文件watchFiles?: boolean; --是否监视mockPath文件夹内文件的修改localEnabled?: boolean; --设置是否启用本地 xxx.ts 文件不要在生产环境中打开它.设置为 false 将禁用 mock 功能ignoreFiles?: string[]; --读取文件时忽略的文件configPath?: string; --设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时将首先读取并使用该文件。 配置文件返回一个数组prodEnabled?: boolean; --设置打包是否启用 mock 功能injectFile?: string; --如果生产环境开启了 mock 功能,即prodEnabledtrue.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内则不管有没有开启,最终的打包都会包含mock.jsinjectCode?: string; --injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}
可以根据自己的项目需求将以 VITE_XX 开头的变量定义在根目录中的 .env.development [ production | staging ] 文件中,分别对应 开发 [ 生产测试 ] 环境
// .env.development# 前缀地址
VITE_BASE_URL /dev-api# 请求路径
VITE_API_URL http://192.168.x.x:8080# MOCK开启的标示
VITE_BASE_MOCK true
mock文件夹下的文件
// mock/index.jsexport * as userInfo from ./userInfo
// mock/userInfo.jsexport default [{url: /api/test,method: get,response: () {return {code: 0,message: ok,data: {rows|10: [{id: guid,name: cname,age|20-30: 23,job|1: [前端工程师, 后端工程师, UI工程师, 需求工程师]}]},}}}
]
配置全部完成之后就可以在需要的组建中使用
import axios from axiosaxios.get(/api/test).then((res){console.log(虚拟数据, res);
})
在生产环境使用
修改mock/index.js
// mock/index.jsimport { createProdMockServer } from vite-plugin-mock/es/createProdMockServerexport function setupProdMockServer() {createProdMockServer([{url: /api/getUsers,method: get,response: () {return {code: 0,message: ok,data: {rows|10: [{id: guid,name: cname,age|20-30: 23,job|1: [前端工程师, 后端工程师, UI工程师, 需求工程师]}]},}}}])
}修改main.js
// main.jsimport { createApp } from vue
import App from ./App.vue// 新增
import { setupProdMockServer } from ../mock/;if (process.env.NODE_ENV production) {setupProdMockServer();
}createApp(App).mount(#app)修改vite.config.ts
// vite.config.tsimport { defineConfig } from vite
// 新增
import { resolve } from path
import vue from vitejs/plugin-vue
// 引入viteMockServe
import { viteMockServe } from vite-plugin-mockexport default defineConfig({plugins: [vue(),viteMockServe({// defaultsupportTs: true,logger: false,mockPath: ./mock/,// 新增localEnabled: false, // 开发环境prodEnabled: true, // 生产环境设为true也可以根据官方文档格式injectCode: import { setupProdMockServer } from ./mock;setupProdMockServer(); ,watchFiles: true, // 监听文件内容变更injectFile: resolve(src/main.js), // 在main.ts注册后需要在此处注入否则可能报找不到setupProdMockServer的错误}),]
}) 注意
每次修改mock文件夹下的文件都必须重新启动服务才能生效。 参考资料
开始 | Vite 官方中文文档
Mock.js
起步 | Axios 中文文档 | Axios 中文网
