一, 简介
本文将主要基于 node.js 使用 express 框架搭建一个后台环境, 包括如何自定义项目目录, 所用依赖以及中间件, 路由以及模板引擎, 接口数据获取以及文件上传等内容.
二, 后台环境搭建
1, 新建一个目录 node, 然后在目录下跑命令: npm init, 然后输入一些版本信息;
2, 安装 Express
运行指令: npm install express --save
3, 在根目录下新建一个 server.js 文件, 然后在建立服务器然后监听 9999 端口, 输出 hello world!
const express = require('express')
var app = express()
app.get('/',function(req,res){
res.send('hello world!')
})
app.listen(9999)
在浏览器输入 http://localhost:9999 就会显示 hello world!
三, 数据准备, 登录注册
1, 这里使用 MySQL 数据库与 node.js 链接. 我用的是 Navicat 图形化工具, 当然用其他工具也可以, 这里将做登录, get 列表数据, post 文件上传, 分页等功能. 先在建立数据库然后创建相应的表.
2, 创建一个数据库叫 node, 然后创建一个表 user_table, 有三个字段 ID,username,password.
3, 做一个注册登录功能
根目录下新建一个 route 文件夹, 便于管理路由路径模块管理, 然后新建一个 regLogin.js 文件, 然后定义 router, 引入 MySQL, 建立连接池, 然后定义登录跟注册路由, 然后导出路由;
const express = require('express');
const router = express.Router();
const mysql = require('mysql');
// 连接池
var db = mysql.createPool({host:'localhost',user:'root',password:'*******',database:'node'})
// 定义网站主页的路由
router.use('/login', function(req, res) {
var username = req.body.username;
var password = req.body.password;
db.query(`SELECT * FROM user_table WHERE username='${username}'`,(err,data)=>{
if (err) {
console.log(err);
res.status(500).send('database error').end()
}
else{
if (data[0].password==password) {
res.send('登录成功!')
}
}
})
});
// 定义 about 页面的路由
router.use('/register', function(req, res) {
var username = req.body.username;
var password = req.body.password;
db.query(`insert into user_table(username,password) values ('${username}','${password}')`,(err,data)=>{
if (err) {
console.log(err);
res.status(500).send('database error').end()
}
else{
res.send('注册成功')
}
})
});
module.exports = router;
4, 在 server.js 里边引入 body-parser,body-parser 可以自动转换 req 数据为对象格式, 然后使用 express.static 静态文件托管
const express = require('express') const regLogin = require('./route/regLogin'); // 引入路由
const bodyParser = require('body-parser');
var app = express() app.use(bodyParser.urlencoded({
extended: false
}))
// 使用路由
app.use('/', regLogin)
// 静态文件托管
app.use(express.static('static'));
app.listen(9999)
5. 在 static 静态文件夹下新建以下文件
login.html 对注册跟登录的 post 请求, 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Login</title>
<script src="jquery.js"></script>
<script>
window.onload=function(){
// 注册
$('#register').click(function(){
var name = $('#name').val();
var pass = $('#password').val();
$.ajax({
type:'POST',
url:'/register',
data:{username:name,password:pass},
success:function(res){
alert('注册成功')
}
})
})
// 登录
$('#login').click(function(){
var name = $('#name').val();
var pass = $('#password').val();
$.ajax({
type:'POST',
url:'/login',
data:{username:name,password:pass},
success:function(res){
alert('登录成功')
}
})
})
}
</script>
</head>
<body>
<div>
用户名:
密码:<input type="text" id="password"/><br/>
<button id="login"> 登录 </button>
<button id="register"> 注册 </button>
</div>
</body>
</html>
6. 校验
当输入用户名密码, 点击注册, 则显示注册成功, 数据库多了一条用户数据.
点击登录则显示登录成功.
四, 文件上传功能
1, 文件上传功能需要依赖第三方中间件 multer, 当然 multer 有一些参数, 可以选择一次上传单个文件, 也可以上传多个或者不限制, 定义相应的输出路径等参数, 详情可以看下官方文档 https://www.npmjs.com/package/multer. 这里首先在 server.js 里引入 multer 并设置参数:
const multer = require('multer');
// 输出文件路径
const multerObj = multer({dest:'./static/upload'});
app.use(multerObj.any())
2, 新建路由 upload.js 文件以及 static 目录下的 upload.html 上传文件, 并在 server.js 中引入 upload 路由.
upload.js 代码如下:
const express = require('express');
const mysql = require('mysql');
const pathLib = require('path')
const fs = require('fs')
var router = express.Router();
// 连接池
var db = mysql.createPool({host:'localhost',user:'root',password:'*******',database:'node'});
router.post('/',function(req,res){
var title = req.body.title;
if (req.files[0]) {
var extName = pathLib.parse(req.files[0].originalname).ext;
var oldName = req.files[0].path;
var newName = req.files[0].path+extName;
var newFileName = req.files[0].filename + extName;
// 重命名加上后缀
fs.rename(oldName,newName,(err)=>{
if (err) {
console.log(err);
res.status(500).end();
}
})
db.query(`INSERT INTO upload_table (title,src) VALUES ('${title}','${newFileName}')`,(err,data)=>{
if (err) {
console.log(err);
res.status(500).send('err').end()
}else{
res.send('上传成功').end()
}
})
}
})
module.exports = router;
3, 当选择文件上传, 数据库中就会多一天记录
五, 模板引擎
nodejs 模板引擎比较常用的有 jade 跟 ejs,jade 跟我们平常时的 HTML 模板不兼容, 而 ejs 跟我们平时所用的前端代码而已结合使用, 所以这里将介绍使用 ejs, 对 jade 感兴趣的话也可以去了解了解.
1, 首先, 引入依赖 consolidate,consolidate 集成了很多模板引擎, 可以选择其中的某个模板引擎来使用, 包括 jade 和 ejs 都在里边.
2, 在 server.js 引入 consolidate 然后定义相应渲染为 HTML, 然后在定义路径渲染
const consolidate = require('consolidate');
var app = express()
// 模板
app.engine('html',consolidate.ejs);
app.set('view engine','html');
app.set('views',__dirname + '/template');
app.get('/index',function(req,res){
res.render('index.ejs',{name:'smile',text:'这是后台返回渲染数据',flag:true});
//res.send('index')
})
3, 在 template 文件夹中新建一个 index.ejs,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div class="warp">
<% include components/header.ejs%>
<div>
这是首页
<div > 名称:<%=name%></div>
<div>text:<%=text%></div>
<%if(flag){ %>
<div > 这是 flag 等于 true</div>
<% } %>
</div>
</div>
</body>
</html>
4, 最后渲染出来的页面如下:
六, cookie 跟 session
1, 要使用 cookie 以及 session, 得引入两个依赖, cookie-parser,cookie-session,
2, 使用 cookie
var express = require('express')
var cookieParser = require('cookie-parser')
var app = express()
app.use(cookieParser())
app.get('/cookie', function(req, res) {
console.log('Cookies:', '这是返回的 cookie')
})
3, 使用 session
var cookieSession = require('cookie-session')
var express = require('express')
var app = express()
app.use(cookieSession({
name: 'session',
keys: ['key1','key2','key3'],//secret keys
// Cookie Options
maxAge: 24 * 60 * 60 * 1000 // 24 hours
}))
七, express 生成器
如果不愿意自己搭建项目架构, 可以使用 express 生成器来快速创建一个应用的骨架. 首先全局安装 express-generator, 再跑一些初始命令然后下载一些依赖就可以了, 也是比较简单, 具体步骤参照下文档就可以 http://www.expressjs.com.cn/starter/generator.html.
来源: https://www.cnblogs.com/superSmile/p/8377171.html