Nodejs--Express框架使用

一.概念

二.项目目录结构

三.app.js

四.项目需要的中间件

五.Mysql连接

六.日志配置

七.实体模型配置

八.统一结果封装

九.app.js的详细配置

十.自定义登录拦截器

十一.route路由配置

十二.controller处理

十二：静态页面：

十三：总结

一.概念

Express是一个使用Node.js编写的灵活且最受欢迎的Web应用程序框架。它提供了一组用于构建Web应用程序和API的工具和功能，使开发者能够轻松地处理路由、请求和响应、中间件、模板引擎等。

以下是一些Express框架的特点和用法：

快速搭建Web应用程序：Express提供了一个简洁的API，使您能够快速搭建一个完整的Web应用程序。通过使用Express，您可以轻松地定义路由、处理HTTP请求和响应、设置和使用中间件等。
简化的路由功能：Express提供了一种简单而强大的方式来定义和处理路由。您可以使用Express的路由功能来定义不同URL路径的处理函数，并将它们链接在一起以构建完整的Web应用程序。
中间件支持：Express使用中间件来处理请求和响应。中间件是一个函数，它可以在请求到达目标处理函数之前或之后执行，并对请求或响应进行处理。Express提供了许多内置的中间件，也支持使用第三方中间件。
数据库集成：Express与多个数据库提供商（如MongoDB、MySQL等）兼容，并提供了方便的数据库集成。您可以使用适当的数据库驱动程序和中间件来连接和操作数据库。
模板引擎支持：Express支持多种模板引擎，如EJS、Pug等。模板引擎允许您在服务器端生成HTML，并将动态数据注入到模板中。

总的来说，Express是一个简单而强大的Web应用程序框架，它使开发者能够快速构建可靠的Web应用程序和API。无论是构建小型项目还是大型应用程序，Express都是一个理想的选择。

二.项目目录结构

说明：

1.app.js ：该文件是启动服务器的主文件，类似于Springboot中的Appliction,

2.routes/ ：该目录进行了路由的相关配置

3.public/ ：该目录是静态文件目录，页面放在该目录下

4.config/ ：该目录放我们项目的一些配置文件

5.models/ : 该目录放实体类模型

6.controller/ ：该目录类似java的controller,mvc模式

7.interceptor/ :该目录放一些拦截器的相关配置

8.logs/ :该目录放日志文件

9.package.json ：该文件是我们项目的说明和依赖，类似于pom.xml

三.app.js

express基于nodejs标准库中的http模块构建，下面我们看一下app.js文件

我们先看一下最核心最简单的配置:

const express = require('express')

//构建应用对象
const app = express()

app.get('/',(req,res)=>{
   res.send("hello,world")
})

//启动服务器
app.listen(8081,()=>{
    console.log("访问地址: http://localhost:8081");
})

当我们访问8081这个端口时，就能返回hello,world,

四.项目需要的中间件

我们的项目需要满足一些基本的要求，例如：连接mysql,会话管理，静态资源解析，等，下面我们看看我们需要安装哪些中间件：

{
  "name": "untitled",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "body-parser": "^1.20.2",
    "cookie-parser": "~1.4.4",
    "cors": "^2.8.5",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "express-session": "^1.17.3",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11",
    "sequelize": "^6.35.0",
    "session-memory-store": "^1.0.0",
    "static": "^2.0.0",
    "winston": "^3.11.0"
  }
}

我们来解释一下：

1.axios : 这个不用多说了，就是发请求的

2.body-parser: 这个是用来解析请求体的，

3.cookie-parser: 这个是用来解析cookie获取的

4.cors: 这个是用来配置跨域的

5.debug: express自带的

6.express-session: 负责session管理

7.sequelize: 这个是orm框架，类似于mybatis

8.session-memory-store: 这个是用来将session保存到内存中

9.static: 这个是负责解析静态资源目录的

10.winston: 这个是日志框架，类似于log4j,slf4j等

五.Mysql连接

在config/目录下创建db.js文件

const Sequelize = require('sequelize')

