外卖点餐系统小程序

目录
        • 开发前准备
          • 项目展示
          • 项目分析
          • 项目初始化
          • 封装网络请求
        • 任务1 商家首页
          • 任务分析
          • 焦点图切换
          • 中间区域单击跳转到菜单列表
          • 底部商品展示
        • 任务2 菜单列表
          • 任务分析
          • 折扣信息区
          • 设计菜单列表布局
          • 请求数据
          • 实现菜单栏联动单品列表功能
        • 任务3 购物车
          • 任务分析
          • 设计底部购物车区域
          • 添加商品到购物车
          • 购物车界面
          • 添加商品数量
          • 减少商品数量
          • 清空购物车
          • 满减优惠
          • 跳转到订单确认页面
        • 任务4 订单确认
          • 任务分析
          • 订单信息
          • 备注功能实现
          • 支付功能
          • 支付成功返回订单列表
        • 任务5 订单详情
          • 任务分析
          • 取餐部分信息展示
          • 订单详情部分
          • 订单信息部分
        • 任务6 订单列表
          • 任务分析
          • 订单列表设计
          • 封装数据请求
          • 初始化页面
          • 下拉刷新功能
          • 上拉触底功能
        • 任务7 消费记录
          • 任务分析
          • 设计消费记录列表
        • 成果展示

划重点哦👉👉👉点击有惊喜哦文章地址

随着微信小程序的迅速发展与普及,外卖、点餐小程序越来越多地被使用,它不像APP那样全面,有非常复杂的功能,而是提供了快速购物的通道,无需下载使用,不用安装APP,简化了APP的很多功能,之加入核心功能呢。

点餐系统小程序主要完成底部标签导航的设计、幻灯片轮播效果设计、菜单列表的效果显示、购物车功能实现、订单详情页面设计、订单列表设计、消费记录页面的设计。

开发前准备
项目展示

desc
desc

项目分析

订餐系统任务需求:

  • 底部标签导航切换。
  • 在“首页” 单击“开启点餐之旅”,跳转到菜单列表界面。
  • 在菜单列表页面中,单击“+”把所选商品加入购物车。
  • 如果购物车中商品数量为0时,单击购物车图标不会展开购物车列表,如果不为0时,单击购物车,可以操作购物车。
  • 在“订单列表”界面,查看订单状态,显示是否取餐。
  • “消费记录”界面显示历史订单消费记录信息。
项目初始化
路径作用
images存放图片
pages/index首页
pages/list菜单列表页面
pages/order/list订单列表页面
pages/order/detail订单详情页面
pages/order/balance订单确认页面
pages/record消费记录页面
utils/fetch.js网络请求封装页面
utils/common.wxss页面公有样式库
app.js定义全局变量
app.json配置pages、window、tabBar
app.wxss公共样式页面
封装网络请求

为什么要封装网络请求?

  • 本项目采用的 网络请求 的方式来获取数据。
  • 小程序官方文档提供了网络请求API,传递参数,对不同请求做不同处理。
  • 请求接口中有部分请求参数以及响应结果处理都很类似。
