美食杰 login的实现效果

美食杰 login的实现效果

一.说明：美食街点击登录

当我们面临制作登录和注册功能的实现时，我们需要先设计登录界面的布局和注册界面的布局，做到有完整的思路时才开始实现其功能效果会更好。

我们需要做个标题栏，登陆界面，实现登陆界面的功能代码块，注册界面，实现测试界面的功能模块即可完成。

要用到的主要技术栈如下：

vue-cli脚手架
vue-router路由
element组件库
vuex库
vscode编辑器

二.过程：登录注册过程

登录，注册界面布局：

我们需要设计想好美化登录，注册界面。

在登陆界面和注册界面：当我们在网页中点击登录时，跳转到登录注册界面，用户名，可以在前面加一下图片或者图标，在设置一下输入字符的长度，可以用正则或者elelment.ui官网中的组件中去查找。密码，可以去用正则去设置同时注意隐藏密码的字符。最后通过注册的信息去提交或者重置。
1.编写登录界面：

模拟验证码生成
填写用户名、密码、进行登录
实现"记住我"功能

index.js

<template><div class="login-page"><el-tabs v-model="activeName" type="card"><el-tab-pane label="登录" name="login"><login></login></el-tab-pane><el-tab-pane label="注册" name="second"><Register></Register></el-tab-pane></el-tabs></div>
</template>
<script>
import Login from './login'
import Register from './register'
export default {components: {Login, Register},data(){return {activeName: 'login',}}
}
</script>
<style lang="stylus">
.login-pagewidth 500pxbackground-color #fffmargin 0 autobox-shadow: 0 0 25px #cac6c6;border-radius: 10px;
</style>

login.vue

<template><div class="login-section"><!-- :rules="rules" --><el-formlabel-position="top"label-width="100px" class="demo-ruleForm":rules="rules":model="rulesForm"status-iconref="ruleForm"><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="submitForm('ruleForm')">提交</el-button><el-button>重置</el-button></el-form-item></el-form></div>
</template>
<script>
import {login} from '@/service/api';
//后端获取登录数据
export default {data() {return {//存数数据的对象rulesForm:{name: '',password: '',},rules:{name:[{required: true,message: '请输入用户名',trigger:'blur'},{min:1,max:5,message:"最小为3最大为5",trigger:'blur'}],password:[{required: true,message: '请输入用户名',trigger:'blur'},{min:3,max:5,message:"最小为3最大为5",trigger:'blur'}//设置字符长度，失去焦点触发]},};},methods: {submitForm(formName){this.$refs[formName].validate((valid)=>{if (valid) {//如果校检通过，在这里向后端发送用户名和密码login({name:this.rulesForm.name,password:this.rulesForm.password,}).then((data)=>{console.log(data);//看后端给的数据是判断1和0if (data.code === 0) {//登录成功localStorage.setItem('token',data.data.token);//用本地存储设置数据获取到的数据window.location.href='/';}if (data.code === 1) {this.$message.error(data.mes)}})}else{console.log("error submit!!");return false;}})}}
}
</script><style lang="stylus">
.login-sectionpadding 0px 20px
</style>

2.编写注册页面组件

需要实现多步骤表单填写
需要实现表单字段校验
模拟验证码发送及注册成功后跳转登录

register.vue

<template><div class="login-section"><!-- :rules="rules" --><el-form label-position="top" label-width="100px" class="demo-ruleForm":rules="rules":model="rulesForm"status-iconref="ruleForm"><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="submitForm('ruleForm')">提交</el-button><el-button>重置</el-button></el-form-item></el-form></div>
</template>
<script>
import {register} from '@/service/api';
export default {data() {return {//存数数据的对象rulesForm:{name: '',password: '',},rules:{//判断检验字符串长度，失去焦点时触发事件name:[{required: true,message: '请输入用户名',trigger:'blur'},{min:1,max:5,message:"最小为3最大为5",trigger:'blur'}],password:[{required: true,message: '请输入用户名',trigger:'blur'},{min:3,max:5,message:"最小为3最大为5",trigger:'blur'}]},};},methods: {submitForm(formName){this.$refs[formName].validate((valid)=>{if (valid) {//如果校检通过，在这里向后端发送用户名和密码register({name:this.rulesForm.name,password:this.rulesForm.password,}).then((data)=>{console.log(data);//根据后端数据判断1和0if (data.code === 0) {//注册成功localStorage.setItem('token',data.data.token);window.location.href='/';}if (data.code === 1) {this.$message.error(data.mes)}})}else{console.log("error submit!!");return false;}})}}}
</script><style lang="stylus">
.login-sectionpadding 0px 20px
</style>

3、路由设置

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import {userInfo}from '@/service/api.js'
import Home from '@/views/home/Home.vue'
import Store  from '@/store'
const Login=()=>import('@/views/user-login/index');
const router = new Router({mode:"history",routes:[{path:'/',name:"Home",title:"首页",component:Home},{path:'/login', name:"login",title:"登录页",component:Login,meta:{login: true},},// ...viewsRoute,{path:"*",name:"noFound",title:"未找到",redirect:{name:"home"}},
]
});
//路由守卫
router.beforeEach(async (to,from,next)=>{//验证登录/* 有些路由是需要登录的，判断状态1.没有登录：跳转到登录页2.登录：直接进入3.有些路由不需要登录，那就直接进入；ps：是否需要登录 --meta*/const token=localStorage.getItem('token');//获取login里的数据const isLogin=!!token;//两个感叹号转布尔值//进入路由的时候，向后端发送token，验证是否合法const data =await userInfo();Store.commit('chageUserInfo',data.data);//判断是否需要登录：如果meta中的为true那么需要登录if (to.matched.some(item=>item.meta.login)) {//需要登录console.log("需要登录")if (isLogin) {//已经登录但已经登陆就直接通过if (data.error === 400) {next({name:'login'});localStorage.removeItem('token');//移除本地存储return;}if (to.name=== 'login') {next({name:'home'})}else{next();}next();return;}if(!isLogin && to.name==='login') {//没有登陆，仍需要去登录页next();}if(!isLogin && to.name !=='login') {//没有登陆，去的也不是登录页next({name:"login"});}} else{next();}
})export default router;

4.vuex数据库

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state:{userInfo: {}},getters:{isLogin(state){return !!Object.keys(state.userInfo).length;}},mutations:{chageUserInfo(state, data){state.userInfo = data;}},actions:{}
})export default store;

5.npm安装elementUI

npm install element-ui -S #安装element-ui模块

在入口文件中引入：

import ElementUI from ‘element-ui’ //新添加1
import ‘element-ui/lib/theme-chalk/index.css’ //新添加2，避免后期打包样式不同，要放在import App from ‘./App’;之前

Vue.use(ElementUI) //新添加3
三.注意事项
1.axios请求是使用post请求还是使用get请求
axios是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests，与Vue配合使用非常好。

GET提交：注意数据是保存到json对象的params属性

post提交：注意数据是直接保存到json对象
2.axios.get提交没有问题，axios.post提交后台接收不到数据

因为POST提交的参数的格式是Request Payload，这样后台取不到数据的
四.总结

本文讲了美食杰制作登录和注册功能的实现，界面的布局介绍，如果您还有更好地理解，欢迎沟通
定位：分享 &知识点，有兴趣可以继续关注 vue.js  html 

————————————————
版权声明：本文为CSDN博主「YangHuan3」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：