【JS】Day32

已于 2022-12-06 21:19:22 修改
阅读量185 收藏
点赞数
分类专栏： 二阶段 文章标签： html5
于 2022-12-06 21:07:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62417130/article/details/128209822
版权

学习内容

  • express 模块介绍
  • express 模块搭建服务器
  • express 模块路由及路由表配置
  • express 模块中间件

express 模块介绍

Web 应用程序
Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

API
使用您所选择的各种 HTTP 实用工具和中间件，快速方便地创建强大的 API。

性能
Express 提供精简的基本 Web 应用程序功能，而不会隐藏您了解和青睐的 Node.js 功能。

框架
许多 流行的开发框架 都基于 Express 构建。

express 模块搭建服务器

> app.js

    //1 导入express模块
    const express = require('express');
    //导入所有路由处理函数
    const { fnGoodsList } = require('./controller/goods');
    const { fnLogin } = require('./controller/users');
    //2. 创建服务
    const app = express();
    //配置静态目录
    app.use(express.static('./www'));
    //配置路由
    //get请求
    app.get('/goods/list',fnGoodsList)
    //post请求
    app.post('/users/login',fnLogin);
    
    // 监听端口
    app.listen(8080,() => {
        console.log('服务已开启');
    })

> www/views/index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <link rel="stylesheet" href="/css/index.css">
        </head>
        <body>
            <h1>我是首页</h1>
            <script src="/js/index.js"></script>
        </body>
    </html>

> www/css/index.css

    body{
        background-color: skyblue;
    }

> www/js/index.js

    console.log('hello node!');
    fn1();
    function fn1(){
        let xhr = new XMLHttpRequest();
        xhr.open('get','/goods/list?current=1&pagesize=12');
        xhr.onload = function(){
            let res = JSON.parse(xhr.responseText);
            console.log(res);
        }
        xhr.send();
    }
    fn2();
    function fn2(){
        let xhr = new XMLHttpRequest();
        xhr.open('post','/users/login');
        xhr.onload = function(){
            let res = JSON.parse(xhr.responseText);
            console.log(res);
        }
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send('us=李四&ps=456');
    }

> controller/goods.js

    //存放所有商品相关的路由处理函数
    function fnGoodsList(req,res){
        res.send({code: 1,msg: '接收get请求成功',params: req.query});
    }
    
    //导出
    exports.fnGoodsList = fnGoodsList;

> controller/users.js

    //存放所有用户相关路由处理函数
    function fnLogin(req,res){
        res.send({
            code: 1,
            msg: '成功，但是还没有解析请求体，参数暂时不能带回'
        })
    }
    exports.fnLogin = fnLogin;

express 模块路由及路由表配置

> app.js

    //1 导入express模块
    const express = require('express');
    //导入路由表
    // const GoodsRouter = require('./router/goods');
    // const UserRouter = require('./router/users');
    // const CartRouter = require('./router/cart');
    const Router = require('./router/index');
    //2. 创建服务
    const app = express();
    //配置静态目录
    app.use(express.static('./www'));
    //配置路由
    // app.use('/goods',GoodsRouter);
    // app.use('/users',UserRouter);
    // app.use('/cart',CartRouter);
    app.use('/api',Router);
    // 监听端口
    app.listen(8080,() => {
        console.log('服务已开启');
    })

> www ： 同上

> controller/goods.js

    //存放所有商品相关的路由处理函数
    function fnGoodsList(req,res){
        res.send({code: 1,msg: '接收get请求成功',params: req.query});
    }
    function fnDetail(req,res){
        res.send({code: 1,msg: '获取商品详情成功'});
    }
    function fnCartList(req,res){
        res.send({code: 1,msg: '获取购物车列表成功',list: [{},{},{},{}]})
    }
    //导出
    exports.fnDetail = fnDetail;
    exports.fnGoodsList = fnGoodsList;
    exports.fnCartList = fnCartList;

