踩坑与成长：WordPress、MyBatis-Plus 及前端依赖问题解决记录

目录

• WordPress中要点，域和托管
  • 域名
  • 托管
  • 添加新页面
  • 添加新文章
  • 安装方式
    • 1. 接口清单（API Design）
    • 2. Controller 层实现
    • 3. Service 层实现
    • 4. Mapper 层（MyBatis-Plus）
      • (1) 好友关系实体
      • (2) Mapper接口
    • 5. 统一返回结构
    • 6. 接口测试示例
      • **(1) 添加好友**
      • **(2) 查询好友列表**
    • **关键设计说明**
    • **扩展建议**
• 为什么需要为数据库的 email 字段建立索引
  • 1. 提高查询性能
  • 2. 保证数据唯一性（当需要时）
  • 3. 支持高级查询特性
  • 注意事项
  • 实际应用示例
  • 关于前端使用openapi报错原因
  • 解决方案
    • 1. 手动安装 tslib
    • 2. 验证依赖结构
    • 3. 验证 `package.json`
    • 验证修复
• 总结

第一天，了解wordpress学习
wordpress 是一款非常流行且功能强大的内容管理系统（CMS）

WordPress中要点，域和托管

在 WordPress 中，域和托管是搭建网站的重要组成部分，下面为你分别介绍：

域名

域名是网站的名称，也是用户在浏览器中输入以访问网站的 URL 地址，它就像是网站在互联网上的门牌号，方便用户记住和访问你的网站。例如，“baidu.com”就是一个域名。对于 WordPress 网站来说，你需要拥有一个独特的域名来代表自己的网站。你可以通过域名注册商来注册域名，常见的域名注册商有 GoDaddy、Namecheap 等。在选择域名时，尽量选择简洁易记、与网站主题相关的名称，并且要注意域名的后缀，常见的后缀有.com、.cn、.net 等，不同后缀的价格和适用场景可能会有所不同。

托管

托管是指将网站的文件、数据等存储在网络服务器上，使得网站能够在互联网上被访问到的服务。如果没有托管服务，你的网站文件就没有地方存放，自然也就无法被其他人访问。

WordPress 托管服务通常具有一些特点和优势，比如提供一键式 WordPress 安装，让你可以轻松快速地将 WordPress 系统安装到服务器上，无需复杂的操作。同时，还会提供自动更新和备份功能，确保你的 WordPress 系统、插件和主题保持最新版本，提高安全性，并且定期备份网站数据，以防数据丢失。此外，很多托管服务还会配备高级安全功能，帮助防范常见的网络威胁，如黑客攻击、恶意软件入侵等，保障网站的安全运行。

WordPress 托管主要有以下两种类型：

• 共享 WordPress 托管：这是一种比较经济实惠的选择，多个网站会共享同一台服务器的资源，如 CPU、内存、存储等。虽然资源是共享的，但对于一些小型网站或流量不大的网站来说，通常已经足够使用，能够满足基本的网站运行需求。
• 监督 WordPress 托管：也叫托管型 WordPress hosting，这种托管方式提供了更全面的管理服务，包括技术支持、安全性保障、性能优化等，并且通常会为网站分配更多的服务器资源，能更好地应对高流量、高并发等情况，适合对网站性能和稳定性要求较高的企业网站或大型网站，但价格相对也会更高一些。

在WordPress中添加新页面和新文章的操作都比较简单，以下分别为你介绍具体步骤：

添加新页面

