踩坑与成长：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中添加新页面和新文章的操作都比较简单，以下分别为你介绍具体步骤：

添加新页面

添加新文章

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")
@RequiredArgsConstructor
public class FriendController {

private final FriendService friendService;

@PostMapping
public Result<Boolean> addFriend(
@RequestBody @Valid FriendRequest request) {
return Result.success(
friendService.addFriend(request.getUserId(), request.getFriendId())
);
}

@DeleteMapping
public Result<Boolean> deleteFriend(
@RequestBody @Valid FriendRequest request) {
return Result.success(
friendService.deleteFriend(request.getUserId(), request.getFriendId())
);
}

@GetMapping("/{userId}")
public Result<List<FriendDTO>> getFriends(
@PathVariable Integer userId) {
return Result.success(friendService.getFriends(userId));
}

@GetMapping("/check")
public Result<Boolean> isFriend(
@RequestParam Integer userId,
@RequestParam Integer friendId) {
return Result.success(friendService.isFriend(userId, friendId));
}

// 参数封装类
@Data
static class FriendRequest {
@NotNull
private Integer userId;
@NotNull
private Integer friendId;
}
}

3. Service 层实现

@Service
@RequiredArgsConstructor
public class FriendServiceImpl implements FriendService {

private final UserMapper userMapper;
private final FriendRelationMapper relationMapper;

@Override
@Transactional
public boolean addFriend(Integer userId, Integer friendId) {
// 1. 校验用户是否存在
checkUserExists(userId);
checkUserExists(friendId);

// 2. 检查是否已是好友
if (relationMapper.existsRelation(userId, friendId)) {
return false;
}

// 3. 双向添加关系
relationMapper.insert(new FriendRelation(userId, friendId));
relationMapper.insert(new FriendRelation(friendId, userId));
return true;
}

@Override
@Transactional
public boolean deleteFriend(Integer userId, Integer friendId) {
relationMapper.deleteRelation(userId, friendId);
relationMapper.deleteRelation(friendId, userId);
return true;
}

@Override
public List<FriendDTO> getFriends(Integer userId) {
return relationMapper.selectFriendList(userId).stream()
.map(user -> new FriendDTO(
user.getId(),
user.getNickname(),
user.getAvatar()
)).collect(Collectors.toList());
}

@Override
public boolean isFriend(Integer userId, Integer friendId) {
return relationMapper.existsRelation(userId, friendId);
}

private void checkUserExists(Integer userId) {
if (userMapper.selectById(userId) == null) {
throw new BusinessException("用户不存在");
}
}
}

4. Mapper 层（MyBatis-Plus）

(1) 好友关系实体

@Data
@TableName("user_friend_relation")
public class FriendRelation {
@TableId(type = IdType.AUTO)
private Long id;
private Integer userId;
private Integer friendId;
private LocalDateTime createTime;
}

(2) Mapper接口

public interface FriendRelationMapper extends BaseMapper<FriendRelation> {

@Select("SELECT COUNT(1) FROM user_friend_relation " +
"WHERE user_id = #{userId} AND friend_id = #{friendId}")
boolean existsRelation(
@Param("userId") Integer userId,
@Param("friendId") Integer friendId);

@Delete("DELETE FROM user_friend_relation " +
"WHERE user_id = #{userId} AND friend_id = #{friendId}")
int deleteRelation(
@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. 统一返回结构

@Data
public class Result<T> {
private int code;
private String msg;
private T data;

public static <T> Result<T> success(T data) {
Result<T> result = new Result<>();
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"
}
]
}

关键设计说明

扩展建议

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

——————

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

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

1. 提高查询性能

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

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

• 通过创建唯一索引(UNIQUE INDEX)，可以确保：CREATE UNIQUE INDEX idx_email ON users(email);
• 避免重复注册或数据不一致问题

3. 支持高级查询特性

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

注意事项

实际应用示例

— 创建用户表示例
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
email VARCHAR(255) NOT NULL,
password_hash VARCHAR(255) NOT NULL,
— 其他字段…
UNIQUE INDEX idx_email (email) — 唯一索引
);

— 登录查询将非常高效
EXPLAIN SELECT * FROM users WHERE email = 'user@example.com';

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

关于前端使用openapi报错原因

“C:\\Program Files\\nodejs\\npm.cmd” run openapi

bushuo-picture-frontend@0.0.0 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 已安装到项目中：

npm install tslib –save

或使用 Yarn：

yarn add tslib

2. 验证依赖结构

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

ls node_modules/tslib # Linux/macOS
dir node_modules\\tslib # Windows

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

3. 验证 package.json

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

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

验证修复

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

npm run openapi

总结

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