# web69

**Repository Path**: silence1224/web69

## Basic Information

- **Project Name**: web69
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2021-12-30
- **Last Updated**: 2022-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2021-12-30 08:49:01
 * @LastEditors: voanit
 * @LastEditTime: 2022-01-05 09:03:10
-->
# 所有课堂上相关的代码全部都在仓库   silence1224/web69
# 笔记：silence1224/big-hr

# 课程安排：12天
+ 组织架构
+ 文件导入导出
+ 权限管理 【重点】
+ 树形组件使用
+ 。。。。
  
特别是课程前面3天, 【我是谁 我在哪】

要求：
+ 项目不允许出现文件名是中文=====
+ 创建一个账号：写博客【】  所有人


关联远程仓库地址步骤说明：
+ 在web69中：git  init
+ git  add   . 
+ git  commit  -m   '建议大家把提交日志说明写详细一点'
+ 本地和远程仓库关联起来：git  remote add  origin   仓库地址    [我刚刚是cv的]
+ 推送到远程仓库中：git  push  -u  origin  master  代码就提交到远程仓库中了

配置github镜像源：github.com==>hub.fastgit.org
直接以vscode的形式查看项目目录代码：https://github1s.com/PanJiaChen/vue-admin-template
====添加了1s =>类似vscode打开项目但是只能读不能写

+ native====作用：如果给组件绑定某一个事件，无法生效，这时需要添加修饰符native，添加之后就相当于把这个事件绑定给组件里的dom元素身上了
###  拦截器
  + 请求拦截：只要发送请求之前先拦截在发请求
  + 路由拦截：只要路由值[path]发生改变就会触发这个钩子函数



### 人资第一天任务安排
+ 熟悉sidebarLogo和navBar如何显示logo和控制头部导航固定
+ 熟悉permission.js 主要熟悉路由拦截
+ 熟悉请求拦截+axios封装
+ 熟悉login登录流程：请求地址是如何拼接的+请求是如何发送的

# day02 
### 今日知识点：
+ token的存储处理
+ 解决跨域
+ 完成登录页面功能

渐变的语法：background: linear-gradient(方向, 颜色1, 颜色2，。。。。。);
PS: background: linear-gradient(to right, black, red);

## 跨域：
+ 什么情况下会产生跨域？ 不满足同源策略[域名+协议+端口]
+ http:默认端口是:80
+ https:默认端口是:443
解决跨域有哪些方法：
+ jsonp
  + jsonp跟ajax没有关系
  + 实现的原理：动态创建的script
+ 解决方式：jsonp[前端和后端一起解决]+cors[后端解决]+
    + 正向代理Proxy[前端解决，注意点：只适用于开发版本地开发环境]
    + 反向nginx[后盾解决]
+ 产生跨域==请求到底有没有发送？
  + 请求有发送,数据也有返回，只是被浏览器拦截了，导致前端获取不到数据，
  + 解决方式：不经过浏览器，直接服务器和服务器发送请求，服务器和服务器之间请求是不存下跨域的

## proxy赔礼服务器如何配置步骤说明：
+ 配置代理服务器 vue.config.js
  ```
  proxy: {
      //  使用代理服务器
      '/api': {
        //  只要遇到请求地址中有api的就会进来
        /* 
         代理服务器：http://localhost:8080，
         后端服务器：http://ihrm-java.itheima.net
         */
        target: 'http://ihrm-java.itheima.net', //  使用代理服务器想后端服务器发送请求，需要提供后端服务器的地址
      },
    },
  ```
+ 更改baseURL  设置的值直接获取的是环境变量中的api值=== baseURL: process.env.VUE_APP_BASE_API,
  [环境变量中设置：VUE_APP_BASE_API = '/api']   request.js
+ 删除接口文档中的请求地址的api值   api/user.js======= url: 'sys/login',
+ 需要重启


##  Content-Type
+ application
+ form-data
+ raw
+ libary
+ plain/html

##  登录相关的步骤分析
+ 点击登录按钮  login.vue
  + 封装登录请求api函数   api/user.js
  + 登录成功后
    + 获取token存储到vuex中   =>store/modules/user.js
      + this.$store.commit('user/SETTOKEN',res.data)===login.vue
      + 需要将token持久化 使用cookie提供的api   setToken()====store/modules/user.js


今日总结：
+ mock 扩展
+ api函数的请求封装
+ 代理服务器
+ 响应数据的处理
+ token的存储以及持久化


# 产生跨域的条件:不满足同源策略
# 解决跨域：
  + jsonp[前端后端一起配合]，实现原理：动态script
  + cors[后端]
  + 代理服务器  proxy
+ 产生跨域请求到底有没有发送：请求有发送，然后后端数据也反悔了，只不过数据被浏览器拦截了，
+ 解决方案：直接避开浏览器，利用服务器和服务器之间是可以发送请求没有跨域的


# 今日内容
+ 路由拦截
+ 完成左侧和头部效果的布局以及展示
+ token过期处理

192.168.91.86:3000


<!-- 公司面试：
hr:vue[12k]+react[15K] 技术选型
笔试：算法[大厂]
技术面：1-3人轮流来
技术2面

直接谈薪资 -->

<!--
最大的感受：基础不是最差，两级分化 中间
 -->

# day04
今天任务安排
+ 解决token过期
+ 展示用户信息  自定义指令
+ 修饰符的使用：@input.stop=""   v-model.number=''   trim    lazy


router
```
{
  path: '/permissions',
  component: Layout,
  children: [
    {
      path: '', // 作为默认渲染路由
      name: 'permissions',
      component: () => import('@/views/permissions/permissions.vue'),
      meta: { title: '权限管理', icon: 'lock' },
    },
  ],
}
```
如果二级没有写/,需要跟一级拼接，如果二级写了/ 那就跟一级path没有关系

今日总结：
+ 用户信息数据展示+图片
+ 实现退出
+ 自定义指令   自定义指令
+ Vue.use   理解他是如何注册自定义指令以及如何注册组件的
+ token过期如何处理   重点
+ 理解静态路由和动态路由


# day05
今日知识点介绍
+ 修饰符===事件修饰符native+属性修饰符sync[重点]
+ 树形组件
+ 如何处理树形数据 [扩展：递归算法来解决树形数据]


<qq>123</qq>


<!-- + 原型网  axureshop
+ 软件产品网
+ 淘宝
+ 猪八戒
+ github
+ 码云
+ APP===应用商店 -->


# day06
+ 完成给员工分配角色
+ 完成公司信息
+ 实现添加员工 [单个添加+批量添加]===重点


总结：
+ 封装组件
+ 批量注册组件
+ 树形控件的显示和影藏+数据获取


Vue.directive()

Vue.use()

Vue.filter()

# Vue内置组件有哪些？7个
+ slot
+ component    <component :is="" />   动态组件+异步组件
+ keep-alive
+ router-link
+ router-view
+ transition
+ transition-group

# 动态组件 [component] + 异步组件
# () => import('@/views/approvals/approvals.vue')  和 $.ajax()  返回值是什么？
Promise