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

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

时间:2023-12-23 15:37:57浏览次数:40  
标签: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之静态资源_json

案例

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/8945112

相关文章

  • 官宣!DevExpress Blazor UI组件,支持全新的.NET 8渲染模式
    DevExpress BlazorUI组件使用了C#为BlazorServer和BlazorWebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生BlazorUI组件(包括PivotGrid、调度程序、图表、数据编辑器和报表等)。.NET8为Blazor引入了令人兴奋的重大变化,统一了它的托管模型,并采用了服务器......
  • 【c# winform】devexpress treeList右键菜单添加按钮
    本文提供俩种不需要手动添加编辑控件方法。方法一:创建新的右键菜单添加“执行选择”按钮,且抑制TreeList自带菜单结果展示: 代码: privatevoidForm1_Load(objectsender,EventArgse){CreateBarButtonItem();}privatevoidCreateBarButtonItem(){//创建右键......
  • DevExpress中使用BandGridView实现复合(多行)表头、设置多行表头背景颜色、表格边框颜色
    一、实现效果二、实现方法2.1、创建复合表头①将创建的GridControl下的GirdView1转化为BandGridView类型;②创建需要展示的列(指定列的名称【Name】、描述【caption】、数据字段名称【FieldName】)③绑定列实现复合表头。注意:如果复合表头有多行,则需要设置新增Band的RowCoun......
  • 界面控件DevExpress WinForms PDF Viewer,让应用轻松显示PDF文档(一)
    DevExpressWinForms的PDFViewer(查看器)控件使用户可以轻松地在Windows应用程序中直接显示PDF文档,而无需在最终用户的机器上安装外部PDF阅读器。DevExpressWinForms有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。同时能完美构建流畅、美观且易于使用的应......
  • 界面控件DevExpress v23.2全新发布 - 官宣正式支持.NET 8
    DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpressDashboardeXpressApp框架、适用于VisualStudio的CodeRush等一系列辅助工具。屡获大奖的软件开发平台DevExpress今年第一个重要版本v23.1正式发布,该版本拥有众多新产品和数十个具有高影响力......
  • 界面控件DevExpress WPF Dock组件,轻松创建类Visual Studio窗口界面!
    本文主要为大家介绍DevExpressWPF控件中的Dock组件,它能帮助用户轻松创还能受MicrosoftVisualStudio启发的Dock窗口界面。P.S:DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用......
  • 前端歌谣-第贰拾玖课-构造函数和实例化原理
    前言我是歌谣最好的种树是十年前其次是现在今天继续给大家带来的是构造函数和实例化原理的讲解环境配置npminit-yyarnaddvite-D修改page.json配置端口{"name":"demo1","version":"1.0.0","description":"","main":"index.js&qu......
  • 前端歌谣-第伍拾九课-路由获取请求参数
    前言我是歌谣微信公众号关注前端小歌谣一起学习前端知识今天继续给大家讲解获取请求参数的讲解案例1api.jsfunctionrender(res,data,type=""){res.writeHead(200,{"content-Type":`${type?type:"application/json"};charset=utf-8`})res.write(data)res.en......
  • 前端歌谣-第伍拾九课-路由获取请求参数
    前言我是歌谣微信公众号关注前端小歌谣一起学习前端知识今天继续给大家讲解获取请求参数的讲解案例1api.jsfunctionrender(res,data,type=""){res.writeHead(200,{"content-Type":`${type?type:"application/json"};charset=utf-8`})res.write(data)res.en......
  • 界面组件DevExpress VCL v23.2新功能预览 - 支持RAD Studio 12.0
    本文即将发布DevExpressVCL 下一个主要更新(v23.2),在之前的文章中(点击这里回顾>>)我们为大家介绍了新的工具提示、图表空间中的标签重叠等,本文将主要介绍DevExpressVCLv23.2中将支持的RADStudio12.0、增强的图像选择器、字体和自定义图标包等。新版即将发布,敬请期待哦~获取De......