Nodejs-毕业设计4-登录页面

1.我们在主页先实现一个简单的登录页面

静态文件包括样式,脚本,图片放在

2.先看看成果(自己可以加样式,检验是否为空的脚本)

3.要与后台进行交互了,登录的思路:把用户名和密码提交,在数据库的用户表查询用户名为***的密码,如果没有则说明用户名不存在,如果密码和输入不一致则密码错误,如果密码一致则登录成功跳转至首页。

4.在index.js的头部加入

var mysql = require(‘mysql‘);
var usr=require(‘dao/Connect‘);
var moment = require(‘moment‘);
var bodyParser = require(‘body-parser‘);
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

红色圈着的就是访问mysql数据库的关键,根据路径,我们在项目下的node_modules文件夹下新建dao文件夹,再在dao里新建Connect.js

5.在Connect.js里写上数据库的配置,用户名密码和数据表,记得最后要exports导出方法。

6.打开mysql软件,在开始输入搜索cmd并以管理员身份打开cmd,打开后输入net start mysql启动数据库

7.在mysql里新建连接

8.在smartCampus右键新建数据库,名为smartcampus,新建一个admin表

先填一个数据

这样数据库就可以了。接下来我们来做交互

9.先写好路径,get是获取这个页面,如果我们要在页面上提交数据,则要用post,登录就是要把用户名密码提交。

index.js使用router.post(‘/‘,function(req,res){});如下

router.post(‘/‘,function(req,res){
client=usr.connect();
var admin_id = req.body.admin_id;
var admin_psd = req.body.admin_psd;
usr.loginFun(client,admin_id, function (results) {
if(results==‘‘){
res.locals.error = ‘用户不存在‘;
res.render(‘index‘, { title: ‘smartCampus‘ });
return;
}else{
if(results[0].admin_psd==admin_psd){
res.locals.islogin=admin_id;//记录登录用户名
res.cookie(‘islogin‘,res.locals.islogin,{maxAge:60000});
res.redirect(‘success‘);
return;
}else{
res.locals.error = ‘密码错误‘;
res.render(‘index‘, { title: ‘smartCampus‘ });
return;
}
}
});
});

10.在Connect.js写登录方法并导出

11.成功跳转页面,在index.js

router.get(‘/success‘, function(req, res, next) {
res.send(‘成功登陆‘);
});

12.为了更好用户体验,当用户名不存在或密码不正确时,我们在页面上提示。在index.ejs的form表单下面写上

<% if (locals.error) { %>
<p><%= error %></p><br>
<% } %>

我们在服务器端设置了res.locals.error = ‘密码错误‘;,所以渲染到页面时,就会判断有没有error这个值,有的话就显示

13.现在我们来看看效果

14.密码错误

15.成功登陆,跳转到success页面

时间: 2024-08-06 06:35:14

Nodejs-毕业设计4-登录页面的相关文章

Nodejs+Extjs+Mongodb开发第三天 登录页面(1)

学习新技术最快捷的方式就是做项目.在第一天的环境搭建好后,我就准备基于Nodejs+Extjs+Mongodb来做一个Web系统. 环境搭建:http://blog.csdn.net/jrainbow/article/details/38845639 一.技术选择的原因 1.Nodejs.这个不用说了,就是为了学习这个来的.因为要做的是Web系统,所以选择了Express框架. 2.Extjs.原因也很简单,因为笔者的美工不行,而且之前有使用过Extjs框架.为了更满足自己的银弹心理,这个项目选

nodejs之利用第3方包,做数据库操作、登录页面验证案例(案例中的动态页面都是基于后端渲染的)

1.先安装第3方包 新建项目文件夹->建入口js文件->npm init 创建包管理文件 package.json ->npm install mysqljs/mysql 2.在项目入口文件来做数据库操作(数据库操作语句,其实可以去npm官网查看这个masql插件的文档) 真实的工作场景中,数据库位于一台单独的服务器上 3.mysql的sql语句的学习   4.封装操作数据库的api 5.登录页面小案例---走通前端+后端+数据库一套流程 原文地址:https://www.cnblogs

