Day11 vue.js实现简单的登入功能

延续昨日
今天来把登入的功能搞定吧!
记得我们day7学到的东西吗?
:class="project ${project.status} px-10"
没错我们也是要用这样的形式去处理我们接到的值
重新看一下login.vue

一个绑的v-mode是useracoount
一个绑的是userpassword

我们day8测试能够接到值了 再来就是要处理这些值
所以我们将Login function改成这样
async login(){
let result = await axios.get("http://localhost:3000/users?id="+`${this.useraccount}`+"&password="+`${this.userpassword}`)
console.log(result)

而这个function 就是去找到users 资料表里面栏位id的值是{{useraccount}} 且users资料表里面password的值是{{userpassword}}符合这2件事的资料才会get到

EX:如果我function这样写let result = await axios.get("http://localhost:3000/users?id=sa&password=12345") 就是找到users资料表中id=sa且password=12345的资料

再来就是去网页测试看看啦~~

可以明显的看到输入正确帐密的data是有资料的输入错误帐密的data是没有资料的
再来去程序码设个条件让登入的人知道自己是否有登入成功吧!

再来测试一下

登入成功之後我希望网页会跳转到首页 并且会有登入者的资料 并记住是谁登入的 并且可以在navbar上面显示使用者的名字
要完成以上的事情首先要使用 local storage session cookie 其中一种来完成记住使用者这件事 那网站大多使用session 所以就用session就好!

SeesionStorage.setitem 设定user-info是result.data的第0笔资料 也就是我们刚刚测试看到的 至於什麽是json.stringify ?
我们的资料是存於jsonserve的资料库的并且使用json格式所以要先将json格式转换才可以使用
This.$router.push就是跳转到home页面
那接下来就来看看结果吧!

看起来成功接到session了
p.s.看seesion的方式右键检查点选上方的application其实我一开始也不知道要怎麽看session ==

接到session一切都好说了那明天我们就从运用这个seesion以及注册下手吧!
我们明天见!