> controller/users.js

    //存放所有用户相关路由处理函数
    function fnLogin(req,res){
        res.send({
            code: 1,
            msg: '成功，但是还没有解析请求体，参数暂时不能带回'
        })
    }
    function fnRegister(req,res){
        res.send({
            code: 1,
            msg: '用户注册'
        })
    }
    exports.fnLogin = fnLogin;
    exports.fnRegister = fnRegister;

> router/goods.js

    //路由分表
    const goodsRouter = require('express').Router();
    const { fnGoodsList } = require('../controller/goods');
    //配置路由
    goodsRouter.get('/list',fnGoodsList);
    
    //导出路由
    module.exports = goodsRouter;

> router/users.js

    //路由分表
    const userRouter = require('express').Router();
    //导入路由处理函数
    const { fnLogin,fnRegister } = require('../controller/users');
    //添加路由
    userRouter.post('/login',fnLogin);
    userRouter.post('/register',fnRegister);
    
    //导出路由
    module.exports = userRouter;

> router/cart.js

    //1. 导入模块
    const cartRouter = require('express').Router();
    //导入路由处理函数
    const { fnCartList } = require('../controller/goods');
    //配置路由
    cartRouter.get('/list',fnCartList);
    
    //导出路由
    module.exports = cartRouter;

> router/index.js

    //路由总表
    const router = require('express').Router();
    
    //添加路由
    router.use('/goods',require('./goods'));
    router.use('/users',require('./users'));
    router.use('/cart',require('./cart'));
    
    //导出路由总表
    module.exports = router;

express 模块中间件

1. 内置中间件 static
2. 自定义中间件（全局、局部）
3. 第三方中间件 （body-parser)
注：中间件使用，一定注意 next

> app.js

    //1. 导入模块
    const express = require('express');
    const fs = require('fs');
    //导入路由总表
    const router = require('./router');
    //2. 创建服务
    const app = express();
    
    //3. 配置静态资源（静态中间件）
    app.use(express.static('./www'));
    
    //4. 配置路由
    //全局中间件
    app.use(function(req,res,next){
        //将当前请求的地址记录下来
        fs.appendFile('./info.txt',`
            ${new Date()} ---- ${req.url} \n
        `,(err) => {});
        next();
    })
    app.use('/api',router);
    //5. 监听端口
    app.listen(8080,() => {
        console.log('server ok,port: 8080');
    })

> controller/goods/js

    //存放所有商品相关的路由处理函数
    function fnGoodsList(req,res){
        let { current,pagesize } = req.query;
        res.send({code: 1,msg: '获取商品列表成功',info: `你需要获取的是第${current}页数据，一页显示${pagesize}条`});
    }
    function fnDetail(req,res){
        res.send({code: 1,msg: '获取商品详情成功'});
    }
    function fnCartList(req,res){
        res.send({code: 1,msg: '获取购物车列表成功',list: [{},{},{},{}]})
    }
    //导出
    exports.fnDetail = fnDetail;
    exports.fnGoodsList = fnGoodsList;
    exports.fnCartList = fnCartList;

> middleware/goods.js

    //goods相关接口使用的中间件
    exports.testGetList = (req,res,next) => {
        const { current,pagesize } = req.query;
        //验证
        if(!current && pagesize){
            res.send({code: 0,msg: '参数current或pagesize没有传递'});
            return;
        }
        if(isNaN(current) || isNaN(pagesize)){
            res.send({code: 0,msg: '参数格式不对,current或pagesize必须是一个数字'});
            return;
        }
        next();
    }

> router/index.js

    const Router = require('express').Router();
    
    Router.use('/goods',require('./goods'));
    Router.use('/users',require('./users'));
    Router.use('/cart',require('./cart'));
    
    module.exports = Router;

