2023.7.13-人力资源后台管理系统_人力资源系统可安装使用csdn-CSDN博客

本文链接：https://blog.csdn.net/weixin_65590235/article/details/131694665

人力资源管理项目

在这里插入图片描述

准备工作

在文件资源管理器中shift+右键=>Powershell输入 git clone git@gitee.com:panjiachen/vue-admin-template.git hm-hr
自动生成克隆文件夹在本地

在这里插入图片描述

├── src                        # 源代码目录
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件

将package.json中手动修改版本号 “core-js”: “3.6.5”=> “core-js”: “3.25.5”

或者命令 npm i core-js@3.25.5

npm i
npm run dev
删除main.js中的 mock
全部删除
部分删除
部分删除
部分删除
重启项目 npm run serve 无报错
初始化仓库=>删除文件中的 .git(没有显示隐藏项目)
初始化仓库=>完成项目的初始化

准备素材

素材
svg矢量文件,设置矢量图标, (电子电路领域) ,显示图标=>login页面可以看到效果图标

<svg-icon icon-class="password" />
      <svg-icon icon-class="bug" />
      <svg-icon icon-class="chart" />
      <svg-icon icon-class="404" />

在这里插入图片描述
查找svg-coin文件

svg组件

svg组件
loader : 加载器=>处理其他文件(svg)的

结构梳理

在这里插入图片描述

基础设置settings.js和导航守卫permission.js

settings.js导出网站基础配置，包括: 网站标题、固定header、显示logo
logopermission.js(权限)，主要负责路由导航守卫

//settings.js
module.exports = {
   

  title: 'Vue Admin Template',

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: true,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: true
}

在这里插入图片描述

完成了user.js的配置

在这里插入图片描述

写登录模块

实现登录表单验证=>element-ui

手动校验=>validate方法=>ref拿到表单实例$refs
自动校验

跨域:协议,域名,端口号任意一个不一样就会发生跨域

在这里插入图片描述

协议:http<==>https
域名:localhost<==>heimahr.itheima.net
端口号: 9528<==>443
http协议默认端口号80(可省略)
https默认端口443(可省略)

在这里插入图片描述
post会发生两次请求

预检请求（Preflight Request）是在进行跨域资源共享（Cross-Origin Resource Sharing，CORS）时，浏览器发送的一种额外的HTTP OPTIONS请求。它用于向服务器请求权限信息，以确定实际请求是否安全。
option预检:是否能发出请求(浏览器主动发起预检请求,跟后端没有关系)
get,post是简单请求不需要预检(复杂请求才会预检),发预检请求的都是options
预检是有时间效的,这一次预检在多久时间内的会有效,浏览器会根据失效时间来判断这次还需不需要预检

在这里插入图片描述

预检请求是一个OPTIONS请求
服务器收到预检请求后，会检查请求头中的Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段，然后根据这些信息来判断是否允许实际请求。
服务器通过响应头中的Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers字段来告诉浏览器是否允许跨域请求。
预检请求的目的是为了在实际请求被发送之前，确保服务器会对跨域请求做出适当的响应。这样可以防止恶意网站对其他网站进行跨域攻击，保护用户和服务器的安全。
预检请求是CORS机制的一部分，用于实现跨域资源共享。
跨域是浏览器行为,没有浏览器就不会发生跨域

当服务器允许跨域请求时，在响应头中会包含以下字段和值：

Access-Control-Allow-Origin: 指定允许访问该资源的源站。可以是具体的域名，也可以是通配符"*"，表示允许任意域名的访问。
Access-Control-Allow-Methods: 指定允许的HTTP方法。例如，GET、POST、PUT等。这个字段通常是一个逗号分隔的字符串，列出允许的方法。
Access-Control-Allow-Headers: 指定允许的自定义请求头字段。这个字段通常是一个逗号分隔的字符串，列出允许的自定义请求头。
Access-Control-Allow-Credentials: 指定是否允许发送跨域请求时携带cookie等凭据。它的值可以是true或false。
Access-Control-Max-Age: 指定预检请求的有效期，单位为秒。在有效期内，可以复用之前的预检结果，在浏览器不再发起预检请求。

