16 —— Webpack多页面打包
需求：把 黑马头条登陆页面-内容页面 一起引入打包使用
步骤：
- 准备源码（html、css、js）放入相应位置，并改用模块化语法导出
原始content.html代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css"><link rel="stylesheet"href="https://at.alicdn.com/t/c/font_4001111_4jrdiaeyvuy.css?spm=a313x.7781069.1998910419.52&file=font_4001111_4jrdiaeyvuy.css"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css"><link rel="stylesheet" href="./index.css"><title>首页-内容管理</title>
</head><body><div class="wrap"><!-- 侧边栏 --><div class="aside"><h2>黑马头条</h2><ul class="nav"><li><a href="./index.html" class="active"><span class="iconfont icon-16"></span><span>内容管理</span></a></li><li><a href="../publish/index.html"><span class="iconfont icon-fabu"></span><span>发布文章</span></a></li></ul></div><!-- 右侧区域 --><div class="main"><!-- 顶部导航 --><div class="top-nav"><div class="nav-item"><span class="nick-name">昵称</span><span class="quit">退出</span></div></div><!-- 内容区域 --><div class="content"><!-- 筛选 --><div class="card"><div class="title"><span>内容管理</span></div><div class="body"><form class="sel-form"><div><label class="form-label">状态:</label><div class="form-check"><input class="form-check-input" type="radio" name="status" value="" id="all" checked><label class="form-check-label" for="all">全部</label></div><div class="form-check"><input class="form-check-input" type="radio" name="status" value="1" id="audit"><label class="form-check-label" for="audit">待审核</label></div><div class="form-check"><input class="form-check-input" type="radio" name="status" value="2" id="approved"><label class="form-check-label" for="approved">审核通过</label></div></div><div><label class="form-label">频道:</label><select class="form-select" name="channel_id"><option selected>请选择文章频道</option><option value="1">频道1</option><option value="2">频道2</option><option value="3">频道3</option></select></div><div><button type="button" class="btn btn-primary sel-btn">筛选</button></div></form></div></div><!-- 内容列表 --><div class="card"><table class="table table-striped table-hover"><thead><tr><th>封面</th><th>标题</th><th>状态</th><th>发布时间</th><th>阅读数</th><th>评论数</th><th>点赞数</th><th>操作</th></tr></thead><tbody class="align-middle art-list"><tr><td><imgsrc="https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500"alt=""></td><td>文章标题</td><td><span class="badge text-bg-success">审核通过</span><span class="badge text-bg-primary">待审核</span></td><td><span>2023-04-27 10:59:34</span></td><td><span>0</span></td><td><span>0</span></td><td><span>0</span></td><td><i class="bi bi-pencil-square edit"></i><i class="bi bi-trash3 del"></i></td></tr></tbody></table><!-- 分页 --><nav><ul class="pagination"><li class="page-item last"><a class="page-link" href="javascript:;"><span>«</span></a></li><li class="page-item page-now">第1页</li><li class="page-item next"><a class="page-link" href="javascript:;"><span>»</span></a></li><li><span class="total-count page-now">共0条</span></li></ul></nav></div></div></div></div><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script><script src="../../lib/form-serialize.js"></script><script src="../../utils/request.js"></script><script src="../../utils/auth.js"></script><script src="./index.js"></script>
</body></html>
- 配置webpack.config.js多入口（多出口）和多页面的设置
入口：改用对象形式
js多出口：使用占位符占位
插件：
生成html
提取css
- 重新打包 npm run dev
相关文章：
16 —— Webpack多页面打包
需求：把 黑马头条登陆页面-内容页面 一起引入打包使用 步骤： 准备源码（html、css、js）放入相应位置，并改用模块化语法导出 原始content.html代码 <!DOCTYPE html> <html lang"en"><head&…...
微服务即时通讯系统的实现（服务端）----（3）
目录 1. 消息存储子服务的实现1.1 功能设计1.2 模块划分1.3 模块功能示意图1.4 数据管理1.4.1 数据库消息管理1.4.2 ES文本消息管理 1.5 接口的实现1.5.1 消息存储子服务所用到的protobuf接口实现1.5.2 最近N条消息获取接口实现1.5.3 指定时间段消息搜索接口实现1.5.4 关键字消…...
.net6.0 mvc 传递 model 实体参数（无法对 null 引用执行运行时绑定）
说一下情况： 代码没问题，能成功从数据库里查到数据，能将数据丢给ViewBag.XXXX, 在View页面也能获取到 ViewBag.XXXX的值，但是发布到线上后报这个错： Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: 无法对 …...
VUE 入门级教程：开启 Vue.js 编程之旅
一、Vue.js 简介 Vue.js 是一套构建用户界面的渐进式 JavaScript 框架。它专注于视图层的开发，能够轻松地与其他库或现有项目进行整合。Vue.js 的核心库只关注视图层，通过简洁的 API 实现数据绑定和 DOM 操作的响应式更新，让开发者可以高效地…...
Ubantu系统docker运行成功拉取失败【成功解决】
解决docker运行成功拉取失败 失败报错 skysky-Legion-Y7000-IRX9:~$ docker run hello-world docker: permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head “http://%2Fvar%2Frun%2Fdocker.sock/_ping”: dial uni…...
mvn-mac操作小记
1.安装brew 如果报错，Warning: /opt/homebrew/bin is not in your PATH. vim ~/.zshrc，最后一行追加 export PATH“/opt/homebrew/bin:$PATH” source ~/.zshrc 2.安装brew install maven mvn -version查看路径 Maven home: /opt/homebrew/Cellar/mav…...
机器学习——生成对抗网络（GANs）：原理、进展与应用前景分析
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一. 生成对抗网络的基本原理二. 使用步骤2.1 对抗性训练2.2 损失函数 三. GAN的变种和进展四. 生成对抗网络的应用五. 持续挑战与未来发展方向六. 小结 前言 生…...
「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏
本篇将带你实现一个简单的数字猜谜游戏。用户输入一个数字，应用会判断是否接近目标数字，并提供提示“高一点”或“低一点”，直到用户猜中目标数字。这个小游戏结合状态管理和用户交互，是一个入门级的互动应用示例。 关键词 UI互…...
Ps：存储 Adobe PDF
在 Adobe Photoshop 中，将图像保存为 PDF 文件时， 会弹出“存储 Adobe PDF” Save Adobe PDF对话框。在此对话框中提供了多个选项，用于控制 PDF 文件的输出，包括一般设置（选择预设、兼容性和保留编辑功能）、…...
DDR3保姆级使用教程：ZYNQ 7010
内容:使用DDR3 IP核，向DDR3写入数据，然后再读出数据，通过串口打印。 设备：ZYNQ 7010 xc7z010clg-400-1。软件VIVADO 2018.3 （1）工程模块：一个写FIFO，一个读FIFO。一个ZYNQ IP核&am…...
OpenCV 模板匹配全解析：从单模板到多模板的实战指南
简介：本文深入探讨 OpenCV 中的模板匹配技术。详细介绍构建输入图像与模板图像的步骤，包括读取、截取、滤波与存储等操作。剖析 cv2.matchTemplate 语法及其参数含义，阐述不同匹配方法下结果值的意义。同时讲解 cv2.minMaxLoc 语法࿰…...
【JAVA] 杂谈： java中的拷贝（克隆方法）
这篇文章我们来介绍什么是拷贝，并且实现浅拷贝到深拷贝。 目录 一、浅拷贝 1.1 clone 方法 1.2 实现浅拷贝： 1.2.1 重写 clone方法 1.2.2 实现接口 Cloneable 1.2.3 调用克隆方法 1.2.4 原理图： 1.3 浅拷贝的不足 1.3.1 增加引用…...
使用 PDF API 合并 PDF 文件
内容来源： 如何在 Mac 上合并 PDF 文件 1. 注册与认证 您可以注册一个免费的 ComPDFKit API 帐户，该帐户允许您在 30 天内免费无限制地处理 1,000 多个文档。 ComPDFKit API 使用 JSON Web Tokens 方法进行安全身份验证。从控制面板获取您的公钥和密钥&…...
关于BeanUtils.copyProperties是否能正常复制字段【详细版】
话不多说！先总结： 1、字段相同，类型不同（不复制，也不报错） 2、子类父类 (1)子类传给父类（可以正常复制） (2)父类传给子类（可以正常复制） 3、子类父类&#x…...
爬虫框架快速入门——Scrapy
适用人群：零基础、对网络爬虫有兴趣但不知道从何开始的小白。 什么是 Scrapy？ Scrapy 是一个基于 Python 的网络爬虫框架，它能帮助你快速爬取网站上的数据，并将数据保存到文件或数据库中。 特点： 高效：支…...
鸿蒙开发-HMS Kit能力集(应用内支付、推送服务)
1 应用内支付 开发步骤 步骤一：判断当前登录的华为账号所在服务地是否支持应用内支付 在使用应用内支付之前，您的应用需要向IAP Kit发送queryEnvironmentStatus请求，以此判断用户当前登录的华为帐号所在的服务地是否在IAP Kit支持结算的国…...
TYUT设计模式大题
对比简单工厂，工厂方法，抽象工厂模式 比较安全组合模式和透明组合模式 安全组合模式容器节点有管理子部件的方法，而叶子节点没有，防止在用户在叶子节点上调用不适当的方法，保证了的安全性，防止叶子节点暴露…...
Webman中实现定时任务
文章目录 Webman中实现定时任务一、引言二、安装与配置1、安装Crontab组件2、创建进程文件3、配置进程文件随Webman启动4、重启Webman5、Cron表达式（补充）例子 三、使用示例四、总结 Webman中实现定时任务 一、引言 在现代的后端开发中，定时…...
《以 C++破局：人工智能系统可解释性的探索与实现》
在当今科技飞速发展的时代，人工智能已深度融入我们的生活，从医疗诊断到金融决策，从交通管控到司法审判，其影响力无处不在。然而，在这些涉及重大利益和社会影响的关键领域，人工智能系统却面临着严峻的信任危…...
C++：QTableWidget删除选中行(单行，多行即可)
转自博客： Qt C -在QTableWidget中删除行 - 腾讯云开发者社区 - 腾讯云 我的界面： 采集机器人位置和姿态信息并写入QTableWidget控件中 删除代码： 1.获取要删除行的索引 2.删除行 QList<QTableWidgetItem*> items ui->tableW…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
【JVM】- 内存结构
引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...
多模态大语言模型arxiv论文略读（108）
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
Kafka入门-生产者
生产者 生产者发送流程： 延迟时间为0ms时，也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于：异步发送不需要等待结果，同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...