node.js平台下利用cookie实现记住密码登陆(Expres
Node.js平台下的Cookie实现记住密码登录(Express+Ejs+Mysql)教程
对于想要在Node.js平台上利用cookie实现记住密码登录功能的小伙伴们,本文将为你提供一份详尽的教程。在Express、Ejs和Mysql的支持下,你可以轻松完成这一功能。在开始之前,你需要有一定的node.js+express+mysql入门基础。如果你对这些技术还不够熟悉,可以先参考博主的其他几篇node.js博文。
一、准备工作
你需要下载并安装Mysql数据库,创建一个用户表以供登录使用。
二、配置Node.js平台下的Express及Mysql
接下来,你需要配置Node.js平台下的Express的session和cookie模块包,以及mysql数据库。完成这些配置后,你可以下载并配置Ejs模块包。使用npm install ejs --save-dev命令来下载ejs模块包。
三、配置Ejs
配置Ejs包括设置模板资源路径和自定义文件后缀名等。你可以通过以下代码来完成这些设置:
app.set ("views", __dirname + "/views"); //设置视图模板路径
app.engine("html", ejs.__express); //设置模板引擎
app.set("view engine", "html"); //设置模板引擎后缀名为ejs
四、创建登录页面(login.html)
登录页面是用户进行登录操作的地方。你可以使用以下代码创建一个简单的登录页面:
五、处理登录请求
当用户点击登录按钮后,服务器会拦截到/login.do的路由。在服务器入口文件(app.js)中,你可以使用以下代码来拦截这个路由:
const per = require("./routes/perData.js"); //引入路由处理文件perData.js
app.post("/Login.do", per.doLogin); //拦截登录路由并调用perData.js中的处理函数。
六、路由处理文件(perData.js)中的处理函数
登录验证之旅
当用户在登录页面提交他们的登录信息时,我们的后端代码开始了一次奇妙的验证之旅。让我们深入了解一下这个过程。
当`doLogin`函数接收到请求时,它首先通过控制台打印出用户提交的电话号码和密码。这些信息来自用户填写的登录表单。接着,数据库开始工作,通过查询语句在`t_user`表中寻找与提交的电话号码和密码相匹配的用户记录。这个过程涉及到绑定查询参数到查询语句中的占位符,并执行查询操作。一旦查询完成,回调函数会处理查询结果。
如果在数据库中找到了匹配的用户信息,说明登录成功。在这个阶段,我们默认用户已经选中了“记住密码”的选项。我们会将这个用户的手机号码和密码写入Cookie中,并设置Cookie的过期时间。我们还会在服务器的会话状态中保存用户的登录状态,以便在后续的请求中识别用户身份。
接下来,我们会使用EJS模板引擎渲染用户中心页面,并将用户的电话号码传递给前台。这样,用户就可以在用户中心页面看到自己的登录状态。这个页面布局精美,包含了导航栏和联系信息等内容。用户的电话号码会显示在页面的特定位置,与其他信息一起构成了一个完整的用户中心视图。
在整个登录过程中,Cookie的利用是一个重要的环节。当用户勾选了“记住密码”选项后,我们将用户信息写入Cookie,这样即使关闭了浏览器窗口,只要Cookie未过期,用户在第二次访问网站时仍会显示为登录状态。为了实现这一功能,我们需要在服务器的入口文件中拦截根目录路由,并根据Cookie的存在与否来判断用户的登录状态。如果检测到Cookie中存在用户信息且未过期,则直接认定用户已登录,无需再次进行验证。
这个过程既保证了用户登录的安全性,又提升了用户体验的便捷性。通过合理的利用Cookie和服务器会话状态管理,我们可以为用户提供更加流畅和个性化的服务体验。在繁忙的网络世界中,每一个点击都承载着用户的期待和需求。对于开发者而言,确保用户在首次访问或再次返回时都能得到满意的体验至关重要。让我们深入了解一个基于Express框架的app配置和路由设计,它在处理用户访问时表现出卓越的智慧和效率。
当用户首次打开网页,或者进入特定的路由时,应用程序需要做出决策:用户是否已经登录?如果是,那么直接跳转到个人中心页面;如果不是,则展示网站的默认页面。这样的设计旨在为用户提供无缝、个性化的体验。接下来,让我们详细解读这个应用的实现逻辑。
当用户在浏览器输入后,应用服务器通过app.get("/")接收到请求。这是一个基本的路由分发机制,用于处理不同路径的请求。在这个特定的例子中,如果用户的cookie中存在用户信息(即req.cookies.user),服务器会识别用户身份并渲染个人中心页面,同时将用户的电话号码(假设存在)传递给视图模板作为变量u_tel。这样,用户可以在个人中心页面看到自己的信息。如果用户尚未登录,服务器会重定向到网站的默认页面(index.html)。
该应用的配置也是一大亮点。通过express-session中间件,服务器能够管理用户的会话信息,如登录状态等。cookie-parser中间件则用于cookie数据。ejs作为模板引擎,使得视图渲染更加灵活和高效。静态文件、错误处理等中间件的应用,确保了应用的稳定性和安全性。
在后台的深处,这个应用正在监听端口8889上的请求。一旦启动成功(通过app.listen),就会在控制台输出启动成功的消息和使用的端口号。开发者还设置了日志记录、错误处理等机制,以确保应用的稳定运行和问题的快速解决。
除了基本的路由分发机制外,应用还支持POST请求(例如处理用户登录),并将其他复杂的逻辑处理委托给专门的路由处理模块(如perData.js)。这样设计的目的是为了保持代码的清晰和可维护性。在应用的深处,路由分发是应用的重要组成部分,负责确保用户访问的正确处理和应用逻辑的顺畅执行。它不仅将请求转发到相应的处理程序,还在必要时调整用户与应用程序之间的交互方式。这个应用的设计体现了现代web开发的许多最佳实践,旨在为开发者提供高效、灵活的工具,为用户提供无缝、个性化的体验。无论是初次访问还是再次返回的用户都能感受到应用的智能和响应速度。这就是这个应用的魅力所在。希望这篇文章能对你的学习和理解有所帮助,也希望大家多多支持狼蚁SEO及其相关技术的研究和应用。同时期待开发者们在这个领域不断创新和改进技术实现方式!
网络安全培训
- node.js平台下利用cookie实现记住密码登陆(Expres
- jquery实现页面百叶窗走马灯式翻滚显示效果的方
- Vue实现typeahead组件功能(非常靠谱)
- 实例讲解JSP Model2体系结构(中)
- 扩展bootstrap的modal模态框-动态添加modal框-弹出多
- ajax三级联动实现代码
- 基于JS实现密码框(password)中显示文字提示功能代
- AngularJS 过滤与排序详解及实例代码
- JavaScript实现美化滑块效果
- js实现HashTable(哈希表)的实例分析
- ASP.NET组件System.Web.Optimization原理及缓存问题详解
- 浅谈JavaScript的计时器对象
- Vuejs 组件——props数据传递的实例代码
- 100行代码实现一个vue分页组功能
- 微信小程序使用wxParse解析html的实现示例
- jQuery实现的两种简单弹窗效果示例