首页 > 其他分享 >前端歌谣-第六十四课-express之静态资源

前端歌谣-第六十四课-express之静态资源

时间:2024-01-18 21:00:56浏览次数:33  
标签:use console 歌谣 res app express 第六十四 log

前言

我是歌谣 微信公众号关注前端小歌谣一起学习前端知识 今天继续给大家讲解获取express获取静态资源的讲解

案列

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")
})

运行结果

前端歌谣-第六十四课-express之静态资源_用户名

案例

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>

indexRoute.js

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

router.get("/login",(req,res)=>{
    
    res.send("get-success")
})
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")
})

运行结果

前端歌谣-第六十四课-express之静态资源_json_02

前端歌谣-第六十四课-express之静态资源_html_03

标签:use,console,歌谣,res,app,express,第六十四,log
From: https://blog.51cto.com/geyaoisnice/9319887

相关文章

  • DevExpress Web Report Designer中文教程 - 如何自定义控件和表达式注册?
    获取DevExpressv23.2正式版下载DevExpress技术交流群9:909157416      欢迎一起进群讨论自定义控件集成DevExpress Reports中的自定义报表控件注册变得更加容易,为了满足web开发人员的需求,DevExpressv23.1+包括简化的自定义控件注册支持(在服务器级别实现)。如果您的解决......
  • 界面组件DevExpress ASP.NET Core v23.2 - 拥有全新的主题样式
    DevExpressASP.NETCore Controls使用强大的混合方法,结合现代企业Web开发工具所期望的所有功能。该套件通过ASP.NETRazor标记和服务器端ASP.NETCoreWebAPI的生产力和简便性,提供客户端JavaScript的性能和灵活性。ThemeBuilder工具和集成的MaterialDesign、通用主题集可以让......
  • 前端歌谣-第六拾课-express安装
    前言我是歌谣微信公众号关注前端小歌谣一起学习前端知识今天继续给大家讲解获取静态资源的讲解安装npminit-ynpmiexpress案例constexpress=require("express")constapp=express()app.get("/",(req,res)=>{res.write("hellogeyao")res.end()})app.listen......
  • 在Linux中安装和配置Node.js与Express.js创建HTTP服务器
    在Linux环境中,安装和配置Node.js与Express.js来创建一个HTTP服务器需要一系列的步骤。下面是一个详细的指南,帮助你在Linux上设置这个环境。步骤1:安装Node.js首先,你需要确保你的Linux系统已经安装了Node.js。你可以通过以下命令来检查是否已经安装:bash复制代码node-v如果已经安装,它......
  • DevExpress LayoutControl使用
    1.向窗体中添加LayoutControl控件从工具箱,将LayoutControl控件拖入窗体后,最好立即设置该控件的尺寸和位置,否则修改起来会比较麻烦拖入的同时,在下图所示的情况下,1.1点击小三角,弹出LayoutContrl任务1.2然后继续点击ChooseDockStyle右侧的向下小箭头,1.3选择中......
  • 界面组件DevExpress WPF v23.2 - 更轻量级的主题支持
    DevExpressWPFSubscription拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。DevExpressWPF控件日前正式发布了......
  • 前端歌谣-第伍拾伍课-vue2-element组件封装el-button-groups
    前言大家好我是歌谣今天继续给大家带来elementui组件el-button的封装使用方法<btn-groups:btns="btns":max="max"class="page-btns"></btn-groups>参数部分name控制属性名显示按钮的名称{{item.name}}btns:[{//按钮名称name:"歌谣&qu......
  • 前端歌谣-第伍拾陆课-vue2-element组件封装el-button-groups(续)
    前言我是歌谣今天继续给大家带来el-button-groups(项目的讲解背景颜色属性color:style="item.color?{background:item.color,borderColor:item.color}:{}"btns:[{//按钮名称name:"歌谣",//按钮类型......
  • Understanding q-value and FDR in Differential Expression Analysis
     Understandingq-valueandFDRinDifferentialExpressionAnalysisDaqianIntroductiontoq-valueandFDRIndifferentialgeneexpressionanalysis,researchersareoftenconfrontedwiththechallengeofdistinguishingtruesignals—thosegenesthat......
  • 前端歌谣-第柒拾捌课-Koa获取请求参数讲解
    前言大家好我是歌谣今天给大家带来node中关于koa静态资源模块的讲解初始化项目npminit-y安装koa和路由和解析静态资源和获取请求参数npmikoanpmikoa-routernpmikoa-staticnpmikoa-bodyparser案例login.html<!DOCTYPEhtml><htmllang="en"><head><metachar......