const sequelize = new Sequelize('mybatis','root','123456',{
    host: 'localhost',
    dialect: 'mysql',
    timezone: '+08:00',     // 这里是东八区，默认为0时区
    // 使用连接池
    pool: {
        max: 5,
        min: 0,
        acquire: 30000,
        idle: 10000,
    },
})


module.exports = sequelize;

创建sequelize对象，前三个参数分别是：数据库名称，用户名，密码, 然后是地址，类型，

时区，以及连接池配置

最后不要忘记吧对象导出

六.日志配置

在config/目录下创建log.js文件

const winston = require('winston')
const path = require('path');
//上一级目录
const dirname = path.dirname(__dirname)
// 设置日志文件输出位置
const logFilePath = path.join(dirname, 'logs', 'logs.txt');

const util = require('util');


// 创建日志记录器
const logger = winston.createLogger({
    level: 'info', // 设置日志级别（可选）
    //format: winston.format.json(), // 设置日志格式（可选）
    format: winston.format.combine(
        winston.format.timestamp({
            format: 'YYYY-MM-DD HH:mm:ss' // 设置时间格式
        }),
        winston.format.printf(info => {
            // 检查是否传递了user参数
            if (info.message && info.user) {
                return `${info.timestamp} ${info.level}: ${info.message} ${info}`;
            }
            return `${info.timestamp} ${info.level}: ${info.message}`;
        })
    ),
    transports: [
        new winston.transports.Console(), // 将日志输出到控制台
        new winston.transports.File({ filename: logFilePath }) // 将日志输出到文件
    ]
});


function logInfo(...args){
    logger.info(getStr(args))
}
function logError(...args){
    logger.error(getStr(args))
}

function getStr(...args){
    var str = ''
    for(let i=0;i<args.length;i++){
        var s = util.inspect(args[i])
        str += s
    }
    return str;
}

module.exports = {logInfo,logError};

我这里使用了util模块的inspect()方法，他可以吧任意类型的值转化为字符串

七.实体模型配置

我们先看一下数据库：

tb_user表:

tb_student表:

然后我们分别在models/目录下创建User.js和Student.js文件

const {Model,DataTypes} = require('sequelize')

const sequelize = require('../config/db')

/**
 * 创建user模型,指定表为tb_user
 */
const User = sequelize.define('User',{
    id:{
        type:DataTypes.INTEGER,
        primaryKey:true,
        autoIncrement:true
    } ,
    username: DataTypes.STRING,
    password: DataTypes.STRING
},{
    tableName:"tb_user",
    timestamps: false // 关闭自动插入 timestamps 字段
})

module.exports = User;

const {Model,DataTypes} = require('sequelize')

const sequelize = require('../config/db')


/**
 * 创建user模型,指定表为tb_user
 */
const Student = sequelize.define('Student',{
    id:{
        type:DataTypes.INTEGER,
        primaryKey:true,
        autoIncrement:true
    } ,
    stuid:DataTypes.INTEGER,
    stuname:DataTypes.STRING,
    sex:DataTypes.STRING,
    myClass:DataTypes.STRING,
    address:DataTypes.STRING,
    tel:DataTypes.STRING,
    sorce:DataTypes.INTEGER

},{
    tableName:"tb_student",
    timestamps: false // 关闭自动插入 timestamps 字段
})

module.exports = Student;

说明一下:

每个字段可以规定为mysql的那种类型，type:指定类型，primaryKey:指定主键，autoIncremnt:指定自增等...后面我会在出一期详细介绍sequlize框架的文章

八.统一结果封装

像java中那样封装结果：code,msg,data三个:

在models/目录下创建Result.js文件


const httpStatus = require('./HttpStatus')

