? ? ? ? 美食杰项目是本人所做过项目之一，对技术提升有极大帮助，因此分享出来和广大网友一起来学习进步。话不多说，先上个首页图?
? ? ? ?因为此项目不算很小，加上时间和精力的问题，本人将整个项目分为多个板块来进行分享，毕竟贪多嚼不烂嘛，而且更容易帮助读者整理哦。
? ? ? ?今日份分享的是登录和注册板块。
? ? ? ?登录大家应该在熟悉不过了，账号密码输入，就完事了，但是，朋友们啊，咱们今天不是用户，是一个开发者呀，所以我们得拿出自己的技术出来，来实现底层逻辑哟。
? ? ? ?所用技术栈：vue.js、vue-router、element-ui
? ? ? ?大致流程分为：先注册一个账号，登录这个账号。
? ? ? ?注册嘛，笔者确实没什么好说的，就是在符合表单验证规则的前提下，给后端发送数据呀，得让后端知道我的东西嘛，要不然肯定是登录不上去的，没啥说的，上代码
//这里我用了element-ui的框架
<template>
<div class="login-section">
<!-- :rules="rules" -->
<el-form
label-position="top" label-width="100px" class="demo-ruleForm"
:rules = 'rules'
:model = 'rulesForm'
ref='rulesForm'
>
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="rulesForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="rulesForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click='registerMsg'>提交</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</div>
</template>?
//点击提交之后的逻辑操作，就是简单的向后端发送数据
registerMsg(){
this.$refs.rulesForm.validate((valid)=>{
//valid 规则是否匹配成功 如果通过 向后端发送请求
if(valid){
register({
name : this.rulesForm.name ,
password : this.rulesForm.password
}).then(data=>{
console.log(data);
})
}
})
}? ? ? ? 到此，注册就完事了。
? ? ? ? 注册完就是登陆这个功能了，但是登录可不是简简单单的登个录就行了，因为登录在有些地方是不需要的呀，就比如说我就只是看看首页，你还非得让我登录，要不然就不给看，这不是纯NC嘛，所以我们得用一个导航守卫来判断我的登录哟。。
? ? ? ? 导航守卫我就不介绍什么了，相信大家应该都懂，那我直接上代码了
//导航守卫的逻辑
router.beforeEach((to,from,next)=>{
//读取登录状态
const token = localStorage.getItem('token')
//转换登录状态为布尔值
const isLogin = !!token
//判断是否需要守卫
if(to.matched.some(item=>item.meta.login)){
//判断是否登录
//已经登录
if(token){
next()
return
}
//未登录 但是就是要去登录
if (!isLogin && to.name == 'login'){
next()
}
//未登录 但不是要去登录 需要跳转到登录页
if(!isLogin && to.name !== 'login'){
next({path:'/login'})
}
}else{
next()
}? ? ? ? ? 这个东西一写上，登录问题就解决一大半了，接着就是登录的业务操作逻辑了，
? ? ? ? ? 登录的思路是啥呢，我笑笑，这不是跟注册一个样子嘛，连大致的代码都是一样的，请参考上面注册时候的代码段，但是，有点点不一样的哦，就是登陆之后我不知要给后台发，我还得判断我的业务逻辑是否符合常规的要求，要不然我不是白写了嘛，具体得判断我是否登陆成功，就是跟后台的数据进行对比，然后得判断是否符合导航守卫的要求，当然这一步已经写好了的，就只需要再判断一下后台就好了
? ? ?
//根据接口读取后端返回的数据就好了
//data 后端返回数据 判断发送数据
if(data.code == 0){
//成功跳转到首页
window.location.href= '/'
//保存到本地 导航守卫判断权限
localStorage.setItem('token',data.data.token)
}
if(data.code == 1){
//失败提示
this.$message.error(data.mes)
}登录功能到此完结。。。。?
? ? ? ? 这次的功能模块比较简单，在实现过程中并没有遇到什么太大的问题，大抵是与我先制定一个简单思路的有关吧。
? ? ? ?如果在学习的过程中能养成一个先思考再实现的思维，对工作是有极大帮助的，
? ? ? ??