1.人资项目 （登录页面）

人资项目 （登录页面）

1. 关于环境变量-端口配置

vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack

在vue.config.js 里设置 proxy

devServer: {

  proxy： {
     '/api' : {
          target: '目标服务器地址'
      }
  }
}

1.1 环境变量配置文件

1. 在一些特殊的配置文件中定义环境变量

文件名称	对应环境	说明
.env.development	开发环境	当运行npm run dev 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量
.env.production	生产环境	当运行npm run build:prod 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量
.env.staging	模拟生产环境	可以理解为production环境的镜像， 尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据)

1.2 定义环境变量-示例

1. key = value key表示环境变量的名称 value表示环境变量的值

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

2. 请注意，以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中，建议以它开头来定义

VUE_APP_NUM = 2000

3. 使用环境变量
   1. 定义好环境变量之后，项目启动之后，它会自动被集成到process.env这个属性中。我们只需要通过下面的方式使用即可

process.env.环境变量名

注意：修改服务的配置文件，想要生效的话，必须要重新启动服务

1.3 环境变量-配置不同的请求基地址

场景

在项目开发的不同阶段，很可能要请求不同的基地址，例如：

在开发阶段，所有ajax请求要发到地址a；

在上线之后，所有ajax请求要发到地址b

.env.devlopment

# 开发环境的基础地址
VUE_APP_BASE_API = 'http://ihrm-java.itheima.net/api'

.env.production

# 生产环境的基地址
VUE_APP_BASE_API = 'http://www.xxx.com/prod-api' 

2.关于跨域和解决跨域问题

1. 同源策略 （协议，域名，端口相同），当其中有一项不一样就是跨域
2. 跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型

3.解决跨域问题

1. JSONP的方发去发出请求，因为（jsonp不是ajax请求）
2. 后端解决
3. 代理转发

4.关于token的的处理和分析

1. 点击登录，后端返回token

2. 把token储存到 vuex里，后续需要到vuex里面去取

3. 准备vuex:state —> mutations

   1. 在组件中调用mutations

   2. 请求拦截器，获取token

   3. token持久化，然后保存到本地

作业

作业1

   //作业1  得到对象
    let arr = [{label:'男',value: 1}, {label:'女',value: 0}]
    let obj = arr.map((item)=>item.label)
    console.log(obj)
 //obj2 = {'1': '男', '0': '女'}

作业2

//作业2 ：得到数组
let arr = [{label:'男',value: 1}, {label:'女',value: 0}]
let arr2 = []
arr.forEach(element => {
  arr2.push(element.label)

});
console.log(arr,arr2)
// console.log(arr2)
// arr2 = ['男', '女']

作业3

let data = [
    {id:"01", name: "张大大", pid:"", job: "项目经理"},
    {id:"02", name: "小亮", pid:"01", job: "产品leader"},
    {id:"03", name: "小美", pid:"01", job: "UIleader"},
    {id:"04", name: "老马", pid:"01", job: "技术leader"},
    {id:"05", name: "老王", pid:"01", job: "测试leader"},
    {id:"06", name: "老李", pid:"01", job: "运维leader"},
    {id:"07", name: "小丽", pid:"02", job: "产品经理"},
    {id:"08", name: "大光", pid:"02", job: "产品经理"},
    {id:"09", name: "小高", pid:"03", job: "UI设计师"},
    {id:"10", name: "小刘", pid:"04", job: "前端工程师"},
    {id:"11", name: "小华", pid:"04", job: "后端工程师"},
    {id:"12", name: "小李", pid:"04", job: "后端工程师"},
    {id:"13", name: "小赵", pid:"05", job: "测试工程师"},
    {id:"14", name: "小强", pid:"05", job: "测试工程师"},
    {id:"15", name: "小涛", pid:"06", job: "运维工程师"}
    ]

// 问题1. 找出 与 小刘 处于统一领导下的同事 
let arr = []
function fn(data,name){
    data.forEach(item => {
          if(item.name === name){
              let pid = item.pid
             arr = data.filter(items => items.pid === pid)
          }  
    });
}
        fn(data,'小刘')
        console.log(arr)
//  [{id:"10", name: "小刘", pid:"04", job: "前端工程师"},
//  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
//  {id:"12", name: "小李", pid:"04", job: "后端工程师"}]


// 问题2. 找出 小亮 的所有下属 
let arry = []
function Fn(data,name){
    data.forEach(item=>{
        if(item.name === name){
            let uid = item.id
            arry = data.filter(items => items.pid === uid)
        }
    })
}
Fn(data, '小亮')
console.log(arry) 
// [{id:"07", name: "小丽", pid:"02", job: "产品经理"},
// {id:"08", name: "大光", pid:"02", job: "产品经理"}]

作业4

let obj = {label:'男',value: 1,age: 18}
    arr = []
    for(let i in obj){
        // let obj1 = {}
        // console.log(obj[i])
        // obj1[i] = obj[i]
        // console.log(obj1[i])
        arr.push(obj[i]);
    }
    console.log(arr)
//  console.log(arr)
 // arr = ['男', '1', '18'] // 所有的属性值取出来，保存在数组中

Gitee 仓库地址

git@gitee.com:jxyaicy/human-capital-projects.git