express模块化开发项目案例

1.需求分析

1.完成用户和管理员对应的注册和登录功能
2.完成对应页面的登录成功后的信息展示
3.完成第三方中间件的使用,包括但不限于验证码,网页logo等

2.项目初始化

新建一个文件夹 demo/
命令行打开该文件夹,初始化为node应用 npm init -y
优化启动命令

package.json
“scripts”: {
…,
“start”: “nodemon app.js”
},

创建对应文件结构
express模块化开发项目案例_第1张图片

3.安装项目所需第三方模块

npm install express ejs express-session serve-favicon svg-captcha -S

4.入口文件与项目启动

app.js

//导入express模块
const express = require('express')
//导入logo模块
const favicon = require('serve-favicon')
//导入路径模块
const path = require('path')
//导入自定义user模块
const { router: user } = require('./routes/user')
//导入session模块
const session = require('express-session')
//创建express服务
const app = express()
//配置ejs模板引擎
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')
//配置session
app.use(session({
        secret: 'zidingyidenasha',
        resave: false,
        saveUninitialized: true
    }))
//配置网页logo路径
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
//配置静态资源路径
app.use(express.static('public'))
//配置post请求
app.use(express.urlencoded({ extended: false }))
app.use(express.json())
//将uesr路径传递给对应路由处理
app.use('/user', user)
//错误处理中间件
app.use((req, res, next) => {
    res.status(404)
    res.send('页面找不到了')
})
//监听端口
app.listen(3000, err => {
    console.log('服务器已经在3000端口启动');
})

5.用户业务处理

register.ejs

<body>
    <form action="/user/register" method="post">
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="password" name="password" placeholder="请输入密码">
        <input type="password" name="cofrim" placeholder="请确认密码">
        <input type="text" name="nickname" placeholder="请输入昵称">
        <img src="/user/captcha" alt=""><input type="text" name="captcha" placeholder="请输入验证码">
        <input type="submit" value="注册">

    form>
    <h1>
    //服务器端返回msg数据
        <%= msg %>
    h1>
    <script>
    //点击图片刷新验证码
        let img = document.querySelector('img')
        img.onclick = function() {
            this.src = '/user/captcha?' + Math.random()
        }
    script>
body>

login.ejs

<body>
    <form action="/user/login" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit">
    form>
    <%= msg%>
body>

index.ejs

<body>
    <h2>欢迎您,尊敬的h2>
//登录成功展示在线人数
    	<% if(req.session.login) {%>
        <strong>   <%= req.session.login.nickname %>strong>
        <a href="/user/logout">退出登录a>
        <% }else{%>
        <strong>游客strong>
        <a href="/user/login">去登录a>
        <%}%>
        <h2>当前在线人数:
        <%= onlines %>
        h2>
body>

utils.js

const svgCaptcha = require('svg-captcha')
const express = require('express')
const router = express.Router()
//验证码配置路由
router.get('/', function(req, res) {
    let captcha = svgCaptcha.create()
    req.session.captcha = captcha.text
    res.type('svg')
    res.status(200).send(captcha.data)
})
module.exports = router

data.js

let users = [{
    username: 'zhangsan',
    password: '123456',
    nickname: '张三'
}, {
    username: 'lisi',
    password: '123456',
    nickname: '李四'
}, {
    username: 'wangwu',
    password: '123456',
    nickname: '王五'
}, {
    username: 'zhaoliu',
    password: '123456',
    nickname: '赵六'
}]
//存储在线人数
let onlines = []
module.exports = {
    users,
    onlines
}

user.js

//导入express模块
const express = require('express')
//创建router路由
const router = express.Router()
//导入path模块
const path = require('path')
//结构data中导出的对应数据
const { users, onlines } = require('../api/data')
//导入工具模块
const captcha = require('./utils')
//设置基本路径
const BASE_DIR = path.join(__dirname, '../views/user')
//登陆页面
router.get('/login', (req, res) => {
    res.render(path.join(BASE_DIR, 'login'), {
        msg: ''
    })
})
// 请求刷新验证码
router.use('/captcha', captcha)
//用户登录
router.post('/login', (req, res) => {
//结构请求内容
    let { username, password } = req.body
    //判断是否与data中用户数据一致
    for (let u of users) {
        if (u.username == username && u.password == password) {
        //验证成功,判断在线用户中是否有该用户
            if (onlines.indexOf(u.nickname) < 0) {
            //将该用户添加到数组中
                onlines.push(u.nickname)
            }
            //会话跟踪
            req.session.login = u
            //返回首页,渲染数据
            return res.render(path.join(BASE_DIR, 'index'), {
                    req,
                    onlines: onlines.length
                })
                // return res.redirect(path.join(BASE_DIR, '../user/index'))
        }
    }
    return res.render(path.join(BASE_DIR, 'login'), {
        msg: '用户名或者密码错误,无法正常登录'
    })
})
//首页路由,展示在线人数
router.get('/index', (req, res) => {
    res.render(path.join(BASE_DIR, 'index'), {
        req,
        onlines: onlines.length,

    })
})
//退出功能
router.get('/logout', (req, res) => {
    var index = onlines.indexOf(req.session.login.nickname)
    onlines.splice(index, 1)
    req.session.login = null
    return res.render(path.join(BASE_DIR, 'login'), {
        msg: '退出成功'
    })

})
//注册页面
router.get('/register', (req, res) => {
    return res.render(path.join(BASE_DIR, 'register'), {
        msg: ''
    })

})
//注册请求
router.post('/register', (req, res) => {
    let { username, password, cofrim, nickname, captcha } = req.body
    for (let u of users) {
		//判断用户是否已被注册
        if (username == u.username) {
            return res.render(path.join(BASE_DIR, '/register'), {
                msg: '用户名已被注册,换一个试试'
            })
        }
        if (password != cofrim) {
            return res.render(path.join(BASE_DIR, '/register'), {
                msg: '两次密码输入不一致'
            })
        }
        if (captcha.toUpperCase() != req.session.captcha.toUpperCase()) {
            return res.render(path.join(BASE_DIR, '/register'), {
                msg: '验证码错误'
            })
        }
        //注册成功,将新用户添加到用户数组中
        let newuser = { username, password, nickname }
        users.push(newuser)

        return res.render(path.join(BASE_DIR, '/login'), {
            msg: '注册成功,前往登录'
        })

    }
})
//导出user模块
module.exports = {
    router
}

你可能感兴趣的:(经典案例,1024程序员节)