class Result {
    constructor(code, msg, data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    /**
     * 默认的成功返回方法

     */
    static ok(httpStatus,data) {
        return new Result(httpStatus.code,httpStatus.msg,data)
    }

    /**
     * 默认的失败返回方法
     * @returns {Result}
     * @param httpStatus
     */
    static error(httpStatus) {
        return new Result(httpStatus.code,httpStatus.msg,null);
    }
}

module.exports = Result

然后在创建HttpStatus.js文件

const HttpStatus = {
    OK: { code: 200, msg: "success" },
    ERROR: { code: 500, msg: "failure" }
};


module.exports = HttpStatus;

这是要给字面量对象，我们可以使用它来模拟java中的枚举类型

九.app.js的详细配置

const express = require('express')
const bodyParser = require('body-parser')
//导入用户路由
const userRoutes = require('./routes/user')
const stuRoutes = require('./routes/student')
//导入会话管理
const session = require('express-session')
const MemoryStore = require('session-memory-store')(session);
//导入拦截器
const {checkRequest} = require('./intercepter/intercepter')
//导入cookie解析器
const cookieParser = require('cookie-parser');
//导入跨域配置
const cors = require('cors')
//导入static静态资源模块
const static = require('static')


//构建应用对象
const app = express()
//设置跨域
app.use(cors())
//启用static模块
app.use(express.static('public'))

//解析请求体
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extend: true }))


//设置会话中间件
app.use(session({
  sotre: new MemoryStore(), //使用内存管理会话
  secret: 'ikun123',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true,maxAge: 1800000 } //30分钟
}))

//使用cookie解析器
app.use(cookieParser())

//使用拦截器
app.use(checkRequest)

//使用路由
app.use('/user',userRoutes)
app.use('/stu',stuRoutes)



//启动服务器
app.listen(8080,()=>{
  console.log("访问地址: http://localhost:8080");
})

我们通过以上配置可以基本实现一些主要的功能

十.自定义登录拦截器

我们可以写一个类似springmvc那样的拦截器，来判断是否登录

在interceptor/目录下创建intercerptor.js文件:

// AuthMiddleware.js
const whitelist = ['/user/login','/user/register'];
//const blacklist = ['/user/list','/user/logout','/user/add'];
//导入会话管理
const session = require('express-session')
const MemoryStore = require('session-memory-store')(session);

const checkRequest = (req, res, next) => {
    const url = req.originalUrl;

    if (whitelist.includes(url)) {
        next();
    }else{
        //如果不是白名单，那么就需要验证了
        console.log("黑名单拦截...");

        //  console.log(req.cookies.sessionID);

        //黑名单
        if(req.cookies.sessionID != null){
            const cookieSessionID = req.cookies.sessionID
            const acticeSessions = req.sessionStore.sessions;

            //  console.log(acticeSessions);

            for(let sessionID in acticeSessions){
                // console.log(sessionID);

                //比较二者值
                if(sessionID === cookieSessionID){
                    //相等，放行，跟新session时间
                    acticeSessions[sessionID].validity = 30*60
                    console.log("放行...");
                    return next()
                }
            }
            //遍历完没有找到seesionID,说明回话过期
            return res.status(401).json({message:'会话过期!,请重新登录'})
        }else{
            return res.status(401).json({message:'未登录！'})
        }
    }
};

module.exports = {
    checkRequest
};

这里我们先创建了一个白名单，来默认放行不需要拦截的路径，然后其他的路径需要拦截，

我们可以看到它传入三个参数：req,res.next，这个next它是express框架内置的一个用来负责函数执行顺序的，也就是自带的，我们可以在任何函数中使用它，当放行之后，我们使用next()方法来继续执行下一个函数,

我们先尝试获取请求头中的cookie中的sessionID,如果有，我们拿着这个sessionID和我们服务端保存的session集合中遍历，对比是否有相等的，如果有，就放行，没有，返回会话过期提示

为什么是遍历呢？因为我们的服务端保存了很多用户的session,不可能是单个session,所以要遍历对比

十一.route路由配置

我们在route/目录下分别创建user.js和student.js,

const express = require('express')
const UserController = require('../controller/UserController')

const router = express.Router()

//GET /user/login
router.post('/login',UserController.login)

//GET /user/list --获取用户列表
router.get('/list',UserController.list)

//POST /user --添加用户
router.post('/add',UserController.addUser)

//GET /user/test 测试路径
router.get('/test',UserController.test)

//GET /user/logout 退出登录
router.post('/logout',UserController.logout)

module.exports = router

const express = require('express')
const StuController = require('../controller/StuController')

const router = express.Router()


router.get('/list',StuController.list)

router.get('/byid/:id',StuController.searchByid)


module.exports = router

