20200806 学习笔记

2020/08/06 学习笔记

什么时候使用cookie和session

在前端与服务器端不存在跨域的问题时可以使用cookie和session来记录登陆状态

什么时候使用token

当前端与服务器端存在跨域的问题时

token原理分析

登陆界面输入用户名和密码进行登陆，服务器验证通过后生成该用户的token并返回（不同用户的token值不一样），客户端存储该token值，客户端后续所有请求都携带该token，服务器根据该Token来判断属于哪个用户，服务器验证该token是否存在来判断用户是否登陆过。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j55s1CW0-1596721852514)(file:///C:\Users\asus\AppData\Roaming\Tencent\Users\504708627\QQ\WinTemp\RichOle}5}5@_X[5S_GLEPI`K_ZLG.png)]

使用到的几个git命令

git status 查看当前工作区

git checkout -b 分支名字 创建一个分支并且转移到分支

git branch 查看目前所有分支

vue 首次踩坑记录

1.缩进必须是两个空格 要不会报错 在改完配置后要看自己有没有安装js-formate那个插件 如果有的话要修改里面的配置 不然保存时会缩进四个空格

2.最后一行必须是一个空行 要不还是会报错 同样修改js-formate的json文件 有一个是最后允许空行 变为true

ps: 算了这玩意破事太多了 这不行那不行 直接 在.eslintrc.js里注释掉 @vue/standard 或者

在项目根目录下增加vue.config.js文件。
内容如下：

// vue.config.js
module.exports = {
    lintOnSave: false
}

vue里面style

<style lang="less" scoped>

</style>

lang=less 说明支持Less写法

scoped是指style只在该组件内部生效

element ui 需要按需导入

用到哪个组件要现在element.js中先import导入 再Vue.use()

element ui 引入表单校验规则

为el-form绑定 ：rules 通过数据绑定指定一个数据

在data中定义这个数据 在这个数据里定义校验规则

在el-form-item通过prop引入不同的校验规则

使用axios的方法

//配置 axios
//导入 axios包
import axios from 'axios'
//将 axios挂载到vue原型对象上
Vue.prototype.$http = axios;
//设置请求根路径
axios.defaults.baseURL = `http://127.0.0.1:8888/api/private/v1/`;
this.$http.post('/login',{})

路由导航守卫控制访问权限

如果用户没有登录，不能访问/home,如果用户通过url地址直接访问，则强制跳转到登录页面

//挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作
router.beforeEach((to,from,next)=>{ 
  if(to.path === '/login')
    return next();
  
  //获取token
  const tokenStr = window.sessionStorage.getItem('token');

  if(!tokenStr)
    return next('/login');

  next();

})

ionStorage.getItem(‘token’);

if(!tokenStr)
return next(’/login’);

next();

})