这些字段和值告诉浏览器允许指定的源站、HTTP方法、自定义请求头和凭据进行跨域请求。浏览器在收到这些响应头后，会判断是否符合跨域规则，并决定是否允许实际请求的发送。这种方式通过限制允许跨域请求的源站、方法和请求头的方式，确保跨域请求的安全性。

服务器和服务器之间会不会受跨域影响？为什么？

服务器和服务器之间不会受跨域影响。

跨域请求的概念是指在浏览器中，由JavaScript发起的跨源（不同源的）HTTP请求。
跨域请求受到同源策略（Same Origin Policy）的限制，它是一种浏览器安全机制，用于保护用户数据和减少安全风险。
然而，当服务器与服务器之间进行通信时，而不是通过浏览器作为中介，跨域问题就不存在了。
跨域问题主要针对浏览器环境中的跨源请求，用于保护用户的隐私和安全。

解决开发时的跨域

在这里插入图片描述

所有发往/api的请求(包含/api的请求)==>全部转发到target指定的地址中去
http://localhost:9528/api/sys/login==>https://heimahritheimanet/api/sys/login

day2

复习

请求拦截器: 请求发出去之前最后一次加工 (token注入)
响应拦截器 :在发送请求后，接收到服务器返回的响应之前，对响应进行拦截和处理的功能。

在人资项目中,错误的统一处理,就是给用户提示错误信息

浏览器如何知道某条资源的是什么类型的?

响应报文Response Headers里面包含Content-Type
服务器返回来的Content-Type

axios

在这里插入图片描述

看请求==> 点开network , headers,preview,payload都要看

get请求没有payload,放在URL中
其他请求放在body中

status=200段,不代表接口的调用逻辑(登录业务)一定是成功的,有可能用户名是错误
status不是200段,代表接口的调用逻辑(登录业务)一定是失败的

//utils/request.js
// 响应拦截器
// 在人资项目中，错误的统一处理，就是给用户提示错误信息
service.interceptors.response.use((response) => {
   
  // 请求成功的回调:http的状态码就位2XX
  const {
    data, message, success } = response.data // 默认json格式
  if (success) {
   
    // 调用成功,业务也成功
    return data
  }
  // 调用成功,业务失败
  this.$Message({
    type: 'error', message })
  return Promise.reject(new Error(message))
}, async(error) => {
   
  // http状态码不为200段的情况
  // error.message
  this.$Message({
    type: 'error', message: error.message })
  return Promise.reject(error)
})

区分环境

开发环境

.env.development中设置开发环境变量默认 NODE_ENV 值为development

生产环境

.env.production中设置生产环境变量默认 NODE_ENV 值为 production
使用process.env.属性的方式获取
自定义环境变量:必须以VUE_APP_开头

打包命令 npm run build:prod

npm run dev / npm run serve=>开发环境
npm run build / npm run build:prod=>生产环境
在开发环境,填入用户名,生产环境为空
主页权限验证

登录流程

登录按钮
表单校验
调接口,拿token(异步修改state中的数据=>actions中实现=>必有mutations),跳转页面

获取用户资料在Vuex中共享

登录之后获取当前用户的资料
获取的用户资料在Vuex中共享
在这里插入图片描述

函数名使用小驼峰命名

获取资料action的调用位置
有token的位置再获取资料

charAt表示选择第几个字符

在这里插入图片描述

修饰符

trim=>去掉空格
native:原生
自定义事件不支持原生事件,加上.native就支持原生事件了

<el-dropdown-item divided @click.native="logout">
            <span style="display:block;">登 出</span>
</el-dropdown-item>

处理token过期

失效的token调接口=>401

补充

在这里插入图片描述

结论1: 定义在data中的数据，才是响应式数据
结论2: 动态添加到响应式对象上的新属性，不是响应式
结论3:要想让态添加的属性也是响应式的话，需要使用$set 方法