> router/goods.js

    //存放goods相关路由信息
    //导入路由处理函数
    const { fnGoodsList,fnDetail } = require('../controller/goods');
    //导入相关中间件
    const { testGetList } = require('../middleware/goods');
    
    //1. 导入express创建路由表
    const express = require('express');
    let GoodsRouter = express.Router();
    
    //2. 在路由表上添加路由
    GoodsRouter.get('/list',testGetList,fnGoodsList);
    GoodsRouter.get('/detail',fnDetail);
    
    //3. 导出路由表
    module.exports = GoodsRouter;

> router/cart.js

    const { fnCartList } = require('../controller/goods');
    const CartRouter = require('express').Router();
    
    //添加一个中间件
    CartRouter.use((req,res,next) =>  {
        //进行token验证
        const token = req.headers.authorization;
        if(!token){
            res.send({code: 0,msg: 'token错误'});
            return;
        }
        next();
    })
    CartRouter.get('/list',fnCartList);
    
    module.exports = CartRouter;

# 解析请求体的中间件

> app.js

    //1. 导入模块
    const express = require('express');
    const fs = require('fs');
    const bodyParser = require('body-parser');
    
    //导入路由总表
    const router = require('./router');
    //2. 创建服务
    const app = express();
    
    //3. 配置静态资源（静态中间件）
    app.use(express.static('./www'));
    // parse application/x-www-form-urlencoded
    app.use(bodyParser.urlencoded({ extended: false }))
    
    // parse application/json
    app.use(bodyParser.json())
    //4. 配置路由
    //全局中间件
    app.use(function(req,res,next){
        //将当前请求的地址记录下来
        fs.appendFile('./info.txt',`
            ${new Date()} ---- ${req.url} \n
        `,(err) => {});
        next();
    })
    app.use('/api',router);
    //5. 监听端口
    app.listen(8080,() => {
        console.log('server ok,port: 8080');
    })

> controller/users.js

    const express = require('express');
    
    //存放所有用户相关路由处理函数
    function fnLogin(req,res){
        const { us,ps } = req.body;
        if(!(us && ps)){
            res.send({
                code: 0,
                msg: '参数不够'
            })
            return;
        }
        res.send({
            code: 1,
            msg: '成功',
            info: {
                us,
                ps
            }
        })
    }
    function fnRegister(req,res){
    
        res.send({
            code: 1,
            msg: '用户注册'
        })
    }
    exports.fnLogin = fnLogin;
    exports.fnRegister = fnRegister;
