版权声明:可任意转载,转载注明出处。 https://blog.csdn.net/Handsome_fan/article/details/82432621
环境搭建
首先要初始化项目,我们进入项目的目录后,运行npm init
命令即可进行对项目的初始化:
项目初始化完毕后就要开始安装项目依赖了:
我们可以在package.json文件中dependencies字段下看到此项目所需要的依赖:
至此,项目环境搭建完成,项目的目录结构如下:
.
├── db // 数据库存储目录
├── models // 数据库模型文件目录
├── node_modules // node第三方模块目录
├── public // 静态文件目录(css、js、image......)
├── routers // 路由文件目录
├── schemas //数据库结构文件(schema)目录
├── views //模板视图文件目录
├── app.js // 应用(启动)入口文件
├── package.json
.
app.js
app.js是项目的入口文件,配置如下:
/**
* 应用程序的启动(入口)文件
*/
// 加载express模块
var express = require('express');
// 加载模板处理模块
var swig = require('swig');
// 加载数据库模块
var mongoose = require('mongoose');
// 加载body-parser,用来处理post提交过来的数据
var bodyParser = require('body-parser');
// 创建app应用 => NodeJS Http.createServer()
var app = express();
// 设置静态文件托管
// 当用户访问的url以/public开始,那么直接返回对应__dirname + '/public'下的文件
app.use('/public', express.static(__dirname + '/public'));
// 配置应用模板
// 定义当前应用所使用的模板引擎
// 第一个参数:模板引擎的名称,同时也是模板引擎文件的后缀,第二个参数表示用于解析处理模板内容的方法
app.engine('html', swig.renderFile);
// 设置模板文件存放的目录,第一个参数必须是views,第二个参数是目录
app.set('views', './views');
// 注册所使用的模板引擎,第一个参数必须是 view engine,第二个参数和app.engine这个方法中定义的模板引擎的名称(第一个参数)是一致的
app.set('view engine', 'html');
// 在开发过程中,需要取消模板缓存
swig.setDefaults({cache: false});
// bodyparser设置
app.use( bodyParser.urlencoded({extended: true}) );
/**
* 根据不同的功能划分模块
*/
app.use('/api', require('./routers/api')); // 接口路由
app.use('/', require('./routers/main')); // 首页
mongoose.connect('mongodb://localhost:27019/login', { useNewUrlParser: true }, function (err) {
if (err) {
console.log('数据库连接失败');
} else {
console.log('数据库连接成功');
// 监听http请求
app.listen(8081);
}
});
定义schemas与models
定义好入口文件后,我们在schemas和models文件夹下分别建立users.js与User.js文件。
users.js文件代码如下:
var mongoose = require('mongoose');
// 用户的表结构
module.exports = new mongoose.Schema({
// 用户名
username: String,
// 密码
password: String
});
User.js文件的代码如下:
var mongoose = require('mongoose');
var usersSchema = require('../schemas/users');
module.exports = mongoose.model('User', usersSchema);
Schema主要用于定义集合的结构,Model则根据Schema的定义来创建一个集合到数据库中。
路由的定义
然后,我们在routers文件夹下建立main.js和api.js,在main.js下,我们定义主页的路由,在api.js下定义接口的路由。
main.js的代码如下:
var express = require('express');
var router = express.Router();
router.get('/', function (req, res, next) {
res.render('main/index');
});
module.exports = router;
api.js的代码如下:
var express = require('express');
var router = express.Router();
var User = require('../models/User');
// 统一返回格式
var responseData;
router.use(function (req, res, next) {
responseData = {
code: 0,
message: ''
}
next();
});
/**
* 用户注册
* 注册逻辑
*
* 1.用户名不能为空
* 2.密码不能为空
* 3.两次输入密码必须一致
*
* 1.用户是否已经被注册了
* 数据库查询
*/
router.post('/user/register', function (req, res, next) {
// console.log(req.body);
var username = req.body.username;
var password = req.body.password;
var repassword = req.body.repassword;
// 用户是否为空
if (username == '') {
responseData.code = 1;
responseData.message = '用户名不能为空';
res.json(responseData);
return;
}
// 密码不能为空
if (password == '') {
responseData.code = 2;
responseData.message = '密码不能为空';
res.json(responseData);
return;
}
// 两次输入的密码必须一致
if (password != repassword) {
responseData.code = 3;
responseData.message = '两次输入的密码不一致';
res.json(responseData);
return;
}
// 用户名是否已经被注册了,如果数据库中已经存在和我们要注册的用户名同名的数据,表示该用户名已经被注册了
User.findOne({
username: username
}).then(function (userInfo) {
// console.log(userInfo);
if (userInfo) {
// 表示数据库中有该记录
responseData.code = 4;
responseData.message = '用户名已经被注册了';
res.json(responseData);
return;
}
// 保存用户注册的信息到数据库中
var user = new User({
username: username,
password: password
});
return user.save();
}).then(function (newUserInfo) {
// console.log(newUserInfo);
responseData.message = '注册成功';
res.json(responseData);
});
});
/**
* 登录
*/
router.post('/user/login', function (req, res) {
var username = req.body.username;
var password = req.body.password;
if (username == '' || password == '') {
responseData.code = 1;
responseData.message = '用户名和密码不能为空';
res.json(responseData);
return;
}
// 查询数据库中相同用户名和密码的记录是否存在,如果存在则登录成功
User.findOne({
username: username,
password: password
}).then(function (userInfo) {
if (!userInfo) {
responseData.code = 2;
responseData.message = '用户名或密码错误';
res.json(responseData);
return;
}
// 用户名和密码是正确的
responseData.message = '登录成功';
responseData.userInfo = {
_id: userInfo._id,
username: userInfo.username
};
res.json(responseData);
return;
})
});
module.exports = router;
我们在api.js中定义了用户注册的逻辑和用户登录的逻辑。
首页
我们完成了以上的步骤后,就要开始首页内容的编写了,我们在views文件夹下建立一个main文件夹,然后在main下建立一个index.html文件。
index.html文件的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学院首页</title>
<link href="/public/main/css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="login-register">
<div class="login-main">
<input type="text" placeholder="用户名" name="user"/>
<input type="password" placeholder="密码" name="password" />
<button>登录</button><a href="javascript:;">还没账号?</a>
</div>
<div class="register-main">
<input type="text" placeholder="用户名" name="user"/>
<input type="password" placeholder="密码" name="password" />
<input type="password" placeholder="确认密码" name="repassword" />
<button>注册</button><a href="javascript:;">已有账号?</a>
</div>
</div>
<div class="info"></div>
<script src="/public/main/js/jquery-1.12.4.min.js"></script>
<script src="/public/main/js/index.js"></script>
</body>
</html>
然后,我们在public文件夹下编写首页的css与js。
index.css文件代码:
.login-register {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.login-register a {
text-decoration: none;
margin-left: 5px;
}
.login-register .login-main {
width: 358px;
box-sizing: border-box;
}
.login-register .login-main input {
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.login-register .register-main {
width: 358px;
box-sizing: border-box;
display: none;
}
.login-register .register-main input {
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
index.js文件的代码如下:
$(function () {
// 切换到注册面板
$('.login-main a').on('click', function () {
$('.register-main').show();
$('.login-main').hide();
});
// 切换到登录面板
$('.register-main a').on('click', function () {
$('.register-main').hide();
$('.login-main').show();
});
// 注册
$('.register-main button').on('click', function () {
// 通过ajax提交请求
$.ajax({
type: 'post',
url: '/api/user/register',
data: {
username: $('.register-main input[name="user"]').val(),
password: $('.register-main input[name="password"]').val(),
repassword: $('.register-main input[name="repassword"]').val(),
},
dataType: 'json',
success: function (result) {
console.log(result);
if (!result.code) {
// 注册成功
setTimeout(function () {
$('.register-main').hide();
$('.login-main').show();
}, 1000)
}
}
});
});
// 登录
$('.login-main button').on('click', function () {
// 通过ajax提交请求
$.ajax({
type: 'post',
url: '/api/user/login',
data: {
username: $('.login-main input[name="user"]').val(),
password: $('.login-main input[name="password"]').val()
},
dataType: 'json',
success: function (result) {
console.log(result);
if (!result.code) {
// 登录成功
setTimeout(function () {
$('.register-main').hide();
$('.login-main').hide();
// 登录成功后的显示
$('.info').html('<h2>'+ result.userInfo.username +',欢迎进入超级英雄学院!</h2>');
}, 1000)
}
}
});
});
});
至此,我们的注册与登录功能就算是完成了。