类似于vue中的路由配置，

十二.controller处理

我们在controller/目录下分别创建UserController.js和StutController.js

const User = require('../models/User')
const {logInfo,logError} = require('../config/log')
//事务需要用
const Sequelize = require('../config/db')
const Result = require("../models/Result");
const HttpStatus = require("../models/HttpStatus");

//导入类型约束



module.exports = {

    //登录
    async login(req,res){
        try {

            //避免重复登录
            const sinId = req.cookies.sessionID
            if(sinId !=null){

                //获取所有sessions
                const acticeSessions = req.sessionStore.sessions;
                //遍历
                for(let sID in acticeSessions){
                    if(sID === sinId){
                        //说明有sessionID,返回重复登录错误
                        return res.status(200).json({message:'重复登录!'})

                    }
                }
            }
            //都没有说明可以继续登录了
            const {username,password} = req.body;
            //假设
            if(username === 'lisi' && password === '123'){


                //服务端设置session
                req.session.username = username;
                //设置cookie
                res.cookie('sessionID', req.sessionID, { httpOnly: true, maxAge: 3600000 });

                //   res.cookie('username', username, {
                //     expires: new Date(Date.now() + 1800000), // 设置 cookie 过期时间
                //     httpOnly: true, // 禁止客户端 javascript 访问 cookie
                //     secure: false, // 如果使用 HTTPS，请设置为 true
                // });
                //返回响应
                logInfo('用户登录:',{username})
                //res.status(200).json({message:'登录成功!'})
                res.status(200).json(Result.ok(HttpStatus.OK,username))
            }else{

                res.status(401).json({messge:'用户名或者密码错误'})
            }

        } catch (err) {
            logError('登录错误:',{err})
            res.status(500).json({msg:'服务器错误'+err})
        }

    },


    //查询所有用户
    async list(req,res){
        try {
            const users = await User.findAll()
            return res.json(users)
        } catch (error) {
            res.status(500).json({msg:'服务器错误'})
        }
    },

    /**
     *  添加用户
     */
    async addUser(req,res){
        const { username,password } = req.body;
        try {
            await Sequelize.transaction(async (t)=>{
                await User.create({username,password},{transaction:t})
                //记录日志
                logInfo('添加用户：',username,password)
                res.status(200).json({msg:'添加成功'})
            }).then(()=>{
                console.log("事务已经提交");
            })
        } catch (err) {
            logError('添加用户失败',{err})
            res.status(500).json({msg:'服务器错误'})
        }
    },

    /**
     * //退出登录
     */
    async logout(req,rese){
        console.log("退出登录。。。。");
        try {
            //将session销毁
            var sessionID =  req.cookies.sessionID
            //获取所有sessions
            const acticeSessions = req.sessionStore.sessions;
            //遍历
            for(let sID in acticeSessions){
                if(sID == sessionID){
                    //销毁session
                    sessionStore.destroy(sID, (err) => {
                        if (err) {
                            console.error('Failed to destroy session:', err);
                            res.status(500).json({message:err})
                        } else {
                            console.log('Session destroyed successfully.');
                            //销毁cookie
                            req.clearCookie('sessionID')
                            res.status(200).json({message:'退出成功'})
                        }
                    });
                }
            }

        } catch (error) {
            res.status(500).json({msg:'服务器错误'})
        }
    },


    //测试
    async test(req,res){
        try {
            console.log("测试....");
            res.json({test:"测试"})
        } catch (error) {
            res.status(500).json({msg:'服务器错误'})
        }
    }



}

读者自行看上面的代码和注释思考登录和注销的流程

注意：我们在添加用户时开启了事务，当成功添加后提交事务

StuController.js


const Student = require('../models/Student')
const {logInfo,logError} = require('../config/log')
//事务需要用
const Sequelize = require('../config/db')

