1 Star 0 Fork 0

Yousa/project-static-sh

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
今日总结.txt 4.24 KB
一键复制 编辑 原始数据 按行查看 历史
Yousa 提交于 2022-09-01 00:50 . 完成今日任务
一、又是网课的一天
1.今天学习了如何使用VScode进行git的简化操作
在源代码管理模块中进行与昨天相关的一些git操作
直接在VScode里面操作确实方便简介了许多,只需要鼠标点点点就行了
2.早上完成了登陆注册页面的代码编写并进行了公共代码的提取
(1)注册界面
在使用老师给的静态模板代码中打开register的html进行代码的编写,
对原先的master分支创建一个新的develop分支,切换到这个分支进行代码的编写,
这样不会影响到原来的master主分支
首先获取到页面中id为myToast的元素,用bootstrap的toast.show()方法让轻提示显示在页面上,
之后用一个tip方法将轻提示封装起来,并传入一个参数,方便后面调用。
然后获取到页面上的注册按钮的,对其设置一个click点击事件,
用form-serialize提供的方法获取表单内部的数据,返回的是一个对象的形式,
{hash:true}作为第二个参数写在form,的后面
然后进行用户输入的判断,是否为空和长度是否符合,
这里使用data.username进行判断,data是使用serialize获取到的对象
username是根据标签的name属性通过serialize保存到data里面的,下面的password同理
如果data.username或者data.password为undefined时证明用户没有输入用户名或者密码,
这时候发送一个tip()提示用户用户名或者密码不能为空。
用trim()给对用户输入的用户名和密码去除两边多余的空格并用等号赋值给data.password和data.username
进行密码的长度判断是否大于6,按要求返回一个tip()提示。
都符合了之后就可以调用接口了
因为接口地址前面都是相同的,这里设置了一个基地址axios.defaults.baseURL
在注册成功之后会显示出注册成功的轻提示,设置一个延时器用location.href进行地址的转跳
因为有可能存在已经创建好了的用户名,所以这里最好使用try-catch的方法,
将所有可能报错的代码放在try里面,如果报错了进入到catch里面,
在catch里面用tip()给用户提示错误信息
因为每个页面都引入了common.js文件,所以可以将公共的tip方法和基地址部分抽取到common.js文件中去。
(2)登陆界面
登陆界面跟注册界面很像,唯一不同的就是跳转之后要将数据保存到本地存储中,
这里使用了localStorage.setItem进行键值对的保存,保存的最好是一个JSON格式的字符串
向服务器发送post请求之后将usertoken和username保存在本地缓存里,之后跳转页面
但是要求usertoken必须要有内容,否则直接返回login登陆界面,这个script最好写在页面的最开始部分
(3)在首页的用户中显示自己的名字
首先获取到存储用户名的标签,给标签设置innerHTML等于我们保存在本地的username的值,就是我们登陆的用户名
由于在其它页面也有类似的结构,可以提取这个方法到common.js文件中去。
(4)退出功能
获取到页面中的退出按钮,并为其设置click点击事件,
当用户点击这个按钮时会触发页面的跳转功能,直接跳转到登陆页面,
同时应该使用localStorage.remove()方法将保存在本地的username和usertoken删除掉
因为其它页面也有用到,所以将这个方法也提取到common.js文件中去,
但是并不是每个页面都有这个退出元素的,加一个&&判定是否存在再进行后面的逻辑
首先获取学生数据,用axios传递Authorization参数,参数的值就是我们之前保存在本地的usertoken的值,
这里使用localStorage.getItem()的方法获取到本地保存的值
(5)请求拦截器和响应拦截器
为了避免代码的冗余,我们学了请求拦截器和响应拦截器
请求拦截器能够在我们给服务器发送请求之前获取到所有请求然后对其进行修改或添加,
在本次案例中因为所有的学生数据都需要给请求头添加Authorization这个参数,
所以可以将这个参数添加到请求拦截器里面,直接 config.headers.Authorization=值就可以了
这样我们发送的请求如果需要设置这个请求头,就可以当做抽取部分写一遍就可以了
(6)每步操作都用git记录下来
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/yousa_hao/project-static-sh.git
git@gitee.com:yousa_hao/project-static-sh.git
yousa_hao
project-static-sh
project-static-sh
develop

搜索帮助