Express入门基础(安装+路由+模板引擎+MongoDB+nodemon+session+redis)

一、安装

1、安装nodejs
2、全局安装express和express-generator

npm install -g express
npm install -g express-generator//最新express4.0版本中将命令工具分家出来了，所以我们还需要安装一个命令工具

3、创建项目

express -e blog//-e:添加ejs模板引擎，其他功能可以express -h查看

4、安装依赖

npm i

5、运行

npm start

打开localhost:3000,页面显示如下：

前台

后台命令行

app.js主要用于各项基础配置

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

二、目录结构

bin：存放启动项目的脚本文件node_modules： 存放所有的项目依赖库。public：静态文件(css,js,img)routes：路由文件(MVC中的C,controller)views：页面文件(Ejs模板)package.json：项目依赖配置及开发者信息app.js：应用核心配置文件

三、路由控制

app.js中下面两行代码指定路由文件；
user中第一个参数指定根目录，usersRouter文件中的路由配置都是其子路径，例如：/users/route1、/users/route2

app.use('/', indexRouter);
app.use('/users', usersRouter);

\routes\index.js代码

var express = require('express');
var router = express.Router();

//对应前台路径:http://localhost:3000/
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

\models\users.js代码

var mongoose = require('../db/mongooseDb.js'),
    Schema = mongoose.Schema;

var UserSchema = new Schema({          
    username : { type: String },                    //用户账号
    userpwd: {type: String},                        //密码
    userage: {type: Number},                        //年龄
    logindate : { type: Date}                       //最近登录时间
});

module.exports = mongoose.model('User',UserSchema);

\routes\users.js代码

var express = require('express');
var router = express.Router();

//对应前台路径:http://localhost:3000/users
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

更多express路由配置请看：https://www.expressjs.com.cn/4x/api.html#router

四、模板引擎

app.js中一下两行代码制定了模板文件夹和使用的模板引擎。

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

常用标签

a、<%%>标签里可以写js代码-定义变量

<% var data = 50;var hello = '<h3>hello world</h3>' %>

b、<%=%>和<%-%> 区别 前者不会编译,后者会编译

<h2>data的值为 : <%=data%></h2>  
 <%=hello%><br>  
 <%-hello%>

运行结果:

image

c、<%include xxx%> 包含其他ejs文件,一般用于包含头部引用和页面相同的部分

<%include a%>//a是同目录下的a.ejs

d、<%for%>一般用于后端查询出一段数组数据,前端展示
后端虚拟数据:

req.titles = [  
    {name:'nodejs官网',url:'http://nodejs.org/'},  
    {name:'express官网',url:'http://www.expressjs.com.cn/'},  
    {name:'ejs官网',url:'http://www.embeddedjs.com/'},  
    {name:'javascript官网',url:'http://www.w3school.com.cn/js/'}  
  ];  
 res.render('ejs',req);

前端代码:

<%for(var i=0; i < titles.length; i++){ var title = titles[i]; %>  
  <h3>标题 : <%=title.name%> ,地址 : <%=title.url%> </h3>  
  <%}%>

运行效果:

image

e、<%if%> 判断 一般都和for结合使用,也可单独使用
后端虚拟数据

req.numbers = [  
    parseInt(10*Math.random()),  
    parseInt(10*Math.random()),  
    parseInt(10*Math.random()),  
    parseInt(10*Math.random()),  
    parseInt(10*Math.random()),  
    parseInt(10*Math.random()),  
    parseInt(10*Math.random()),  
    parseInt(10*Math.random()),  
    parseInt(10*Math.random()),  
    parseInt(10*Math.random())  
  ];  
  res.render('ejs',req);

前端代码:

<%for(var i=0; i < numbers.length; i++){ var number = numbers[i]; %>  
  <%if(number < 5){%>  
  <h3>获取后端值小于5,值为 : <%=number%></h3>  
  <%}else{%>  
  <h3>获取后端值大于4,值为 : <%=number%></h3>  
  <%}%>  
  <%}%>

运行结果:

image

五、MongoDB数据库

1、下载
地址1：Download Center: Community Server | MongoDB
地址2：http://dl.mongodb.org/dl/win32/x86_64
下载后运行安装时注意，

image.png

2、启动
打开mongodb安装目录下bin目录，例如：C:\Program Files\MongoDB\Server\4.2\bin>，执行下面代码

./mongod --dbpath D:\MongoDB\data
//这个路径是mongodb数据库文件存放地点，可自定义;
//"./"必须加，win10中powershell不支持执行mongod --dbpath D:\MongoDB\data
//D:\MongoDB\data目录要提前创建好

3、访问
进入mongodb安装目录bin中，命令行执行：./mongo。一些常用的命令：
数据库：show dbs ；use mytest ; db.dropDatabase()
集合：show collections ; db.createCollection("mycollection") ; db.mycollection.drop()
文档：db.mycollection.find() ; db.mycollection.insert({name:"xxx"}) ; db.mycollection.remove({'name':'xxx'})
更多：https://www.runoob.com/mongodb/mongodb-query.html

