popush前端优化—钱珺

最新推荐文章于 2019-10-05 02:11:48 发布

原创最新推荐文章于 2019-10-05 02:11:48 发布 · 431 阅读

1 ·

CC 4.0 BY-SA版权

popush 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Popush平台中，通过注册后自动触发登录操作，实现用户无需手动输入即可完成登录流程的技术实现过程。文章包括了注册与登录功能的前端代码解析，以及通过socket通信实现的自动化流程设计。通过这种方式，不仅提高了用户体验，还展示了框架在简化代码和提升效率方面的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能：

popush注册后实现自动登录

实现思路：

阅读了popush的前端代码，主要是注册和登录的部分（login-view.js和register-view.js），经过简单的测试发现，它是通过这样处理登录和注册：前端利用socket.emit发送数据到后台，后台利用socket.on进行事件响应并处理相关数据。

注册函数：

</pre><pre name="code" class="javascript">	register: function () {  
	            var name = $('#register-inputName').val(),  
	            in_pw1 = $('#register-inputPassword'),  
	            in_pw2 = $('#register-confirmPassword');  
	            var pass = in_pw1.val();  
            var confirm = in_pw2.val();  
	            in_pw1.val('');  
	            in_pw2.val('');  
	            var id = '#register-message',  
	            str = '';  
	            if (!/^[A-Za-z0-9]*$/.test(name)) {  
	                str = 'name invalid';  
	            } else if (name.length < 6 || name.length > 20) {  
	                str = 'namelength';  
	            } else if (pass.length > 31) {  
	                str = 'passlength';  
	            } else if (pass != confirm) {  
	                str = 'doesntmatch';  
	            }  
	            if (str) {  
	                app.showMessageBar(id, str);  
	            } else if (app.Lock.attach({  
	                loading: '#register-control',  
	                error: function (data) {  
	                    app.showMessageBar(id, data.err, 'error');  
	                },  
	                success: function () {  
	                    app.showMessageBar(id, 'registerok');  
	                },  
	            })) {  
	                app.socket.emit('register', {  
	                    name: name,  
	                    password: pass,  
	                });  
	                app.socket.emit('login', {  
	                    name: name,  
	                    password: pass,  
	                });  
	            }  
	        },

登录函数：

	app.socket.emit('login', {  
	                    name: name,  
	                    password: pass,  
                });

因此，实现自动登录的话，可以通过注册结束后直接用注册信息进行登录的方法实现注册自动登录。

结果如下：

register: function () {
            var name = $('#register-inputName').val(),
			in_pw1 = $('#register-inputPassword'),
			in_pw2 = $('#register-confirmPassword');
            var pass = in_pw1.val();
            var confirm = in_pw2.val();
            in_pw1.val('');
            in_pw2.val('');
            var id = '#register-message',
			str = '';
            if (!/^[A-Za-z0-9]*$/.test(name)) {
                str = 'name invalid';
            } else if (name.length < 6 || name.length > 20) {
                str = 'namelength';
            } else if (pass.length > 31) {
                str = 'passlength';
            } else if (pass != confirm) {
                str = 'doesntmatch';
            }
            if (str) {
                app.showMessageBar(id, str);
            } else if (app.Lock.attach({
				loading: '#register-control',
				error: function (data) {
					app.showMessageBar(id, data.err, 'error');
				},
                success: function () {
					app.showMessageBar(id, 'registerok');
				},
            })) {
                app.socket.emit('register', {
                    name: name,
                    password: pass,
                });
				app.socket.emit('login', {
					name: name,
					password: pass,
				});
            }
        },

个人感想：

前端的工作相对来说是比较简单的，只要阅读了readme的文件，按照代码框架去读，很轻松地就来看懂代码的功能，实现要求。

在这之前，当然把框线的部分学习一下。我觉得这些框架的实用是也很大的好处的，代码的可读性会提高，编程速度也很快。唯一的缺点，可能就是上手也些慢吧，毕竟需要自己先搞懂整个框架的结构。