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端口启动...');
})