module.exports = function(path, data, method) {return new Promise((resolve, reject) => {wx.request({url: '',   // 接口地址method: method,  data: data,  header: {'Content-Type': 'json' }, success: resolve,fail: function() {// 请求失败执行fail操作reject()wx.showModal({ showCancel: false, title: '失败' }) }})}) }// 引入fetch.js文件
const fetch = require('../../utils/fetch.js')
// 接口请求
fetch(path).then((res) => {// 请求成功的操作},() => {// 请求失败操作
});
任务1 商家首页
任务分析

首页内容任务分析:

  • 顶部商品的滑块容器区域。
  • 中间部分新品推送区域。
  • 底部商品列表展示区域。
  • 当进入到首页时开始请求接口,此时会出现弹窗,提示努力加载中;请求成功后,关闭弹窗,获取数据渲染首页。
焦点图切换

desc
在首页顶部区域,设置了焦点图切换的效果,图片资源通过请求接口获取数据。焦点图区域的布局:

index.wxml

<block wx:for="{{listData}}"><swiper><swiper-item><image></image></swiper-item></swiper>
</block>

焦点图切换:

index.js

//onLoad()函数
onLoad: function(options) {//请求首页接口wx.showLoading({ title: '努力加载中' })fetch(‘food/index’).then(res => { // 请求成功,关闭提示框//请求成功wx.hideLoading();// 把接口返回数据给listDatathis.setData({ listData: res.data })}, () => {   // 请求失败,关闭提示框,执行fetch.js文件中的fail方法wx.hideLoading()})}onLoad: function(options) {wx.showLoading({ title: '努力加载中' })fetch(‘food/index’).then(res => { // 请求成功,关闭提示框wx.hideLoading();// 把接口返回数据给listDatathis.setData({ listData: res.data })}, () => {   // 请求失败,关闭提示框,执行fetch.js文件中的fail方法wx.hideLoading()})}
中间区域单击跳转到菜单列表

desc
首页中间部分展示了手机点餐的推广banner图,单击“开启订餐之旅”跳转到菜单列表,引导顾客进行点餐,中间区域的布局:

index.wxml


<block wx:for="{{listData}}">  
<!-- listData 为后台返回的数据 -->
<view bindtap="gostart">
<image></image>
</block>	

index.js

gostart: function(){
//wx.navigateTo()实现跳转wx.navigateTo({ url: '../list/list' })
}
底部商品展示

desc
底部区域的布局:

index.wxml

<block wx:for="{{listData}}">  
<view  wx:for="{{item.image_bottom}}" wx:for-item="bottomItem" ><image></image></view>
</block>	
任务2 菜单列表
任务分析

菜单列表任务分析:

  • 顶部折扣信息区域。
  • 左侧菜单栏区域。
  • 右侧单品列表区域。
  • 菜单栏和单品间实现单击联动效果。
折扣信息区

desc
展示商家的折扣活动信息或店铺优惠信息,折扣信息区页面结构布局:

list.wxml


<!-- 折扣信息区 -->
<view class="discount"><text class="discount-txt"></text>50元减10元(在线支付专享)
</view>
设计菜单列表布局

pages/list/list.wxml文件,左侧菜单列表页面结构布局:
desc
list.wxml

<scroll-view class="left-menu" scroll-y="true"><view wx:for="{{listData}}" wx:key="{{index}}" data-index="{{index}}" bindtap="selectMenu"><view class="list-menu-name">{{item.name}}</view></view>

pages/list/list.wxml文件,右侧菜单列表页面结构布局:

desc
list.wxml

<scroll-view scroll-y="true" style="height:1200rpx;"><view class="content" id="a{{index}}" wx:for="{{listData}}"  wx:key="lists"><view class="list-tab">view><view class="content-list" wx:for="{{item.foods}}" wx:for-item="items"> </view>
</view>
</scroll-view>
请求数据

list.js

const fetch = require('../../utils/fetch.js')
Page({data:{ loading:false }  // false,不显示底部操作菜单onLoad: function(options) {wx.showLoading({ title: '努力加载中' })fetch('food/list').then(res => { wx.hideLoading();this.setData({  listData: res.data ,loading:true })}, () => {   wx.hideLoading()   })}
})	
实现菜单栏联动单品列表功能

list.js

Page({data: {activeIndex: 0,toView: 'a0',loading: false},// 左侧菜单项选择selectMenu: function(e) {}
})
任务3 购物车
任务分析

购物车任务分析:

  • 当购物车里商品数量为0时,购物车图标为灰色,处于不可单击状态。
  • 当商品数量不为0时,在购物车图标的右上角显示商品数量,图标变为可单击状态。
  • 单击购物车可以展开里面的商品,此时可以添加或者减少商品数量,动态计算总金额。
  • 单击清空购物车,商品数量和商品总价都变为0,购物车图标切换到灰色,此时不可单击
设计底部购物车区域

菜单列表页面数据请求成功后,loading值设为true,显示底部购物车区域。当购物车里商品数量为0时,购物车图标为灰色,处于不可单击状态

desc
list.wxml

<!-- 接口请求成功后,loading为 true -->
<view class="bottom-operate-menu" wx:if="{{loading}}"><view class="shopping-cart">  </view><view class="submit-btn {{sumMonney!=0?'activity-color-bg':'' }}"  bindtap="goBalance">  </view>
</view>	
添加商品到购物车

单击图标“+”,把商品添加到购物车。

desclist.js

Page({data: {activeIndex: 0,currentType: 0,currentIndex: 0,loading: false},// 加入购物车addToCart: function(e) {}
})	
购物车界面

desc
list.wxml

<!-- 遮罩层 -->
<view class="drawer-screen" bindtap="showCartList" data-statu="close"  wx:if="{{showCart}}"></view><!-- 商品列表 --><view class="cartlist-content" wx:if="{{showCart}}"><scroll-view scroll-y="true" class="{{cartList.length>5?'cart-scroll-list':''}}"></scroll-view>
</view>

list.js

showCartList: function() {if (this.data.cartList.length != 0) {this.setData({ showCart: !this.data.showCart });  }}	
添加商品数量

desc
list.js

Page({// 购物车添加商品数量addNumber: function(e) {  }
})	
减少商品数量

desc
list.js

Page({// 购物车减少商品数量decNumber: function(e) {  }
})	
清空购物车

desc
list.js

Page({
clearCartList: function() {this.setData({cartList: [],  	// 商品列表为空showCart: false, // 不展开购物车sumMonney: 0,cupNumber: 0})}
})	
满减优惠

desc
list.wxml

<view class="cut-bar" wx:if="{{sumMonney==0&&loading}}"></view>
<view class="cut-bar" wx:if="{{sumMonney<25&&sumMonney!=0&&loading}}"></view>	
跳转到订单确认页面

desc
list.js


const fetch = require('../../utils/fetch.js')
pages({// 单击"选好了",判断页面是否跳转goBalance: function(e) {}
})	
任务4 订单确认
任务分析

订单确认页面任务分析:

  • 请求商品订单接口。
  • 获取到接口数据,渲染页面。
订单信息

desc
balance.wxml

  <view class="top-bar"></view><!-- 订单详情 --><view class="order-info"><view class="cart-list-box" wx:for="{{order.foods}}" wx:for-item="item" wx:key="list"></view><view class="order-cut" wx:if="{{order.promotion.length > 0}}"></view><view class="order-sum"></view>
</view>	

balance.js

const fetch = require('../../../utils/fetch.js')
Page({
onLoad: function(options) {// 请求订单接口fetch('food/order', {: options.order_id}).then(res => {})
} order_id
备注功能实现

desc
balance.wxml


<!-- 备注 -->
<view class="note"><textarea maxlength="{{max}}" placeholder="如有其他要求,请输入备注" bindinput="listenerTextarea" class="note-text">{{note}}</textarea>
</view>

balance.js


listenerTextarea: function(e) {var note = e.detail.value// 存储note值 wx.setStorageSync('note', note)
}

detail.js


onLoad: function (options) {// 获取note值var note = wx.getStorageSync('note')}
支付功能

desc
balance.wxml

<view bindtap="gotopay"><view>去支付</view>
</view>

balance.js


gotopay: function(e) {fetch('food/pay', {order_id:order_id},method).then((res)=>{} )
}
支付成功返回订单列表

desc
app.js


App({// 定义全局变量:是否刷新页面。为false不执行刷新isReloadOrderList: false
}) 

order/detail/detail.js


onUnload:function(){var app = getApp(); // 支付成功之后调到订单页面,通知订单页刷新app.isReloadOrderList = truewx.switchTab({ url: '/pages/order/list/list‘ })}
任务5 订单详情
任务分析

订单详情页面任务分析:

  • 支付成功之后跳转到订单详情页面pages/order/detail/detail.wxml。
  • 发起网络情求,获取订单信息。
  • 信息包括取餐号、订单信息、订单号码、订单时间等。
取餐部分信息展示

desc
order/detail/detail.wxml

<view class="go-center go-top-10"><view class="card-box"><view class="card-fetch">取餐号</view><view class="go-top-10" ></view>
</view>
订单详情部分

desc
order/detail/detail.wxml

<view class="order-info"><view class="order-info-title">订单详情</view><view class="cart-list-box"></view><view class="cart-list-box"></view><view class=“order-sum"></view>
</view>
订单信息部分

desc
order/detail/detail.wxml

<view class="order-info"><view class="order-info-title"></view><view class="order-info-title"></view><view class="order-info-title"></view>
</view>
<view class="go-center">...</view>
任务6 订单列表
任务分析

订单列表页面任务分析:

  • pages/order/list/list.wxml文件为tabBar页面,两种打开方式。
  • 直接切换底部标签导航进入订单页面,此时不执行页面刷新。
  • 在订单支付成功之后,单击左上角返回也可以回到订单列表页面,此时需要执行页面刷新。
订单列表设计

在订单列表页面,展示订单信息,显示订单的下单时间和订单的总价、取餐状态、单击“查看详情”,根据订单内标的order_id 跳转到订单详情页面,效果图如下:
descorder/list/list.wxml

<scroll-view class="container" scroll-y="true"><block wx:for="{{orderList}}" wx:for-item="item" wx:for-index="idx" wx:key="{{item.order_id}}"><view class="orderList" data-postId="{{item.order_id}}"><view class="order-content"><view class="content-time">下单时间</view></view><view class="content-btm"></view></view></view></view>  
</block><view class="bottom" wx:if="{{is_last}}">到底啦~</view>
</scroll-view>
封装数据请求

因为页面中加载初始化数据、下拉刷新、上拉触底事件都需要调用相同的接口,所以在这里重新定义一个加载数据的方法,根据传递参数的不同获取不同的数据。。

进入pages/order/list/list.js 文件,定义请求接口方法,封装请求的公共部分,传递参数 ,参考代码如下:


const fetch = require('../../../utils/fetch')
Page({data: {orderList: [], // 下拉触底时追加数据is_last: false  // 数据是否加载完毕},last_id: 0,   // 加载文件的标识// 定义请求方法,封装请求的公共部分(3个参数:数据、成功、失败)loadData: function(data, success, fail) {data.row = 10  // 每一页10条数据fetch('food/orderlist', data).then((res) => {})
})
初始化页面

进入pages/order/list/list.js 文件,在onShow中获取全局变量isReloadOrderList ,是否为true,为true就刷新;请求订单数据,渲染页面;单击“查看详情” 跳转到订单详情页面,根据订单号查询订单数据渲染订单详情页面,参考代码如下:

onLoad: function(options) {wx.showLoading({  title: '加载中...})// 调用loadData()方法this.loadData({last_id: 0}, (data) => {this.setData({orderList: data.list}, () => {wx.hideLoading() // 请求失败关闭加载框})})}onShow: function() {var app = getApp();// 获取到并判断全局变量isReloadOrderList,是否为true,为true就刷新if (app.isReloadOrderList) {this.onLoad()// 刷新完成之后,把isReloadOrderList的值设为falseapp.isReloadOrderList = false}}// 跳转到订单详情页orderdetail: function (e) {// 获取订单号var index = e.currentTarget.dataset.postidwx.navigateTo({url: '../detail/detail?order_id=' + index})}
下拉刷新功能

进入pages/order/list/list.js 文件,编写下拉刷新onPullDownRefresh()函数,参考代码如下:

onPullDownRefresh: function() {wx.showNavigationBarLoading(); // 显示顶部刷新图标this.loadData({last_id: 0}, data => {this.setData({orderList: data.list}, () => {wx.hideNavigationBarLoading(); // 隐藏导航条栏加载框})})
}
上拉触底功能

进入pages/order/list/list.js 文件,编写下拉刷新onReachBottom()函数,参考代码如下:

onReachBottom: function() {// 判断数据是否到底,如果is_last为true到底了,则不执行请求if (this.data.is_last) {return}wx.showLoading({ title: '玩命加载中' })this.loadData({last_id: this .last_id}, (data) => {var orderList = this .data.orderListfor (var i = 0; i < data.list.length; i++) {orderList.push(data.list[i])}this.setData({ orderList: orderList }, () => { wx.hideLoading() // 隐藏加载框 })})
}
任务7 消费记录
任务分析

消费记录页面任务分析:

  • pages/record/record.wxml文件为tabBar页面
  • 发起网络情求,获取消费记录信息。
  • 展示用户的个人历史订单信息。
  • 包括用户的下单时间、商品总价钱。
设计消费记录列表

消费记录页面展示用户的个人历史订单信息,包括用户的下单时间、商品总价钱。消费记录页面效果如下:
desc进入pages/record/record/record.wxss文件,设计消费记录页面样式,具体代码:略

进入pages/record/record/record.wxml文件,设计消费记录页面布局,具体代码如下:

<view class="avatar"><image></image></view>
<view class="content">消费记录</view>
<view class="record-content"><view class="content-infoL">{{items.date}} {{items.time}}</view><view class="content-infoR"><text>{{items.summoney}}</text></view>
</view>

进入pages/record/record/record.js文件,请求数据渲染页面,具体代码如下:


const fetch=require('../../utils/fetch.js')
Page({onLoad: function (options) {wx.showLoading({ title: '努力加载中' })wx.setNavigationBarTitle({ title: '消费记录' }) // 设置小程序导航栏标题文字内容// 请求消费记录接口 fetch('food/record').then(res=>{wx.hideLoading() // 关闭加载信息this.setData({ listData:res.data })}) 
}
})
成果展示


该文章转自@Naiva链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/479687.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

彻底理解如何保证ElasticSearch和数据库数据一致性问题

一.业务场景举例 需求&#xff1a; 一个卖房业务&#xff0c;双十一前一天&#xff0c;维护楼盘的运营人员突然接到合作开发商的通知&#xff0c;需要上线一批热门的楼盘列表&#xff0c;上传完成后&#xff0c;C端小程序支持按楼盘的名称、户型、面积等产品属性全模糊搜索热门…

单片机将图片数组调出来显示MPU8_8bpp_Memory_Write

界面显示图片是很常见的需求&#xff0c;使用外挂的FLASH是最常用的方法。但是如果图片需求不大&#xff0c;比如说我们只要显示一个小图标&#xff0c;那么为了节省硬件成本&#xff0c;是不需要外挂一颗FLASH芯片的&#xff0c;我们可以将图标转成数组&#xff0c;存在单片机…

VS的安装和配置

目录 概述 安装Visual Studio 下载引导安装包 在线安装&#xff08;推荐&#xff09; 使用Visual Studio进行开发 创建项目 配置项目 项目 VS 解决方案&#xff08;重要&#xff09; 命名 完成项目创建 创建源文件 编写代码 VS项目目录的说明&#xff08;补充&…

linux模拟HID USB设备及wireshark USB抓包配置

文章目录 1. 内核配置2. 设备配置附 wireshark USB抓包配置 linux下模拟USB HID设备的简单记录&#xff0c;其他USB设备类似。 1. 内核配置 内核启用USB Gadget&#xff0c;使用fs配置usb device信息。 Device Drivers ---> [*] USB support ---><*> USB …

【C++】vector的使用

1. vector的构造 (constrator)构造函数声明 接口说明 vector(); (重点) 无参构造 vector (const vector& x); &#xff08;重点&#xff09; 拷贝构造 vector (InputIterator first, InputIterator last); 使用迭代器区间进行初始化构造 vector (size_type n, co…

Easy Excel 通过【自定义批注拦截器】实现导出的【批注】功能

目录 Easy Excel 通过 【自定义批注拦截器】实现导出的【批注】功能需求原型&#xff1a;相关数据&#xff1a;要导出的对象字段postman 格式导出对象VO 自定义批注拦截器业务代码&#xff1a; 拦截器代码解释&#xff1a;详细解释&#xff1a;格式优化&#xff1a; Easy Excel…

Qt/C++基于重力模拟的像素点水平堆叠效果

本文将深入解析一个基于 Qt/C 的像素点模拟程序。程序通过 重力作用&#xff0c;将随机分布的像素点下落并水平堆叠&#xff0c;同时支持窗口动态拉伸后重新计算像素点分布。 程序功能概述 随机生成像素点&#xff1a;程序在初始化时随机生成一定数量的像素点&#xff0c;每个…

矩阵重构——sortrows函数

s o r t r o w s sortrows sortrows函数依据某列的属性对其元素所在的行进行排序从而进行矩阵的排序 s o r t r o w s sortrows sortrows函数常用方法&#xff1a; 1. 1. 1. s o r t r o w s ( a , [ c 1 , c 2 ] ) sortrows(a,[c_1,c_2]) sortrows(a,[c1​,c2​])&#xff0c…

Linux之网络基础

网络发展 网络的发展可以从人与人之间的工作模式开始谈起, 人与人的工作模式反应了机器与机器的工作模式: 1. 独立模式: 在网络发展的早期计算机间处于独立模式, 计算机之间相互独立 最开始计算机之间是独立运行的, 数据之间的交互需要人用软盘等存储介质拷贝过去, 一般涉及…

【pyspark学习从入门到精通22】机器学习库_5

训练-验证分割 TrainValidationSplit 模型为了选择最佳模型&#xff0c;会对输入数据集&#xff08;训练数据集&#xff09;进行随机分割&#xff0c;分成两个子集&#xff1a;较小的训练子集和验证子集。分割只执行一次。 在这个例子中&#xff0c;我们还将使用 ChiSqSelect…

【Petri网导论学习笔记】Petri网导论入门学习(十一) —— 3.3 变迁发生序列与Petri网语言

目录 3.3 变迁发生序列与Petri网语言定义 3.4定义 3.5定义 3.6定理 3.5例 3.9定义 3.7例 3.10定理 3.6定理 3.7 有界Petri网泵引理推论 3.5定义 3.9定理 3.8定义 3.10定义 3.11定义 3.12定理 3.93.3 变迁发生序列与Petri网语言 对于 Petri 网进行分析的另一种方法是考察网系统…

IDEA:配置Serializable class without ‘serialVersionUID’ 找不到

在使用Java原生序列化的时候&#xff0c;serialVersionUID起到了一个类似版本号的作用&#xff0c;在反序列化的时候判断serialVersionUID如果不相同&#xff0c;会抛出InvalidClassException。 File -> Settings -> Editor -> Inspections -> 搜索 Serialization …

win10 禁止更新

一、winR 输入 regedit 二、输入注册列表路径&#xff1a; &#xff08;1&#xff09;计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings &#xff08;2&#xff09;按照格式&#xff0c;创建文件命名: FlightSettingsMaxPauseDays &#xff08;3&…

OpenAI Whisper 语音识别 模型部署及接口封装

环境配置: 一、安装依赖&#xff1a; pip install -U openai-whisper 或者&#xff0c;以下命令会从这个存储库拉取并安装最新的提交&#xff0c;以及其Python依赖项&#xff1a; pip install githttps://github.com/openai/whisper.git 二、安装ffmpeg&#xff1a; cd …

springboot视频网站系统的设计与实现(代码+数据库+LW)

摘 要 使用旧方法对视频信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在视频信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。 这次开发的视频网站系统管理员功…

安装QT6.8(MSVC MinGW)+QT webengine+QT5.15.2

本篇主要针对只使用过QT5的qmake&#xff0c;没有用过MSVC&#xff0c;VS的老同学。 建议一部分一部分安装&#xff0c;全部勾选安装遇到问题会中断&#xff0c;前功尽弃。 我自己需要的是QT5&#xff0c;编出的软件用在公司设备上。 QT6&#xff1a;建议也安装学习&#xf…

自动驾驶目标检测融合全貌

1、early fusion 早期融合&#xff0c;特点用到几何空间转换3d到2d或者2d到3d的转换&#xff0c;用像素找点云或者用点云找像素。 2、deep fusion 深度融合&#xff0c;也是特征级别融合&#xff0c;也叫多模态融合&#xff0c;如bevfusion范式 3、late fusion 晚融合&#x…

Microsoft Excel如何插入多行

1.打开要编辑的excel表&#xff0c;在指定位置&#xff0c;鼠标右键点击“插入”一行 2.按住shift键&#xff0c;鼠标的光标箭头会变化成如下图所示 3.一直按住shift键和鼠标左键&#xff0c;往下拖动&#xff0c;直至到插入足够的行

node.js基础学习-http模块-创建HTTP服务器、客户端(一)

http模块式Node.js内置的模块&#xff0c;用于创建和管理HTTP服务器。Node.js使用JavaScript实现&#xff0c;因此性能更好。 使用http模块创建服务器&#xff0c;我们建议使用commonjs模块规范&#xff0c;因为很多第三方的组件都使用了这种规范。当然es6写法也支持。 下面就是…

2024御网杯信息安全大赛个人赛wp(misc方向)

目录 一.信息安全大赛的通知二、编码转换1. 第一部分2. 第二部分3. 第三部分 三、1.txt四、buletooth 题目附件以及工具链接&#xff1a; 通过网盘分享的文件&#xff1a;御网杯附件 链接: https://pan.baidu.com/s/1LNA6Xz6eZodSV0Io9jGSZg 提取码: jay1 –来自百度网盘超级会…