1.node与npm的安装
2.数据库mongodb的安装
【1】下载mongodb（下载地址：http://www.mongodb.org/downloads）--安装--运行
【2】每次运行mongod –dbpath D:/MongoDB/data命令行来启动MongoDB不方便，
D:\MongoDB\bin>mongod --logpath D:\MongoDB\logs\MongoDB.log --logappend --dbpath D:\MongoDB\data --directoryperdb --serviceName MongoDB --install
【3】进入到你当前MongoDB所在的目录地址
例如我的是放在D盘：cd/d D:\MongoDB\bin
【4】net start mongodb 启动mongodb服务
【5】mongo命令进入数据库
【6】use library 进入数据库 我建立的名称为library 这样本地的数据库就搭建完成
3.express安装
【1】通过命令：npm install express-generator -g 安装到全局
【2】在用express 命令生成项目结构
express myapp 其中的myapp是你的项目名称
【3】通过cd myapp 进入项目文件中
【4】通过npm install 初始化依赖模块
【5】npm start 开启web服务器
4.express项目目录：
bin--项目的入口文件，配置web服务器端口和一些监听事件。
database--dbHandel.js和models.js主要是定义数据库的数据
node_modules--项目的依赖的的文件模块
public--项目的静态资源，例如css、js等
routes--项目的路由模块
views--视图模版，主要的前端html写在里面
app.js--项目的启动文件，项目的核心。
package.json--模块的包管理，包括项目与模块版本的信息等。
5. app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var multer = require('multer');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
//数据库
var mongoose = require('mongoose');
var session = require('express-session');
global.dbHandel = require('./database/dbHandel');
global.db = mongoose.connect("mongodb://localhost:27017/library");
app.use(session({
secret: 'secret',
cookie:{
maxAge: 1000*60*30
}
}));
// view engine setup--换成了html模板引擎
app.set('views', path.join(__dirname, 'views'));
app.engine("html",require("ejs").__express); // or app.engine("html",require("ejs").renderFile);
app.set('view engine', 'html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.use('/manage', routes);
app.use('/register', routes);
//跨域解决cors
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200);
}
else {
next();
}
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
6.登陆模块：index.html
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
<style type="text/css">
body,div,form,label,input{margin:0;padding: 0;}
body{
width:100%;
height:100%;
background-color: #AAA;
}
#loginList{
width: 300px;
height:400px;
background-color:#fff;
padding:10px 10px;
margin: 0 auto;
margin-top: 10%;
}
#loginList h3{
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.btn-link{
float: right;
}
</style>
</head>
<body>
<div id="loginPage">
<form id="loginList">
<h3>您好！请登录</h3>
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="clickModel">
<button type="submit" class="btn btn-primary" id="login">登录</button>
<button type="button" class="btn btn-link" id="register">注册</button>
<div>
</form>
</div>
<script src="/javascripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$('#register').click(function(){
window.location.href='register';
});
$('#login').click(function(){
var username=$('#exampleInputEmail1').val();
var password=$('#exampleInputPassword1').val();
var data = {"username":username,"password":password};
$.ajax({
url: '/',
type:'post',
data:data,
success: function(data,status){
if(status == 'success'){
alert('登陆成功');
location.href = 'manage';
}
},
error: function(data){
if(data.status == '404'){
alert('用户名找不到');
}
//window.location.reload();
}
});
});
</script>
</body>
</html>
7.注册模块：register.html
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
<style type="text/css">
#pageRegister{
width:60%;
margin:0 auto;
}
#pageRegister h2{
text-align: center;
}
#cardSelect{
width:120px;
}
#login{
display: inline-block;
float:right;
}
#uploadImage{
color:blue;
}
</style>
</head>
<body>
<form id="pageRegister">
<h2>欢迎使用该系统</h2>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">*用户名</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<p id="helpBlock1" class="help-block">请使用邮箱</p>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputPassword">*密码</label>
<input type="text" class="form-control" id="inputPassword">
<p id="helpBlock2" class="help-block">请输入密码</p>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputRepassword">确认密码</label>
<input type="text" class="form-control" id="inputRepassword">
<p id="helpBlock3" class="help-block">请确认密码是否正确</p>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputRepassword">*证件号</label>
<div class="input-group">
<div class="input-group-btn">
<select class="form-control" id="cardSelect">
<option>身份证号</option>
<option>工作证号</option>
</select>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="..." id="cardNum">
</div>
<p id="helpBlock3" class="help-block">请填写有效证件号</p>
</div>
<div class="form-group has-success" id="uploadImage">
<label for="exampleInputFile">上传头像</label>
<input type="file" id="exampleInputImage">
<p class="help-block4">支持图像png、jpg、bmp等</p>
</div>
<div class="clickModel">
<button type="submit" class="btn btn-primary" id="register">注册</button>
<button type="button" class="btn btn-link" id="login">登录</button>
<div>
</form>
<script src="/javascripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$('#login').click(function(){
window.location.href='/';
});
$('#register').click(function(){
var username=$('#inputSuccess1').val();
var password=$('#inputPassword').val();
var cardNum=$('#cardNum').val();
var headImage=$('#exampleInputImage').val();
var data = {"username":username,"password":password,"cardNum":cardNum,"headImage":headImage};
$.ajax({
url:'/register',
type:'post',
data:data,
success:function(data,status){
if (status=='success') {
location.href='/';
}
},
error:function(data){
alert('注册失败');
}
});
});
</script>
</body>
</html>
8.路由routes文件里面的index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.route("/").get(function(req,res){ // 到达此路径则渲染login文件，并传出title值供 login.html使用
res.render("index",{title:'index'});
}).post(function(req,res){ // 从此路径检测到post方式则进行post数据的处理操作
//get User info
//这里的User就是从model中获取user对象，通过global.dbHandel全局方法（这个方法在app.js中已经实现)
var User = global.dbHandel.getModel('user');
var username = req.body.username;
var password = req.body.password; //获取post上来的 data数据中 uname的值
User.findOne({uname:username},function(err,doc){ //通过此model以用户名的条件 查询数据库中的匹配信息
console.log(doc);
if(err){ //错误就返回给原post处（login.html) 状态码为500的错误
res.send(500);
console.log(err);
}else if(!doc){ //查询不到用户名匹配信息，则用户名不存在
req.session.error = '用户名不存在';
console.log('用户名不存在');
res.send(404); // 状态码返回404
//res.write( '用户名不存在');
// res.redirect("/login");
}else{
if(req.body.password != doc.upassword){ //查询到匹配用户名的信息，但相应的password属性不匹配
req.session.error = "密码错误";
res.send(404);
// res.redirect("/login");
}else{ //信息匹配成功，则将此对象（匹配到的user) 赋给session.user 并返回成功
req.session.user = doc;
res.send(200);
// res.redirect("/home");
}
}
});
});
router.route("/manage").get(function(req, res) {
res.render('manage', { title: 'manage' });
});
router.route("/register").get(function(req,res){ // 到达此路径则渲染login文件，并传出title值供 login.html使用
res.render("register",{title:'register'});
}).post(function(req,res){
//这里的User就是从model中获取user对象，通过global.dbHandel全局方法（这个方法在app.js中已经实现)
var User = global.dbHandel.getModel('user');
var username = req.body.username;
var password = req.body.password;
var cardNum = req.body.cardNum;
var headImage = req.body.headImage;
User.findOne({uname: username},function(err,doc){ // 同理 /login 路径的处理方式
if(err){
req.session.error = '网络异常错误！';
console.log(err);
res.send(500);
}else if(doc){
req.session.error = '用户名已存在！';
console.log('用户名已存在')
res.send(500);
}else{
User.create({ // 创建一组user对象置入model
uname: username,
upassword: password,
cardNum: cardNum,
headImage: headImage
},function(err,doc){
if (err) {
console.log(err);
res.send(500);
} else {
//req.session.error = '用户名创建成功！';
console.log('用户名创建成功！');
res.send(200);
//res.redirect("/login");
}
});
}
});
});
module.exports = router;
1783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