module.exports = {

    //查询所有学生
    async list(req,res) {
        try {

            const stuList = await Student.findAll()
            //   console.log(stuList);
            res.status(200).json(stuList)
        } catch (error) {
            res.status(500).json({msg: '服务器错误'})
        }
    },
    //根据id查询学生
    async searchByid(req,res){
        const id = req.params.id
        console.log(id)
        console.log("hhhh")
        try{
            const stu = await  Student.findOne({
                where:{id:id}
            })
           if(stu){
               res.status(200).json(stu)
           }else {
               res.status(200).json({message:"无此用户"})
           }
        }catch (error){
            res.status(500).json({msg: '服务器错误'})
        }

    }
}

十二：静态页面：

下面看一下我们的静态页面：

public/目录下的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


    <div id="app">

        <div>账号:<input type="text" v-model="username"></div>
        <div>密码:<input type="text" v-model="password"></div>
        <button @click="login">登录</button>
    </div>
 
 
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script>
       new Vue({
         el:"#app",
         data:{
            return(){
                username:""
                password:""
            }
         },
         methods:{
              //登录
              login(){
                axios.post('http://localhost:8080/user/login',
                {
                    "username":this.username,
                    "password":this.password
                }).then(res=>{
                    if(res.data.code===200){
                        alert("登录成功")
                        location.href = './html/home.html'
                    }
                })
              }

         }
       })
       

    </script>


<body>
    
</body>
</html>

public/html/下的home.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统</title>
    <link href="../css/home.css" rel="stylesheet" type="text/css">
</head>
<body>
    
    <div id="app">
         <h1>学生管理</h1>

        <input type="text" v-model="id"><button @click="search">搜索</button>
         <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>班级</th>
                <th>地址</th>
                <th>电话</th>
                <th>分数</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in students" :key="index" class="stu">
                <th>{{ item.stuid }}</th>
                <th>{{item.stuname}}</th>
                <th>{{item.sex}}</th>
                <th>{{item.myClass}}</th>
                <th>{{item.address}}</th>
                <th>{{item.tel}}</th>
                <th>{{item.sorce}}</th>
                <th><a href="javascript:;" class="edit">编辑</a>
                    <a  href="javascript:;" class="del">删除</a></th>
                
            </tr>
         </table>
         

         <div>hello</div>
    </div>

    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/config.js"></script>
     <script>
        
        new Vue({
            el:"#app",
            data(){
                return{
                    students:[],
                    id:''
                }
            },
            created(){
                this.getStuList()
            },
            methods:{
                //查询所有学生
                getStuList(){
                    axios.get(url + '/stu/list').then(res=>{
                        this.students = res.data;
                    })
                },
                //根据id查询学生
                search(){
                    axios.get(url+`/stu/byid/${this.id}`).then(res=>{
                        this.students = res.data
                    })
                }
            },
            watch:{
                students:function (newVal,oldVal){
                    this.students =
                }
            }
            
        })
     </script>


</body>
</html>

下面我们运行一下项目：

可以看到我们项目成功启动了！

我们先访问一下home.html中的/user/list看看如果不登录会咋样：

可以看到为登录，下面我们先登录，

这里返回的格式两个不一样因为我写的不完善，没有每一个都是三个那种Result格式的，请见谅！

可以看到，登录成功了，下面我们在访问一下/user/list接口：

可以看到成功查询到了学生列表！，

下面我们来新增一个学生：

可以看到添加成功了！

看一下控制台输出：

Executing (072a3295-6d06-424e-915d-8aa19e702c03): INSERT INTO `tb_user` (`id`,`username`,`password`) VALUES (DEFAULT,?,?);
2023-11-19 21:46:16 info: [ '添加用户：', 'jjh', '123' ]
Executing (072a3295-6d06-424e-915d-8aa19e702c03): COMMIT;
事务已经提交

看到事务已经提交！

再看一下日志：

2023-11-19 21:44:01 info: [ '用户登录:', { username: 'lisi' } ]
2023-11-19 21:46:16 info: [ '添加用户：', 'jjh', '123' ]

可以看到日志已经成功记录了！

下面我们看一下前端页面：

可以看到成功登录！

如果我们继续访问该接口：

可以看到重复登录!!!

登录成功后页面会跳转到home.html：

可以看到学生成功的查询出来了！

十三：总结

好了，以上就是nodejs的express框架的基本使用了，读者可以在此基础上实现根据id查询用户，分页查询，批量增加删除用户等功能，我们下期再见！