人力资源管理项目
准备工作
- 在文件资源管理器中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