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…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
AspectJ 在 Android 中的完整使用指南
一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
算法：模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...
day36-多路IO复用
一、基本概念 （服务器多客户端模型） 定义：单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用：应用程序通常需要处理来自多条事件流中的事件，比如我现在用的电脑，需要同时处理键盘鼠标…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么？它的作用是什么？ Spring框架的核心容器是IoC（控制反转）容器。它的主要作用是管理对…...
自然语言处理——文本分类
文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益（IG） 分类器设计贝叶斯理论：线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别， 有单标签多类别文本分类和多…...
向量几何的二元性：叉乘模长与内积投影的深层联系
在数学与物理的空间世界中，向量运算构成了理解几何结构的基石。叉乘（外积）与点积（内积）作为向量代数的两大支柱，表面上呈现出截然不同的几何意义与代数形式，却在深层次上揭示了向量间相互作用的…...
Canal环境搭建并实现和ES数据同步
作者：田超凡 日期：2025年6月7日 Canal安装，启动端口11111、8082： 安装canal-deployer服务端： https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...