express模块化开发项目案例

最新推荐文章于 2022-10-04 14:56:07 发布
最新推荐文章于 2022-10-04 14:56:07 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 经典案例 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44978043/article/details/120932371
版权

1.需求分析

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

2.项目初始化

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

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

创建对应文件结构
在这里插入图片描述

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
}

关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
NodeJS全栈开发一个功能完善的Express项目（附完整源码）
qq_15041931的博客
06-24 1万+
Node.js对前端来说无疑具有里程碑意义，与其越来越流行的今天，掌握 Node.js 技术已经不仅仅是加分项，而是前端攻城师们必须要掌握的一项技能。而 Express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架，成为 Node.js 最流行的框架，所以使用 Express 进行 web 服务端的开发是个不错且可信赖的选择。但是 Express 初始化后，并不马上就是一个开箱即用，各种功能完善的 web 服务端项目，例如：MySQL 连接、jwt-token 认证、md5 加密、中间件
Express知识点以及案例总结
guai_guai_guai的博客
05-21 958
广义上来讲，路由就是映射关系例如:人工客服中的每个按键都对应不同的服务，在这里，路由就是按键与服务之间的映射关系// 定义一个最简单的中间件函数// console.log('这是最简单的中间件函数')// 把流转关系，转交给下一个中间件或路由// next()// }// 将 mw 注册为全局生效的中间件// 这是定义全局中间件的简化形式console.log('这是最简单的中间件函数')next()})console.log('调用了 / 这个路由')})
一个开箱即用，功能完善的 Express 项目
huang100qi的专栏
12-17 512
node.js 对前端来说无疑具有里程碑意义，在其越来越流行的今天，掌握 node.js 已经不仅仅是加分项，而是前端攻城师们必须要掌握的技能。而 express 以其快速、开放、极简的特性， 成为 node.js 最流行的框架，所以使用 express 进行 web 服务端的开发是个不错且可信赖的选择。但是 express 初始化后，并不马上就是一个开箱即用，各种功能完善的 web 服务端项目，...
eXpressApp Framework 老外一个开源项目
12-19
基于eXpressApp Framework 的开源项目，老外的，学习学习，VS2008
express模块化路由
LLL3189860667的博客
08-24 882
在我们使用express的时候，如果不作模块化处理，那么就需要在app.js中写入大量的代码。如果将所有的路由都挂载到app服务器对象上的话，随着路由的不断增多，app.js中的代码量会不断增多，那么将会使得后期我们对app.js的维护难以进行，同时这也十分不利于我们多人合作编码。
【后端开发框架】教程&案例&相关项目
最新发布
06-18
Spring Boot - Java 的一个依赖注入和模块化框架，简化了基于 Spring 的应用开发。 Ruby on Rails - 一个使用 Ruby 语言的服务器端 Web 应用框架。 ASP.NET Core - 跨平台的高性能框架，用于构建现代 Web 应用和服务...
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
10-18
在项目构架方面，`app.js`是主入口文件，负责初始化Express应用，并设置中间件、路由和配置。例如，`morgan`中间件用于记录请求日志，`body-parser`中间件解析HTTP请求体中的JSON或URL编码数据，`cookie-parser`处理...
Vue全家桶前后台分离实战案例（含资料）
06-16
5.采用模块化、组件化、工程化的模式开发；?6.具体涉及技术：?(1).使用代理服务器解决跨域；?(2).mock数据接口库: mockjs；?(3).ES7最新语法: async/await；?(4).最流行的ajax请求库: axios；?(5).常用的滑动库: ...
整合开发1
08-08
在本案例中，我们关注的是基于Vue.js和Express的前端与后端集成，以及npm、json和webpack等关键组件的角色。 首先，Vue.js是一个轻量级的前端JavaScript框架，它专注于视图层，提供了声明式的数据绑定和组件化，...
博客：用Node.js + Express和MongoDB构建一个属于自己的博客
02-04
说明/说明 没有采用前分离的分离和当前流行的MVVM框架，前端也没有任何和和工程化，采用了自己的博客，UI风格我自己的设计成... 该项目不使用前后分离的方式，也不使用流行的MVVM框架，如react和Vue，前端尚未模块化
基于Devexpress的winform开源框架（伍老师de )
12-19
基于Devexpress的winform开源框架，包括源码。 网盘密码: a123
NodeJS入门项目案例（Express+Mysql）服务端开发.zip
05-20
NodeJS入门项目案例（Express+Mysql）服务端开发。 初识NodeJS服务端开发（Express+Mysql） NodeJS Mysql Express
【老板要我啥都会】|前端升全栈之项目使用express重构项目（下篇）
Lushengshi的博客
10-04 809
接上一文，本文继续讲解使用express重构博客项目，下篇，可以结合上篇一起学习！
构建express项目的两种方式以及对express知识点的说明
浪头的博客
04-18 1743
express模块包的介绍与搭建项目，express-generator脚手架的介绍与搭建项目
nodeJS 系列四 Express基本使用；路由的概念；中间件；跨域资源共享问题；
m0_55170432的博客
04-28 808
------------------------- Express -------------------------- 1.1 Express 简介 官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。 1. Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。 Express 的中文官网： ht
express项目实战
ElvisSu的专栏
02-20 810
1. express前期 创建目录todo_api2 初始化package.json npm init -y 安装线上依赖 npm install express mysql2 sequelize sequelize-cli -S 安装开发依赖 （热更新） npm i nodemon -D 2. express后期 1. 安装mysql 2. 创建数据库databas...
Express 项目创建 并启动服务：
热门推荐
一条咸鱼
12-01 1万+
默认 你已经安装 express :桌面新建文件夹 express为我们的测试项目：1，cd 到项目 执行命令：C:\Users\22945\Desktop\express>express -e warning: option `--ejs' has been renamed to `--view=ejs' create : . create : ./package.json
therouter 模块化开发demo
06-09
好的，下面是一个简单的therouter模块化开发demo，供参考： 首先，在项目的根目录下创建一个名为router.js的文件，用于定义路由规则和处理请求的回调函数。 ``` // router.js const express = require('express'); const router = express.Router(); router.get('/', (req, res) => { res.send('Hello World!'); }); module.exports = router; ``` 然后，在主文件（如app.js）中引入router.js，并使用app.use()函数将其挂载到指定的路径下。 ``` // app.js const express = require('express'); const app = express(); const router = require('./router'); app.use('/api', router); app.listen(3000, () => { console.log('Server started!'); }); ``` 这样，当用户访问/api路径时，就会调用router.js中定义的路由规则和处理请求的回调函数。 当然，在实际开发中，我们可能需要定义更多的路由规则和处理函数，以实现更复杂的功能。但以上示例代码应该可以帮助你了解therouter模块化开发的基本思路和实现方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值