1. 登录后台：打开浏览器，输入你的WordPress网站后台地址，通常是“你的域名/wp - admin”，然后输入用户名和密码进行登录。
2. 进入新建页面界面：在后台左侧的导航菜单中，找到“页面”选项，将鼠标移上去，会弹出子菜单，点击“新建页面”。
3. 编辑页面内容：在新页面的编辑界面，首先在“标题”框中输入页面的标题。然后使用编辑器添加页面的具体内容，你可以添加文字、图片、视频等多种元素，还能利用编辑器的工具对文本进行格式化，如加粗、斜体、添加链接等。
4. 设置页面属性：在右侧边栏，可以设置页面的属性。例如，如果该页面是某个页面的子页面，可以在“父页面”选项中进行选择；如果主题提供了不同的页面模板，也可以在“模板”选项中选择合适的模板；此外，还可以设置特色图像等。
5. 发布或保存草稿：编辑完成后，若确认内容无误，点击“发布”按钮，即可将页面发布到网站上；若还想继续修改，可以点击“保存草稿”，将页面保存为草稿状态，后续再进行编辑。
6. 查看页面效果：发布成功后，点击“查看页面”按钮，就能查看页面在网站上的实际显示效果。

添加新文章

1. 登录后台：同样通过“你的域名/wp - admin”访问后台，输入账号密码登录。
2. 进入新建文章界面：在后台左侧菜单中，找到“文章”选项，点击它，然后在弹出的子菜单中选择“写文章”，即可进入新文章的编辑页面。
3. 填写文章信息：在“标题”框中输入文章的标题，然后在下方的内容编辑区域撰写文章内容。你可以根据需要使用工具栏对文本进行格式设置，或者点击“+”按钮添加不同类型的区块，如图片、视频等。
4. 设置特色图像：点击右侧的“设置特色图像”选项，选择你想要上传的图片，将其设置为文章的特色图像，这可以让文章在列表中更加醒目。
5. 选择分类和标签：为了便于文章的管理和检索，需要为文章选择合适的分类和标签。点击右侧的“分类目录”区域，选择已有的分类，或者点击“添加新分类”来创建新的分类；在“标签”框中输入与文章相关的标签内容。
6. 设置文章可见性：在右侧的“发布”框中，设置文章的可见性，通常选择“公开”即可，若有其他需求，也可以选择“私密”等其他选项。
7. 发布文章：当所有内容都设置完成后，点击“发布”按钮，文章就会立即发布到网站上。发布后，你可以访问网站查看新文章的效果。

idea连接数据库成功后没有分支表，

No schemas selected 

可以根据以下操作执行

需要下载mybatisX，的插件。在file

在数据库中点击表单生成mybatisX-genertor->module path,basepackage,使用的是domain-》
annotation，Mybatis-Plus3,options comment
lombok.但是我在template，中没看到mybatis-plus3，我想要3

可以去升级插件

idea2019不要用jdk17。这是血的教训。尽量用2023版本以上，放在我用2023版本会好一点。
告诉大家换了一个idea后，查看自己的maven文件放在哪里，不然下的贼鸡儿慢，这是为什么，嘿嘿，不知道
点击file-》setting-》搜索maven，可以查看到自己maven，没有就自己创建maven的文件。

文件地址最好是一起的，我用的是同事给的maven
我个人建议就是小白入公司，自己多加班学习没问题，就比如说我，我现在还不学，我就有可能被炒鱿鱼。加油苦逼的打工人。
在搜索框中写一个javac，点击下面的查看语言水平，放在我不知道为什么17变成16.
现在我好像知道了，我在使用接口的时候需要，就变成现在16了。

但是我看到我的项目这里是17，系统能跑出来，我就不清楚了。

对于使用mybatisx的插件，我是真的服了，就是用不了plugins3

安装方式

idea
file-》settings-> Plugins
搜索MyBatisX安装。
下载，install，Apply安装，重启idea

数据库的连接，我真的哭死了。
从刚开始的一步一步看着教程连接idea的database，
到现在我可以自己初步使用database的连接mysql，

如果你说没看到database，不好意思我还没遇到，可以找下一家求助。
我就初步连接数据库而已，
点击Database的 + -》Data Source -> mysql。刚开始的时候mysql在下面，自己慢慢找。

