vue2人力资源项目3主页

主页权限验证

前置守卫开启进度条,后置守卫关闭进度条

import router from '@/router'
import nProgress from 'nprogress'// 导入进度条(模板自带)
import 'nprogress/nprogress.css'// 导入进度条样式(模板自带)
// 前置守卫
// 到哪里,去哪里,做什么
router.beforeEach((to, from, next) => {// 开启进度条nProgress.start()
})// 后置守卫
router.afterEach(() => {// 关闭进度条nProgress.done()
})

如果有token,如果跳转登录页面情况

// 前置守卫
// 到哪里,去哪里,做什么
router.beforeEach((to, from, next) => {// 开启进度条nProgress.start()if (// 存在tokenstore.getters.token) {if (to.path === '/login') {// 跳转首页next('/')} else {next()// 到其他页面,放行}} else {// 没有tokennext()}
})

没有token

声明白名单

// 声明白名单
const whiteList = ['/login', '404']
// 到哪里,去哪里,做什么
router.beforeEach((to, from, next) => {// 开启进度条nProgress.start()if (// 存在tokenstore.getters.token) {if (to.path === '/login') {// 跳转到主页next('/') // 中转到主页// next(地址)并没有执行后置守卫nProgress.done()} else {next()// 到其他页面,放行}} else {// 没有tokenif (whiteList.includes(to.path)) {next()} else {next('/login') // 中转到登录页nProgress.done()}}
})

总结

登录后获取用户资料

index.vue里有token的前提下调用action异步方法

  created() {// 调用actionthis.$store.dispatch('user/getUserInfo')}
}

store/user.js里存放action

1.先导入接口,并声明一个对象来存储用户基本资料状态

import { login,getUserInfo } from '@/api/user'
// 用来存放数据
const state = {token: getToken(),// 调用加括号,从缓存中读取初始值userInfo:{}//声明一个对象来存储用户基本资料状态
}

2.利用mutations修改userInfo的值

