express之实战

使用express制作小案例

一、上传图片

html页面

<form action="http://localhost:8888/reg" method="post" enctype="multipart/form-data" id="form1">
    <input type="file" name ="f1"> 
    <br>
    <input type="submit">
</form>
<div id="divimg">
    <img src="" id="subImg">
</div>
let form1=document.getElementById("form1");
let subImg=document.getElementById("subImg")
form1.onsubmit=function(){
    let data=new FormData(form1)
    let xhr=new XMLHttpRequest()
    xhr.open(form1.method,form1.action,true)
    xhr.send(data)
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            let str=xhr.responseText
            if(str.endsWith(".png")||str.endsWith(".jpg")){
                //截取图片路径
                str=str.substr(7)
                // console.log(str)
                subImg.src=str
             }else{
                alert("图片有问题")
             }
        }
    }
    // 阻止默认事件,不然页面会跳转
    return false
}

先使用express框架搭建服务器

const express=require("express")
const app=express()
app.listen(8888,()=>{
    console.log("正在监听8888")
})

为了没有跨域的问题,所以这里选择使用读取本地文件的方式打开页面

我把html页面建在了html文件夹中,图片也存放在了里面

// 全局托管html中的文件
app.use(express.static("./html"))

由于前端传输图片的方式为post的请求,所以需要使用body-parser模块,并且使用(我这里是全局使用)

// 引入模块解析post
const bodyparser=require("body-parser")
// 全局引用
app.use(bodyparser.urlencoded({
    extended:false
}))

编写api接口

app.post("/reg",(req,res)=>{
    console.log("有数据来了")
})

使用multer来解析图片和存储图片

const multer = require("multer")
//上传完图片的存储路径
const Multer=multer({
    dest:"./html/asset"
})
//使用multer模块
app.use(Multer.any())

图片的信息在req.files中,先传一张图片查看一下信息

 可以发现图片是能接收到,但是由于缺少后缀名导致无法打开,所以需要在传输成功之后将图片信息重命名一下

所以需要使用fs模块来读取图片的信息

const fs=require("fs")

使用fs.rename来重命名其中有3个参数

第一个参数:oldPath:原来的路径

第二个参数:newPath:新的路径

第三个参数:callback:如果有失败执行的回调

根据上面传过来的信息,可以发现只要把originalname的后缀名加到原来的路径即可

let oldName="./html/asset/"+req.files[0].filename;
let newName=oldName+"."+req.files[0].originalname.split(".")[1];
fs.rename(oldName,newName,err=>{
    if(err){
        console.log("重命名失败")
    }else{
        console.log("重命名成功")
        //把图片的信息发送给前端
        res.send(newName)
    }
})

二、验证码

前端页面

<div>
    <input type="text" id="text">
    <img src="http://localhost:8888/getcaptcha" id="yzm">
</div>
//这里使用的是jquery,记得引入
$(function(){
    //失去焦点传输验证码
    $("input").blur(function(){
        $.ajax({
            type:"get",
            url:"http://localhost:8888/checkcaptcha",
            data:{
                text:$("#text").val()
             },
             dataType:"json",
             success(data){
                 console.log(data.message)
             }
         })
    })
})

这里同样使用托管的方式来打开文件

使用svg-captcha模块来生成验证码

// 引入模块生成图片
const svg=require("svg-captcha")

发送验证码图片的api接口/

getcaptcha

//全局变量,为了后面的验证验证码也能使用
let cap;
app.get("/getcaptcha",(req,res)=>{
    // 创建验证码
    let captcha=svg.create({})
    cap=captcha.text
    res.type("svg")
    res.send(captcha.data)
})

可以发现前端能显示图片的,但是一般来说点击图片是能切换图片的所以给图片加个点击事件

$("#yzm").click(function(){
    $(this).attr("src","http://localhost:8888/getcaptcha?"+Math.random())
})

点击后重新发送src路径请求图片,但是由于路径完全相同不会发送请求,所以在后面传一点参数给后端,这样路径不同就能发送了,

编写验证验证码的接口/checkcaptcha

app.get("/checkcaptcha",(req,res)=>{
    let {text}=req.query
    console.log(cap)
    console.log(text)
    //为了提升用户体验,将大小写全部编程大写,这样就不用区分大小写了
    if(text.toUpperCase()==cap.toUpperCase()){
        res.send({
            message:"验证码正确"
        })
    }else{
        res.send({
            message:"验证码错误"
        })
    }
})

但是这样写完后会出现一个问题,就是在多个用户登录使用验证码的时候有可能会出现即使输入正确也显示错误的情况,那是因为,cap这个变量只会存储最后一个验证码的图片信息,所以我们需要使用session来存储验证码信息

const cookiesession = require("cookie-session")
// 全局使用
app.use(cookiesession({
    //决定安全性
    keys:["jwdawd","jdaiowid"],
    // 过期时间,按毫秒这是一分钟
    maxAge:60*1000*1
}))

把验证码的信息存储到req.session中

req.session.cap=captcha.text

在下面使用判断的时候也是用req.session.cap即可

### Express.js 实战项目示例及教程 #### 使用Express.js创建简单Web应用 为了展示如何使用Express.js来构建Web应用程序,下面提供了一个基本的例子。此例子展示了设置服务器、定义路由以及处理请求的过程。 ```javascript const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); }); ``` 这段代码初始化了一个Express实例并监听端口`3000`上的HTTP请求;当访问根路径时返回字符串'Hello World!'[^1]。 #### 探索《Express.js实战》代码库 对于想要深入了解Express.js的应用场景和技术细节的人而言,《Express.js实战》这本书及其配套的代码库是非常有价值的参考资料。书中不仅包含了丰富的理论知识讲解,还附带了大量的实践案例,帮助读者更好地理解和运用所学的内容。例如,在教育训练方面,该书籍可以作为教材指导学生逐步掌握Node.js Web开发技能;而在个人项目启动阶段,则能凭借其提供的基础结构加速原型设计和早期迭代过程[^2]。 #### 开源微服务架构示例——booking-microservices-expressjs 另一个值得探讨的实际操作案例来自名为`booking-microservices-expressjs`的开源项目。该项目采用现代软件工程理念如CQRS(命令查询职责分离)、垂直切片架构和服务导向架构等方法论,并结合PostgreSQL数据库管理系统与RabbitMQ消息队列工具共同实现了酒店预订系统的功能实现。通过研究此类复杂度较高的工程项目,不仅可以加深对Express框架本身的认识,更能拓宽视野至整个分布式计算领域内的最佳实践模式[^3]。 #### Token验证中间件集成 在某些情况下,可能还需要考虑安全性因素,比如向API接口添加身份认证机制。这里给出了一种基于JWT(JSON Web Tokens)的方式来进行用户登录状态校验的方法: ```javascript // verify.js 文件内容 module.exports = { verifyToken(req, res, next){ const tokenHeader = req.headers['authorization']; if (!tokenHeader.startsWith('Bearer ')) return res.sendStatus(403); try{ // 解析并验证令牌有效性... next(); }catch(err){ res.status(401).json({message:"Invalid Token"}); } } }; // app.js 中间件注册部分 const verifyMiddleware = require('./verify'); app.use('/wish', verifyMiddleware.verifyToken, wishRouter); app.use('/admin', verifyMiddleware.verifyToken, adminRouter); ``` 上述片段说明了怎样编写自定义的身份验证逻辑并将之应用于特定路由之前,从而保护敏感数据的安全性[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值