为什么我会在Host这里打框吗？
因为我第一次知道这里可以访问别人云数据库的地址，我还不会云数据库地址，因为要花钱租一个服务器，主要一点我不会弄。没事等我工资发下来，有时间我回去尝试弄一弄。
user，password
自己数据库密码。点击测试连接，apply，ok。

测试成功都没问题，就是没看到数据库表在哪里，这个时候点击连接数据的右键，看到Tools-> Manage Shown Schemas~

自己在点击自己的想要的数据库。我是真的服气了。

好了，这些都出来，数据库使用右键出现mybatisX-Generator

我就不出下面步骤，为什么呢？因为我的mybatis没有3的应该是映射文件
反正大概就是这样的文件夹，我使用2是可以的，但我目前使用的项目需要3，没办法，直接拿同事的

src/
├── main/
│ ├── java/
│ │ └── com/example/
│ │ ├── service/
│ │ │ ├── OrderService.java # 接口
│ │ │ └── impl/
│ │ │ └── OrderServiceImpl.java # 实现类

其实我没生成出来，所以我就有了这一个疑问，Service接口文件是干啥的。
定义业务逻辑的抽象方法，提供业务逻辑的契约，便于实现多态和松耦合。不好意思作者不知道如何介绍什么松耦合。我就在这标记一下。我会在下面给出合理解释

还有ServiceImpl实现类文件
位于service/impl包下，实现Service接口的具体逻辑

现在进入代码环节，关于接口的增删改查，RESTful 接口设计（含Controller、Service、Mapper实现），使用Spring Boot + MyBatis-Plus快速实现增删改查（CRUD）。
我第一次听别人说crud的时候一脸懵逼，那是什么玩意，我还在想我是不是又没学过。后来一查，我还真没写过。我当时就说我现在就去看看怎木学。嘿嘿，看完之后，ai代写，我又被解开双手了。我同事给我说，你可以用ai，但是你要会这个原理，看的懂代码，说真的，给我注解我都看不懂代码怎么写的。我一想，我就一个新人，那不得好好学习，不能拖同事进度。我先用ai写完接口。我就学习接口怎么写的。
我尽量解释清楚
以下是一套完整的用户好友关系 RESTful 接口设计（含Controller、Service、Mapper实现），使用Spring Boot + MyBatis-Plus快速实现增删改查（CRUD）：

1. 接口清单（API Design）

2. Controller 层实现

