商城项目登录功能实现(动图)

左手的ㄟ右手 2022-01-31 12:37 210阅读 0赞

## 导语 ##

去年上传了重构小米官网商城的首页，但是没有登录注册功能。不论是js原生方法实现，还是jq和vue等框架实现，个人认为是大同小异，思路是一样的。

在使用vue构建数字商城的项目中使用vue也实现了登录功能，点击登录跳转到登录页面是使用vue-router实现的，登录页面事使用html、css实现，登录验证功能使用表单、v-model和正则表达式实现。

先看实现的功能如下：  
![在这里插入图片描述][20190516171807313.gif]  
演示的有些快，可能看不太清楚，下面分步介绍。

## 1.登录跳转实现 ##

登录功能是单独写了一个登录组件。跳转功能是路由的跳转，即点击登录时链接到登录组件。

1.  首先在router.js文件中定义路由和组件，如下：
    
        import Vue from 'vue'
        import VueRouter from 'vue-router'
        import Layout from './components/layout'
        import IndexPage from './pages/index'
        import LoginForm from './pages/loginForm'
        
        Vue.use(VueRouter)
        // Vue.config.productionTip = false
        
        let router = new VueRouter({ 
        	mode: 'history',
        	routes: [
        		{ 
        			path: '/',
        			name: 'index',
        			component: IndexPage,
        			meta: { 
        				title: '首页'
        			}
        		},
        		{ 
        			path: '/login',
        			name: 'login',
        			component: LoginForm,
        			meta: { 
        				title: '登录'
        			}
        		},
        	]
        })
        
        
        
        /* eslint-disable no-new */
        new Vue({ 
          el: '#app',
          router,
          components: {  Layout },
          template: '<Layout/>'
        })
    
    注意：路由名称name和路由元信息meta最好也写，便于项目中使用时判断。
2.  在首页组件中使用router-link属性实现跳转  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]  
    此时点击首页的登录即可跳转到登录页面。  
    注意：组件单独抽离出来。  
    ![在这里插入图片描述][20190516174325261.png]  
    跳转后URL地址已变为http://localhost:8080/login。如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]

## 2.登录组件实现 ##

1.  登录框架实现html部分
    
    登录组件主要包含了登录页面布局，登录框部分内容，组件template 部分代码为：
    
        <template lang="html">
        	<div class="login-form">
        		<div class="loginIndex">
        			<div class="title">
        				<h1>欢迎您登录数字商城</h1>
        			</div>
        			<div class="login-box">
        				<p class="input_account">
        					用户名： <input v-model="usernameModel" id="username"type="text" placeholder="请输入您的用户名">
        				</p>
        				<span class="errorTip">{ {  userErrors.errorText }}</span>
        				<p class="input_account">
        					密码： <input v-model="passwordModel" id="pwd" type="password" placeholder="请输入您的密码">
        				</p>
        				<span class="errorTip">{ {  passwordErrors.errorText }}</span>
        				<div class="login-mode">
        					<span class="phoneMode">手机登录</span>
        					<span class="lostPwd">忘记密码</span>
        					<span class="reg">免费注册</span>
        				</div>
        				<p class="loginBtn" @click="onLogin">
        					<input type="submit" value="登录" >
        				</p>
        				<p class="loginTip">{ {  errorText }}</p>
        			</div>
        			
        		</div>
        	</div>
        </template>
    
    绑定onLogin方法，当点击登录时触发。  
    上面代码就实现了登录的静态页，如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]
2.  登录验证部分
    
    登录验证部分主要使用vue的computed计算属性实现，html部分用户名和密码输入框通过v-model指令分别绑定计算属性usernameModel和passwordModel，当输入框中内容发生变化时，usernameModel和passwordModel也会随之变化。
    
    代码如下：
    
        export default { 
            	data(){ 
            		//初始化
            		return { 
            			usernameModel: "",
            			passwordModel: "",
            			errorText: ""
            		}
            	},
            	// 声明一个计算属性userErrors,当usernameModel改变时，userErrors也会更新
            	computed:{ 
            		userErrors(){ 
            			//声明errorText变量记录错误信息，status变量记录用户输入状态是否正确
            			let errorText,status
            			// 使用正则test方法验证用户用户名输入
            			if(!/@/g.test(this.usernameModel)){ 
            				status = false
            				errorText = '用户名需包含@符号'
            			}else{ 
            				status = true
            				errorText = ''
            			}
            			//设置flag，检测是否是第一次进入计算属性，解决用户未输入时就提示错误的问题
            			if(!this.userFlag){ 
            				errorText='',
            				this.userFlag = true
            			}
            			return{ 
            				status,
            				errorText
            			}
            		},
            		passwordErrors(){ 
            			let errorText,status
            			// 使用正则test方法验证用户密码输入
            			// 正则字符串起始标志^和结束标志$要加上，否则验证不准确
            			if(!/^\w{1,8}$/g.test(this.passwordModel)){ 
            				status = false
            				errorText = '密码需1-8位字符'
            			}else{ 
            				status = true
            				errorText = ''
            			}
            			//设置flag，检测是否是第一次进入计算属性，解决用户未输入时就提示错误的问题
            			if(!this.pwdFlag){ 
            				errorText=''
            				this.pwdFlag = true
            			}
            			return{ 
            				status,
            				errorText
            			}
            		}
            	},
            	methods: { 
            		//点击登录时触发此方法
            		onLogin() { 
            			//用户名和密码输入有一个不正确即输出'用户名或密码不正确'提示
            			if(!this.userErrors.status||!this.passwordErrors.status){ 
            				this.errorText = '用户名或密码不正确'
            			}
            			//用户名和密码都输入正确时提示登录成功
            			else{ 
            				this.errorText = '成功登陆'
            			}
            		}
            	}
          }
    
    上述代码即实现了简单的验证功能，如果有其他条件还可以再添加。效果如下：  
    ![在这里插入图片描述][20190516190530437.png]
3.  样式部分  
    样式部分可以根据自己喜欢的布局和样式进行调整。

至此就实现了登录功能，注册跳转及注册页的实现也与登录类似，修改注册的条件即可。

本项目源码：[vue商城项目源码][vue]

## 每天进步一点点、充实一点点、快乐一点点、加油！！！ ##

[20190516171807313.gif]: /images/20220131/dd20a1639e7a408dbbf4462d62c3da2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20220131/dd27d1d6a5d444c886375a2659e62925.png
[20190516174325261.png]: /images/20220131/8864feb209924758b9fd7acd7e4cd4e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: /images/20220131/5f578c3f6a564a93b626f798c3dc94ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]: /images/20220131/750165e6b19c43de80bf112ab7c8932e.png
[20190516190530437.png]: /images/20220131/dc1571009f774dd0908add5200258977.png
[vue]: https://github.com/wnn0809/frontProjects