一，/public/js/index.js

//登陆
$login.find('button').on('click',()=>{
　　$.ajax({
　　　　type:'post',
　　　　url:'/api/user/login',
　　　　data:{
　　　　　　username:$login.find('[name="username"]').val(),
　　　　　　password:$login.find('[name="password"]').val()
　　　　},
　　　　dataType:'json',　　
　　　　success:(data)=>{
　　　　　　console.log(data)
　　　　　　$user.html(data.userInfo.username)
　　　　　　if(data){
　　　　　　　　$login.hide();
　　　　　　　　$register.hide();
　　　　　　　　$userInfo.show()
　　　　　　}
　　　　　　if(data.userInfo.username=='admin'){
　　　　　　　　$admin.show();
　　　　　　}else{
　　　　　　　　$admin.hide();
　　　　　　}
　　　　}
　　})
})
 
二，/router/api.js
router.post('/user/login',(req,res,next)=>{
//1,获取前端传来的用户名和密码
var username = req.body.username
var password = req.body.password
//2，数据的判断
if(username==''||password==''){
responseData.code = 1
responseData.message = '用户名和密码不能为空'
res.json(responseData)
return
}
//3，从数据中查询用户名和密码
/**
* 在数据库中查询与username 相等的 这个username ， 返回的是一个 mongoose 对象。如果查询不到则返回为空。
* 可以用于判断
*/
User.findOne({
　　username:username,
　　password:password
}).then((info)=>{
　　console.log(info)
　　if(!info){
　　　　responseData.code = 2
　　　　responseData.message = '用户名或密码错误'
　　　　res.json(responseData)
　　　　return
　　}
　　responseData.message = " 登陆成功 "
　

　　responseData.userInfo = {
　　　　_id :info._id,
　　　　username : info.username
　　}
　　res.json(responseData)
})
 
三， /view/login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/public/css/login.css">
<link rel="stylesheet" href="/public/css/bootstrap.css">
<script src="/public/js/jquery.js"></script>
<script src="/public/js/index.js"></script>
</head>
<body>
<div class="left">
 
</div>
<div class="right">
<div class="jgb">
<div class="j1"></div>
<div class="j2"></div>
<div class="j3"></div>
</div>
 
<p></p>
<div class="userinfo none">
<h2>hello 。 <span id="user"></span></h2>
<a href="/logout">退出登陆</a>
</div>
 
<div id="admin" class="none">
你是管理员，<a href="/admin">你可以点击这里进入应用后台管理中心</a><br>
<a href=""></a>
</div>
<div class="form" id="register">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="User">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<label for="repassword">密码</label>
<input type="password" class="form-control" id="repassword" name="repassword" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">注册</button>
<div class="info"></div>
</div>
已有账号？马上<a class="change" href="javascripte:;">登陆</a>
</div>
<div class="form" id="login">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="User">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">登 陆</button>
</div>
还没注册？马上<a class="change" href="javascripte:;">注册</a>
</div>
 
</div>
</body>
</html>
 
四，/public/css/login.css
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
body{
padding: 60px 100px;
background: #ecf0f1;
position: relative;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
.left{
width: 600px;
height: 600px;
border-radius: 10px;
background: url('/public/images/dl.jpg') center;
background-size: cover;
float: left;
}
.right{
width: 525px;
height: 600px;
padding: 10px;
float: left;
margin-left: 50px;
}
.jgb{
width: 100%;
height: 30px;
border-radius: 10px;
margin-bottom: 30px;
}
.jgb .j1{
width: 20%;
height: inherit;
background: #9b59b6;
float: left;
}
.jgb .j2{
width: 60%;
height: inherit;
background: #f1c40f;
float: left;
}
.jgb .j3{
width: 20%;
height: inherit;
background: #9b59b6;
float: left;
}
.form{
width: 100%;
padding: 10px 30px;
margin-top: 30px;
border: 2px solid #9b59b6;
}
a{
text-decoration: none;
color: #ecf0f1
}
p{
margin: 20px;
}
#login{
display: none;
}
.info{
color: red;
font-family: 'Courier New', Courier, monospace;
margin-top: 30px;
}
#userInfo{
background: #2c3e50;
padding: 0px 20px 6px 20px;
color: azure;
border-radius: 5px;
}
.none{
display: none;
}
 

9 ~ express ~ 用户注册的更多相关文章

  1. express框架+jade+bootstrap+mysql开发用户注册登录项目

    完整的项目代码(github):https://github.com/suqinhui/express-demo express是基于Node.js平台的web应用开发框架,用express框架开发w ...

  2. 使用node+express+mongodb实现用户注册、登录和验证功能

    无论是手机端还是pc端,几乎都包含登录注册方面功能,今天就使用node+express+mongodb实现一套登录注册功能,这里需要自己去安装MongoDB环境,如果没有安装可以看这篇关于MongoD ...

  3. 6 ~ express ~ 搭建用户注册前端页面

    一,前端页面 /views/login.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. nodeJS---express4+passport实现用户注册登录验证

    网上有很多关于passport模块使用方法的介绍,不过基本上都是基于express3的,本文介绍在express4框架中使用passport模块. 前言 passport是一个功能单一,但非常强大的一 ...

  5. 第1章 Express MongoDB 搭建多人博客

    学习环境 Node.js : 0.10.22 + Express : 3.4.4 + MongoDB : 2.4.8 + 快速开始 安装 Express express 是 Node.js 上最流行的 ...

  6. express 3.0.x 中默认不支持layout.ejs的解决方法

    1.第一种方法用include 用<% include 模板名(可不加.ejs) %>的写法,具体如下 <% include header %> //套用布局拆成两部分 hea ...

  7. Express 简介

    Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...

  8. NodeJS+Express+MongoDB 简单个人博客系统【Study笔记】

    Blog 个人博客系统 iBlog是在学习NodeJs时候一个练手项目Demo 系统支持用户注册/登录,内容文章查看,评论,后台管理(定制显示的分类版块,进行文章内容添加)超级管理员还可进行用户管理等 ...

  9. Node.js原生及Express方法实现注册登录原理

    由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...

随机推荐

  1. Day9 - H - 最少拦截系统 HDU - 1257

    某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高度.某天,雷达捕捉到敌国的导弹来袭.由于 ...

  2. Regression 回归——多项式回归

    回归是指拟合函数的模型.图像等.与分类不同,回归一般是在函数可微的情况下进行的.因为分类它就那么几类,如果把类别看做函数值的话,分类的函数值是离散的,而回归的函数值通常是连续且可微的.所以回归可以通过 ...

  3. C# 篇基础知识4——.NET的基础概念

    C#语言是与微软的.NET框架紧密地联系在一起的,而.NET框架是微软.NET战略的核心,为了更好的理解C#语言,我们必须了解一些.NET框架的基本知识..NET框架是为开发应用程序推出的一个编程平台 ...

  4. POI 2001 Goldmine 线段树 扫描线

    题目链接 http://www.acm.cs.ecnu.edu.cn/problem.php?problemid=1350 http://main.edu.pl/en/archive/oi/8/kop ...

  5. 题解 P3258 【[JLOI2014]松鼠的新家】

    树链剖分板子题 先说点别的 小熊维尼啊,嘿嘿嘿. 写题经历 悲惨命运:树剖调了2天,一直90分,死活不AC,调出了心病,快下课时改了一下数据范围,A了--.(刚开始数组开了800100,改120010 ...

  6. 三 Road

    3—5年程序员的发展和出路在哪里? 是继续做技术人,还是向管理者发力?是继续留在大公司,还是转投潜力小公司?如果没有核心竞争力,入行一两年的新程序员朋友是可以替代你大部分工作的,而且薪资还低,要怎么办 ...

  7. matlab安装matconvnet出错总结

    在安装过程中出现两种错误: mex -settup C 出错 mex -setup C 之后, vl_complilenn出错 matconv库需要autoNN和mcnExtraLayers两个库支持 ...

  8. SpringMVC一点简单地源码解析

    . 1.1 init(初始化) 在第一次发出请求时,会调用HttpServletBean 的init()方法 org.springframework.web.servlet.HttpServletBe ...

  9. Linux的几种关机命令

    在linux下一些常用的关机/重启命令有shutdown.halt.reboot.及init,它们都可以达到重启系统的目的,但每个命令的内部工作过程是不同的,通过本文的介绍,希望你可以更加灵活的运用各 ...

  10. 0101-ioc

    背景 ioc是spring的基础,即控制反转.springboot基于注解使用ioc. ioc spring称所有被管理的对象为bean, spring ioc主要通过描述的方式完成3类bean的管理 ...