GreatWillSSS
关注
专栏目录
Day32_Vue
小辉的博客
03-10 277
Day32_Vue 1. Vue 的概念 Vue全称叫Vue.js是一个javaScript框架（它和JQuery一样是一个操作标签元素的js框架罢了 ） Vue的特色是对数据的双向绑定（视图与数据模型双向绑定同步） MVVM模式：即Model-View-View-Model，视图模型双向绑定 2. Idea中Vue的使用 创建maven的web工程 在webapp目录下，创建js文件夹 将vue.js放入到js文件夹中 创建html页面 在页面的<head>标签中使用&
day.js 插件，小程序滑动月份日历
10-20
day.js日历插件写的小程序滑动月份日历，打开就能看到效果。如果有问题。新建文件拷一份出来也可以。day.js文件一起打包在里面了。官方文档： https://day.js.org/docs/zh-CN/installation/installation
js库——Day.js、Big.js
黎小小的博客
10-20 1080
Day.js 方便操作对时间解析 验证 对时间进行计算等操作。
javascript的Day.js库
听海边涛声
06-09 217
javascript的Day.js库
利用Day.js格式化日期、时间
听海边涛声
07-26 486
利用Day.js格式化日期、时间
Day.js 常用方法
热门推荐
halo1416的博客
04-21 5万+
前言 Day.js 是代替修改本地Date.prototype，Day.js对Date对象进行了封装，只需要调用Dayjs()即可。 相对moment.js而已，day.js的体积更小，只有2KB左右；moment.min.js 有16.7KB。 对应普通项目来说，对应时间的操作就只有那么几个（格式化、查询、计算），这些基于Day.js完全足够。并且Day.js的文档相对简单、清晰！ 该文章对比之前的moment.js的文章 Day.js官方文档   当前文章很多实例是以当前时间来处理的， 当前时间
JS工具类：Day.js
chenghao13834505361的博客
07-05 791
Day.js使用
Day.js :一个只有2KB的处理时间和日期的 JavaScript 库
半夏_2021的博客
04-28 1855
Day.js :一个只有2KB的处理时间和日期的 JavaScript 库
初学js Day01
caiji76531的博客
07-19 1790
是本人初学js是所学的一些东西以及所遇到的一些问题
3.22 day32 js进阶 第四天
weixin_45190461的博客
03-22 155
js进阶
Day.js插件的基本使用
qq_48113035的博客
02-10 2859
一、介绍 Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。 二、使用 1.基本安装 npm install dayjs --save 2.引入 import dayjs from 'dayjs' 3.一些常见的使用 <script> // 获取当前日期,xxxx-xx-xx格式 dayjs().format('YYYY-MM-DD') // 或者 dayjs().startOf('day').fo
JS.rar_day3lb_javascript
09-23
在"JS.rar_day3lb_javascript"这个压缩包中，我们很显然关注的是JavaScript技术，特别是与“futdraft”程序相关的应用。"futdraft"可能是一个足球模拟选秀或者阵容构建的应用，这需要对JavaScript有深入的理解以及对...
基于Day.js的轻量化时间日期库设计源码
09-24
该项目是采用JavaScript和TypeScript编写的轻量化时间日期库设计源码，灵感来源于Moment.js，总文件数达370个。...Day.js以其仅2kB的体积，提供了Moment.js的强大功能，是时间日期处理的优选方案。
JavaScript Day_03
03-24
javascript学习第三天笔记
JavaScript Day_01
03-24
javascript学习第一天笔记
HTML5实现趣味飞船捡金币小游戏(附源码)
最新发布
全栈工程师，博主正在等你，有合作、疑惑请私信博主。
11-15 685
HTML5实现趣味飞船捡金币小游戏(附源码)，飞船捡金币源码，全网最全小游戏源码，前端游戏源码，游戏界面酷炫，这是一款非常有趣的HTML5飞船捡金币小游戏。游戏中你可以使用上下左右方向键来控制小飞船的飞行。金币会在屏幕中随机出现，飞船具有吸附金币的能力，越接近吸附的越多，非常有意思。代码注释完整，书写规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
HTML5实现剪刀石头布小游戏(附源码)
全栈工程师，博主正在等你，有合作、疑惑请私信博主。
11-15 526
HTML5实现剪刀石头布小游戏，石头剪刀布源码，全网最全小游戏源码，游戏界面酷炫，按键提示操作，该剪刀石头布游戏使用html5和jQuery制作，具有使用简单、响应式、可定制、速度快、有积分记录的特点。这个小游戏是一个人机对战游戏，用户可以选择剪刀、石头和布三种选项中的一个，然后电脑随机出剪刀、石头和布，获胜者加一分。石头剪子布，是一种猜拳游戏。起源于中国，然后传到日本、朝鲜等地，随着亚欧贸易的不断发展它传到了欧洲，到了近现代逐渐风靡世界。代码注释完整，书写规范，各种风格都有，代码上手简单，代码独立，可以直
HTML5+CSS前端开发[保姆级教学]+基本文本控制标签介绍
weixin_60544964的博客
11-15 274
引入：Hello，各位编程猿们！前几篇文章介绍了软件的安装以及编写新闻文章的代码初体验，这一篇我们来巩固一些这些知识点，复习一下基本文本控制标签！！！
HTML5：网页开发的新纪元
chaosweet的博客
11-06 1635
不做下一个谁，只做第一个我！
JavaScript Day_03：循环语句详解
"JavaScript Day_03 - 学习前端开发中的循环语句，包括while、do-while和for循环，以及break和continue关键字的使用" 在JavaScript中，循环语句是编程中非常重要的一部分，它允许我们重复执行一段代码，尤其在处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值