前端歌谣-第六十五课-express之服务端渲染和客户端渲染

最新推荐文章于 2024-01-18 19:24:04 发布

前端歌谣

最新推荐文章于 2024-01-18 19:24:04 发布

阅读量365

点赞数 11

文章标签：前端 express

本文链接：https://blog.csdn.net/qq_41632427/article/details/134076374

版权

歌谣-最强学习合集专栏收录该内容

114 篇文章 1 订阅

订阅专栏

前言

我是歌谣微信公众号关注前端小歌谣一起学习前端知识今天继续给大家讲解服务端渲染和客户端渲染静态资源的讲解

案列

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是主页</title>
</head>
<body>
    <div>
        我是主页
    </div>
    <div class="list">

    </div>
    <script>
        fetch("/home").then(res=>res.json()).then(res=>{
            console.log(res)
            render(res)
        })
        function render(data){
            var list=data.map(item=>`<li>${item}</li>`)
            console.log(list)
            var oul=document.querySelector(".list")
            oul.innerHTML=list.join("")
        }
    </script>
</body>
</html>

indexrouter.js

const express = require("express")
const router = express.Router()

router.get("/login",(req,res)=>{
    
    res.send("get-success")
})
router.get("/home",(req,res)=>{
    
    res.send(["111","222","33333"])
})
router.post("/login",(req,res)=>{
    console.log(req.body)
    const {username,password}=req.body
    if(username=="geyao"&&password=="123456"){
        res.send({ok:"1"})
    }else{
        res.send({ok:"0"})
    }
   
})
module.exports=router

index01.js

const express = require("express")
const app = express()
const IndexRouter=require("./router/indexRouter")
//配置解析
app.use(express.static("public"))
app.use(express.urlencoded({extended:false}))
app.use(express.json())
//应用
app.use(function(req,res,next){
    console.log("验证token")
    next()
})

app.use(function(req,res,next){
    console.log("验证token")
    next()
})

app.use("/",IndexRouter)

app.use((req,res)=>{
    res.status(404).send("丢了")
})

app.listen(3000, () => {
    console.log("server start")
})

login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是登录</title>
</head>

<body>
    <div>用户名:<input id="username" />
    </div>
    <div>密码:<input type="password" id="password" />
    </div>
    <div>
        <button id="login">登录</button>
    </div>
    <div>
        <button id="loginpost">登录-post</button>
    </div>
</body>
<script>
    var oLogin=document.querySelector("#login")
    var oLoginPost=document.querySelector("#loginpost")
    var oUsername=document.querySelector("#username")
    var oPassword=document.querySelector("#password")
    oLogin.onclick=()=>{
        console.log(oUsername.value,oPassword.value)
        fetch(`/login?username=${oUsername.value}&password=${oPassword.value}`)
        .then(res=>res.text()).then(res=>{
            console.log(res)

        })
    }
    oLoginPost.onclick=()=>{
        console.log(oUsername.value,oPassword.value)
        fetch(`/login`,{
            method:"POST",
            body:JSON.stringify({
                username:oUsername.value,
                password:oPassword.value
            }),
            headers:{
                "Content-Type":"application/json"
            }
        }).then(res=>res.json()).then(res=>{
            console.log(res,"res")
            if(res["ok"]=="1"){
                location.href="/index.html"
            }else{
                console.log("用户名密码不匹配")
            }
        })
    }
</script>
</html>

运行结果

在这里插入图片描述

案例优化

login.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>登录</div>
    <h1><%=geyao%></h1>
</body>
</html>

indexRoute.js

const express = require("express")
const router = express.Router()

router.get("/login",(req,res)=>{
    res.render("login",{geyao:"geyao"})
    // res.send("get-success")
})
router.get("/home",(req,res)=>{
    
     res.send(["111","222","33333"])
})
router.post("/login",(req,res)=>{
    console.log(req.body)
    const {username,password}=req.body
    if(username=="geyao"&&password=="123456"){
        res.send({ok:"1"})
    }else{
        res.send({ok:"0"})
    }
   
})
module.exports=router

index01.js

const express = require("express")
const app = express()
const IndexRouter=require("./router/indexRouter")
//配置模板
app.set("views","./views")
app.set("view engine","ejs")
//配置解析
app.use(express.static("public"))
app.use(express.urlencoded({extended:false}))
app.use(express.json())
//应用
app.use(function(req,res,next){
    console.log("验证token")
    next()
})

app.use(function(req,res,next){
    console.log("验证token")
    next()
})

app.use("/",IndexRouter)

app.use((req,res)=>{
    res.status(404).send("丢了")
})

app.listen(3000, () => {
    console.log("server start")
})