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

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

添加新页面

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

添加新文章

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

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

bash 复制代码

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）

功能	方法	路径	参数	返回
添加好友	POST	`/friends`	`{userId, friendId}`	操作结果
删除好友	DELETE	`/friends`	`{userId, friendId}`	操作结果
查询好友列表	GET	`/friends/{userId}`	-	好友列表
检查好友关系	GET	`/friends/check`	`userId, friendId`	是否好友

2. Controller 层实现

java 复制代码

@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 层实现

java 复制代码

@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) 好友关系实体

java 复制代码

@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接口

java 复制代码

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. 统一返回结构

java 复制代码

@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) 添加好友

http 复制代码

POST /friends
Content-Type: application/json

{
  "userId": 1,
  "friendId": 2
}

响应：

json 复制代码

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

(2) 查询好友列表

http 复制代码

GET /friends/1

响应：

json 复制代码

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

关键设计说明

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

扩展建议

分页查询：

java 复制代码

@GetMapping("/{userId}/page")
public PageResult<FriendDTO> getFriendsByPage(
        @PathVariable Integer userId, 
        @RequestParam(defaultValue = "1") Integer page,
        @RequestParam(defaultValue = "10") Integer size) {
    Page<User> pagedUsers = relationMapper.selectFriendPage(
        new Page<>(page, size), userId);
    return PageResult.success(pagedUsers.convert(this::convertToDTO));
}

缓存优化：

java 复制代码

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

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

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

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

1. 提高查询性能

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

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

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

3. 支持高级查询特性

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

注意事项

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

实际应用示例

sql 复制代码

-- 创建用户表示例
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 已安装到项目中：

bash 复制代码

npm install tslib --save

或使用 Yarn：

bash 复制代码

yarn add tslib

2. 验证依赖结构

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

bash 复制代码

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

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

3. 验证 `package.json`

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

json 复制代码

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

验证修复

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

bash 复制代码

npm run openapi

总结

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

踩坑与成长：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

验证修复

总结

3. 验证 `package.json`