vue2企业级项目(三)

vue2企业级项目(三)

引入mockjs,i18n

1、mockjs

  1. 项目下载依赖

    npm install --save-dev mock
    
  2. 根目录创建mock文件夹,并创建mock/index.js

    import Mock from "mockjs";// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
    Mock.setup({timeout: "300-600",
    });// 引入全部的modules内全部js文件,并分流进行处理
    const modulesFiles = require.context("./modules", true, /\.js$/);
    const modules = modulesFiles.keys().reduce((modules, modulePath) => {const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1"); // 正则提取子文件名称const value = modulesFiles(modulePath); // 获取文件对象modules[moduleName] = value.default; // 获取文件默认导出return modules;
    }, {});// 动态添加mock
    for (let fileName in modules) {// 因为mock匹配规则是从上到下的,所以要对path长度进行排序// 避免提前匹配导致错误问题modules[fileName].sort((last, next) => next.path.length - last.path.length,);// 添加mock匹配规则modules[fileName].forEach((item) => {let regexp = new RegExp(process.env.VUE_APP_PREFIX + item.path);Mock.mock(regexp, item.method, item.dispose.action);});
    }// mock验证 - 给ajax用的
    export function proxyValid(url, method, date) {for (let fileName in modules) {modules[fileName].forEach((item) => {if (item.path === url && item.method === method) {const validRes = Mock.valid(item.dispose.template, date);if (validRes && validRes.length === 0) return true; // 验证通过// 验证不通过console.group(url.replace(/http:\/\//, ""));console.log("valid response data :>>> url: ", url);console.log("valid response data :>>> validMsg: ", validRes);console.groupEnd();}});}
    }// mockRandom继承添加创出电话号码
    Mock.Random.extend({phone: function() {let phonePrefix = ["132", "135", "189", "135", "189"]; // 自己写前缀哈return Mock.Random.pick(phonePrefix) + Mock.mock(/\d{8}/); // Number()},
    });export default Mock;
    
  3. 创建mock/mockPort.js

    import Qs from "qs";
    import { checkDataType } from "@/utils/utils";function MockPort({ template, action }) {this.template = template; // 模板this.action = action.bind(this); // 返回值// 解析返回get参数方法this.queryBackRes = function(url = "") {const urlArr = url.split("?");const dataString = urlArr[1] || "";return Qs.parse(dataString);};// 解析返回post参数方法this.paramsBackRes = function(body) {if (checkDataType(body, "string")) return JSON.parse(body);else return body;};// 分页获取listthis.getPagingList = function(pagination, list) {let { pageNumber, pageSize } = pagination;const startIndex = (pageNumber - 1) * pageSize; // 开始截取位置const endIndx = pageNumber * pageSize; // 结束截取位置const totalPages = Math.ceil(list.length / pageSize); // 总页码数let rows =pageNumber > totalPages ? [] : list.slice(startIndex, endIndx);return { rows, total: list.length };};// 检查是否携带tokenthis.checkToken = function(options, resObj) {let query = this.queryBackRes(options.url);if (query.id_token === "123456789") return resObj;return {statusCode: 401,code: -1,msg: "账户验证失败,请重新登录",data: null,};}.bind(this);
    }export default MockPort;
    
  4. 创建mock/modules/test.js示例

    import MockPort from "../mockPort"; // 解析获取git数据function testGet() {return new MockPort({template: {status: 1,data: "test",},action(options) {let query = this.queryBackRes(options.url);this.template.data += query;return this.template;},});
    }function testPost() {return new MockPort({template: {status: 1,data: "test",},action(options) {let query = this.paramsBackRes(options.body);this.template.data += query;return this.template;},});
    }export default [{ path: "/testGet", method: "get", dispose: testGet() },{ path: "/testPost", method: "post", dispose: testPost() },
    ];
    
  5. src目录下创建api/mock.js示例

    import request from "@/utils/request.js";export const testGet = (params) => request.get("/testGet", params);
    export const testPost = (params) => request.post("/testPost", params);
    
  6. main.js添加一下内容

    ...if (process.env.NODE_ENV === "development") require("../mock/index");
    ...
    
  7. 根目录创建vue.config.js

    module.exports = {devServer: {open: true,port: "8080",overlay: {warning: false,error: false,},},
    };
    

2、i18n

  1. 项目下载依赖

    npm install vue-i18n@8.26.2 --save
    
  2. src目录下创建i18n/index.js文件

    import Vue from "vue";
    import VueI18n from "vue-i18n";
    import { getStorage } from "@/utils/storage.js";Vue.use(VueI18n);// 自动引入modules文件
    const modulesFiles = require.context("./modules", true, /\.js$/);const messages = modulesFiles.keys().reduce((modules, modulePath) => {const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");const value = modulesFiles(modulePath);modules[moduleName] = value.default;return modules;
    }, {});const i18n = new VueI18n({locale: getStorage("local") || process.env.VUE_APP_locale,messages,
    });export default i18n;
  3. main.js引入使用i18n,和vuex生成的store是一样的

  4. 创建i18n/modules/en.jsi18n/modules/zh.js

    /***********en.js***************/
    export default {hello: "Hello",
    };/***********zh.js***************/
    export default {hello: "你好",
    };
  5. 动态切换语言包

    changeLanguage(type) {this.$i18n.local = type ? "en" : "zh"
    }
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/12404.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s安装prometheus

安装 在目标集群上,执行如下命令: kubectl apply -f https://gitee.com/i512team/dhorse/raw/main/conf/kubernetes-prometheus.yml使用 1.在浏览器访问地址:http://master_ip:30000,如下图所示: 2.查看k8s自带的…

yolov5 onnx模型 转为 rknn模型

1、转换为rknn模型环境搭建 onnx模型需要转换为rknn模型才能在rv1126开发板上运行,所以需要先搭建转换环境 模型转换工具 模型转换相关文件下载: 网盘下载链接:百度网盘 请输入提取码 提取码:teuc 将其移动到虚拟机中&#xf…

android——ktor封装

ktor封装 代码如下: object KtorClient { // private const val BASE_URL "http://***.**.***.62:8002"private const val BASE_URL "https://mock.***.cn"val client HttpClient(CIO) {install(ContentNegotiation) {json(Json {pretty…

洛谷题单 Part 6.7.1 矩阵

应队友要求,开始学线性代数,具体路线是矩阵 → \rightarrow →高斯消元 → \rightarrow →线性基。为多项式做个准备 P3390 【模板】矩阵快速幂 题面 板子,用结构体写的,感觉有点丑,一会儿看看题解有没有写得好看的 …

Java 递归实现迷宫出逃小游戏

Java 递归实现迷宫出逃小游戏 一、规则二、代码实现三、运行结果 一、规则 数字含义 0 - 路; 1 - 墙; 2 - 通路; 3 - 死路 寻路策略 向下 --> 向右 --> 向上 --> 向左 二、代码实现 public class MyClass {public static void main(String[] args){//迷宫地图&…

前端开发Vue3.0 标签setup语法『UI组件库』之『模态框』【业务提升必备】

封装模态框需要定义的参数 title //弹窗标题 show // 是否显示弹窗 width // 弹窗宽度 height // 弹窗高度 borderRadius // 弹窗圆角 headerColor // 弹窗顶部颜色 contentText // 内容文本 contentTextCorder //内容文本颜色 position // 标题的位置 …

OpenCV 算法解析

opencv大坑之BGR opencv对于读进来的图片的通道排列是BGR,而不是主流的RGB!谨记! #opencv读入的矩阵是BGR,如果想转为RGB,可以这么转 img4 cv2.imread(1.jpg) img4 cv2.cvtColor(img4,cv2.COLOR_BGR2RGB) OpenCV 常见…

自定义 View(六) 自定义评分星星

先看看效果图 1.自定义 View 的基本流程 创建 View Class创建 attr 属性文件,确定属性View Class 绑定 attr 属性onMeasure 测量onDraw 绘制onTouchEvent ( 用户交互需要处理 ) 1.1 创建 View Class package com.example.view_day05_ratingbar;import android.…

javaweb会话技术

cookie的入门使用 package com.hspedu.cookie;import javax.servlet.ServletException; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import …

GAMES104里渲染等一些剩下的问题

渲染的一些剩下的问题 1. 如何理解渲染中的AO(环境光遮蔽) 环境光遮蔽 我们先从一个简单的效果开始—环境光遮蔽(Ambient Occlusion,以下简称AO)。大家可以看到,下图中的场景没有任何渲染效果,也没有任何着色效果,但场景呈现出了非常清晰的…

面试-杨辉三角python递归实现,二进制转换

杨辉三角 def yang_hui(x,y):xint(x)yint(y)assert x>y,列数不应该大于行数# x 表示行,y表示列if y1 or yx:return 1else:return yang_hui(x-1,y-1)yang_hui(x-1,y)xinput(输入第几行) yinput(输入第几列) resultyang_hui(int(x),int(y)) print(result) #inclu…

前端开发中的常见优化

目录 外观 组件库(无法满足->接口?->自定义/封装) 兼容 不同尺寸(包裹,height:100%) 不同 浏览器 隐藏滚动条 的 不同属性名 重排->重绘 不显示 display:none->禁用disable 性能 导航…

libuv库学习笔记-basics_of_libuv

Basics of libuv libuv强制使用异步和事件驱动的编程风格。它的核心工作是提供一个event-loop,还有基于I/O和其它事件通知的回调函数。libuv还提供了一些核心工具,例如定时器,非阻塞的网络支持,异步文件系统访问,子进…

【学习笔记】关于图像YUV格式分类和排布方式的全学习

这里是尼德兰的喵学习笔记相关文章,欢迎您的访问! 如果文章对您有所帮助,期待您的点赞收藏 让我们一起为芯片前端全栈工程师而努力 目录 前言 YUV格式导图 YUV444 packed planar I444 YV24 semi-planar NV24 NV42 YUV422 packed …

华为数通HCIA-网络模型

TCP 网络通信模式 作用:指导网络设备的通信; OSI七层模型: 7.应用层:由应用层协议(http、FTP、Telnet.)为应用程序产生对应的数据; 6.表示层:将应用层产生的数据转换成网络设备看…

《现代C++教程》笔记(5-7)

文章目录 5 智能指针与内存管理5.1 RAII与引用计数5.2 std::shared_ptr5.3 std::unique_ptr5.4 std::weak_ptr 6 正则表达式7 并行与并发7.1 并行基础7.2 互斥量与临界区7.3 期物7.4 条件变量7.5 原子操作与内存模型 5 智能指针与内存管理 5.1 RAII与引用计数 在传统 C 中&am…

一个月学通Python(二十八):Python网络数据采集(爬虫)概述(爬虫)

专栏介绍 结合自身经验和内部资料总结的Python教程,每天3-5章,最短1个月就能全方位的完成Python的学习并进行实战开发,学完了定能成为大佬!加油吧!卷起来! 全部文章请访问专栏:《Python全栈教程(0基础)》 文章目录 专栏介绍什么是爬虫爬虫的应用领域爬虫合法性探讨R…

Go语言中的结构体详解

关于 Golang 结构体 Golang 中没有“类”的概念,Golang 中的结构体和其他语言中的类有点相似。和其他面向对 象语言中的类相比,Golang 中的结构体具有更高的扩展性和灵活性。 Golang 中的基础数据类型可以表示一些事物的基本属性,但是当我们…

HuggingGPT Solving AI Tasks with ChatGPT and its Friends in Hugging Face

总述 HuggingGPT 让LLM发挥向路由器一样的作用,让LLM来选择调用那个专业的模型来执行任务。HuggingGPT搭建LLM和专业AI模型的桥梁。Language is a generic interface for LLMs to connect AI models 四个阶段 Task Planning: 将复杂的任务分解。但是这里…

Android.mk中的LOCAL_OVERRIDES_PACKAGES用法

Android.mk中的LOCAL_OVERRIDES_PACKAGES用法_mk local_over_觅风者的博客-CSDN博客 Android.mk中的LOCAL_OVERRIDES_PACKAGES的用法说明可以参考以下文章: Android.mk覆盖替换LOCAL_OVERRIDES_PACKAGES 此变量可以使其他的模块不加入编译 项目中遇到的问题&…