失眠网 > vue 使用element组件实现用户的注册登录功能以及根据登录状态显示或隐藏状态栏的相关菜单

vue 使用element组件实现用户的注册登录功能以及根据登录状态显示或隐藏状态栏的相关菜单

时间：2020-09-05 13:14:23

我的qq 2038373094

效果如下

vue项目环境搭建篇

搭建vue项目{

1、nodejs

2、vue-cli脚手架

3、webpack打包

}

详细教程看 /qq_37591637/article/details/89944336

初级入门篇

对vue项目目录都不懂的人：VScode vue工程项目入门小白必看 /qq_37591637/article/details/90022267

第一步、你可以根据element组件官网/#/zh-CN/component/input，学会使用组件，如果组件都不会使用，复杂的就更不用提了

Vue 组件库Element入门教程之使用上传组件 /qq_37591637/article/details/89954080

第二步、一个html页面如何引入多个element ui组件 /qq_37591637/article/details/90037778

第三步、前后端交互 vue实战——vue中发送AJAX请求 /qq_37591637/article/details/90047745

项目篇

导航栏组件

<template><div id="myhead"><div class="line"></div><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">在线心理咨询平台</el-menu-item><el-menu-item index="2" >首页</el-menu-item><el-menu-item index="3" >测试</el-menu-item><el-menu-item index="4" >咨询</el-menu-item><el-submenu index="5" v-if="showlogin!=null"><template slot="title">{{showlogin}}</template><el-menu-item index="5-1">个人中心</el-menu-item><el-menu-item index="5-2" @click="exit">退出</el-menu-item></el-submenu><el-menu-item index="6" v-else><router-link to="/user">注册/登录</router-link></el-menu-item></el-menu></div></template><script>export default {data() {return {activeIndex: '1',showlogin:localStorage.getItem("username"),};},methods: {handleSelect(key, keyPath) {},exit(){//1.清除标记的localStorage.removeItem("username");localStorage.removeItem("identity");localStorage.removeItem("logo");//2.怎么同步呢？this.showlogin=null;}}}</script>

登录/注册组件

<template><div><Head/><div class="regedit"><div class="mylogo"><img src="../../img/logo.png"></div><el-tabs type="border-card"><el-tab-pane><span slot="label" class="titlte">注册</span><el-form:model="ruleForm"status-icon:rules="rls"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model.number="ruleForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">注册</el-button><el-button @click="resetForm('ruleForm')">重置</el-button><el-button plain @click="open1" id="rerror"></el-button></el-form-item></el-form></el-tab-pane><el-tab-pane ><span slot="label" class="titlte">登录</span><el-formstatus-icon:rules="rls"label-width="100px"class="demo-ruleForm"><el-form-item label="用户名" ><el-input type="text" v-model.number="ruleForm.username" id="uname" ></el-input></el-form-item><el-form-item label="密码"><el-input type="password" v-model.number="ruleForm.password" id="pass"></el-input></el-form-item><el-form-item><el-button type="primary" @click="login">登录</el-button><el-button @click="resetForm">重置</el-button><el-button plain @click="open1" id="lerror"></el-button></el-form-item></el-form></el-tab-pane></el-tabs></div></div></template><script>import Head from "../../components/common/Head";import axios from "axios";import Qs from "qs";import router from '../../router/router.js'export default {components: {Head},data() {var checkUser = (rule, value, callback) => {if (!value) {return callback(new Error("用户名不能为空"));} else {callback();}};var vapass = (rule, value, callback) => {if (value === "") {callback(new Error("请输入密码"));} else {if (this.ruleForm.checkPass !== "") {this.$refs.ruleForm.validateField("checkPass");}callback();}};var varepass = (rule, value, callback) => {if (value === "") {callback(new Error("请再次输入密码"));} else if (value !== this.ruleForm.password) {callback(new Error("两次输入密码不一致!"));} else {callback();}};return {ruleForm: {password: "",checkPass: "",username: ""},rls: {password: [{ validator: vapass, trigger: "blur" }],checkPass: [{ validator: varepass, trigger: "blur" }],username: [{ validator: checkUser, trigger: "blur" }]}};},methods: {submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {/*在这里进行跨域请求*/this.axios({method: "post",url: "/api/PsychoSys/regedit.action",data: Qs.stringify(this.ruleForm)}).then(function(res) {if (res.data == "fail") {//提示信息document.getElementById("rerror").click();//提示信息} else {//跳转到登录页面//跳转到登录页面}}).catch(function(err) {console.log(err);});/*在这里进行跨域请求*/} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},open1() {this.$notify.error({title: '错误',message: '用户名已存在，换一个试试吧'});},login(){//登录，把表单的数据传过来var uname=document.getElementById("uname").value;var pass=document.getElementById("pass").value;let data = {'username': uname,'password': pass}/*在这里进行跨域请求*/this.axios({method: "post",url: "/api/PsychoSys/login.action",data: Qs.stringify(data)}).then( (res) => {if (res.data == "fail") {//提示信息alert("用户名或密码输入不正确");//提示信息} else {//把用户名、登录身份、头像存储起来localStorage.setItem("identity","user");localStorage.setItem("username",uname);if(res.data==''||res.data==null){localStorage.setItem("logo","../../img/my.png");}else{localStorage.setItem("logo",res.data);}//跳转到首页this.$router.push('/');//跳转到首页}}).catch(function(err) {console.log(err);});/*在这里进行跨域请求*///登录，把表单的数据传过来}}};</script><style>.regedit {width: 50%;height: 40%;margin-left: 33%;}.titlte{font-size: 30px;}</style>

router.js

import Vue from 'vue'import Router from 'vue-router'import Head from '../components/common/Head' //头部导航栏import Zmd from '../components/home/Zmd' //走马观灯import hhome from '../components/home/home' //首页import user from '../page/user/user' //用户页面import Axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, Axios)Vue.use(Router)export default new Router({mode: 'history',routes: [{path: '/Head',name: 'Head',component: Head},{path: '/user',name: 'user',component: user},{path: '/Zmd',name: 'Zmd',component: Zmd},{path: '/',name: 'home',component: hhome}]})

这里涉及到跨域请求、路由跳转