使用express框架实现基本的用户登录功能

最新推荐文章于 2023-08-30 11:49:05 发布



最新推荐文章于 2023-08-30 11:49:05 发布

阅读量1.4k

点赞数

分类专栏：经典案例文章标签： javascript 前端 node.js

本文链接：https://blog.csdn.net/weixin_44978043/article/details/120925620

版权

经典案例专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Express构建一个简单的用户登录系统。从需求分析开始，包括初始化Node项目、设置服务启动、完善文件结构、添加中间件支持、实现登录页面访问和登录功能。通过创建GET和POST路由，处理登录表单提交，验证用户名和密码，展示登录成功或失败的提示。案例适合初学者，展示了基础的Express应用开发流程。

摘要由CSDN通过智能技术生成

1.需求分析

实现一个用户登录网站的功能，登录成功后完成友好的提示
访问登录页面
填写登录信息：账号、密码、点击登录查看结果

2.初始化项目

创建一个node项目 demo/
进入demo文件夹，执行命令初始化为NodeJS应用

cd demo
npm init -y

3.代码实现：服务启动

安装项目依赖

npm install express -s
创建项目入口文件：demo/app.js
编辑app.js 文件，完成模块的导入、服务对象的创建、端口的监听和服务启动

// 导入模块
const express = require('express')

// 创建应用
const app = express()

// 3.监听端口
app.listen(3000,err=>{
    console.log('服务器已经在http://localhost:8000启动...');
})

打开命令行，启动项目测试项目是否可以成功启动

4.完善文件结构

在这里插入图片描述
login.html

<body>
    <form action="/login" method="post">
        账号:
        <input type="text" name="username"><br>
        密码：
        <input type="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>

5.添加中间件支持

添加静态资源访问中间件
添加POST参数解析中间件(body-parser第三方中间件，需要安装才能使用)

npm install body-parser -S

app.use(express.static('public'))
app.use(bodyParer.urlencoded({extended:false}))
app.use(bodyParer.json())

6.完成登录页面访问

添加一个GET路由，访问登录页面

// GET路由.获取登录页面
app.get('/login', (req, res) => {
        res.sendFile(path.join(__dirname, 'views', 'login.html'))
    })

浏览器地址栏输入： http://localhost:8000/login

7.实现登录

添加一个post路由，获取用户发送的账号+ 密码，验证账号和密码是否正确

app.post('/login',(req,res)=>{
    let {username,password} = req.body
    if(username == 'zhangsan' && password == '123') {
        return res.send('登录成功')
    }
    return res.send('登陆失败')
})

本案例针对express入门级别，更加完善的express项目框架后续更新

8.完整代码

// 导入模块
const express = require('express')
const bodyParer = require('body-parser')
const path = require('path')
    // 创建应用
const app = express()

// 注册中间件
app.use(express.static('public'))
app.use(bodyParer.urlencoded({ extended: false }))
app.use(bodyParer.json())

// GET路由.获取登录页面
app.get('/login', (req, res) => {
        res.sendFile(path.join(__dirname, 'views', 'login.html'))
    })

app.post('/login',(req,res)=>{
    let {username,password} = req.body
    if(username == 'zhangsan' && password == '123') {
        return res.send('登录成功')
    }
    return res.send('登陆失败')
})
    // 3.监听端口
app.listen(3000, err => {
    console.log('服务器已经在3000端口启动...');
})



关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
使用express框架实现基本的用户登录功能

1.需求分析实现一个用户登录网站的功能，登录成功后完成友好的提示访问登录页面填写登录信息：账号、密码、点击登录查看结果2.初始化项目创建一个node项目 demo/进入demo文件夹，执行命令初始化为NodeJS应用cd demonpm init -y3.代码实现：服务启动安装项目依赖npm install express -s创建项目入口文件：demo/app.js编辑app.js 文件，完成模块的导入、服务对象的创建、端口的监听和服务启动// 导入模块const e
复制链接

扫一扫

专栏目录