node+express项⽬案例（⼆）
数据库⽤的是mysql数据库，表内数据会放在代码中
本项⽬虽然页⾯不多，但是包含了基本的数据库建⽴，查询，修改，删除，插⼊，路由管理以及artTemplate模板应⽤，页⾯登录，cookie 登录⽤户信息存储，md5密码加密等
前⾯已经介绍了页⾯的基本样式，下⾯开始介绍⼀下代码部分
项⽬的整体架构如上图
README.md
# bin 项⽬的启动⽂件，也可以放其他脚本
# node_modules 项⽬依赖
# public 存放静态⽂件（css, js, img）
# routes 路由控制器
# views 视图⽬录 (暂时没⽤上)
# template 模板放的位置
# app.js 项⽬⼊⼝及程序启动⽂件
# package.json 配置信息
由于没⽤涉及到⽂件上传，故⽽static⽬录暂时也没有⽤上，⽬录结构很清晰简单
⾸先介绍app.js 项⽬⼊⼝ 注：⽂件中有些中间件暂时没⽤⽤上，但是后期可能会⽤上，所以没⽤删除
1. 安装node环境
2. 根据引⼊的中间件下载依赖 如npm install express express-static .... --save
var express = require('express');//express框架
var static = require('express-static')//接受⼀个参数，就是静态资源⽂件所在的⽬录，也就是⽂件读取
var bodyParser = require('body-parser');//能够解析数据类的post，但是对于⽂件上传类型的post不能解析，所以他有点不好var multer = require('multer');//解析post⽂件
var cookieParser = require('cookie-parser');
var cookieSession = require('cookie-session');
//创建⼀个multer对象，指明⽂件上传到哪个⽬录
const multerObj = multer({dest:'./static/upload'})
// var consolidate = require('consolidate');//----------------------
var atrTemplate = require('express-art-template')
const expressRoute = require('express-route');
var path = require('path');//解析⽂件路径
var favicon = require('serve-favicon');
var server = express();//创建服务
server.listen(8080);
var router = express.Router();
//1.获取前台请求数据
//get
server.use(bodyParser.urlencoded())//解析post数据的req.body数据，不然解析不出来会报错
server.use(multerObj.any())
//2. cookie session
server.use(cookieParser())
server.use(cookieParser());
(function(){
/
/防⽌被污染变量，⽤⼀个函数包起来
var keys = [];
for(var i = 0; i < 10000; i++){
keys[i]='a_'+Math.random()
}
server.use(cookieSession({
name:'session_id',
keys:keys,
maxAge:20*60*1000//20min后过期
}));
})()
server.use(express.static(__dirname+'/public/'))//将静态⽂件⽬录指定到public下
server.use(express.static(__dirname+'/template/'))//将每个页⾯的静态⽂件⽬录指定到template下
//======================模板================================
//将指定的art⽂件渲染成html(art)⽂件
//模板⽂件放在哪，这⾥的views是固定写法，指定模板⽂件位置（这⾥是放在template⾥）
server.set('views','./template');
//输出什么东西，view engine(写法固定，意思是视图引擎)，这⾥设置的是输出html
server.set('view engine','html');
//======================route路由==========================
//创建route放在routes⽂件夹中 route必须⽤use 不能⽤get
server.use('/',require('./routes/index.js')())//当访问根⽬录的时候，跳转到routes/index.js⽂件⾥的route
// server.use('/login',require('./routes/web/login.js')())//当访问login⽬录的时候，跳转到web/login.js⽂件⾥的route⾥
代码中注释写的⾮常清楚了，所以⽂章⾥就不过多介绍了
接着是跳转到routes下
其中routes下index.js是主路由，login.js news.js user.js分别是对应页⾯的路由，
index.js
const express = require('express');
const urlLib = require('url');
var router = express.Router();
//检查登录状态，如更没登录，跳转到登录状态
router.use((req,res,next)=>{//没有登录
if(req.url!='/favicon.ico'){
var pattern = new RegExp("/", "g");
var reqUrl = place(pattern,'');
reqUrl = '/'+reqUrl
if(!req.session['admin_id']&&reqUrl!='/login'){
//这⾥检查如果没有登录（没有admin_id）就会重定向到登录界⾯
//当登录后，就会设置admin_id
/
/备注，重定向后还是会重新访问这⾥⽂件，这时候还会做判断，如果判断失败，⾛else
}else{
next()
}
}
});
<('/',(req,res)=>{
bootstrap项目path:'./user/user.art'
})
})
/
/当访问login，跳转到login路由，进⾏登录页⾯渲染
router.use('/login',require('./login.js')());
//当访问user，跳转到user路由，进⾏user.art渲染
router.use('/user',require('./user.js')());
//当访问news，跳转到news路由，进⾏news.art渲染
router.use('/news',require('./news.js')());
return router;
}
在index.js⾥⾯检查登录状态时，经常会有其他路径⼲扰，故⽽加上了过滤，这⾥如果有⼤神有好办法，也希望指教⼀下，routes/login.js
const express = require('express');
const mysql = require('mysql');
const utils = require('../public/utils/md5.js')//引⼊md5
var db = atePool({
host:'localhost',
user:'root',
password:'9527',
database:'learn'
});
var router = express.Router();
//当请求⽅式为get的时候，约定为访问页⾯
<('/',(req,res)=>{
})
//当请求⽅式为post的时候，约定为登录操作
router.post('/',(req,res)=>{
var username = req.body.userName;
//将获取的密码转成md5加密形式，⽽且数据库存的也是加密后的，并且有后缀
var password = utils.md5(req.body.password+utils.MD5_SUFFIX);
db.query(`SELECT * FROM admin_table WHERE username='${username}'`,(err,data)=>{
if(err){
res.status(500).send('服务器出错').end()
}else{//成功
if(data.length == 0){
res.status(400).send('该⽤户不存在').end()
}else{//成功且有值
if(data[0].password == password){//对⽐的是md5后的值
//给session赋值
req.session['admin_id'] = data[0].ID;
//重定向到⾸页
}else{
res.status(400).send('密码不正确')
}
}
}
})
})
//注册register
router.post('/register',(req,res)=>{
var username = req.body.userName;
//将获取的密码转成md5加密形式，⽽且数据库存的也是加密后的，并且有后缀
var password = utils.md5(req.body.password+utils.MD5_SUFFIX);
//注册部分
})
return router;
}
注册部分由于时间问题没写完，这⾥跟普通的数据库增加数据⼀样，只不过是增加了⼀个md5密码加密
路由部分的user.js news.js跟这也⼀样
下⾯是模板部分。这⾥⽤的是.art扩展名，index.art是⾸页包含导航部分，其余分别是下属⼦页⾯，其中如果js和css代码如果不多，我就直接写在art⽂件⾥了，并没有外部引⽤。
template/login/login.art
<!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">
<!-- 因为这个是login页⾯，所以每个地址都会默认加上⼀个login，所以访问页⾯使⽤../ -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="./login.css">
<title>登录</title>
</head>
<body>
<canvas id="can"></canvas>
<div class="box center_middle">
<form class="center_middle loginForm" action="/login" method="post">
<div class="form-group row">
<label for="userName" class="col-sm-2 col-form-label">账号:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userName" name="userName" placeholder="请输⼊账号" required>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 col-form-label">密码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="请输⼊密码" required> </div>
</div>
<div class="form-group row">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
记住密码
</label>
<a href="#">忘记密码！</a>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-8 offset-sm-4">
<button class="btn btn-primary" type="submit">登录</button>
<button type="" class="btn btn-primary" id="register" onclick="return false">注册</button>
</div>
</div>
</form>
<!-- 注册 -->
<form class="center_middle registerForm" action="/login/register" method="post" onsubmit="return false">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">账号:</label>
<div class="col-sm-9">
<input type="name" class="form-control" id="userName" name="userName" placeholder="请输⼊账号" required>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论