从项目开始学习Vue——02(若依框架)

往期:
从项目开始学习Vue——01

目录标题

    • 一、基础插件
    • (一)路由Vue Router
    • (二)导航守卫(路由拦截器)
    • 二、Vuex
    • (一)什么是Vuex
        • Vuex的部分介绍内容:
    • (二)何时使用Vuex
    • (三)具体使用
      • State
      • getter
      • mutation
      • Action
      • Module
    • 三、element-ui
    • 四、布局插件
    • 五、js-cookie的使用方法
    • 六、Axios
    • 七、加密jsencrypt
    • 八、加载进度nprogress
    • 九、自定义vue指令,实现权限控制
    • 十、vue组件
    • 十一、其他
    • 十二、一边学,一边做(仿制若依框架)

一、基础插件

(一)路由Vue Router

Vue Router 官方文档

Vue Router 的作用简单来说就是在同一个页面中实现不同模块页面的动态加载,不需要刷新页面和新建标签页。

比如这种系统:可以在同一个页面加载不同模块的页面,打开、切换和关闭页面都非常流畅,用户体验性大大提高。(单页面系统SPA

若以开源框架地址
在这里插入图片描述

一个简单的demo。利用element-ui和Vue Router 实现

一般来说我们的页面不可能像demo一样简单丑陋,一般需要结合layout(布局)使用,需要添加侧边导航栏,顶部导航栏,内容展示栏,个人中心栏,设置栏等。

(二)导航守卫(路由拦截器)

路由前拦截器

路由后拦截器

一个例子:

/*** 路由拦截器* */
import store from '../store'
import router from './index'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'NProgress.configure({ showSpinner: false })const whiteList = ['/login', '/register']//添加一个导航钩子,它会在每次路由之前被执行。返回一个用来移除该钩子的函数。//to: 即将要进入的目标 用一种标准化的方式
// from: 当前导航正要离开的路由 用一种标准化的方式
//在之前的 Vue Router 版本中,还可以使用 第三个参数 next
// 。这是一个常见的错误来源,我们经过 RFC 讨论将其移除。
// 然而,它仍然是被支持的,这意味着你可以向任何导航守卫传递第三个参数。
// 在这种情况下,确保 next 在任何给定的导航守卫中都被严格调用一次。
// 它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。
router.beforeEach((to, from, next) => {//开启加载进度条NProgress.start()if (getToken()) {/* has token*/if (to.path === '/login') {next({ path: '/' })NProgress.done()} else {if (store.state.user.roles.length === 0) {// 判断当前用户是否已拉取完user_info信息store.dispatch('GetInfo').then(() => {next({ path: '/' })}).catch(err => {store.dispatch('LogOut').then(() => {Message.error(err)next({ path: '/' })})})} else {next()}}} else {// 没有tokenif (whiteList.indexOf(to.path) !== -1) {// 在免登录白名单,直接进入next()} else {// 否则全部重定向到登录页next('/login')NProgress.done()}}
})//路由后
router.afterEach(() => {NProgress.done()
})

守卫方法()三个重要参数

  1. to: 即将要进入的目标
  2. from: 当前导航正要离开的路由
  3. next :在之前的 Vue Router 版本中,还可以使用 第三个参数 next 。这是一个常见的错误来源,我们经过 RFC 讨论将其移除。然而,它仍然是被支持的,这意味着你可以向任何导航守卫传递第三个参数。在这种情况下,确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。

在这里插入图片描述

二、Vuex

Vuex官网

(一)什么是Vuex

在这里插入图片描述

如果你有了解过vue框架提供的状态管理: store 模式 那么Vuex理解起来十分简单,他们的作用是基本一致的。

Vuex 中管理的变量(内容)是全局唯一的,也就是单例模式。不同页面获取这个变量的内容都是一致的。

Vuex的部分介绍内容:

在这里插入图片描述

(二)何时使用Vuex

如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

下面这种就是单页应用:
在这里插入图片描述

(三)具体使用

由以下部分组成:
在这里插入图片描述

State

存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则。
创建

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {name: 'lihua',},getters: {},mutations: {},actions: {},modules: {}
})

在vue中调用state:
通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现:

  1. 在根实例中注册 store 选项
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'Vue.config.productionTip = falsenew Vue({router,store, // 在根实例中注册 store 选项render: function (h) { return h(App) }
}).$mount('#app')
  1. 调用:
