一、BBS论坛功能描述
我做的是一个论坛类的网页项目，每个用户可以登录注册查看并发布文章，以及对文章的点赞和评论，还有文件上传和个人签名发布和基础信息修改，管理员对网站的数据进行统计，对文章和文件的上传以及评论进行审核，以及对普通的用户的权限提升账号封停等等，以及对应的crud。
然后做的是三端（PC端，小程序端）并且采用前后端分离以及JWT技术和RestFull风格API，后端使用ThinkPHP8,PC端使用vue3+element-ui-plus，Axios异步通信以及诸多扩展,微信小程序端使用原生的微信小程序技术+vant2 UI组件库，数据库使用mysql8.0.3.
功能分为以下几个模块：
-
用户端
(1) 用户的登录注册模块（均使用token鉴权的技术，后续的每个操作都是建立在token上面，密码使用md5加密）
(2) 用户的个人基础信息修改保存，以及头像上传（采用的是上传到本地服务器中，然后返回对应的域名Url并且更新到数据库表中）
(3) 用户的签名信息发布及历史签名查看
(4) 不同用户的文章发布，文章发布大致包括标题，封面插图，摘要信息，以及内容（内容部分使用了markdown的渲染及保存）
(5) 文章的评论（可以一级评论和二级评论）
(6) 文章的点赞和文章的访问量模块（访问量做的是每次点击进入对应的文章时，访问量加一）
(7) 所有文章的概览，分页以及多条件查询
(8) 文件上传（支持任意格式的文件，文件上传后需要管理员进行审核才能看到）
(9) 文件下载及浏览
(10) 天气组件（使用高德天气，实时的查询当天的天气并且进行渲染）
(11) 看板娘扩展（使用Live2d）制作了一个看板娘，点击时会触发语音及文字通知
(12) 鼠标点击特效（使用原生的js完成，原理就是一个大的canvas进行绘制）
(13) 页面整体颜色的切换（使用vue操控dom元素完成）
(14) 网易云音乐组件（使用网易云外链工具，然后添加了切换歌曲上下首）
(15) 聊天机器人（基于青云客接口，并且自行封装了chat界面）
(16) 友链 -
管理员端
(1) 用户的增删改查，及用户账号的注销封停和启用
(2) 评论的增删改查，及不当评论的过滤删除
(3) 文章的审核，增删改查
(4) 文件的审核，以及增删改查
(5) 网站的统计信息部分（注册统计图表，不同模块的文章数统计图表，每天的top5文章访问量统计图表）
(6) 天气组件（使用高德天气，实时的查询当天的天气并且进行渲染）
(7) 看板娘扩展（使用Live2d）制作了一个看板娘，点击时会触发语音及文字通知
(8) 鼠标点击特效（使用原生的js完成，原理就是一个大的canvas进行绘制）
(9) 页面整体颜色的切换（使用vue操控dom元素完成） -
小程序端
(1) 文章模块的概览
(2) 文章的查询和浏览
(3) 文章的评论及点赞
(4) 用户的登录和注册
(5) 用户的头像上传
(6) 用户的基本信息修改
(7) 用户的签名信息发布
二、系统效果图
（一）PC端部分（展示一些部分图）
（二）小程序端 （展示一些部分图）
三、技术说明
（一）后端部分
后端的技术使用了PHP语言的ThinkPHP8框架，并且采用了前后端分离的技术（前端负责处理页面的展示和用户交互，后端则负责提供数据和业务逻辑处理。前端通过发送请求获取数据，后端接收到请求后处理数据并返回JSON格式的响应）通过JSON接口的方式与前端进行交互，RestFull风格API以及JWT token鉴权和Cores跨域配置，多种类型文件的上传与处理。
后端项目中，使用到了多模块设计，分为index和admin两个模块（但是尚未使用另一个模块）。前端发送的请求通过基础的mvc架构去处理，自定义了状态码枚举类和restfull API通用JSON返回格式。
（二）PC端前端部分
PC端使用了Vue3，和element-ui-plus UI 框架，通过手动封装的axios异步网络请求库进行请求的发送和响应处理，通过vite配置反向代理服务器，实现前端的跨域配置。
自定义了一个基于element-ui-plus container布局容器的布局组件，可以实现页面布局的自适应。
使用了particles3 粒子背景插件，实现登录页面的粒子背景和交互点击特效。
集成了vue-md-editor markdown编辑器，实现了论坛中markdown格式文章的发布以及markdown格式文章的渲染。
以及高德地图天气API接口和青云客聊天机器人接口，从而实现论坛中天气组件的天气的实时获取以及聊天机器人功能的实现。
最后还使用了基于live2d的看板娘插件，实现论坛中看板娘的交互点击特效。
（三）移动端-纯原生微信小程序
微信小程序端，使用了原生的微信小程序技术，UI 框架使用的是Vant Weapp2同时集成了iconfont中的图标组件，通过原生的wx.request去发送请求。自定义了页面中的tabbar组件，实现微信小程序点击tabbar进行页面的切换；集成了towxml第三方插件，实现微信小程序页面中去渲染markdown格式的文本（即将其转换为富文本格式再进行渲染）。
四、代码部分
代码很多，我直接放我的git仓库的地址了
（一）后端
PS :仓库地址 https://gitee.com/zhweb2022/bbs-course-thinkphp
（二）vue端
PS :仓库地址 https://gitee.com/zhweb2022/bbs-course-vue
（三）微信小程序部分
PS :仓库地址 https://gitee.com/zhweb2022/bbs-course-wechatapp
五、数据库部分
/*
Navicat Premium Data Transfer
Source Server : mysql
Source Server Type : MySQL
Source Server Version : 80031
Source Host : localhost:3306
Source Schema : bbs
Target Server Type : MySQL
Target Server Version : 80031
File Encoding : 65001
Date: 24/11/2023 10:35:34
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for articles
-- ----------------------------
DROP TABLE IF EXISTS `articles`;
CREATE TABLE `articles` (
`id` int(0) NOT NULL AUTO_INCREMENT COMMENT '文章id',
`uid` int(0) NOT NULL COMMENT '用户id',
`author` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '发布人',
`avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '用户头像',
`blockid` int(0) NOT NULL COMMENT '文章属于哪个板块id',
`blockpath` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '板块路径',
`img` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '文章封面',
`content` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '文章内容',
`like` int(0) NOT NULL COMMENT '点赞数',
`ctime` datetime(0) NOT NULL COMMENT '文章发布时间',
`title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '文章标题',
`count` int(0) NULL DEFAULT NULL COMMENT '文章浏览量',
`comment` int(0) NULL DEFAULT NULL COMMENT '文章评论数',
`status` int(0) NOT NULL DEFAULT 0 COMMENT '状态码',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 27 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of articles
-- ----------------------------
INSERT INTO `articles` VALUES (1, 2, 'robin', 'http://robin.com/storage/index/20231030/43102dd204b968857792020b38d70bcf.jpeg', 5, '日常模块/天道酬勤', 'http://robin.com/storage/index/20230910/fd5c75163b09b766248fddd51f2caeb7.jpg', '# 嗯~ o(*￣▽￣*)o，阿良不猛！\n>簪子上有八个字，便是仅算粗通文墨的少女，也觉得极为动人。 言念君子，温其如玉。\n\n白泽转头，伸手指向那座只说规模、不太起眼的雄镇楼，“屋舍就牢固了，世上家家相亲，孝如卯榫，在家中遮风避雨不难了，推开门去，读书越多，琢磨越多，忠义礼仪就自然而然跟上了。要我说啊，以后哪天门内世道变得亲情疏离，夫妻离散无负担，门外世道人人为己，傻子太少，聪明人太多，那个世道才是真正在往下走，因为世道这个屋舍的细微处，越来越失去黏性了。所以这也是老秀才当年不愿首徒崔瀺太早推出“事功学问”的原因所在，不是那头绣虎的学问不好，而是一个不慎，就会弊端太大，到时候至圣先师、礼圣亲自出手补救，都难有成效。父子之间，夫妻之间，若是都要斤斤计较利益得失，那就会比释道两家更早进入人心上的末法时代。\n\n\n\n![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png"token punctuation">, 1, '2023-09-08 15:36:28', '言念君子，温其如玉。', 82, 22, 1);
INSERT INTO `articles` VALUES (2, 8, '技术模块/JAVA技术', 'http://robin.com/storage/index/20231002/bc509b0b5fc1a695ce08940957410a59.jpg', 'JVM作为Java运行的基础，很难相信对于JVM一点都不了解的人可以把Java语言吃得很透。我在面试有超过3年Java经验的开发者的时候， JVM几乎就是一个必问的问题了。当然JVM不是唯一决定技术能力好坏的面试问题，但是可以佐证Java开发能力的高低。\r\n\r\n\r\n\r\n在JVM这个大类中，我认为需要掌握的知识有：\r\n\r\nJVM内存模型和结构\r\n\r\nGC原理，性能调优\r\n\r\n调优：Thread Dump， 分析内存结构\r\n\r\nclass 二进制字节码结构， class loader 体系 ， class加载过程 ， 实例创建过程\r\n\r\n方法执行过程\r\n\r\nJava各个大版本更新提供的新特性(需要简单了解)', '2023-09-09 22:18:32', 'JVM', 24, 4, 1);
INSERT INTO `articles` VALUES (3, 'http://robin.com/storage/index/20231002/cf3c770a1490c727d64b4c32de0979c6.jpg', '多线程是Java中普遍认为比较难的一块。多线程用好了可以有效提高cpu使用率， 提升整体系统效率， 特别是在有大量IO操作阻塞的情况下；但是它也是一柄双刃剑， 如果用不好，系统非但提升不大，或者没有提升，而且还会带来多线程之间的调试时等问题。\n\n在多线程中内容有很多，只是简单说明一下Java中初步使用多线程需要掌握的知识点，以后有机会单独再详细介绍一些高级特性的使用场景。\n\n# 多线程的实现和启动\n\n## callable 与 runable 区别\n\nsyncrhoized ，reentrantLock 各自特点和比对\n![外链图片转存失败, '2023-09-09 22:21:15', '多线程并发', 27, 0, 1);
INSERT INTO `articles` VALUES (4, 'http://robin.com/storage/index/20230910/5ffc4c42c1e9059e060c640c661c41b7.jpg', '>其实这两块内容都不是J2SE里面的内容，但是在日常开发中，和其他程序交互，和配置文件交互，越来越离不开这两种格式的解析。\n\n>不过对于一个开发者来说，能够了解一些XML/JSON具体解析的原理和方法，有助于你在各个具体的场景中更好的选择合适你的方式来使得你的程序更有效率和更加健壮。\nXML： 需要了解 DOM解析和 SAX解析的基本原理和各自的适用场景\nJSON： 需要了解一些常用JSON框架的用法， 如 Jackson， FastJson， Gson 等。。\n\n\n# xml（Extensible Markup Language）可拓展标记语言\n1）XML的简单易于在任何应用程序中读/写数据，这使XML很快成为数据交换的唯一公共语言，虽然不同的应用软件也支持其他的数据交换格式，但不久之后它们都将支持XML，那就意味着程序可以更容易的与Windows、Mac OS、Linux以及其他平台下产生的信息结合，然后可以很容易加载XML数据到程序中并分析它，并以XML格式输出结果。\n\n2）xml可用作数据的说明、储存、传输\n\n举个例子：假设一个微信群里面小明发了一条消息“你吃过没”。而这条消息发出后会被储存到服务器里，而当你进入微信的时候，这条消息就会从服务器里抓取过来显示到你的手机上。而这个抓取的过程中假设是以xml文件来传输（也有json，json和xml用途很相似，json、xml都有自己的格式，但其实都只是包装数据时格式不同而已，重要的是其中含有的数据，而不是包装的格式。这里只是举个例子）这时，我们用通俗易懂的文字来表示就是：\n![外链图片转存失败, '2023-09-10 07:44:33', 'XML解析/ JSON解析', 11, 1);
INSERT INTO `articles` VALUES (5, 'http://robin.com/storage/index/20230910/2736a1211aae97f7eef0573d6fa87740.jpg', 'Maven也不是Java里面的内容，但是maven是革命性的，给Java开发带来了巨大的便利。从依赖的引入和管理，开发流程的更新和发布产出，乃至版本的更新，使用maven可以大大简化开发过程中的复杂度，从而节省大量时间。可以说，maven已经成为Java开发者的标配了。所以我把maven也作为一个Java开发者对于基础必备的知识点。以后会再放上一些我的一些对于maven使用的经验和技巧等，这里就不再细说了。\r\n\r\nMaven也不是Java里面的内容，但是maven是革命性的，给Java开发带来了巨大的便利。从依赖的引入和管理，开发流程的更新和发布产出，乃至版本的更新，使用maven可以大大简化开发过程中的复杂度，从而节省大量时间。可以说，maven已经成为Java开发者的标配了。所以我把maven也作为一个Java开发者对于基础必备的知识点。以后会再放上一些我的一些对于maven使用的经验和技巧等，这里就不再细说了。\r\n\r\nMaven也不是Java里面的内容，但是maven是革命性的，给Java开发带来了巨大的便利。从依赖的引入和管理，开发流程的更新和发布产出，乃至版本的更新，使用maven可以大大简化开发过程中的复杂度，从而节省大量时间。可以说，maven已经成为Java开发者的标配了。所以我把maven也作为一个Java开发者对于基础必备的知识点。以后会再放上一些我的一些对于maven使用的经验和技巧等，这里就不再细说了。\r\n\r\n', '2023-09-10 09:44:33', 'Maven的使用', 7, 1);
INSERT INTO `articles` VALUES (6, '几乎对于每个应用来说，时间日期的处理也是绕不过去的，但是JDK8 之前的时间相关API用法并不友好。在那个时代，可以选择Joda等时间框架。到了JDK8 发布之后，全新的时间API基本融合了其他框架的优点，已经可以很好的直接使用了。\r\n\r\n对于Java开发者来说，需要熟练地使用API来对时间和日期做相关的处理。', '时间日期处理', 1);
INSERT INTO `articles` VALUES (9, 10, 'ccc', 'http://robin.com/storage/index/20231004/3afab15bcd3cfa3074dc5f79b9584a13.jpeg', '日常模块/聊天灌水', 'http://robin.com/storage/index/20230910/f21e49e6063bb951a0a2377a9a8635df.jpg', '今日台词：陆抬缓缓说道这人间不来也罢', '2023-09-10 15:59:33', '可恶的剑来！！！', 1);
INSERT INTO `articles` VALUES (10, 'ddd', 'http://robin.com/storage/index/20231004/bf44510a752e071bcafc3255f1ea5da6.jpeg', 'http://robin.com/storage/index/20230910/61ae8c6129e4f02a711427a3f96e158e.jpeg', '啦啦啦啦啦', '2023-09-10 16:12:20', '向阳花木易为春2', 1);
INSERT INTO `articles` VALUES (11, 'http://robin.com/storage/index/20230911/2d7b3a70c8eb95df57c43b3ffdd7fa64.jpeg', '胸中一点浩然气，天地千里快哉风。\n摘自《水调歌头·黄州快哉亭赠张偓佺》\n苏轼\n落日绣帘卷，亭下水连空。知君为我新作，窗户湿青红。长记平山堂上，欹枕江南烟雨，杳杳没孤鸿。认得醉翁语，山色有无中。\n一千顷，都镜净，倒碧峰。忽然浪起，掀舞一叶白头翁。堪笑兰台公子，未解庄生天籁，刚道有雌雄。 一点浩然气，千里快哉风。\n\n![外链图片转存失败, '2023-09-11 18:48:14', '逆水寒测试', 1);
INSERT INTO `articles` VALUES (12, 'http://robin.com/storage/index/20231002/9d7b70dd3391ae5a223855f9a093f7f0.jpeg', '好家伙，就差echarts基本完事了\nづ♡ど\n\n◍\'ㅅ\'◍ つ♡⊂ Ծ‸Ծ\n\n(୨୧ᵕ̤ᴗᵕ̤)\n\n(///∇//)\n\n(♡˙︶˙♡)\n\n(づ◡ど)\n\n(๑ơ ₃ ơ)♥ ♡(˃͈ દ ˂͈ ༶ )\n\n❀(///▽///)❀\n\n(Дﾟ෴°д)\n\n略略略\n```text\n /*\n _ooOoo_\n o8888888o\n 88\" . \"88\n (| -_- |)\n O\\ = /O\n ____/`---\'\\____\n .\' \\\\| |// `.\n / \\\\||| : |||// \\\n / _||||| -:- |||||- \\\n | | \\\\\\ - /// | |\n | \\_| \'\'\\---/\'\' | |\n \\ .-\\__ `-` ___/-. /\n ___`. .\' /--.--\\ `. . __\n .\"\" \'< `.___\\_<|>_/___.\' >\'\"\".\n | | : `- \\`.;`\\ _ /`;.`/ - ` : | |\n \\ \\ `-. \\_ __\\ /__ _/ .-` / /\n ======`-.____`-.___\\_____/___.-`____.-\'======\n `=---=\'\n ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n 佛祖保佑 永无BUG\n */\n```\n------------------------------------\n![外链图片转存失败, '2023-09-29 09:14:08', '测bug的一天', 20, 1);
INSERT INTO `articles` VALUES (16, '技术模块/微信小程序', 'http://robin.com/storage/index/20231001/c9b2aff9ae4b34f03e0750ba25d02089.jpg', '模块启用测试\n\n------------------------------------\n\n![外链图片转存失败, '2023-10-01 15:40:30', '模块启用下线测试', 1);
INSERT INTO `articles` VALUES (17, 12, '技术模块/php', 'http://robin.com/storage/index/20231002/0c8f2701e5674242a5326d28de2cc2d3.png', '# 测试普通文本\n\nMarkdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。\n由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。\n\nJohn Gruber在2004年创造了Markdown语言，在语法上有很大一部分是跟亚伦·斯沃茨（Aaron Swartz）共同合作的。这个语言的目的是希望大家使用“易于阅读、易于撰写的纯文字格式，并选择性的转换成有效的XHTML（或是HTML）”。 其中最重要的设计是可读性，也就是说这个语言应该要能直接在字面上的被阅读，而不用被一些格式化指令标记（像是RTF与HTML）。 因此，它是现行电子邮件标记格式的惯例，虽然它也借鉴了很多早期的标记语言，如：Setext、Texile、reStructuredText。\n标准化\nMarkdown已经成为典型的转换为HTML的非正式规范 [1] 和参考实现。随着时间的推移，出现了许多Markdown实现。人们开发这些主要是由于在基本语法之上需要额外的功能 - 例如表格，脚注，定义列表（技术上的HTML描述列表）和HTML块内的Markdown。其中一些行为偏离了最开始的参考实现。与此同时，非正式规范中的一些含糊不清引起了人们的注意 [2] 。这些问题促使Markdown解析器的一些开发人员努力实现标准化。\n2016年3月发布了RFC 7763和RFC 7764。RFC 7763 从原始变体引入了MIME类型 text/markdown。RFC 7764讨论并注册了MultiMarkdown、GitHub Flavored Markdown (GFM)、Pandoc、CommonMark及Markdown等变体。 [3]\nCommonMark\n\n摘抄够啦 \n![外链图片转存失败, '2023-10-02 02:30:07', '测试markdown文章', 16, 1);
INSERT INTO `articles` VALUES (18, '技术模块/vue技术2', 'http://robin.com/storage/index/20231002/c182ce55779bd5dc82a24219c3d65f58.jpg', '# v-md-editor\n推荐使用 v-md-editor\nv-md-editor 是基于 Vue 开发的 markdown 编辑器组件\n\n1. 轻量版编辑器\n轻量版编辑器左侧编辑区域使用 textarea 实现。\n\n优点：足够轻量\n缺点：不支持更为丰富的编辑区功能扩展。例如：无法根据不同的语法在输入框内显示不同的样式。\n\n2. 进阶版编辑器\n进阶版编辑器左侧编辑区域使用 CodeMirror (opens new window)实现。\n\n优点：可以根据 CodeMirror 提供的 Api 来自定义扩展编辑区域功能，提高编辑体验。\n缺点：文件体积远大于轻量版\n\n3. 预览组件\n当你只需要对 markdown 语法进行解析并预览的时候，可以使用该组件。\n\n4. html 预览组件\n当你只需要对保存后的 html 文本进行预览的时候，可以使用该组件。\n\n5. 特性\n高度可定制化，高度可扩展性，支持自定义主题包，提供开箱即用的主题包，提供多个组件。可按需使用。\n\n# 使用\n\n## 1.markdown编辑器\n这里只讲基于vue3的使用\n\n先去挂载，然后再使用\n```javascript\nimport { createApp } from \'vue\';\nimport VMdEditor from \'@kangc/v-md-editor\';\nimport \'@kangc/v-md-editor/lib/style/base-editor.css\';\nimport githubTheme from \'@kangc/v-md-editor/lib/theme/github.js\';\nimport \'@kangc/v-md-editor/lib/theme/style/github.css\';\n\n// highlightjs\nimport hljs from \'highlight.js\';\n\nVMdEditor.use(githubTheme,{\n Hljs: hljs,\n});\n\nconst app = createApp(/*...*/);\n\napp.use(VMdEditor);\n```\n\n页面使用\n```html\n<template>\n <v-md-editor v-model=\"text\" height=\"400px\"></v-md-editor>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n text: \'\',\n };\n },\n};\n</script>\n```\n![外链图片转存失败,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png"content\"></v-md-preview>\n</template>\n<script setup>\n import {ref} from \'vue\'\n const content =ref(\"\") \n</script>\n```\n![外链图片转存失败, '2023-10-02 02:48:22', 'vue3中使用markdown插件的用法', 50, 1);
INSERT INTO `articles` VALUES (19, 'http://robin.com/storage/index/20231002/c7c31c5c0486a9760fce7974ae11250b.png', '# 设计模式--适配器模式 Adapter Pattern\n\n## 1.1 基本介绍\n\n（1）适配器模式将某个类的接口转换成为客户端期望的另一个接口表示，主要的目的是兼容性，让原本应接口不匹配不能一起工作的两个类可以协同工作。其别名为包装器（Wrapper）.\n\n（2）适配器模式属于结构型模式\n\n（3）主要分为三类：类适配器模式、对象适配器模式、接口适配器模式\n\n\n\n## 1.2 工作原理\n\n1. 适配器模式：将一个类的接口转换成为另一种接口，让原本接口不兼容的类可以兼容。\n2. 从用户的角度看不到被适配者，是解耦的。\n3. 用户调用适配器转换出来的目标接口方法，适配器再调用被适配者的相关接口方法。\n4. 用户收到反馈结果，感觉只是和目标接口交互。\n\n\n\n# 类适配器模式\n\n例子：电脑的电源适配器将（家庭用电）电压220伏特转换为5伏特,然后给电脑供电。\n\n\n\n\n\n被适配者类：\n\n```java\npackage com.robin.adapter.classAdapter;\n\n// 被适配者类\npublic class Voltage220V {\n\n public int outPut220V(){\n int srcV = 220;\n System.out.println(\"[初始-家庭家用电压]电源电压:\"+srcV+\"伏特\");\n return srcV;\n }\n}\n\n```\n\n适配接口：\n\n```java\npackage com.robin.adapter.classAdapter;\n\n// 适配接口\npublic interface ICpVoltage5V {\n\n public int outPut();\n}\n\n```\n\n电脑类：\n\n```java\npackage com.robin.adapter.classAdapter;\n\npublic class Computer {\n\n public void charge(ICpVoltage5V iCpVoltage5V){\n int i = iCpVoltage5V.outPut();\n if (i==5){\n System.out.println(\"[电源适配器]电压为5伏特，可以开始充电使用了！\");\n }else{\n System.out.println(\"[电源适配器]电压不正常，请检查或者更换电源适配器\");\n }\n }\n}\n\n```\n\n适配器类：\n\n```java\npackage com.robin.adapter.classAdapter;\n\n// 适配器类\npublic class CpVoltageAdapter extends Voltage220V implements ICpVoltage5V{\n\n @Override\n public int outPut() {\n // 因为是继承关系，所以调用其父类的 电源电压输出\n int src = outPut220V();\n // 对220V电压进行简单转换\n int dest = src/44;\n return dest;\n }\n}\n\n```\n\n测试客户端类：\n\n```java\npackage com.robin.adapter.classAdapter;\n\npublic class Client {\n\n public static void main(String[] args) {\n Computer computer = new Computer();\n // 通过传入其适配器类的对象来进行充电\n computer.charge(new CpVoltageAdapter());\n // [电源适配器]电压为5伏特，可以开始充电使用了！\n }\n}\n\n```\n\n\n\n类适配器模式的优点和缺点：\n\n1. 缺点：Java是单继承，但再类适配器模式中，**适配器类需要继承被适配的类**，失去了灵活性。并且**被适配者类的方法都会在适配器类中暴露出来**，增加了使用的成本。\n2. 优点：因为适配器类继承了被适配者类，所以适配器类可以根据需求，灵活的重写被适配者类。\n\n\n\n# 对象适配器模式\n\n对象适配器模式针对上面的类适配器模式进行了一些修改，**通过合成复用来代替原本的继承关系**。\n\ntip:对象适配器模式是适配器模式中常用的一种。\n\n\n\n例子：还是上面的电脑电源的适配器问题，进行修改，将其改为对象适配器模式的。\n\n我们只需要将适配器类中取消继承被适配的类，然后在适配器类中提供一个被适配类的成员变量及构造器即可。\n\n![外链图片转存失败,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png"[初始-家庭家用电压]电源电压:\"+srcV+\"伏特\");\n return srcV;\n }\n}\n\n```\n\n\n\n适配接口：\n\n```java\npackage com.robin.adapter.objectAdapter;\n\n// 适配接口\npublic interface ICpVoltage5V {\n\n public int outPut();\n}\n\n```\n\n\n\n电脑类：\n\n```java\npackage com.robin.adapter.objectAdapter;\n\n\npublic class Computer {\n\n public void charge(ICpVoltage5V iCpVoltage5V){\n int i = iCpVoltage5V.outPut();\n if (i==5){\n System.out.println(\"[电源适配器]电压为5伏特，可以开始充电使用了！\");\n }else{\n System.out.println(\"[电源适配器]电压不正常，请检查更换电源适配器\");\n }\n }\n}\n\n```\n\n\n\n适配器类：\n\n```java\npackage com.robin.adapter.objectAdapter;\n\n// 适配器类\npublic class CpVoltageAdapter implements ICpVoltage5V {\n\n // 合成复用 将被适配类聚合到适配器类中\n private Voltage220V voltage220V = null;\n\n // 提供被适配类的构造器\n public CpVoltageAdapter(Voltage220V voltage220V) {\n this.voltage220V = voltage220V;\n }\n\n // 重写适配接口中的方法\n @Override\n public int outPut() {\n if (null != voltage220V){\n int srcV = voltage220V.outPut220V();\n int dstV = srcV/44;\n System.out.println(\"电源电压适配完成,电源电压=\"+dstV);\n return dstV;\n }\n return -1;\n }\n}\n\n```\n\n\n\n客户端测试类：\n\n```java\npackage com.robin.adapter.objectAdapter;\n\npublic class Client {\n\n public static void main(String[] args) {\n System.out.println(\"对象适配器模式\");\n Computer computer = new Computer();\n computer.charge(new CpVoltageAdapter(new Voltage220V()));\n }\n}\n\n```\n\n\n\n对象适配器模式与类适配器模式基本一致，只是通过合成复用代替继承，解决了类适配器产生的继承局限问题，使用成本更低更灵活。\n\n\n\n# 接口适配器模式\n\n接口适配器模式的思想：当不需要全部实现接口提供的方法时，可以先设计一个抽象类实现接口，并为该接口中的每个方法提供一个默认实现（空方法体），那么该抽象类的子类可以有选择的覆盖父类的某些方法来实现需求。\n\n接口适配器模式适用于不想使用一个适配接口中所有方法的情况，按照自己的需求来挑选合适的方法自行实现。\n\n\n\n比如，你要去旅游了，每个国家插座插孔和电压都不一样，你带了一个万能转换器（比如：wp-933）\n\n\n然后各国插座如下：\n\n\n\n\n暂且假定该万能转换插孔只提供一个空的插孔，需要你去自定义实现（我例子举得不是很好...有点牵强）\n\n\n\n万能插孔适配接口：\n\n```java\npackage com.robin.adapter.interfaceadpter;\n\n// 万能插孔适配接口\npublic interface AllJacks {\n\n // 德国标准\n public void germanJack();\n // 欧洲标准\n public void europeanJack();\n // 中国，澳大利亚标准\n public void chinaAndOzJack();\n // 美国标准\n public void usaJack();\n //......\n}\n\n```\n\n万能插孔抽象类实现接口中的所有方法，提供空方法体：\n\n```java\npackage com.robin.adapter.interfaceadpter;\n\n// 抽象类实现万能适配接口，实现全部接口方法，提供空方法体\npublic abstract class AbsAllJacksAdapter implements AllJacks {\n\n // 德国\n @Override\n public void germanJack() {\n\n }\n\n // 欧洲\n @Override\n public void europeanJack() {\n\n }\n\n // 中国和澳大利亚\n @Override\n public void chinaAndOzJack() {\n\n }\n\n // 美国\n @Override\n public void usaJack() {\n\n }\n}\n\n```\n\n\n\n客户端测试：\n\n```java\npackage com.robin.adapter.interfaceadpter;\n\npublic class Client {\n\n public static void main(String[] args) {\n // 中国电脑插孔为三孔，方形\n String srcJack = \"[三孔]三方形孔\";\n // 假设我现在旅行去美国\n AbsAllJacksAdapter absAllJacksAdapter = new AbsAllJacksAdapter(){\n @Override\n public void usaJack() {\n System.out.println(\"=============使用万能转化器转换=============\");\n // 美国电压为 100-130V,插孔为三孔，两方一圆\n String destJack = \"[三孔]两方一圆孔\";\n System.out.println(\"[插孔适配完毕]:\"+srcJack+\"==>\"+destJack);\n }\n };\n absAllJacksAdapter.usaJack();\n }\n}\n\n```\n\n\n\n\n# 小结\n\n适配器模式的三种方式，也其实就是被适配类，如何被适配器类获取使用的（类=>继承，对象=>合成复用，接口）。Adapter适配器模式的最大作用就是将原本不兼容的接口融合在一起工作。', '2023-10-02 04:46:21', 'csdn文章迁移测试', 1);
INSERT INTO `articles` VALUES (20, 'http://robin.com/storage/index/20231002/be4f646e1d23c6ec0f6645990807b747.jpg', '简单文本', '2023-10-02 19:08:54', '测试102', 1);
INSERT INTO `articles` VALUES (21, 'http://robin.com/storage/index/20231002/710e262c0f9264029bd65c19b38dea79.jpg', '# 《肖申克的救赎》\n\n1.生命可以归结为一种简单的选择：要么忙于生存，要么赶着去死。\n\n2.懦怯囚禁人的灵魂，希望可以感受自由。强者自救，圣者渡人。\n\n3.希望是件美丽的东西，也许是最好的东西。美好的东西是永远不会死的。\n\n4.每个人都是自己的上帝。如果你自己都放弃自己了，还有谁会救你？\n\n------------------------------------\n\n\n\n使用步骤：\n1. 安装 paricles\n\n```shell\nnpm install particles.vue3 --save\n```\n2. 安装 tsparticles-slim\n\n```shell\nnpm i tsparticles\n```\n3. 在main.js中导入并且挂载\n\n```shell\nimport Particles from \"particles.vue3\"; \napp.use(Particles)\napp.mount(\'#app\')\n```\n4. 在页面中使用\n\n```html\n<script setup>\nimport { ref } from \'vue\'\n\n// 粒子参数\nconst options =ref( {\n background: {\n color: {\n value: \'#032224\'\n }\n },\n // backgroundColor:\'#000000\',\n fpsLimit: 120,\n interactivity: {\n events: {\n onClick: {\n enable: true,\n mode: \'push\'\n },\n onHover: {\n enable: true,\n mode: \'grab\'\n },\n resize: true\n },\n modes: {\n bubble: {\n distance: 400,\n duration: 2,\n opacity: 0.8,\n size: 40\n },\n push: {\n quantity: 4\n },\n repulse: {\n distance: 200,\n duration: 0.4\n }\n }\n },\n particles: {\n color: {\n value: \'#ffffff\'\n },\n links: {\n color: \'#ffffff\',\n distance: 150,\n enable: true,\n opacity: 0.5,\n width: 1\n },\n collisions: {\n enable: true\n },\n move: {\n direction: \'none\',\n outModes: {\n default: \'bounce\'\n },\n random: false,\n speed: 4,\n straight: false\n },\n number: {\n density: {\n enable: true,\n area: 800\n },\n value: 80\n },\n opacity: {\n value: 0.5\n },\n shape: {\n type: \'circle\'\n },\n size: {\n value: { min: 1,max: 5 },\n }\n },\n detectRetina: true\n}\n)\n\nimport { loadSlim } from \"tsparticles-slim\"; \n\nconst particlesInit = async engine => {\n //await loadFull(engine);\n await loadSlim(engine);\n};\n\nconst particlesLoaded = async container => {\n console.log(\"Particles container loaded\",container);\n}\n</script>\n\n<template>\n <!-- 粒子特效插件n -->\n <div class=\"wrapper\">\n <vue-particles \n id=\"tsparticles\" \n :particlesInit=\"particlesInit\"\n :particlesLoaded=\"particlesLoaded\" \n :options=\"options\" />\n</template>\n\n<style>\n.wrapper {\n height: 100vh;\n min-width: 100vw;\n /* background-image: linear-gradient(to bottom right,#fc466b,#3f5efb); */\n overflow: hidden;\n}\n\n#tsparticles {\n position: fixed; \n z-index: -1;\n \n}\n</style>\n```\n\n# 效果图\n![外链图片转存失败, '2023-10-04 03:53:23', 'vue3的粒子插件的使用', 17, 1);
INSERT INTO `articles` VALUES (24, 'http://robin.com/storage/index/20231004/be16c4572f21c6f5d2b9871d1eac6e2c.jpg', '![外链图片转存失败, '2023-10-04 12:45:49', '结束', 1);
INSERT INTO `articles` VALUES (25, 'http://robin.com/storage/index/20231007/5fbb4b9c01988d1b9b16195203181729.png', 'Go 面向对象\n\n# Go 面向对象\n\n \n\n## 1. struct 实体的抽象描述\n\n在Go语言中，使用struct来对现实世界实体进行描述。\n\nstruct的定义格式如下：\n\n```go\ntype 实体名 struct{\n 成员变量 数据类型\n ...\n}\n```\n\n\n\n\n\n假设现在有一个people的结构体，我们接着对其声明创建一个结构体对象。\n\n```go\ntype people struct{\n name string\n age int\n}\n```\n\n\n\nstruct的使用，结构体对象的声明定义\n\n```go\np1 := people{name:\"张三\",age:17}\n// 或者\nvar p2 = people{name:\"李四\",age:19}\n```\n\n\n\n### 匿名字段和结构体嵌套\n\nGo语言中，在结构体（struct）中，实际上Go支持只提供类型，而不写字段名的方式，这便是匿名字段的定义。在结构体嵌套中经常使用。\n\n```go\ntype people struct{\n name string\n age int \n pet\n}\n\ntype pet struct{\n name string\n}\n```\n\n\n\n匿名字段可以实现面向对象中的字段继承，即成员变量的继承，在嵌套结构体中，访问嵌套结构体的成员字段就好比自己的成员字段一样。\n\n```go\npackage main\n\ntype People struct {\n name string\n age int\n Student\n}\n\ntype Student struct {\n name string\n}\n\nfunc main() {\n st1 := People{\"张三\",20,Student{\"李四\"}}\n println(st1.name) // 张三\n println(st1.Student.name) //李四\n}\n\n```\n\n访问内嵌结构体，使用 `结构体.内嵌结构体.成员变量`，访问外部结构体,使用`结构体.成员变量`，Go语言中，最外层的结构体优先访问（就按照现实世界的思维逻辑理解即可）。Go语言允许去重载通过匿名字段继承的一些字段，当然如果我们想访问重载后对应匿名类型里面的字段，可以通过匿名字段名来访问。\n\n这里需要注意的是 结构体名定义的首字母是大写或者小写的不同，访问的对应权限不同。\n\n\n\n**Go**语言通过首字母的大小写来控制访问权限。 无论是方法，变量，常量或是自定义的变量类型，如果首字母大写，则可以被外部包访问，反之则不可以。 而结构体中的字段名，如果首字母小写的话，则该字段无法被外部包访问和解析\n\n## 2. method 方法\n\nGo语言中方法的定义很类似函数的定义格式。\n\n区别是一个方法就是一个包含了接受者的函数，接受者可以是命名类型或者结构体类型的一个值或者是一个指针。所有给定类型的方法属于该类型的方法集。\n\n\n\n对比一下：\n\n```go\n// 1. 函数的定义格式\nfunc function_name( [parameter list] ) [return_types] {\n /* 函数体 */\n}\n\n// 2. 方法的定义格式\nfunc (variable_name variable_data_type) function_name() [return_type]{\n /* 方法体 */\n}\n```\n\n就是方法只属于某一个结构体类型，不能被直接调用，而函数是任意类型都可以调用，只要传入对应的参数即可。\n\n如下面的例子：\n\n```go\ntype Circle struct {\n r float32\n}\n\nfunc (c Circle) getArea() float32 {\n return c.r * c.r * 3.14\n}\n\n\nfunc main() {\n c1 := Circle{15}\n area1 :=c1.getArea()\n println(area1) //+7.065000e+002\n // getArea()\n // 直接调用，会出现无法调用，\n // getArea(c1) ，尝试传入参数也无法调用\n}\n```\n\n', '2023-10-07 14:38:57', '测试120', 1);
INSERT INTO `articles` VALUES (26, 'http://robin.com/storage/index/20231011/1a0902835ae29e701cdbd74353cd042e.jpeg', '# ds dasd\n
目前只使用了 robin.com，这个域名映射的是index模块，robinadmin.com原本想着用管理端，后面写着忘了就都写一块了。
原文地址：https://blog.csdn.net/m0_63622279/article/details/134591982
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。