【Fastadmin】一个完整的轮播图功能示例

目录

1.效果展示:

列表

添加及标记页面同

2.建表:

3.时候crud一键生成并创建控制器

4.html页面

add.html

edit.html

index.php

5.js页面

6.小知识点


1.效果展示:


  • 列表

  • 添加及标记页面同

2.建表:


  表名:fa_xxfb_banner

/*
 Navicat Premium Data Transfer

 Source Server         : root
 Source Server Type    : MySQL
 Source Server Version : 50726
 Source Host           : localhost:3306
 Source Schema         : xxx

 Target Server Type    : MySQL
 Target Server Version : 50726
 File Encoding         : 65001

 Date: 08/12/2023 17:52:34
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for fa_xxfb_banner
-- ----------------------------
DROP TABLE IF EXISTS `fa_xxfb_banner`;
CREATE TABLE `fa_xxfb_banner`  (
  `id` int(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `title` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '换灯标题',
  `image` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '换灯图片',
  `site` enum('1','2') CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '1' COMMENT '位置:1=首页,2=任务大厅',
  `jump_type_list` enum('0','1','2','3') CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '跳转方式:0=不跳转,1=内链,2=外链,3=自定义内容',
  `content` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '自定义内容',
  `switch` tinyint(5) NULL DEFAULT 1 COMMENT '开关:0=关,1=开',
  `weigh` int(16) NULL DEFAULT NULL COMMENT '权重',
  `createtime` bigint(16) NULL DEFAULT NULL COMMENT '创建时间',
  `jump_url` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '跳转链接',
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `site_switch`(`site`, `switch`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '轮播图' ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

3.时候crud一键生成并创建控制器


4.html页面


  • add.html
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Site')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-site" data-rule="required" class="form-control selectpicker" name="row[site]">
                {foreach name="siteList" item="vo"}
                <option value="{$key}" {in name="key" value="1"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" class="form-control" name="row[title]" type="text" data-rule="required">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" class="form-control" size="50" name="row[image]" type="text" data-rule="required">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image"></ul>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Jump_type_list')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select  id="c-jump_type_list" class="form-control selectpicker" name="row[jump_type_list]">
                {foreach name="jumpTypeListList" item="vo"}
                    <option value="{$key}" {in name="key" value=""}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group" id="content_show_hide">
        <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50" data-rule=""></textarea>
        </div>
    </div>
    <div class="form-group" id="jump_url_show_hide">
        <label class="control-label col-xs-12 col-sm-2">{:__('Jump_url')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-jump_url" class="form-control" name="row[jump_url]" type="text" data-rule="">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
  • edit.html
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Site')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-site" data-rule="required" class="form-control selectpicker" name="row[site]">
                {foreach name="siteList" item="vo"}
                <option value="{$key}" {in name="key" value="$row.site"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" class="form-control" name="row[title]" type="text" value="{$row.title|htmlentities}" data-rule="required">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" class="form-control" size="50" name="row[image]" type="text" value="{$row.image|htmlentities}" data-rule="required">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image"></ul>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Jump_type_list')}:</label>
        <div class="col-xs-12 col-sm-8">
                        
            <select  id="c-jump_type_list" class="form-control selectpicker" name="row[jump_type_list]">
                {foreach name="jumpTypeListList" item="vo"}
                    <option value="{$key}" {in name="key" value="$row.jump_type_list"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group" id="content_show_hide">
        <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50">{$row.content|htmlentities}</textarea>
        </div>
    </div>
    <div class="form-group" id="jump_url_show_hide">
        <label class="control-label col-xs-12 col-sm-2">{:__('Jump_url')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-jump_url" class="form-control" name="row[jump_url]" type="text" value="{$row.jump_url|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Switch')}:</label>
        <div class="col-xs-12 col-sm-8">
                        
            <select  id="c-switch" class="form-control selectpicker" name="row[switch]">
                {foreach name="switchList" item="vo"}
                    <option value="{$key}" {in name="key" value="$row.switch"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}">
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
  • index.php
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs">
            <li class="active"><a href="#all" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="siteList" item="vo"}
            <li><a href="#{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>

    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('xxfb/banner/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('xxfb/banner/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('xxfb/banner/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        

                        <div class="dropdown btn-group {:$auth->check('xxfb/banner/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="switch=1"><i class="fa fa-eye"></i> 开</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="switch=0"><i class="fa fa-eye-slash"></i> 关</a></li>
                            </ul>
                        </div>

                        
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('xxfb/banner/edit')}"
                           data-operate-del="{:$auth->check('xxfb/banner/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

5.js页面


define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'xxfb/banner/index' + location.search,
                    add_url: 'xxfb/banner/add',
                    edit_url: 'xxfb/banner/edit',
                    del_url: 'xxfb/banner/del',
                    multi_url: 'xxfb/banner/multi',
                    import_url: 'xxfb/banner/import',
                    table: 'xxfb_banner',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'weigh',
                fixedColumns: true,
                fixedRightNumber: 1,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'site', title: __('Site'), searchList: {"1":__('Site 1'),"2":__('Site 2')}, formatter: Table.api.formatter.normal},
                        {field: 'title', title: __('Title'), operate: 'LIKE'},
                        {field: 'image', title: __('Image'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image},
                        {field: 'jump_type_list', title: __('Jump_type_list'), searchList: {"0":__('Jump_type_list 0'),"1":__('Jump_type_list 1'),"2":__('Jump_type_list 2'),"3":__('Jump_type_list 3')}, formatter: Table.api.formatter.normal},
                        {field: 'switch', title: __('Switch'), searchList: {"0":__('Switch 0'),"1":__('Switch 1')}, table: table, formatter: Table.api.formatter.toggle},
                        {field: 'weigh', title: __('Weigh'), operate: false},
                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
            //绑定TAB事件
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var typeStr = $(this).attr("href").replace('#', '');
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    params.type = typeStr;

                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;

            });
        },
        add: function () {
            $("#content_show_hide").hide();
            $("#jump_url_show_hide").hide();
            onChange();
            Controller.api.bindevent();
        },
        edit: function () {
            var jump_type = $("#c-jump_type_list").val();
            show_hide(jump_type);
            onChange();
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});
function onChange(){
    $('#c-jump_type_list').on('change',function(){
        var jump_type = $(this).val();
        show_hide(jump_type);
    });
}
function show_hide(jump_type){
    var fruits = ['1', '2'];
    if(fruits.includes(jump_type)){
        $("#jump_url_show_hide").show();
        $("#content_show_hide").hide();
        $('#c-jump_url').attr('data-rule', 'required');
    }else if(jump_type == 3){
        $("#content_show_hide").show();
        $("#jump_url_show_hide").hide();
        $('#c-content').attr('data-rule', 'required');
    }else if(jump_type == 0){
        $("#content_show_hide").hide();
        $("#jump_url_show_hide").hide();
    }
}

代码完成,直接复制即可使用

6.小知识点


  1. 下拉框动态加载不同的input框
  2. 隐藏的input显示后增加必填属性
  3. 自定义tab选项卡

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Cocos Creator:必知必会

Cocos Creator&#xff1a;必知必会 事件事件属性坐标系的区别 持续更新中。。。 事件 开发版本&#xff1a;v3.8.1 事件属性 坐标系的区别 在Cocos游戏开发框架中&#xff0c;getLocation和getUILocation是两个用于获取节点位置的方法&#xff0c;但是它们之间存在一些重要…

21、命令执行

文章目录 一、命令执行概述1.1 基本定义1.2 原理1.3 两个条件1.4 命令执行漏洞产生的原因1.5 管道符号和通用命令符 二、远程命令执行2.1 远程命令执行相关函数2.2 远程命令执行漏洞的利用 三、系统命令执行3.1 相关函数3.2 系统命令执行漏洞利用 四、命令执行漏洞防御 一、命令…

【web安全】文件读取与下载漏洞

前言 菜某整理仅供学习&#xff0c;有误请赐教。 概念 个人理解&#xff1a;就是我们下载一个文件会传入一个参数&#xff0c;但是我们可以修改参数&#xff0c;让他下载其他的文件。因为是下载文件&#xff0c;所以我们可以看到文件里面的源码&#xff0c;内容。 文件读取…

docker学习(四、修改容器创建新的镜像推送到云上)

镜像是只读的&#xff0c;容器是可编辑的。Docker镜像是分层的&#xff0c;支持通过扩展镜像&#xff0c;创建新的镜像。 学到这里感觉docker跟git很想~~ 通过docker commit将修改的容器做成新的镜像 # 将容器做成新的镜像 docker commit -m"提交备注" -a"作…

Linux,Web网站服务(一)

1.准备工作 为了避免发生端口冲突&#xff0c;程序冲突等现象&#xff0c;建议卸载使用RPM方式安装的httpd [rootnode01 ~]# rpm -e http --nodeps 挂载光盘到/mnt目录 [rootnode01 ~]# mount /dev/cdrom /mnt Apache的配置及运行需要apr.pcre等软件包的支持&#xff0c;因此…

MYSQL提权

一、环境准备&#xff1a; 靶场机&#xff1a;windows7&#xff1a;192.168.200.34 攻击机&#xff1a;kali&#xff1a;192.168.200.14 二、原理&#xff1a; UDF&#xff08;User-Defined Function&#xff09;提权指的是通过在MySQL数据库中编写自定义函数&#xff08;UD…

ALTERNET STUDIO 9.1 Crack

ALTERNET STUDIO 9.1 发布 宣布 AlterNET Studio 9.1 版本今天上线。AlterNET Studio 9.0 是一个中期更新&#xff0c;重点是改进我们所有的组件库。 以下是 AlterNET Studio 9.1 的发布亮点&#xff1a; Roslyn C# 和 Visual Basic 解析器现在支持代码修复/代码重构。 代码修复…

PSP - 计算蛋白质复合物链间接触的残基与面积

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/134884889 在蛋白质复合物中&#xff0c;通过链间距离&#xff0c;可以计算出在接触面的残基与接触面的面积&#xff0c;使用 BioPython 库 与 SA…

整数以及浮点数在内存中的存储

一.整数在内存当中的存储 数据在内存中是以十六进制补码的形式进行存储的。 原码表示法简单易懂&#xff0c;适用于乘法&#xff0c;但用原码表示的数进行加减运算比较复杂&#xff0c;当两数相加时&#xff0c;如果同号则数值相加&#xff0c;但是进行减法时要先比较绝对值的…

【面试专题】MySQL篇①

1.MySQL中&#xff0c;如何定位慢查询? ①介绍一下当时产生问题的场景&#xff08;我们当时的一个接口测试的时候非常的慢&#xff0c;压测的结果大概5秒钟&#xff09; ②我们系统中当时采用了运维工具&#xff08; Skywalking &#xff09;&#xff0c;可以监测出哪个接口…

学习pytorch18 pytorch完整的模型训练流程

pytorch完整的模型训练流程 1. 流程1. 整理训练数据 使用CIFAR10数据集2. 搭建网络结构3. 构建损失函数4. 使用优化器5. 训练模型6. 测试数据 计算模型预测正确率7. 保存模型 2. 代码1. model.py2. train.py 3. 结果tensorboard结果以下图片 颜色较浅的线是真实计算的值&#x…

idea使用maven的package打包时提示“找不到符号”或“找不到包”

介绍&#xff1a;由于我们的项目是多模块开发项目&#xff0c;在打包时有些模块内容更新导致其他模块在引用该模块时不能正确引入。 情况一&#xff1a;找不到符号 情况一&#xff1a;找不到包 错误代码部分展示&#xff1a; Failure to find com.xxx.xxxx:xxx:pom:0.5 in …

3D渲染和动画制作软件KeyShot Pro mac附加功能

KeyShot 11 mac是一款专业化实时3D渲染工具&#xff0c;使用它可以简化3d渲染和动画制作流程&#xff0c;并且提供最准确的材质及光线&#xff0c;渲染效果更加真实&#xff0c;KeyShot为您提供了使用 CPU 或 NVIDIA GPU 进行渲染的能力和选择&#xff0c;并能够线性扩展以获得…

HarmonyOS4.0从零开始的开发教程10管理组件状态

HarmonyOS&#xff08;八&#xff09;管理组件状态 概述 在应用中&#xff0c;界面通常都是动态的。如图1所示&#xff0c;在子目标列表中&#xff0c;当用户点击目标一&#xff0c;目标一会呈现展开状态&#xff0c;再次点击目标一&#xff0c;目标一呈现收起状态。界面会根…

Django的logging-日志模块的简单使用方法

扩展阅读&#xff1a; Python-Django的“日志功能-日志模块(logging模块)-日志输出”的功能详解 现在有下面的Python代码&#xff1a; # -*- coding: utf-8 -*-def log_out_test(content_out):print(content_out)content1 "i love you01" log_out_test(content1)现…

<Linux>(极简关键、省时省力)《Linux操作系统原理分析之Linux 设备管理》(29)

《Linux操作系统原理分析之Linux 设备管理》&#xff08;29&#xff09; 10 Linux 设备管理10.1 Linux 设备分类与识别10.1.1 Linux 设备的分类10.1.2 设备文件 10&#xff0e;2 设备驱动程序与设备注册10.2.1 设备驱动程序10.2.2 设备注册 10.3Linux 的 I/O 控制方式10.3.1 查…

Docker, Docker-compose部署Sonarqube

参考文档 镜像地址: https://hub.docker.com/_/sonarqube/tags Docker部署文档地址 Installing from Docker | SonarQube Docs Docker-compose文档部署地址&#xff1a; Installing from Docker | SonarQube Docs 部署镜像 2.1 docker部署 # 宿主机执行 $. vi /etc/sysctl.conf…

探索CSS:从入门到精通Web开发(二)

前言 当我们谈论网页设计和开发时&#xff0c;CSS&#xff08;层叠样式表&#xff09;无疑是其中的重要一环。作为HTML的伴侣&#xff0c;CSS赋予网页以丰富的样式和布局&#xff0c;使得网站看起来更加吸引人并且具备更好的可读性。本书将通过一系列深入浅出的方式&#xff0…

kafka学习笔记--安装部署、简单操作

本文内容来自尚硅谷B站公开教学视频&#xff0c;仅做个人总结、学习、复习使用&#xff0c;任何对此文章的引用&#xff0c;应当说明源出处为尚硅谷&#xff0c;不得用于商业用途。 如有侵权、联系速删 视频教程链接&#xff1a;【尚硅谷】Kafka3.x教程&#xff08;从入门到调优…

深入理解 Promise:前端异步编程的核心概念

深入理解 Promise&#xff1a;前端异步编程的核心概念 本文将帮助您深入理解 Promise&#xff0c;这是前端异步编程的核心概念。通过详细介绍 Promise 的工作原理、常见用法和实际示例&#xff0c;您将学会如何优雅地处理异步操作&#xff0c;并解决回调地狱问题。 异步编程和…