// 用来修改数据,要修改state里的数据,必须通过mutations
const mutations = {setToken(state, token) {state.token = token// 同步到缓存setToken(token)},removeToken() {// 删除vuex的tokenstate.token = nullremoveToken()},setUserInfo(state,userInfo){state.userInfo = userInfo}
}

3.actions调用接口,获取数据并通过context提交给mutation

const actions = {// context上下文,传入参数async login(context, data) {console.log(data)// 点击调用登录接口,成功执行await后的内容const token = await login(data)// 提交mutations里的数据,调用context里的默认方法context.commit('setToken', token)},// actionasync getUserInfo(context) {// 获取接口信息const result = await getUserInfo()context.commit('setUserInfo', result)}
}

api/user.js里封装接口

export function getUserInfo() {return request({url: '/sys/profile'})
}

调整action位置

getter.js里封装userId

const getters = {sidebar: state => state.app.sidebar,device: state => state.app.device,token: state => state.user.token,userId: state => state.user.userInfo.userId,avatar: state => state.user.avatar,name: state => state.user.name
}
export default getters

permission.js

   if (!store.getters.userId) { await store.dispatch('user/getUserInfo') }next()// 到其他页面,放行}} else {// 没有tokenif (whiteList.includes(to.path)) {next()} else {next('/login') // 中转到登录页nProgress.done()}}

显示用户头像、名称

根据传过来的数据显示头像和名称

1.通过getters向外暴露用户头像和信息

const getters = {sidebar: state => state.app.sidebar,device: state => state.app.device,token: state => state.user.token,userId: state => state.user.userInfo.userId,avatar: state => state.user.userInfo.avatar, // 用户头像name: state => state.user.userInfo.name// 用户名称
}
export default getters

2.找组件

先引入

import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'export default {computed: {...mapGetters(['sidebar','avatar','name'])}

使用

    <!--头像--><img :src="avatar" class="user-avatar"><!--用户名称--><span>{{ name }}</span>

调整样式

 .avatar-wrapper {margin-top: 5px;position: relative;display: flex;align-items: center;.name{
margin-right: 10px;
font-size: 16px;}.el-icon-setting{
font-size: 20px;}

处理用户头像为空

1.v-if 和v-else

2.设置样式

 .username{width: 30px;height: 30px;line-height: 30px;align-items: center;background-color: aqua;color: #fff;border-radius: 50%;margin-right: 4px;}

3.当用户姓名为空时,使用可选链(需要升级版本)

处理token失效

store/user.js声明一个提出登录的actions

logout(context) {context.commit('removeToken')// 调用setUserInfo,传进去空对象,以清除用户信息context.commit('setUserInfo', {})}

request.js跳转

if (error.response.status === '401') {Message({ type: 'warning', message: 'token超时' })store.dispatch('user/logout')// 调用action退出登录// 主动跳转到登录页router.push('/login')return Promise.reject(error)}Message({ type: 'error', message: error.message })return Promise.reject(error)

退出登录

async logout() {this.$store.dispatch('user/logout')this.$router.push('/login')}

显示修改密码弹层

 <!--放置dialog--><!--.sync,可以接收子组件传过来的事情和值--><el-dialog width="500px" title="修改密码" :visible.sync="showDialog"><el-form /></el-dialog>

表单结构

   <el-dialog width="500px" title="修改密码" :visible.sync="showDialog"><!--放置表单--><el-form label-width="120px"><el-from-item label="旧密码"><el-input show-password size="small" /></el-from-item><el-from-item label="新密码"><el-input show-password size="small" /></el-from-item><el-from-item label="重置密码"><el-input show-password size="small" /></el-from-item><el-form-item><el-button type="primary" size="mini">确认</el-button><el-button size="mini">取消</el-button></el-form-item></el-form></el-dialog>

表单校验(prop与rules有关,v-model与数据绑定有关)

   <el-dialog width="500px" title="修改密码" :visible.sync="showDialog"><!--放置表单--><el-form ref="passForm" label-width="120px" :rules="rules" :model="passForm"><el-from-item label="旧密码" prop="oldPassword"><el-input v-model="passForm.oldPassword" show-password size="small" /></el-from-item><el-from-item label="新密码" prop="newPassword"><el-input v-model="passForm.newPassword" show-password size="small" /></el-from-item><el-from-item label="重置密码" prop="confirmPassword"><el-input v-model="passForm.confirmPassword" show-password size="small" /></el-from-item><el-form-item><el-button type="primary" size="mini">确认</el-button><el-button size="mini">取消</el-button></el-form-item></el-form></el-dialog>

变量准备(rules在data里)

data() {return {showDialog: false,passForm: {oldPassword: '',newPassword: '',confirmPassword: ''},rules: {oldPassword: [],newPassword: [],confirmPassword: []}}},

校验规则

判断两次密码是否相同:用了自定义校验,注:必须使用箭头函数,否则this不能指向组件实例

rules: {oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }], // 旧密码newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }, {trigger: 'blur',min: 6,max: 16,message: '新密码的长度为6-16位之间'}], // 新密码confirmPassword: [{ required: true, message: '重复密码不能为空', trigger: 'blur' }, {trigger: 'blur',validator: (rule, value, callback) => {// valueif (this.passForm.newPassword === value) {callback()} else {callback(new Error('重复密码和新密码输入不一致'))}}}] // 确认密码字段}}},

总结

确认按钮

先绑定事件,之后调用接口(传参时就多不就少,注意async)

 btnOk() {this.$refs.passForm.validator(async(isOk) => {if (isOk) {// 调用接口// 传收集来的值await updatePassword(this.passForm)// 成功后执行重置表单,不成功不用管this.$refs.passForm.resetFields()// 关闭弹层this.showDialog = false}})}

优化:

this.$refs.passForm.resetFields()

      // 关闭弹层

      this.showDialog = false

这两句代码与关闭按钮的一致,所以直接调用关闭按钮

btnOk() {this.$refs.passForm.validator(async(isOk) => {if (isOk) {// 调用接口// 传收集来的值await updatePassword(this.passForm)// 成功后执行重置表单,不成功不用管this.$refs.passForm.resetFields()// 关闭弹层// this.showDialog = false// this.$message.success('修改成功')this.btnCancel()}})}

总结

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

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

相关文章

idea配置hive

idea配置hive 今天才知道&#xff0c;idea居然可以配置hive&#xff0c;步骤如下: view -> Tool Windows -> Database Database出来了之后&#xff0c;直接配置即可

11 防火墙配置信息的认识

F1000-AK1242 防火墙配置 F1000-AK1242 防火墙的基本内容脚本 <F1000-AK1242>display current-configuration Arduino display current-configuration命令通常在网络设备的命令行界面&#xff08;CLI&#xff09;中使用&#xff0c;用于显示设备当前的配置信息。这包括…

SEQUENTIAL CONSISTENCY----SC

SC模型是最直观的memory consistency model; 什么是single core sequential? 真正的执行顺序&#xff0c;和PO的顺序&#xff0c;是相同的&#xff1b; 什么是multi core sequential consistent? the operations of each individual processor (core) appear in this seq…

Python深度学习基于Tensorflow(1)Numpy基础

文章目录 数据转换和数据生成存取数据数据变形和合并算数计算广播机制使用Numpy实现回归实例 numpy的重要性不言而喻&#xff0c;一般不涉及到GPU/TPU计算&#xff0c;都是用numpy&#xff0c;常见的np就是这个玩意。其特点就是快&#xff01;其实如果不涉及到深度学习&#xf…

【DevOps】Elasticsearch为什么需要大内存,怎么优化?

目录 一、Elasticsearch为什么需要大内存 1. 索引和搜索的高效执行 2. 缓存机制 3. 聚合操作 4. 堆内存用于 JVM 操作 5. 分片管理 6. 数据复制与高可用 7. 数据模型的灵活性 如何优化内存使用 二、优化分片减少内存占用 1. 每个分片都有独立的资源消耗 2. JVM 堆内…

HTTP常见面试题(二)

3.1 HTTP 常见面试题 HTTP特性 HTTP 常见到版本有 HTTP/1.1&#xff0c;HTTP/2.0&#xff0c;HTTP/3.0&#xff0c;不同版本的 HTTP 特性是不一样的。 HTTP/1.1 的优点有哪些&#xff1f; HTTP 最突出的优点是「简单、灵活和易于扩展、应用广泛和跨平台」。 1. 简单 HTTP…

JavaWeb_请求响应_简单参数实体参数

一、SpringBoot方式接收携带简单参数的请求 简单参数&#xff1a;参数名与形参变量名相同&#xff0c;定义形参即可接收参数。并且在接收过程中&#xff0c;会进行自动的类型转换。 启动应用程序后&#xff0c;在postman中进行测试&#xff1a; 请求成功&#xff0c;响应回了O…

需要几步申请免费SSL证书,实现网站HTTPS访问

SSL证书是一种用于在网络中提供加密通信的数字证书。它有助于保护网站数据的完整性和隐私性&#xff0c;并通过在浏览器地址栏显示“https”和绿色锁图标来增强用户信任。许多证书颁发机构&#xff08;CA&#xff09;提供免费的SSL证书&#xff0c;以鼓励更广泛的网络安全使用。…

hal_stm32_RTC函数

1设置当前时间&#xff1a; 调用 HAL_RTC_SetTime 来设置小时、分钟、秒和亚秒。 调用 HAL_RTC_SetDate 来设置年、月、日和星期。 HAL_StatusTypeDef HAL_RTC_SetTime(RTC_HandleTypeDef *hrtc, RTC_TimeTypeDef *sTime, uint32_t Format); HAL_StatusTypeDef HAL_RTC_SetDat…

一步成像:Hyper-SD在图像合成中的创新与应用

一、摘要&#xff1a; 论文&#xff1a;https://arxiv.org/pdf/2404.13686 代码&#xff1a;https://huggingface.co/ByteDance/Hyper-SD 在生成人工智能领域&#xff0c;扩散模型&#xff08;Diffusion Models, DMs&#xff09;因其出色的图像生成质量而备受关注&#xff0c;但…

itext5.5.13 PDF预览权限问题

PdfUtils.htFile.createNewFile&#xff08;&#xff09; createNewFile 创建文件错误错误原因方式一方式二实例代码-生成PDF表格数据 createNewFile 创建文件错误 ht getResourceBasePath() "\\templates\\ht.pdf"; htFile new File(ht);代码含义是创建源文件路…

【大学物理】双语笔记

7.5 angular momentu(角动量)_哔哩哔哩_bilibili 6.4Energy in Rotation Motion 有质量有速度的物体有动能&#xff0c;是不是很有道理 international system&#xff08;from French systeme international&#xff0c;acronym&#xff0c;SI&#xff09;of ineria kg*m^2 转…

Google Earth Engine——删除和复制指定ASSETS中的文件信息(JavaScript 和python版本)

如果你和我一样,有大量资产上传到 Earth Engine。随着上传的资产越来越多,管理这些数据变得相当繁琐。Earth Engine 提供了一个便捷的命令行工具,可以帮助进行资产管理。虽然命令行工具非常有用,但在涉及批量数据管理任务时,它就显得力不从心了。 如果你想重新命名一个图…

上位机图像处理和嵌入式模块部署(树莓派4b和mcu的分工与配合)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 树莓派4b从广义上来说&#xff0c;它本身就是一个mini小电脑。我们需要什么软件&#xff0c;就可以apt install去下载即可。这和之前嵌入式linux开…

8G显存玩转AI换衣IDM-VTON(支持MAC、WIN)

最近AI换衣项目IDM-VTON挺火哈&#xff0c;我也火速体验了一把。效果也是很不错&#xff0c;相对OOTDiffusion的换衣效果提升了不少。 那部署的时候遇到比较大的问题是高显存占用&#xff01;太吃配置了&#xff01;24G的显卡占用了18G左右。于是花了点时间改成 使用了低精度模…

Python图形界面(GUI)Tkinter笔记(二):标签Label的基本应用

Label()方法用于在根窗口(根窗口可以想象成一个容器,一个画布,一个电路板;而标签Label()等等这些方法也叫控件或元件或组件,它们可以想象成装进容器的物品,或是想象成画在画布上的图形,或是想象成焊接在电路板上的电子元件)内建立“文字”或“图像”标签。 其余笔记:…

Wireshark Lua插件开发实战:应对TCP粘包问题

0. 概述 Wireshark提供了tcp_dissect_pdus()函数&#xff0c;可以帮助用户处理TCP粘包问题 1. 粘包问题的基本原理 TCP粘包问题本质上是数据包拼接和拆分的问题。当多个应用层数据包被封装成同一个TCP段时&#xff0c;就发生了粘包现象。在解析时&#xff0c;我们需要将粘在…

【linux kernel】杂项(misc)设备驱动总结

文章目录 一、杂项设备简介二、杂项设备API1、注册杂项设备2、注销杂项设备3、杂项设备模块助手函数 三、杂项设备初始化四、杂项设备示例五、杂项设备和字符设备 &#x1f449;相关文件&#xff1a; drivers/char/misc.cinclude/linux/miscdevice.h 一、杂项设备简介 Linux …

吴恩达2022机器学习专项课程C2(高级学习算法)W1(神经网络):2.5 更复杂的神经网络

目录 示例填写第三层的层数1.问题2.答案 公式&#xff1a;计算任意层的激活值激活函数 示例 层数有4层&#xff0c;不包括输入层。 填写第三层的层数 1.问题 你能把第二个神经元的上标和下标填写出来吗&#xff1f; 2.答案 根据公式g(wxb)&#xff0c;这里的x对应的是上…

Nacos支持哪些集群部署模式?

Nacos集群部署模式详解 在微服务架构中&#xff0c;服务注册与发现、配置管理以及服务治理是确保系统稳定、高效运行的关键环节。Nacos作为阿里巴巴开源的一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台&#xff0c;为微服务架构提供了强大的支持。 一、Na…