今天网站后台登录页面需要生成一个二维码,然后在手机app上扫描这个二维码,实现网站登录的效果及其解决方案如下

要实现二维码登录,需要解决2个技术,1.需要js websocket 与后台php实现长连接技术 2.实现二维码生成技术 要实现这个功能第二个算是比较简单,只需要下载一个php的二维码生成器即可,但要实现长连接技术,经过多方查资料,有2中方式 1种是nodejs来实现后台服务,另外一种是 利用php的一个扩展 swool来实现后台服务,本例采用的是后者swool, 第一步,在打开登录页面的时候,利用php生成一个唯一 sign,用js的websocket技术连接上后台服务,并且把sign发送给后

在Exchange 2013 OWA登录页面中修改密码

透过OWA登录界面改密码对于使用Exchange的用户来说是一个很有有用的功能. 因为如果用户不在公司域环境中,当密码已经到期登录不了OWA,就没有办法通过OWA中的[选项]来改密码,当开启这项功能后,管理员和用户都可以很方便的处理密码到期的case. 早在Exchange2010的时候,我们需要通过修改CAS服务器的注册表项来实现这个功能.现在的Exchange2013已经内置了该功能,使用前只需要确认该功能属性的状态就可以了. 在最新的Exchange2013 SP1和CU5版本中,此功能在

Vue.js写一个SPA登录页面的过程

技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

CAS 4.0.x 自定义登录页面

版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] CAS默认登录页面 复制一个新的页面管理页面 修改页面引用 修改casproperties 修改casLoginViewjsp页面 用过 CAS 的人都知道 CAS-Server端是单独部署的,作为一个纯粹的认证中心.在用户每次登录时,都需要进入CAS-Server的登录页填写用户名和密码登录,但是如果存在多个子应用系统时,它们可能都有相应风格的登录页面,我们希望直接在子系统中登录成功,而不是每次都要跳转到CAS的登录页去登

cas sso单点登录系列4_cas-server登录页面自定义修改过程(jsp页面修改)

转:http://blog.csdn.net/ae6623/article/details/8861065 SSO单点登录系列4:cas-server登录页面自定义修改过程,全新DIY. 目标: 下面是正文: 打开cas的默认首页,映入眼帘的是满眼的中文and英文混杂体,作为一名合格的用户,我表示很不开心. 于是,打开 Nodepad++,寻找C:\tomcat7\webapps\casServer\WEB-INF\view\jsp\default\ui \casLoginView.jsp这个页

登录页面jsp跳转到另一个jsp 与jsp-Servlet-jsp

登录页面jsp 到另一个jsp,与jsp-Servlet-jsp  都是可以从表单提交参数信息. 但是jsp-jsp ,只能通过<%=request.getParameter("username") %>;  获取表单中的信息.为空时为null. 而jsp-Servlet -jsp.可以通过el表达式 得到信息. 登录成功! 欢迎您,${username}  当没有这个值时,不会报错,也不默认为null

登录页面

实现效果: java code: import  java.awt.*;import java.awt.event.FocusEvent;import java.awt.event.FocusListener;import java.awt.event.KeyEvent;import java.awt.event.KeyListener;public class UserLogin {     Frame app = new Frame("窗体");          Label lb

局部刷新登录页面的实现方法

局部刷新的登录就是在一个页面上有一个登录框,登录之后交给后台异步处理,处理完成之后会在前端显示出来登录的用户信息,最常见的例子就是登陆优酷的时候我们可以看到URL登录之后没有变化(事实上,优酷用的方式不是局部刷新的方式,很明显可以看到整个页面刷新了,所以优酷的实现方式就是不是局部刷新,但是一时间没有找到例子).最近打算做一个博客的网站的项目,登录这里想要提供给用户提供一个更加良好的体验,就想到了利用ajax实现局部刷新,但是又想到了第二次登录的时候会需要判断登录过之后需要直接显示用户信息而不是登