<template><div><div>{{name}}</div><button v-on:click="onEvent">获取Vuex State变量</button></div>
</template><script>export default {data() {return {name: '1',}},name: 'HelloWorld',props: {msg: String},methods: {onEvent: function () {this.name = this.$store.state.name// console.log(this.$store.state.name)},},}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

getter

Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
在这里插入图片描述

具体使用

mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

在这里插入图片描述

Action

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

Module

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

例子:
在这里插入图片描述

三、element-ui

官方文档

四、布局插件

Vue Grid Layout -️ 适用Vue.js的栅格布局系统

五、js-cookie的使用方法

js-cookie的使用方法

这个插件多用于保存一下token到浏览器的cookie中

例子:

import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {return Cookies.set(TokenKey, token)
}export function removeToken() {return Cookies.remove(TokenKey)
}

六、Axios

Axios 是一个基于 promise 网络请求库

一个例子:

import axios from 'axios'
import { Notification, MessageBox, Message, Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import cache from '@/utils/cache'axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项,表示请求URL公共部分// 请求路径前缀,一般从.env.production .env.development 环境变量中获取// baseURL: process.env.VUE_APP_BASE_API,baseURL:'/dev-api',// 超时timeout: 10000
})
/*** 参数处理* @param {*} params  参数*/
function tansParams(params) {let result = ''for (const propName of Object.keys(params)) {const value = params[propName];var part = encodeURIComponent(propName) + "=";if (value !== null && value !== "" && typeof (value) !== "undefined") {if (typeof value === 'object') {for (const key of Object.keys(value)) {if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {let params = propName + '[' + key + ']';var subPart = encodeURIComponent(params) + "=";result += subPart + encodeURIComponent(value[key]) + "&";}}} else {result += part + encodeURIComponent(value) + "&";}}}return result
}
// request拦截器
service.interceptors.request.use(config => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === false// 是否需要防止数据重复提交const isRepeatSubmit = (config.headers || {}).repeatSubmit === falseif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数if (config.method === 'get' && config.params) {let url = config.url + '?' + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;}//防止重复提交if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {const requestObj = {url: config.url,data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,time: new Date().getTime()}const sessionObj = cache.session.getJSON('sessionObj')if (sessionObj === undefined || sessionObj === null || sessionObj === '') {cache.session.setJSON('sessionObj', requestObj)} else {const s_url = sessionObj.url;                  // 请求地址const s_data = sessionObj.data;                // 请求数据const s_time = sessionObj.time;                // 请求时间const interval = 1000;                         // 间隔时间(ms),小于此时间视为重复提交if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {const message = '数据正在处理,请勿重复提交';console.warn(`[${s_url}]: ` + message)return Promise.reject(new Error(message))} else {cache.session.setJSON('sessionObj', requestObj)}}}return config
}, error => {console.log(error)Promise.reject(error)
})// 响应拦截器
service.interceptors.response.use(res => {// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = errorCode[code] || res.data.msg || errorCode['default']// 二进制数据则直接返回if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {return res.data}if (code === 401) {MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {}).catch(() => {});return Promise.reject('无效的会话,或者会话已过期,请重新登录。')} else if (code === 500) {Message({ message: msg, type: 'error' })return Promise.reject(new Error(msg))} else if (code === 601) {Message({ message: msg, type: 'warning' })return Promise.reject('error')} else if (code !== 200) {Notification.error({ title: msg })return Promise.reject('error')} else {return res.data}},error => {console.log('err' + error)let { message } = error;if (message === "Network Error") {``message = "后端接口连接异常";} else if (message.includes("timeout")) {message = "系统接口请求超时";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}Message({ message: message, type: 'error', duration: 5 * 1000 })return Promise.reject(error)}
)export default service

七、加密jsencrypt

可以用于加密前端账号、密码和一些敏感信息。

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'// 密钥对生成 http://web.chacuo.net/netrsakeypairconst publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +'7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +'UP8iWi1Qw0Y='// 加密
export function encrypt(txt) {const encryptor = new JSEncrypt()encryptor.setPublicKey(publicKey) // 设置公钥return encryptor.encrypt(txt) // 对数据进行加密
}// 解密
export function decrypt(txt) {const encryptor = new JSEncrypt()encryptor.setPrivateKey(privateKey) // 设置私钥return encryptor.decrypt(txt) // 对数据进行解密
}

八、加载进度nprogress

在这里插入图片描述

可以在请求拦截器中使用

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {//开启加载进度条NProgress.start() 
})//路由后
router.afterEach(() => {// 关闭进度条NProgress.done()
})

九、自定义vue指令,实现权限控制

在这里插入图片描述
hasPermi.js

 /*** v-hasPermi 操作权限处理* Copyright (c) 2019 ruoyi*/import store from '@/store'export default {inserted(el, binding, vnode) {const { value } = bindingconst all_permission = "*:*:*";const permissions = store.getters && store.getters.permissionsif (value && value instanceof Array && value.length > 0) {const permissionFlag = valueconst hasPermissions = permissions.some(permission => {return all_permission === permission || permissionFlag.includes(permission)})if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(`请设置操作权限标签值`)}}
}

汇总指令
index.js

import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'const install = function(Vue) {Vue.directive('hasRole', hasRole)Vue.directive('hasPermi', hasPermi)
}if (window.Vue) {window['hasRole'] = hasRolewindow['hasPermi'] = hasPermiVue.use(install); // eslint-disable-line
}export default install

