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

目录

1.效果展示:

列表

添加及编辑页面同

2.建表:

3.使用crud一键生成并创建控制器

4.html页面

add.html

edit.html

index.php

5.js页面

6.小知识点


1.效果展示:


  • 列表

  • 添加及编辑页面同

2.建表:


  表名:fa_xxfb_banner

/*Navicat Premium Data TransferSource Server         : rootSource Server Type    : MySQLSource Server Version : 50726Source Host           : localhost:3306Source Schema         : xxxTarget Server Type    : MySQLTarget Server Version : 50726File Encoding         : 65001Date: 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.controller控制器


<?phpnamespace app\admin\controller\xxfb;use app\common\controller\Backend;/*** 轮播图** @icon fa fa-circle-o*/
class Banner extends Backend
{/*** Banner模型对象* @var \app\admin\model\xxfb\Banner*/protected $model = null;protected $searchFields = 'title';public function _initialize(){parent::_initialize();$this->model = new \app\admin\model\xxfb\Banner;$this->view->assign("siteList", $this->model->getSiteList());$this->view->assign("jumpTypeListList", $this->model->getJumpTypeListList());$this->view->assign("switchList", $this->model->getSwitchList());}/*** 默认生成的控制器所继承的父类中有index/add/edit/del/multi五个基础方法、destroy/restore/recyclebin三个回收站方法* 因此在当前控制器中可不用编写增删改查的代码,除非需要自己控制这部分逻辑* 需要将application/admin/library/traits/Backend.php中对应的方法复制到当前控制器,然后进行修改*//*** 查看*/public function index(){//当前是否为关联查询$this->relationSearch = true;//设置过滤方法$this->request->filter(['strip_tags', 'trim']);if ($this->request->isAjax()) {//如果发送的来源是Selectpage,则转发到Selectpageif ($this->request->request('keyField')) {return $this->selectpage();}$type = $this->request->request("type");list($where, $sort, $order, $offset, $limit) = $this->buildparams();if ($type == "all" || $type == null) {$wheretype = '';} else {$wheretype['site'] = $type;}$list = $this->model->where($where)->where($wheretype)->order($sort, $order)->paginate($limit);$result = array("total" => $list->total(), "rows" => $list->items());return json($result);}return $this->view->fetch();}
}

7. model模型


<?phpnamespace app\admin\model\xxfb;use think\Cache;
use think\Model;class Banner extends Model
{// 表名protected $name = 'xxfb_banner';// 自动写入时间戳字段protected $autoWriteTimestamp = 'integer';// 定义时间戳字段名protected $createTime = 'createtime';protected $updateTime = false;protected $deleteTime = false;public static $fields = ['id', 'title', 'image', 'content' ,'jump_url', 'jump_type_list'];// 追加属性protected $append = [
//        'site_text',
//        'jump_type_list_text',
//        'switch_text'];protected static function init(){self::afterInsert(function ($row) {$pk = $row->getPk();$row->getQuery()->where($pk, $row[$pk])->update(['weigh' => $row[$pk]]);});self::afterWrite(function ($row) {Cache::rm('banner_list');});}public static function list($site){return self::where(['site' => $site, 'switch' => 1])->field(self::$fields)->order('weigh desc,id desc')->limit(10)->select();}public function getSiteList(){return ['1' => __('Site 1'), '2' => __('Site 2')];}public function getJumpTypeListList(){return ['0' => __('Jump_type_list 0'), '1' => __('Jump_type_list 1'), '2' => __('Jump_type_list 2'), '3' => __('Jump_type_list 3')];}public function getSwitchList(){return ['0' => __('Switch 0'), '1' => __('Switch 1')];}public function getSiteTextAttr($value, $data){$value = $value ? $value : (isset($data['site']) ? $data['site'] : '');$list = $this->getSiteList();return isset($list[$value]) ? $list[$value] : '';}public function getJumpTypeListTextAttr($value, $data){$value = $value ? $value : (isset($data['jump_type_list']) ? $data['jump_type_list'] : '');$list = $this->getJumpTypeListList();return isset($list[$value]) ? $list[$value] : '';}public function getSwitchTextAttr($value, $data){$value = $value ? $value : (isset($data['switch']) ? $data['switch'] : '');$list = $this->getSwitchList();return isset($list[$value]) ? $list[$value] : '';}public function getImageAttr($value){return cdnurl($value, true);}}

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

8.小知识点


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

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

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

相关文章

kubesphere安装后启用DevOps

官方文档&#xff1a;KubeSphere DevOps 系统 1、集群管理---定制资源定义 进入目录&#xff1a;集群管理---定制资源定义搜索&#xff1a;clusterconfiguration 点击 ks-installer 右侧的 &#xff0c;选择编辑 YAML 在该 YAML 文件中&#xff0c;搜索 devops&#xff0c;…

SSM项目实战-前端-在Index.vue中展示第一页数据

1、util/request.js import axios from "axios";let request axios.create({baseURL: "http://localhost:8080",timeout: 50000 });export default request 2、api/schedule.js import request from "../util/request.js";export let getSchedu…

Python搭建代理IP池实现接口设置与整体调度

目录 前言 1. 搭建免费代理IP爬虫 2. 将获取到的代理IP存储到数据库中 3. 构建一个代理IP池 4. 实现调度器来调度代理IP池 5. 实现带有代理IP池的爬虫 总结 前言 在网络爬虫中&#xff0c;代理IP池是一个非常重要的组件。由于许多网站对单个IP的请求有限制&#xff0c;…

【数据结构和算法】--- 栈

目录 栈的概念及结构栈的实现初始化栈入栈出栈其他一些栈函数 小结栈相关的题目 栈的概念及结构 栈是一种特殊的线性表。相比于链表和顺序表&#xff0c;栈只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的…

iphone/安卓手机如何使用burp抓包

iphone 1. 电脑 ipconfig /all 获取电脑网卡ip&#xff1a; 192.168.31.10 2. 电脑burp上面打开设置&#xff0c;proxy&#xff0c;增加一条 192.168.31.10:8080 3. 4. 手机进入设置 -> Wi-Fi -> 找到HTTP代理选项&#xff0c;选择手动&#xff0c;192.168.31.10:8080 …

AI:95-基于卷积神经网络的艺术品风格分类

🚀 本文选自专栏:人工智能领域200例教程专栏 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的核心代码,详细讲解供大家学习,希望可以帮到大家。欢迎订阅支持,正在不断更新…

一套rk3588 rtsp服务器推流的 github 方案及记录 -01

我不生产代码&#xff0c;我只是代码的搬运工&#xff0c;相信我&#xff0c;看完这个文章你的图片一定能变成流媒体推出去。 诉求&#xff1a;使用opencv拉流&#xff0c;转成bgr数据&#xff0c;需要把处理后的数据&#xff08;BGR&#xff09;编码成264&#xff0c;然后推流…

测试Centos上用Gunicorn启动的Django-Web服务在Django源文件有改变的情况下能否自动重载最新源码下的web服务

01-先上传最新的源码文件 参考博文 https://blog.csdn.net/wenhao_ir/article/details/134762966 进行 02-先在Django直接开web服务下修改源码测试 这是没有问题的&#xff0c;会自己重置。 03-开启gunicorn服务 cd /djangoproject/mmdj01/ gunicorn -c /djangoproject/mm…

如何跑AI模型—ultralytics

这里以跑 ultralytics 为示例&#xff0c;记录了如何从 0-1 跑个简单的模型&#xff0c;包括环境搭建。我的是 Window 系统&#xff0c;其他系统也类似。 主要流程是环境搭建&#xff0c;找个官网的 demo&#xff0c;收集好所需素材&#xff08;模型&#xff0c;图片等&#x…

炫酷不止一面:探索JavaScript动画的奇妙世界(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

口袋参谋:运营必备的生意参谋指数免费转换工具!

​至少99.99%的商家都知道&#xff0c;淘宝天猫上交易的指数越高&#xff0c;宝贝的热度就高&#xff0c;那就代表着入店的流量就会有很多。 01 在哪里可以看到指数呢&#xff1f; 其实我们在生意参谋后台&#xff0c;在市场板块或者竞争板块中&#xff0c;是可以看到访问人气…

智慧能源:数字孪生压缩空气储能管控平台

压缩空气储能在解决可再生能源不稳定性和提供可靠能源供应方面具有重要的优势。压缩空气储能&#xff0c;是指在电网负荷低谷期将电能用于压缩空气&#xff0c;在电网负荷高峰期释放压缩空气推动汽轮机发电的储能方式。通过提高能量转换效率、增加储能密度、快速启动和调节能力…

第21章网络通信

网络程序设计基础 网络程序设计编写的是与其他计算机进行通信的程序。Java 已经将网络程序所需要的元素封 装成不同的类&#xff0c;用户只要创建这些类的对象&#xff0c;使用相应的方法&#xff0c;即使不具备有关的网络支持&#xff0c;也可 以编写出高质量的网络通信程序…

第二十一章总结

网络程序设计基础 局域网与互联网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机&#xff1b;如图所示&#xff1a; 网络协议 1.IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。Internet 网络采用的协议是TCP/IP协议&#xff0c;…

JavaScript中的发布订阅和观察者模式:如何优雅地处理事件和数据更新

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;JavaScript篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-订阅观察者模式 目录 说说你对发布订阅、观察者模式的理解&#xff1f;…

【Java Web学习笔记】4 - DOM文档对象模型

项目代码 https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/javascript 零、在线文档 JavaScript HTML DOM 一、HTML DOM基本介绍 1. DOM全称是Document Object Model文档对象模型 文档<---映射--->对象 2.就是把文档中的标签&#xff0c;属性&#xf…

【链表OJ—反转链表】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 1、反转链表题目&#xff1a; 2、方法讲解&#xff1a; 解法一&#xff1a; 解法二&#xff1a; 总结 前言 世上有两种耀眼的光芒&#xff0c;一种是正在升起的太…

FPGA时序分析与约束(0)——目录与传送门

一、简介 关于时序分析和约束的学习似乎是学习FPGA的一道分水岭&#xff0c;似乎只有理解了时序约束才能算是真正入门了FPGA&#xff0c;对于FPGA从业者或者未来想要从事FPGA开发的工程师来说&#xff0c;时序约束可以说是一道躲不过去的坎&#xff0c;所以这个系列我们会详细介…

搭建React项目,基于Vite+React+TS+ESLint+Prettier+Husky+Commitlint

基于ViteReactTSESLintPrettierHuskyCommitlint搭建React项目 node: 20.10.0 一、创建项目 安装包管理器pnpm npm i pnpm -g基于Vite创建项目 pnpm create vitelatest web-gis-react --template react-ts进入项目目录安装依赖 $ cd web-gis-react $ pnpm i启动项目 $ pnpm…

SpringBoot3-创建自定义启动器,使用自定义starter启动器

1、创建自定义启动工程pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.a…