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即可