推荐MongoDB的可视化工具studio-3t、robo-3t，版本：robo3t-1.3.1-windows-x86_64-7419c406.exe
链接：https://pan.baidu.com/s/1HqyABG8gD2o_cuzXMQ44Bw
提取码：le9q在express中，都是基于数据模型对mongodb进行增删改查，所以可视化工具更多是用来查看数据

六、mongoose 数据模型

直接用 node.js 也可以连接数据库进行读写，但很多插件除了封装这个基本功能之外，还提供了很多其他的服务。对于 MongoDB，我不会使用原生 node 去操作，而是选了 mongoose 这个插件。mongoose 官网: https://mongoosedoc.top/

1、安装 mongoose

npm install mongoose --save-dev

2、根目录创建数据库配置文件db\config.js

module.exports = {
    mongodb_url: "mongodb://localhost:27017/blog"
}

3、根目录创建数据库连接文件db\mongooseDb.js

let mongoose = require("mongoose");
let config = require("./config");

var DB_URL = config.mongodb_url;
mongoose.Promise = global.Promise;
/**
 * 连接
 */
mongoose.connect(DB_URL);

/**
  * 连接成功
  */
mongoose.connection.on('connected', function () {
    console.log('Mongoose connection success to ' + DB_URL);
});

/**
 * 连接异常
 */
mongoose.connection.on('error', function (err) {
    console.log('Mongoose connection error: ' + err);
});

/**
 * 连接断开
 */
mongoose.connection.on('disconnected', function () {
    console.log('Mongoose connection disconnected');
});

module.exports = mongoose

4、使用

let User = require("../models/user");
var express = require('express');
var router = express.Router();
router.get('/add', async function (req, res, next) {
  var m = new User({
    uid: 'kkk',
    type: 2,
    uname: "飞牛",
    logintime: new Date
  });
  await m.save();
  res.send('add1');
})
module.exports = router;

在打开http://localhost:3000/users/add后，进入studio 3T就看到添加了一条数据

image.png

七、自动重启工具nodemon

node程序在修改后，都需要npm start重启后才能生效，很麻烦。这里使用nodemon来实现自动重启。1、全局安装

npm i -g nodemon

2、在项目根目录新建nodemon.json

{
    "restartable": "rs",
    "ignore": [
        ".git",
        ".svn",
        "node_modules/**/node_modules"
    ],
    "verbose": true,
    "execMap": {
        "js": "node --harmony"
    },
    "watch": [
 
    ],
    "env": {
        "NODE_ENV": "development"
    },
    "ext": "js json"
}

restartable：设置重启模式ignore：设置忽略文件verbose：设置日志输出模式，true 详细模式execMap：设置运行服务的后缀名与对应的命令
{ “js”: “node –harmony” }
表示使用 nodemon 代替 nodewatch：监听哪些文件的变化，当变化的时候自动重启ext：监控指定的后缀文件名3、启动
a、不使用express generator的项目，直接运行nodemon app.js;
b、使用express generater的项目，在package.json的scripts中添加"auto": "nodemon ./bin/www", 用npm run auto启动项目，源码修改并保存之后，服务器就可以自动启动了。

八、设置session

1、安装

npm install express-session --save

2、app.js配置引入(务必放在路由配置前面)

var session = require('express-session');
//配置中间件
app.use(session({
  secret: "keyboard cat",
  resave: false,
  saveUninitialized: true,
  cookie: ('name', 'value', { maxAge: 5 * 60 * 1000, secure: false })
}));

3、routes/users.js中使用

router.get('/login', async function (req, res, next) {
  req.session.username = "wjb";
  res.send('登录成功！' + req.session.username);
})

router.get('/info', async function (req, res, next) {
  res.send('用户信息:' + req.session.username);
})

router.get('/loginout', async function (req, res, next) {
  req.session.destroy(function (err) {
    res.send("退出登录！" + err);
  });
})

页面效果：

http://localhost:3000/users/login

http://localhost:3000/users/info

http://localhost:3000/users/loginout

http://localhost:3000/users/info

八、设置session(使用redis作为会话存储实例)

1、安装

npm install redis connect-redis express-session

2、app.js配置引入

const redis = require('redis')
const session = require('express-session')
let RedisStore = require('connect-redis')(session)
let redisClient = redis.createClient()
//配置中间件
app.use(session({
  secret: "keyboard cat",
  resave: false,
  saveUninitialized: true,
  store: new RedisStore({ client: redisClient }),
  cookie: {
    secure: false,
    maxAge: 1000 * 60 * 60 * 24 * 30
  }
}));

3、routes/users.js中使用
使用方式同上没有区别。
执行上面操作后，可以使用react redis查看redis数据，如下图：

使用react redis查看redis数据