使用 history 模式时需要对前端代码及服务器进行相关配置，并且根据部署位置（在域名的根路径下或子路径下），配置也略有差异。
-以标准的 Vue CLI 项目与 Nignx 服务器为例：
-前端配置
-// router.js
-const router = new VueRouter({
- mode: "history"
- routes
-});
-// vue.config.js
-module.exports = {
- publicPath: "/"
-};
-服务器配置
-# nginx.conf
-location / {
- # root <your_web_files_path>;
- index index.html;
- try_files $uri $uri/ /index.html;
-}
-前端配置
-// router.js
-const router = new VueRouter({
- mode: "history",
- base: process.env.BASE_URL,
- routes
-});
-// vue.config.js
-module.exports = {
- publicPath: process.env.NODE_ENV === "production" ? "/context/" : "/",
-};
-其中 process.env.BASE_URL 等价于 publicPath，即 context 的值。
-服务器配置
-# nginx.conf
-location /context/ {
- # alias <your_web_files_path>;
- index index.html;
- try_files $uri $uri/ /context/index.html;
-}
-注意，PWA 的输出文件 index.html，与 Nginx config 中的 index.html 相对应，如输出文件名自定义，Nginx config 也需要与其保持一致。
Mock.js 能做什么？
-Mock.js 有哪些特点？
-基于以上特点，Mock.js 被广泛应用于前端开发中，以保证开发效率与进度。
-Mock.js 允许多种安装方式：
-浏览器引入
-<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
使用 npm 或 yarn 安装
-$ npm install mockjs --save$ yarn add mockjs以 Vue CLI 生成的项目为例，安装 Axios 发送 Ajax 请求。
-引用 Mock.js
-安装完成 Mock.js 后，在项目 src 目录下新建 mock 目录及 index.js 文件，引用 Mock.js：
-// in src/mock/index.js
-import Mock from "mockjs";
-将 mock 配置关联到项目中：
-// in src/main.js
-import "./mock";
-// 将 Axios 挂载到 Vue 原型中，以便在单文件组件中以 this.$http 使用
-import axios from "axios";
-Vue.prototype.$http = axios;
-使用 Mock.mock()
-Mock.mock( rurl?, rtype?, template|function( options ) )
rurlrtypetemplatefunction(options)options假设业务场景是获取一段资讯列表，网络请求 URL 为 /api/news，类型为 get，拦截函数为：
-// in src/mock/index.js
-import Mock from "mockjs";
-
-Mock.mock("/api/news", "get", {
- code: "OK",
- results: [
- {
- id: "1",
- title: "前端组件设计原则",
- img:
- "https://user-gold-cdn.xitu.io/2019/1/24/16880541998cbc09?imageView2/0/w/1280/h/960/format/webp/ignore-error/1",
- publishedAt: "2018-11-02",
- author: "Andrew Dinihan",
- url: "https://juejin.im/post/5c49cff56fb9a049bd42a90f"
- },
- {
- id: "2",
- title: "正则全攻略使用手册",
- img: "https://segmentfault.com/img/bVbnRSc?w=650&h=255",
- publishedAt: "2019-01-28",
- author: "Croc_wend",
- url: "https://segmentfault.com/a/1190000018042746"
- }
- ]
-});
-网络请求方法：
-// in any.vue
-async getNews() {
- const { data: res } = await this.$http({ url: "/api/news" });
- console.log("get", res);
-}
-控制台中可见，响应数据为编写的测试数据，至此 Mock.js 拦截了 Ajax 请求。
-Mock.js 提供了多种数据类型：
-使用 @ 符号与以上任一数据类型的生成函数名相结合，即可组成占位符，在 Mock.mock() 的 template 中替换固定字符串，生成随机字符串。
速查以上数据类型，改写拦截函数：
-// in src/mock/index.js
-import Mock from "mockjs";
-
-Mock.mock("/api/news", "get", {
- code: "OK",
- results: [
- {
- id: "@guid", // 生成 UUID
- title: "@ctitle(3,5)", // 生成 3-5 字的中文标题
- img: "@dataImage('200x100')", // 生成 200px*100px 的图片 Base64
- publishedAt: "@date('yyyy-MM-dd')", // 生成 yyyy-MM-dd 格式的日期
- author: "@name(true)", // 生成英文姓名
- url: "@url('http')" // 生成 http 协议的 URL
- }
- ]
-});
-Mock.js 的语法规范包括两部分：
-上一节中使用的 @guid 等占位符属于 Mock.js 语法规范的数据占位符定义规范； 数据模板定义规范则定义 Mock.mock() template 内属性的最终值。
属性由属性名、生成规则、属性值组成：
-Mock.mock({
- // 属性名|生成规则:属性值
- 'name|rule': value
-});
-其中：
-| 分隔'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': value'name|count.dcount': value'name|+step': value'name|min-max': string 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max'name|count': string 通过重复 string 生成一个字符串，重复次数等于 count'name|+1': number 属性值自动加 1，初始值为 number'name|min-max': number 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型'name|min-max.dmin-dmax': number 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位'name|1': boolean 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)'name|count': object 从属性值 object 中随机选取 count 个属性'name|min-max': object从属性值 object 中随机选取 min 到 max 个属性'name|1': array 从属性值 array 中随机选取 1 个元素，作为最终值'name|+1': array 从属性值 array 中顺序选取 1 个元素，作为最终值'name|min-max': array 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max'name|count': array 通过重复属性值 array 生成一个新数组，重复次数为 countfunction，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象回到项目中。业务场景是获取一段资讯列表，但上一节生成的随机数据只有 1 项，此时使用数据模板定义规范的属性生成规则，将 1 项目变为多项：
-// in src/mock/index.js
-import Mock from "mockjs";
-
-Mock.mock("/api/news", "get", {
- code: "OK",
- // 数组内，随机生产 5-10 个对象
- "results|5-10": [
- {
- id: "@guid", // 生成 UUID
- title: "@ctitle(3,5)", // 生成 3-5 字的中文标题
- img: "@dataImage('200x100')", // 生成 200px*100px 的图片 Base64
- publishedAt: "@date('yyyy-MM-dd')", // 生成 yyyy-MM-dd 格式的日期
- author: "@name(true)", // 生成英文姓名
- url: "@url('http')" // 生成 http 协议的 URL
- }
- ]
-});
-除了拦截 GET 请求，Mock.js 同样支持 POST 、DELETE、PUT 请求：
拦截 POST 请求
-// in src/mock/index.js
-Mock.mock("/api/news", "post", opts => {
- let result = JSON.parse(opts.body);
- result.id = Mock.Random.guid();
- return {
- code: "OK",
- result
- };
-});
-// in any.vue
-async onCreate() {
- const { data: res } = await this.$http({
- url: `/api/news`,
- method: "post",
- data: {
- title: "前端组件设计原则",
- img:
- "https://user-gold-cdn.xitu.io/2019/1/24/16880541998cbc09?imageView2/0/w/1280/h/960/format/webp/ignore-error/1",
- publishedAt: "2018-11-02",
- author: "Andrew Dinihan",
- url: "https://juejin.im/post/5c49cff56fb9a049bd42a90f"
- }
- });
- console.log("post", res);
-},
-拦截 DELETE 请求
-通常 Delete 请求会将 ID 作为 Path 参数放在 URL 中传递，此时需要使用正则表达式匹配 URL，并获取 Path 参数。
-// in src/mock/index.js
-Mock.mock(/\/api\/news/, "delete", opts => {
- const pathArray = /\/api\/news\/([\w\\-]+)/.exec(opts.url);
- const id = pathArray[1];
- return {
- code: "OK",
- result: { id }
- };
-});
-// in any.vue
-async onDelete(news) {
- const { data: res } = await this.$http({
- url: `/api/news/${news.id}`,
- method: "delete"
- });
- console.log("delete", res);
-},
-拦截 PUT 请求
-与 Delete 拦截方式一致。
-// in src/mock/index.js
-Mock.mock(/\/api\/news/, "put", opts => {
- const pathArray = /\/api\/news\/([\w\\-]+)/.exec(opts.url);
- const id = pathArray[1];
- let result = JSON.parse(opts.body);
- result.id = id;
- return {
- code: "OK",
- result
- };
-});
-// in any.vue
-async onUpdate(news) {
- const { data: res } = await this.$http({
- url: `/api/news/${news.id}`,
- method: "put",
- data: {
- title: "正则全攻略使用手册",
- img: "https://segmentfault.com/img/bVbnRSc?w=650&h=255",
- publishedAt: "2019-01-28",
- author: "Croc_wend",
- url: "https://segmentfault.com/a/1190000018042746"
- }
- });
- console.log("update", res);
-}
-上一节中的增删改查操作虽然在 Ajax 请求时被拦截，但是彼此间并无关联，数据并无变更。此时可以将 4 者关联（该节与 Mock.js 无关，纯粹的 JavaScript 操作）。
-import Mock from "mockjs";
-
-let ret = Mock.mock({
- code: "OK",
- "results|5-10": [
- {
- id: "@guid", // 生成 UUID
- title: "@ctitle(3,5)", // 生成 3-5 字的中文标题
- img: "@dataImage('200x100')", // 生成 200px*100px 的图片 Base64
- publishedAt: "@date('yyyy-MM-dd')", // 生成 yyyy-MM-dd 格式的日期
- author: "@name(true)", // 生成英文姓名
- url: "@url('http')" // 生成 http 协议的 URL
- }
- ]
-});
-
-Mock.mock("/api/news", "get", () => {
- return ret;
-});
-
-Mock.mock("/api/news", "post", opts => {
- let result = JSON.parse(opts.body);
- result.id = Mock.Random.guid();
- ret.results.push(result);
- return ret;
-});
-
-Mock.mock(/\/api\/news/, "delete", opts => {
- const pathArray = /\/api\/news\/([\w\\-]+)/.exec(opts.url);
- const id = pathArray[1];
- ret.results = ret.results.filter(val => {
- return val.id != id;
- });
- return ret;
-});
-
-Mock.mock(/\/api\/news/, "put", opts => {
- const pathArray = /\/api\/news\/([\w\\-]+)/.exec(opts.url);
- const id = pathArray[1];
- let result = JSON.parse(opts.body);
- ret.results = ret.results.map(val => {
- return val.id === id ? result : val;
- });
- return ret;
-});
-项目中可以使用 npm script 编辑启动命令，通过环境变量来控制是否加载 Mock 服务。
-以 Vue CLI 为例，在 development 模式下，增加 Mock 服务的启动命令：
新增 serve:mock
-// in package.json
-{
- "scripts": {
- "serve": "vue-cli-service serve",
- "serve:mock": "vue-cli-service serve --mode mock",
- "build": "vue-cli-service build",
- "lint": "vue-cli-service lint"
- }
-},
-新建 .env.mock 文件
-NODE_ENV=development
-VUE_APP_MOCK=true
-判断环境变量是否启用 Mock 服务
-// in src/mock/index.js
-import Mock from "mockjs";
-
-if (
- process.env.NODE_ENV === "development" &&
- process.env.VUE_APP_MOCK === "true"
-) {
- // your mock code
-}
-此时当你运行 $ npm run serve，Mock 服务未启用，请求 API 服务；当你运行 $ npm run serve:mock，Mock 服务启用，Ajax 请求被拦截。
示例代码，欢迎一起玩耍。
-]]>年末，互联网就有关于SARS出现的传言。虽然对于2002年非典的记忆已经零碎，但是SARS可以通过人际传播、10%的致死率还是让我突然紧张，像老妈子一样告诉家人少出门、戴口罩、多通风、勤洗手。
-随后官方紧急辟谣，造谣者被训诫。
-春节，新型冠状病毒2019-nCoV爆发于武汉，随着春运席卷中国各地。政府呼吁民众在家自我隔离、公共交通停运、企业延迟复工，身边的人开始关注疫情变化，在微信群里或朋友圈里分享着救人治病的谣言。
-因此我喝了一碗我爹煮的大蒜汤，但是我不会怀疑我爹的善意。正如最初的“造谣者”——医生李文亮的善意。如果执法机关正视医护人员的专业性、2019-nCoV与SARS的相似性，不因名字真的不叫SARS而将这种预警视为谣言，或许疫情能够被有效控制。
-2020年1月28日，最高人民法院发文《治理有关新型肺炎的谣言问题》，重新定性谣言。
-2020年2月7日，李文亮因感染病毒不治逝世，被誉为疫情“吹哨人”。
病毒带走了太多的生命，毁灭了太多家庭。流感，艾滋，非典，埃博拉。当提起这些名字的时候我们惊惧、恐慌、深恶痛绝，病毒从来不是一个美好的词汇。事实上，这只是我们的狭隘。
-病毒一词最先出自罗马，意为毒液或精液，包含着毁灭与创造两种含义。当我们了解它，会发现它比人类更加古老，影响着气候、土壤、海洋以及生物进化。地球上1/10的氧气由病毒创造，人类DNA片段中8%来自病毒，人类利用病毒（噬菌体）治疗疾病...
-病毒不该背负这场灾祸的罪恶。
-2020年2月7日，华南农业大学公布2019-nCoV的中间宿主或为穿山甲。
-2020年2月11日，世界卫生组织公布2019-nCoV的自然宿主或为菊头蝠。
蝙蝠、穿山甲、果子狸、骆驼，人类。
-他们和我们在本质上不过是一堆不断融合突变的DNA。人类没有权利也没有能力凌驾于谁之上，如果把他们视为食物视为药材，那么就要接受自然选择，接受生或死。也许自然根本不在乎选择，毕竟在数以亿计的时间里，人类只不过是幸运的尘埃。
-当疫情平复后，没有人去吊唁牺牲的医护人员，蝙蝠和穿山甲依然遭受捕猎，野味市场新上了一套消毒设备。
-这个世界依旧人声鼎沸。
-引用
-年末，互联网就有关于SARS出现的传言。虽然对于2002年非典的记忆已经零碎，但是SARS可以通过人际传播、10%的致死率还是让我突然紧张，像老妈子一样告诉家人少出门、戴口罩、多通风、勤洗手。
-随后官方紧急辟谣，造谣者被训诫。
-春节，新型冠状病毒2019-nCoV爆发于武汉，随着春运席卷中国各地。政府呼吁民众在家自我隔离、公共交通停运、企业延迟复工，身边的人开始关注疫情变化，在微信群里或朋友圈里分享着救人治病的谣言。
-因此我喝了一碗我爹煮的大蒜汤，但是我不会怀疑我爹的善意。正如最初的“造谣者”——医生李文亮的善意。如果执法机关正视医护人员的专业性、2019-nCoV与SARS的相似性，不因名字真的不叫SARS而将这种预警视为谣言，或许疫情能够被有效控制。
-2020年1月28日，最高人民法院发文《治理有关新型肺炎的谣言问题》，重新定性谣言。
-2020年2月7日，李文亮因感染病毒不治逝世，被誉为疫情“吹哨人”。
病毒带走了太多的生命，毁灭了太多家庭。流感，艾滋，非典，埃博拉。当提起这些名字的时候我们惊惧、恐慌、深恶痛绝，病毒从来不是一个美好的词汇。事实上，这只是我们的狭隘。
-病毒一词最先出自罗马，意为毒液或精液，包含着毁灭与创造两种含义。当我们了解它，会发现它比人类更加古老，影响着气候、土壤、海洋以及生物进化。地球上1/10的氧气由病毒创造，人类DNA片段中8%来自病毒，人类利用病毒（噬菌体）治疗疾病...
-病毒不该背负这场灾祸的罪恶。
-2020年2月7日，华南农业大学公布2019-nCoV的中间宿主或为穿山甲。
-2020年2月11日，世界卫生组织公布2019-nCoV的自然宿主或为菊头蝠。
蝙蝠、穿山甲、果子狸、骆驼，人类。
-他们和我们在本质上不过是一堆不断融合突变的DNA。人类没有权利也没有能力凌驾于谁之上，如果把他们视为食物视为药材，那么就要接受自然选择，接受生或死。也许自然根本不在乎选择，毕竟在数以亿计的时间里，人类只不过是幸运的尘埃。
-当疫情平复后，没有人去吊唁牺牲的医护人员，蝙蝠和穿山甲依然遭受捕猎，野味市场新上了一套消毒设备。
-这个世界依旧人声鼎沸。
-引用
-HUANG RESYIN
-一流中二患者 / 二流游戏玩家 / 三流程序员
- -| 职业 | -转职要求 | -职业特技 | -精通特技 | -精通战技 | -
|---|---|---|---|---|
| 平民 | -- | -- | -- | -- | -
| 剑客 | -- | -- | -- | -- | -
| 盗贼 | -- | -- | -- | -- | -
- 👏 欢迎使用 Gridea ！
-✍️ Gridea 一个静态博客写作客户端。你可以用它来记录你的生活、心情、知识、笔记、创意... ...
📝 你可以使用最酷的 Markdown 语法，进行快速创作
-🌉 你可以给文章配上精美的封面图和在文章任意位置插入图片
-🏷️ 你可以对文章进行标签分组
-📋 你可以自定义菜单，甚至可以创建外部链接菜单
-💻 你可以在 Windows，MacOS 或 Linux 设备上使用此客户端
-🌎 你可以使用 𝖦𝗂𝗍𝗁𝗎𝖻 𝖯𝖺𝗀𝖾𝗌 或 Coding Pages 向世界展示，未来将支持更多平台
-💬 你可以进行简单的配置，接入 Gitalk 或 DisqusJS 评论系统
-🇬🇧 你可以使用中文简体或英语
-🌁 你可以任意使用应用内默认主题或任意第三方主题，强大的主题自定义能力
-🖥 你可以自定义源文件夹，利用 OneDrive、百度网盘、iCloud、Dropbox 等进行多设备同步
-🌱 当然 Gridea 还很年轻，有很多不足，但请相信，它会不停向前 🏃
-未来，它一定会成为你离不开的伙伴
-尽情发挥你的才华吧！
-😘 Enjoy~
- -Mock.js 能做什么？
-Mock.js 有哪些特点？
-基于以上特点，Mock.js 被广泛应用于前端开发中，以保证开发效率与进度。
-Mock.js 允许多种安装方式：
-浏览器引入
-<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
使用 npm 或 yarn 安装
-$ npm install mockjs --save$ yarn add mockjs以 Vue CLI 生成的项目为例，安装 Axios 发送 Ajax 请求。
-引用 Mock.js
-安装完成 Mock.js 后，在项目 src 目录下新建 mock 目录及 index.js 文件，引用 Mock.js：
-// in src/mock/index.js
-import Mock from "mockjs";
-将 mock 配置关联到项目中：
-// in src/main.js
-import "./mock";
-// 将 Axios 挂载到 Vue 原型中，以便在单文件组件中以 this.$http 使用
-import axios from "axios";
-Vue.prototype.$http = axios;
-使用 Mock.mock()
-Mock.mock( rurl?, rtype?, template|function( options ) )
rurlrtypetemplatefunction(options)options假设业务场景是获取一段资讯列表，网络请求 URL 为 /api/news，类型为 get，拦截函数为：
-// in src/mock/index.js
-import Mock from "mockjs";
-
-Mock.mock("/api/news", "get", {
- code: "OK",
- results: [
- {
- id: "1",
- title: "前端组件设计原则",
- img:
- "https://user-gold-cdn.xitu.io/2019/1/24/16880541998cbc09?imageView2/0/w/1280/h/960/format/webp/ignore-error/1",
- publishedAt: "2018-11-02",
- author: "Andrew Dinihan",
- url: "https://juejin.im/post/5c49cff56fb9a049bd42a90f"
- },
- {
- id: "2",
- title: "正则全攻略使用手册",
- img: "https://segmentfault.com/img/bVbnRSc?w=650&h=255",
- publishedAt: "2019-01-28",
- author: "Croc_wend",
- url: "https://segmentfault.com/a/1190000018042746"
- }
- ]
-});
-网络请求方法：
-// in any.vue
-async getNews() {
- const { data: res } = await this.$http({ url: "/api/news" });
- console.log("get", res);
-}
-控制台中可见，响应数据为编写的测试数据，至此 Mock.js 拦截了 Ajax 请求。
-Mock.js 提供了多种数据类型：
-使用 @ 符号与以上任一数据类型的生成函数名相结合，即可组成占位符，在 Mock.mock() 的 template 中替换固定字符串，生成随机字符串。
速查以上数据类型，改写拦截函数：
-// in src/mock/index.js
-import Mock from "mockjs";
-
-Mock.mock("/api/news", "get", {
- code: "OK",
- results: [
- {
- id: "@guid", // 生成 UUID
- title: "@ctitle(3,5)", // 生成 3-5 字的中文标题
- img: "@dataImage('200x100')", // 生成 200px*100px 的图片 Base64
- publishedAt: "@date('yyyy-MM-dd')", // 生成 yyyy-MM-dd 格式的日期
- author: "@name(true)", // 生成英文姓名
- url: "@url('http')" // 生成 http 协议的 URL
- }
- ]
-});
-Mock.js 的语法规范包括两部分：
-上一节中使用的 @guid 等占位符属于 Mock.js 语法规范的数据占位符定义规范； 数据模板定义规范则定义 Mock.mock() template 内属性的最终值。
属性由属性名、生成规则、属性值组成：
-Mock.mock({
- // 属性名|生成规则:属性值
- 'name|rule': value
-});
-其中：
-| 分隔'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': value'name|count.dcount': value'name|+step': value'name|min-max': string 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max'name|count': string 通过重复 string 生成一个字符串，重复次数等于 count'name|+1': number 属性值自动加 1，初始值为 number'name|min-max': number 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型'name|min-max.dmin-dmax': number 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位'name|1': boolean 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)'name|count': object 从属性值 object 中随机选取 count 个属性'name|min-max': object从属性值 object 中随机选取 min 到 max 个属性'name|1': array 从属性值 array 中随机选取 1 个元素，作为最终值'name|+1': array 从属性值 array 中顺序选取 1 个元素，作为最终值'name|min-max': array 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max'name|count': array 通过重复属性值 array 生成一个新数组，重复次数为 countfunction，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象回到项目中。业务场景是获取一段资讯列表，但上一节生成的随机数据只有 1 项，此时使用数据模板定义规范的属性生成规则，将 1 项目变为多项：
-// in src/mock/index.js
-import Mock from "mockjs";
-
-Mock.mock("/api/news", "get", {
- code: "OK",
- // 数组内，随机生产 5-10 个对象
- "results|5-10": [
- {
- id: "@guid", // 生成 UUID
- title: "@ctitle(3,5)", // 生成 3-5 字的中文标题
- img: "@dataImage('200x100')", // 生成 200px*100px 的图片 Base64
- publishedAt: "@date('yyyy-MM-dd')", // 生成 yyyy-MM-dd 格式的日期
- author: "@name(true)", // 生成英文姓名
- url: "@url('http')" // 生成 http 协议的 URL
- }
- ]
-});
-除了拦截 GET 请求，Mock.js 同样支持 POST 、DELETE、PUT 请求：
拦截 POST 请求
-// in src/mock/index.js
-Mock.mock("/api/news", "post", opts => {
- let result = JSON.parse(opts.body);
- result.id = Mock.Random.guid();
- return {
- code: "OK",
- result
- };
-});
-// in any.vue
-async onCreate() {
- const { data: res } = await this.$http({
- url: `/api/news`,
- method: "post",
- data: {
- title: "前端组件设计原则",
- img:
- "https://user-gold-cdn.xitu.io/2019/1/24/16880541998cbc09?imageView2/0/w/1280/h/960/format/webp/ignore-error/1",
- publishedAt: "2018-11-02",
- author: "Andrew Dinihan",
- url: "https://juejin.im/post/5c49cff56fb9a049bd42a90f"
- }
- });
- console.log("post", res);
-},
-拦截 DELETE 请求
-通常 Delete 请求会将 ID 作为 Path 参数放在 URL 中传递，此时需要使用正则表达式匹配 URL，并获取 Path 参数。
-// in src/mock/index.js
-Mock.mock(/\/api\/news/, "delete", opts => {
- const pathArray = /\/api\/news\/([\w\\-]+)/.exec(opts.url);
- const id = pathArray[1];
- return {
- code: "OK",
- result: { id }
- };
-});
-// in any.vue
-async onDelete(news) {
- const { data: res } = await this.$http({
- url: `/api/news/${news.id}`,
- method: "delete"
- });
- console.log("delete", res);
-},
-拦截 PUT 请求
-与 Delete 拦截方式一致。
-// in src/mock/index.js
-Mock.mock(/\/api\/news/, "put", opts => {
- const pathArray = /\/api\/news\/([\w\\-]+)/.exec(opts.url);
- const id = pathArray[1];
- let result = JSON.parse(opts.body);
- result.id = id;
- return {
- code: "OK",
- result
- };
-});
-// in any.vue
-async onUpdate(news) {
- const { data: res } = await this.$http({
- url: `/api/news/${news.id}`,
- method: "put",
- data: {
- title: "正则全攻略使用手册",
- img: "https://segmentfault.com/img/bVbnRSc?w=650&h=255",
- publishedAt: "2019-01-28",
- author: "Croc_wend",
- url: "https://segmentfault.com/a/1190000018042746"
- }
- });
- console.log("update", res);
-}
-上一节中的增删改查操作虽然在 Ajax 请求时被拦截，但是彼此间并无关联，数据并无变更。此时可以将 4 者关联（该节与 Mock.js 无关，纯粹的 JavaScript 操作）。
-import Mock from "mockjs";
-
-let ret = Mock.mock({
- code: "OK",
- "results|5-10": [
- {
- id: "@guid", // 生成 UUID
- title: "@ctitle(3,5)", // 生成 3-5 字的中文标题
- img: "@dataImage('200x100')", // 生成 200px*100px 的图片 Base64
- publishedAt: "@date('yyyy-MM-dd')", // 生成 yyyy-MM-dd 格式的日期
- author: "@name(true)", // 生成英文姓名
- url: "@url('http')" // 生成 http 协议的 URL
- }
- ]
-});
-
-Mock.mock("/api/news", "get", () => {
- return ret;
-});
-
-Mock.mock("/api/news", "post", opts => {
- let result = JSON.parse(opts.body);
- result.id = Mock.Random.guid();
- ret.results.push(result);
- return ret;
-});
-
-Mock.mock(/\/api\/news/, "delete", opts => {
- const pathArray = /\/api\/news\/([\w\\-]+)/.exec(opts.url);
- const id = pathArray[1];
- ret.results = ret.results.filter(val => {
- return val.id != id;
- });
- return ret;
-});
-
-Mock.mock(/\/api\/news/, "put", opts => {
- const pathArray = /\/api\/news\/([\w\\-]+)/.exec(opts.url);
- const id = pathArray[1];
- let result = JSON.parse(opts.body);
- ret.results = ret.results.map(val => {
- return val.id === id ? result : val;
- });
- return ret;
-});
-项目中可以使用 npm script 编辑启动命令，通过环境变量来控制是否加载 Mock 服务。
-以 Vue CLI 为例，在 development 模式下，增加 Mock 服务的启动命令：
新增 serve:mock
-// in package.json
-{
- "scripts": {
- "serve": "vue-cli-service serve",
- "serve:mock": "vue-cli-service serve --mode mock",
- "build": "vue-cli-service build",
- "lint": "vue-cli-service lint"
- }
-},
-新建 .env.mock 文件
-NODE_ENV=development
-VUE_APP_MOCK=true
-判断环境变量是否启用 Mock 服务
-// in src/mock/index.js
-import Mock from "mockjs";
-
-if (
- process.env.NODE_ENV === "development" &&
- process.env.VUE_APP_MOCK === "true"
-) {
- // your mock code
-}
-此时当你运行 $ npm run serve，Mock 服务未启用，请求 API 服务；当你运行 $ npm run serve:mock，Mock 服务启用，Ajax 请求被拦截。
示例代码，欢迎一起玩耍。
- -Vue Router 目前支持三种模式：
-使用 history 模式时需要对前端代码及服务器进行相关配置，并且根据部署位置（在域名的根路径下或子路径下），配置也略有差异。
-以标准的 Vue CLI 项目与 Nignx 服务器为例：
-前端配置
-// router.js
-const router = new VueRouter({
- mode: "history"
- routes
-});
-// vue.config.js
-module.exports = {
- publicPath: "/"
-};
-服务器配置
-# nginx.conf
-location / {
- # root <your_web_files_path>;
- index index.html;
- try_files $uri $uri/ /index.html;
-}
-前端配置
-// router.js
-const router = new VueRouter({
- mode: "history",
- base: process.env.BASE_URL,
- routes
-});
-// vue.config.js
-module.exports = {
- publicPath: process.env.NODE_ENV === "production" ? "/context/" : "/",
-};
-其中 process.env.BASE_URL 等价于 publicPath，即 context 的值。
-服务器配置
-# nginx.conf
-location /context/ {
- # alias <your_web_files_path>;
- index index.html;
- try_files $uri $uri/ /context/index.html;
-}
-注意，PWA 的输出文件 index.html，与 Nginx config 中的 index.html 相对应，如输出文件名自定义，Nginx config 也需要与其保持一致。
- 👏 欢迎使用 Gridea ！
-✍️ Gridea 一个静态博客写作客户端。你可以用它来记录你的生活、心情、知识、笔记、创意... ...