宝哥软件园

vue登录页面甜饼干的使用及页面跳转代码

编辑:宝哥软件园 来源:互联网 时间:2021-08-21

1、大概流程

答:登录:前端使用生效对输入信息进行验证验证成功则成功跳转到用户信息页并存储甜饼干值

b、首页跳转用户信息页:判断甜饼干值甜饼干存在并不为空则跳转用户信息页,若为空则跳转登录页

c 、退出页:点击退出跳转首页并删除甜饼干值

2、目录介绍

cookie.js为公共方法,用于甜饼干的存储、获取及删除

login.vue :登录页

index.vue:首页

user.vue:用户信息页

myinfo.vue:退出页

3、文件内容

cookie.js

/*用出口把方法暴露出来*//*设置cookie */导出函数setCookie(c_name,value,expire){ var Date=new Date()Date。设置秒(日期。getseconds()过期)文档。cookie=c _ name '=' escape(value)';expires=' date。togtstring()//控制台。日志(文档。cookie)}/*获取cookie */导出函数getCookie(c _ name){ if(document。饼干。长度0){ let c _ start=document。饼干。如果(c _ start!=-1){ c _ start=c _ start c _ name。长度1让c _ end=文档。饼干。indexof(';',c _ start)if(c _ end==-1)c _ end=document。饼干。长度返回unescape(文档。饼干。子字符串(c _ start,c_end)) } }返回' ' }/*删除cookie */导出函数DelCooKie(c _ name){ SetCooKie(c _ name),-1)}b、login.vue

方法: { submit(){ SetCooKie(' username ',username,1000 * 60)axios。get(' http://172。16 .2 .43:8080/static/data/mt _ index。JSON ').然后((res)={ this .$router.push({ path: '/user ',query : { userid : $(' input[name=' username ']')).val()} });//这个。setuserid($(' input[name=' username ']').val());}) }}c、index.vue

div class=' to reader ' span class=' location fl '北京/span div class=' search-box ' a href=' input type=' text '/a/div span class=' mine ' @ click=' jampmin '我的/span/divjampmin(){ //获取甜饼干值var username=GetCookie(' username ');if(username==' ' | | username==' undefind '){ this .$路由器。push({ path : '/log in ' });}else{ this .$路由器。push({ path : '/user ' });} } d、myinfo.vue

p @ click=“注销()”class=“注销”退出/psignout(){ /*删除cookie*/delCookie('用户名');这个$路由器。push({ path : '/index ' });}总结

以上所述是小编给大家介绍的某视频剪辑软件登录页面甜饼干的使用及页面跳转代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

更多资讯
游戏推荐
更多+