@RestController@RequestMapping("/friends")@RequiredArgsConstructorpublicclassFriendController{privatefinalFriendService friendService;@PostMappingpublicResult<Boolean>addFriend(@RequestBody@ValidFriendRequest request){returnResult.success( friendService.addFriend(request.getUserId(), request.getFriendId()));}@DeleteMappingpublicResult<Boolean>deleteFriend(@RequestBody@ValidFriendRequest request){returnResult.success( friendService.deleteFriend(request.getUserId(), request.getFriendId()));}@GetMapping("/{userId}")publicResult<List<FriendDTO>>getFriends(@PathVariableInteger userId){returnResult.success(friendService.getFriends(userId));}@GetMapping("/check")publicResult<Boolean>isFriend(@RequestParamInteger userId,@RequestParamInteger friendId){returnResult.success(friendService.isFriend(userId, friendId));}// 参数封装类@DatastaticclassFriendRequest{@NotNullprivateInteger userId;@NotNullprivateInteger friendId;}}

3. Service 层实现

@Service@RequiredArgsConstructorpublicclassFriendServiceImplimplementsFriendService{privatefinalUserMapper userMapper;privatefinalFriendRelationMapper relationMapper;@Override@TransactionalpublicbooleanaddFriend(Integer userId,Integer friendId){// 1. 校验用户是否存在checkUserExists(userId);checkUserExists(friendId);// 2. 检查是否已是好友if(relationMapper.existsRelation(userId, friendId)){returnfalse;}// 3. 双向添加关系 relationMapper.insert(newFriendRelation(userId, friendId)); relationMapper.insert(newFriendRelation(friendId, userId));returntrue;}@Override@TransactionalpublicbooleandeleteFriend(Integer userId,Integer friendId){ relationMapper.deleteRelation(userId, friendId); relationMapper.deleteRelation(friendId, userId);returntrue;}@OverridepublicList<FriendDTO>getFriends(Integer userId){return relationMapper.selectFriendList(userId).stream().map(user ->newFriendDTO( user.getId(), user.getNickname(), user.getAvatar())).collect(Collectors.toList());}@OverridepublicbooleanisFriend(Integer userId,Integer friendId){return relationMapper.existsRelation(userId, friendId);}privatevoidcheckUserExists(Integer userId){if(userMapper.selectById(userId)==null){thrownewBusinessException("用户不存在");}}}

4. Mapper 层（MyBatis-Plus）

(1) 好友关系实体

@Data@TableName("user_friend_relation")publicclassFriendRelation{@TableId(type =IdType.AUTO)privateLong id;privateInteger userId;privateInteger friendId;privateLocalDateTime createTime;}

(2) Mapper接口

publicinterfaceFriendRelationMapperextendsBaseMapper<FriendRelation>{@Select("SELECT COUNT(1) FROM user_friend_relation "+"WHERE user_id = #{userId} AND friend_id = #{friendId}")booleanexistsRelation(@Param("userId")Integer userId,@Param("friendId")Integer friendId);@Delete("DELETE FROM user_friend_relation "+"WHERE user_id = #{userId} AND friend_id = #{friendId}")intdeleteRelation(@Param("userId")Integer userId,@Param("friendId")Integer friendId);@Select("SELECT u.* FROM user u "+"JOIN user_friend_relation r ON u.id = r.friend_id "+"WHERE r.user_id = #{userId}")List<User>selectFriendList(Integer userId);}

5. 统一返回结构

@DatapublicclassResult<T>{privateint code;privateString msg;privateT data;publicstatic<T>Result<T>success(T data){Result<T> result =newResult<>(); result.setCode(200); result.setMsg("success"); result.setData(data);return result;}}

6. 接口测试示例

(1) 添加好友

POST /friends Content-Type: application/json { "userId": 1, "friendId": 2 } 

响应：

{"code":200,"msg":"success","data":true}

(2) 查询好友列表

GET /friends/1 

响应：

{"code":200,"msg":"success","data":[{"id":2,"nickname":"张三","avatar":"https://xxx.jpg"}]}

关键设计说明

1. 事务控制：增删操作添加 @Transactional
2. 参数校验：使用 @Valid + @NotNull 注解
3. RESTful规范：
   • 创建用POST，删除用DELETE
   • 查询用GET，参数区分路径参数和查询参数
4. 性能优化：
   • 使用JOIN查询避免N+1问题
   • 数据库添加联合索引 (user_id, friend_id)

扩展建议

缓存优化：

@Cacheable(value ="user:friends", key ="#userId")publicList<FriendDTO>getFriends(Integer userId){...}

分页查询：

@GetMapping("/{userId}/page")publicPageResult<FriendDTO>getFriendsByPage(@PathVariableInteger userId,@RequestParam(defaultValue ="1")Integer page,@RequestParam(defaultValue ="10")Integer size){Page<User> pagedUsers = relationMapper.selectFriendPage(newPage<>(page, size), userId);returnPageResult.success(pagedUsers.convert(this::convertToDTO));}

这套接口提供了标准的CRUD模板，可根据实际需求调整字段和逻辑。

——————

为什么需要为数据库的 email 字段建立索引

为数据库中的 email 字段建立索引是数据库优化的重要实践，主要原因包括：

1. 提高查询性能

• 快速用户查找：当系统需要通过 email 查找用户时（如登录、密码重置等操作），索引可以将查询复杂度从 O(n) 降到 O(log n)
• 加速 JOIN 操作：如果 email 作为外键关联其他表，索引能显著提升关联查询速度

2. 保证数据唯一性（当需要时）

• 避免重复注册或数据不一致问题

通过创建唯一索引(UNIQUE INDEX)，可以确保：

CREATEUNIQUEINDEX idx_email ON users(email);

3. 支持高级查询特性

• 前缀查询优化（如查找所有 ‘@gmail.com’ 结尾的邮箱）
• 模糊查询优化（某些数据库可以优化 LIKE 查询）

注意事项

1. 权衡写入性能：
   • 索引会略微降低 INSERT/UPDATE/DELETE 速度
   • 但对于读取频繁的应用（大多数Web应用）利远大于弊
2. 选择合适的索引类型：
   • 普通索引：CREATE INDEX idx_email ON users(email);
   • 唯一索引：CREATE UNIQUE INDEX idx_email ON users(email);
   • 哈希索引 vs B-tree 索引（根据数据库类型选择）
3. 长度考虑：
   • 对于很长的 email 地址，某些数据库支持前缀索引
   • 例如 MySQL：CREATE INDEX idx_email ON users(email(50));

实际应用示例

-- 创建用户表示例CREATETABLE users ( id INTAUTO_INCREMENTPRIMARYKEY, email VARCHAR(255)NOTNULL, password_hash VARCHAR(255)NOTNULL,-- 其他字段...UNIQUEINDEX idx_email (email)-- 唯一索引);-- 登录查询将非常高效EXPLAINSELECT*FROM users WHERE email ='[email protected]';

为 email 建立索引是数据库设计的最佳实践，特别是对于用户系统这种 email 作为关键检索条件的场景。

关于前端使用openapi报错原因

“C:\Program Files\nodejs\npm.cmd” run [email protected] openapi
node openapi.config.js

node:internal/modules/cjs/loader:1212 const err = new
Error(message);
^

Error: Cannot find module ‘tslib’ Require stack:D:\bu1\xq\pipei\bushuo-picture-frontend\node_modules@umijs\openapi\dist\index.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
at Module._load (node:internal/modules/cjs/loader:1043:27)
at Module.require (node:internal/modules/cjs/loader:1298:19)
at require (node:internal/modules/helpers:182:18)
at Object. (D:\bu1\xq\pipei\bushuo-picture-frontend\node_modules@umijs\openapi\dist\index.js:4:17)
at Module._compile (node:internal/modules/cjs/loader:1529:14)
at Module._extensions…js (node:internal/modules/cjs/loader:1613:10)
at Module.load (node:internal/modules/cjs/loader:1275:32)
at Module._load (node:internal/modules/cjs/loader:1096:12)
at cjsLoader (node:internal/modules/esm/translators:298:15) { code: ‘MODULE_NOT_FOUND’, requireStack: [
‘D:\bu1\xq\pipei\bushuo-picture-frontend\node_modules\@umijs\openapi\dist\index.js’
] }

Node.js v20.19.3

我的后端使用的接口文档是knife

前端的js

问题仍然是 Node.js 找不到 tslib 模块，这是一个 TypeScript 运行时库，通常由使用 TypeScript 编写的包依赖。以下是针对该问题的详细解决方案：

解决方案

1. 手动安装 tslib

首先确保 tslib 已安装到项目中：

npminstall tslib --save 

或使用 Yarn：

yarnadd tslib 

2. 验证依赖结构

检查 node_modules 目录中是否存在 tslib：

ls node_modules/tslib # Linux/macOSdir node_modules\tslib # Windows

如果不存在，说明安装过程有问题，需要重新安装。

3. 验证 package.json

确保 package.json 中包含 tslib 依赖：

{"dependencies":{"tslib":"^2.6.2"// 确保有此条目}}

验证修复

安装完成后，再次运行你的命令：

npm run openapi 

总结

学习，还是学习，我还是不会curd，不要急我会争取啃下来。