项目的初始配置和部分代码 | 青训营笔记

76 阅读1分钟

进入公司必备技能

git的使用和登录注册模块开发

eslint校验工具关闭。

在根目录下的vue.config.js中暴露一个对象,配置项lintOnSave:false

在css中也可以使用@符号,用来引入文件

css中使用@符号.png

配置npm run serve后自动打开

在package.json文件下的”script“配置项目

截屏2023-05-09 19.33.19.png

src目录简写

截屏2023-05-09 19.34.31.png

scrollBehavios,vue路由进阶,滚动行为配置

截屏2023-05-09 19.59.21.png

写项目过程中

通常会给按钮添加事件,事件执行时:

  • 如果有路由跳转,使用this.route,想要获取路由信息使用this.route,想要获取路由信息 使用 this.router
  • 如果是向服务器发起请求,如果是使用vuex的话,使用this.$store.dispatch派发action

本地存储和会话存储

会话存储(sessionStorage),使用sessionStorage.getItem方法,传入需要的对象属性进行获取 注意:会话存储不能存储对象,所以想要存储对象的话需要使用JSON.stringify({{需要存储的对象}}) 存储使用的api是sessionStorage.setItem("{{属性名}}","{{value}}")。 ,在读取的时候使用getItem,转化成对象:JSON.parse。

token 的配置

直接将用户的用户名密码等关键信息存储在本地无疑是一种不安全的数据存储行为, 任何人都可以直接看到登陆详细信息,可能会遭遇到CSRF网络攻击,对账户安全无遗是一种致命的影响,因此token诞生了(对登录数据进行加密)

##流程 首先用户输入账号密码后,在服务器进行验证,如果无误的话,在服务器生成通过base64编码生成一个JWT Token(字符串),服务器把这个字符串传给客户端进行本地化存储,退出时删除这个字符串就可以, 前端在每次请求时将JWT Token放入HTTP请求头中的Authorization属性中。

路由跳转

  • 声明式导航 通常router-link
  • 编程式导航 通常是push或者replace。 在进行三级联动进行路由跳转的时候,选择采用编程式导航配合事件的委派,来完成此项目。 给点击事件绑定方法,内容写成:this.$router.push(name:"search",query:{{{query参数}}});