在这里插入图片描述

在页面初始化的过程中，通常会有一个生命周期钩子函数或方法，比如created被调用的时刻就是在组件实例被创建后，但是在DOM渲染之前。
如果在created钩子函数中没有进行相关数据的初始化或数据绑定操作，那么在此之前页面是没有内容显示的，因为此时页面的渲染还没有开始

0714作业：回答下面的问题：

重点：动态添加到组件上的数据为什么不能实现视图更新？

因为不是绑定在data上的,只有绑定在data上的数据才是响应式数据
动态添加在响应式对象上的新属性,不是响应式的

重点：动态添加到组件数据对象上的新属性，是不是响应式？

不是

重点：如果要给组件的数据对象上添加一个具有响应式能力的新属性，应该怎么办？

需要使用$set 方法

重点：登出逻辑是什么？精髓一句话

从哪来,回哪去,怎么来的,怎样回去
清除用户的身份认证信息和相关状态，使其无法再访问需要登录才能进行的操作或页面。

重点：获取用户资料最合理的时机是什么时候？

登录之后,跳转到首页之前

重点：环境变量起到什么作用，如何读取环境变量的值，如何判断当前所处的环境？

环境变量可以用于存储不同环境下的配置信息
可以通过环境变量来区分程序运行在开发环境或生产环境中
.env.development中设置开发环境变量默认 NODE_ENV 值为development
.env.production中设置生产环境变量默认 NODE_ENV 值为 production
可以使用 process.env 来访问环境变量

重点：如何自定义环境变量？举一个自定义环境变量应用的例子；

自定义环境变量:必须以VUE_APP_开头

VUE_APP_BASE_API = '/dev-api'
VUE_APP_VERSION = '1.0.3'

VUE_APP_MOBILE= '13800000002'
VUE_APP_PASSWORD = 'hm#qd@23!'

重点：如何解决跨域问题（开发环境跨域）？

proxy
所有发往/api的请求(包含/api的请求)==>全部转发到target指定的地址中去

重点：什么是同源策略？web中的哪些操作会受到同源策略的影响？

两个页面地址的协议,域名,端口号一直就是同源,否则就是跨域
当web页面使用多个元素或者打开其他浏览器窗口的时候，这一策略就会起作用

day3

修饰符

.prevent阻止默认行为
一般用于原生HTML标签
@click.prevent="updatePassworda标签的默认跳转
.native 表示给vue的自定义组件添加原生事件
.sync支持子组件修改父组件的值

修改密码的弹框

绑定数据
绑定规则
给绑定规则:

1.定义规则
2.给 el-form 绑定 :model 和 :rules
3.给 el-form-item 设置 prop

封装组件

封装组件本质做什么

封装组件的目的 :是为了抽离独立的功能
封装组件,本质上可以理解为封装函数

封装函数的时候,要确认什么

函数是干啥用的

组件的功能

函数名

组件名

入参

自定义属性=>props

出参

函数的返回值=>给到父组件(父组件接受子组件的值=>子组件给父组件传值)=>自定义事件=>$emit

图片加载失败=>触发 οnerrοr=" "

图片加载成功=>触发 οnlοad=" "
图片加载失败=>触发 οnerrοr=" "

如何知道img图片加载失败
给img绑定一个事件@error=“onLoadError”

抽离组件的报错

在这里插入图片描述
不能直接在子组件中修改父组件中的值
.sync支持子组件修改父组件的值

抽离组件=>3种方法

在这里插入图片描述

修改密码组件优化，使用.sync简化双向数据传递

.sync语法糖原理

.sync在vue3中原理就是 :属性+@update属性
v-model原理就是 :value +@input(属性绑定+自定义事件)

完成修改密码组件抽离,使用props和自定义事件实现组件的显示和隐藏

第一种写法抽离组件

//父组件Navbar.vue
    <ChangePassword :show-dialog="showPassDialog" @updateShowDialog="updatePassDialog" />

//子组件ChangePassword/index.vue
  <el