在main.js中导入

import directive from './directive' // directiveVue.use(directive)

使用

<div  v-hasPermi="['system:user:edit']" >111</div>
<div  v-has-permi="['1:2:3']" >111</div>

十、vue组件

https://www.cnblogs.com/cq1715584439/p/11734041.html

十一、其他

新手可能像我一样对js文件里面的 import 、export 、export default 有些懵逼。

其实看名字就能大概猜出他们的意思,一个是导入、一个是导出。

如果有大量js文件,那么js之间的变量、函数、对象、类应该如果调用和管理呢。如果js文件很多,js之间调来调去就会很乱,可维护性很低。这个时候就凸显出import 、export 字段的用处了,如果一个js,需要引入其他js的变量、函数,那么你就用import 导入一个变量、函数、对象。export 、export default 与 import 相反,就是你需要给这个 js 导出什么给外部js调用。

其他更多可以参考这篇了解

十二、一边学,一边做(仿制若依框架)

未完结
在这里插入图片描述

**注意:**需要启动后端接口,去拉取若依后端代码,并启动

代码位置

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

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

相关文章

QQ超大文件共享(别用,传进去后,压缩都显示不出来,LJ qq!)(共享文件)

文章目录 需要共享双方同时在线开启方法第一次会提示设置默认共享目录&#xff0c;默认是E:\QQFileShare\<qq号>\&#xff1a;然后新建共享会在其后创建共享目录&#xff0c;共享目录中只能共享文件。需要点击添加文件&#xff0c;直接把文件拷贝到目录里好像还不行&…

C语言/数据结构——(相交链表)

一.前言 今天在力扣上刷到了一道题&#xff0c;想着和大家一起分享一下这道题——相交链表https://leetcode.cn/problems/intersection-of-two-linked-lists废话不多说&#xff0c;让我们开始今天的分享吧。 二.正文 1.1题目描述 是不是感觉好长&#xff0c;我也这么觉得。哈…

网络编程套接字和传输层tcp,udp协议

认识端口号 我们知道在网络数据传输的时候&#xff0c;在IP数据包头部有两个IP地址&#xff0c;分别叫做源IP地址和目的IP地址。IP地址是帮助我们在网络中确定最终发送的主机&#xff0c;但是实际上数据应该发送到主机上指定的进程上的&#xff0c;所以我们不仅要确定主机&…

OAuth 2.0 和 OAuth 2.1

OAuth 2.0 和 OAuth 2.1比较&#xff1a; OAuth 2.0 和 OAuth 2.1 是授权框架的不同版本&#xff0c;它们用于允许应用程序安全地访问用户在另一个服务上的数据。以下是它们之间的一些主要区别&#xff1a; 安全性增强&#xff1a;OAuth 2.1 旨在提高安全性&#xff0c;它整合…

什么是云原生架构,我们该如何做好云原生安全,引领云计算时代的应用程序革新

随着云计算技术的飞速发展&#xff0c;企业面临着前所未有的机遇和挑战。在这个高度竞争的市场中&#xff0c;传统的应用程序架构因其僵化、不易扩展和维护的特点&#xff0c;已难以满足当今企业对灵活性、可伸缩性和高效性的追求。在这样的背景下&#xff0c;云原生架构应运而…

git rebase 合并当前分支的多个commit记录

git rebase 合并当前分支的多个commit记录 git rebase 相关的选项和用法step1&#xff1a;找到想要合并的 commitstep2. 使用 rebase -istep3. 编辑提交历史&#xff1a;step4.编辑合并后的提交信息step5.完成 rebase 过程&#xff1a;step6.**推送更新&#xff1a;**step6.**再…

使用ollama离线部署小模型

在有网的机器下载ollama和模型 启动服务 docker run --rm -it -v ./ollama:/root/.ollama -p 8000:11434 --name ollama ollama/ollama下载模型 docker exec -it ollama ollama pull qwen:0.5b将镜像和ollama目录复制到离线的机器中 docker启动ollama服务 验证 curl ht…

