十.处理web页面向node服务器发送图片 - 文种玉

图片请求案例

web页面如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>页面已加载</h1>
    <div>
        <img src="/static/1.jpg" alt="">
        <img src="/static/2.jpg" alt="">
    </div>
</body>
</html>

node 服务器代码如下

const express = require("express");
const app = express();
app.listen(8080);

const path = require("path");
//使用中间件加载静态资源
app.use(express.static("static"));
//加载web页面
app.use(express.static("public"));
/**
 *  处理图片发送的请求
 */
 app.get("/static/:jpg",(req,res)=>{
    // console.log("jpg1:",jpg);
    const {jpg} = req.params;
    const filePath = path.resolve(__dirname,"./static",jpg);
    res.sendFile(filePath);
})

文件路径如下

将图片请求添加到登录注册当中

连接数据库

const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost:27017/school",{
    useNewUrlParser: true,
    useUnifiedTopology: true
});
mongoose.connection.once("open",err=>{
    if(err){
        console.log(err);
        return;
    }
    console.log("database connection success!");
})

创建数据表连接对象

const mongoose = require("mongoose");
const studentSchema = mongoose.Schema({
    username:{
        type:String,
        unique:true,
        require:true
    },
    password:{
        type:String,
        require:true
    }
})
const studentSch = mongoose.model("students",studentSchema);
module.exports = studentSch;

操作数据库

const express = require("express");
const app = express();
app.listen(8080);

//引入path
const path = require("path");

//引入ejs
app.set("view engine","ejs");
app.set("views","views");


//连接数据库
require("./db/db")
//获取数据库映射表
const studentSchema = require("./model/students");
//使用内置中间件加载静态资源
app.use(express.static("./public"));
app.use(express.static("./static"))
//错误的页面路径
const errPath = path.resolve(__dirname,"./public/err.ejs");
/**
 * 注册路由
 */
app.get("/register",async (req,res)=>{
    console.log(req.query);
    const {username,password} = req.query;
    //校验注册的信息是否为空!
    console.log(errPath);
    if(!username || !password){
        return res.render(errPath,{
            errData:"当前注册账号或密码不能为空!"
        })
    }
    //校验用户账号是否已经存在
    const isHasUser = await studentSchema.findOne({
        // username:username
        username
    })
    if(isHasUser){
        return res.render(errPath,{
            errData:"当前注册账号已存在"
        })
    }
    //正则校验账号密码
    const reg = /^[0-9a-zA-Z_]{6,16}$/;
    if(!reg.test(username || !reg.test(password))){
        return res.render(errPath,{
            errData:"当前注册账号或密码格式不正确!"
        })
    }
    //进行注册处理
    try {
        await studentSchema.create(req.query);
        res.redirect("/login.html")
    } catch (error) {
        return res.render(errPath,{
            errData:"服务器繁忙,请稍后重试[注册]"
        })
    }
})
app.get("/login",async (req,res)=>{
    const {username,password} = req.query;
    //非空校验
    if(!username || !password){
        res.render(errPath,{
            errData:"当前登录的账号或密码不能为空!"
        })
    }
    //正则判断
    const reg = /^[0-9a-zA-Z_]{6,16}$/;
    if(!reg.test(username || !reg.test(password))){
        return res.render(errPath,{
            errData:"当前登录账号或密码格式不正确!"
        })
    }
    //验证账号是否存在
    const isHasUser = studentSchema.findOne({
        username
    })
    if(!isHasUser){
        return res.render(errPath,{
            errData:"当前来登录的账号不存在"
        })
    }
    //进行登录处理,登录完毕之后跳转到主页
    const checkLoin = await studentSchema.findOne(req.query);
    if(checkLoin){
        res.redirect("/index.html");
    }else{
        res.render(errPath,{
            errData:"服务器繁忙,请稍后重试[登录]"
        })
    }
})
/**
 *  处理图片发送的请求
 */
app.get("/static/:jpg",(req,res)=>{
    // console.log("jpg1:",jpg);
    const {jpg} = req.params;
    console.log("jpg2:",jpg);
    const filePath = path.resolve(__dirname,"./static",jpg);
    res.sendFile(filePath);
})

posted on 2021-06-09 20:12 文种玉阅读(113) 评论(0) 编辑收藏举报

刷新页面返回顶部