FFmpeg常用API与示例(三)—— 音视频解码与编码

编解码层 1.解码 (1) 注册所有容器格式和 CODEC:av_register_all() (2) 打开文件:av_open_input_file() (3) 从文件中提取流信息:av_find_stream_info() (4) 穷举所有的流&#xff0c;查找其中种类为 CODEC_TYPE_VIDEO (5) 查找对应的解码器:avcodec_find_decoder() (6) …

C++ 实现以xml的格式写入文件

C XML类 该类主要将xml中的标签分为两类&#xff0c;无内容标签统一称为父标签&#xff0c;有内容的就以键值对的方式直接输出。 后面可能会优化通过函数参数的方式管控层级关系&#xff0c;现在是通过类里自动记录层级深度来表示的。 #include <fstream> #include <…

【QT教程】QT6硬件图形界面编程 QT硬件编程

QT6硬件图形界面编程 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看…

数据结构-二叉树结尾+排序

一、二叉树结尾 1、如何判断一棵树是完全二叉树。 我们可以使用层序遍历的思路&#xff0c;利用一个队列&#xff0c;去完成层序遍历&#xff0c;但是这里会有些许的不同&#xff0c;我们需要让空也进队列。如果队列里到最后只剩下空那么这棵树就是完全二叉树。具体的实现如下…

js 数据格式转换,对象转数组,数组转对象

1.对象转数组 // 对象obj转换成数组格式 let obj { orgCode:分局编码, alertId:告警ID, name:告警名称 } let arr [] for(let key in obj) { console.log(11,key,obj[key]); // 定义一个对象&#xff0c;赋值 let o { id: key, // key是obj对象的键值 label: obj[key] …

学习Vue 3.0中的onMounted和onUnmounted钩子函数

学习Vue 3.0中的onMounted和onUnmounted钩子函数 一、什么是onMounted和onUnmounted&#xff1f;二、如何使用onMounted和onUnmounted&#xff1f;1、使用onMounted2、使用onUnmounted 三、总结 一、什么是onMounted和onUnmounted&#xff1f; Vue 3.0带来了许多令人兴奋的新特…

Modal h函数写法

Modal h函数写法 if (res.data.flag) {const ocapWarn res.data.ocaplList;Modal.warning({title: "提示",content: h("div", {}, [ocapWarn.map((item, index) > {return h("div", {}, [h("p",${index 1}、${item.defectItem}(…

IntersectionObserver对象

IntersectionObserver对象 IntersectionObserver对象&#xff0c;从属于Intersection Observer API&#xff0c;提供了一种异步观察目标元素与其祖先元素或顶级文档视窗viewport交叉状态的方法&#xff0c;祖先元素与视窗viewport被称为根root&#xff0c;也就是说Intersectio…

c#---多态

在 C#语言中体现多态有三种方式&#xff1a;虚方法&#xff0c;抽象类&#xff0c; 接口 一、虚方法 什么是虚方法&#xff1f; 在父类中使用 virtual 关键字修饰的方法&#xff0c; 就是虚方法。在子类中可以使用 override 关键字对该虚方法进行重写。 class Animal {public…

android apk没有源码如何修改程序

如果您拥有一个APK文件但没有源代码&#xff0c;您可以尝试以下几种方法来进行修改&#xff1a; 反编译APK&#xff1a;使用工具如apktool对APK文件进行反编译&#xff0c;这将为您提供源代码和资源文件。 动态调试&#xff1a;使用调试工具连接设备或模拟器&#xff0c;并动态…

重装前端整体流程

用户管理 --汇总 -- 明细-CSDN博客 一、node 这个看环境变量 2023最新版Node.js下载安装及环境配置教程&#xff08;非常详细&#xff09;从零基础入门到精通&#xff0c;看完这一篇就够了_nodejs安装及环境配置-CSDN博客 配置到国内镜像的时候&#xff0c;去看&#xff0c;淘…

理解固化的Maven依赖:spring-boot-starter-parent 与 spring-boot-dependencies

目录 理解固化的Maven依赖&#xff1a;spring-boot-starter-parent 与 spring-boot-dependencies1. spring-boot-starter-parent1.1 简介1.2 特点 2. spring-boot-dependencies2.1 简介2.2 特点 3. 异同点对比3.1 相同点3.2 不同点案例一&#xff1a;使用 spring-boot-starter-…

Java方法的重载

方法重载 1. 为什么需要方法重载 public class TestMethod{public static void main (String[] args){int a 10;int b 20;int ret add(a,b);System.out.println("ret "ret);double a2 10.5;double b2 20.5;double ret2 add(a2,b2);System.out.println("…