精易网页助手json生成代码怎么用？

这个过程极大地提高了开发效率,避免了大量重复的CRUD（增删改查）代码编写。

下面我将为你详细解释这个功能的原理、使用方法以及手动编写的核心代码示例，让你彻底理解它的工作机制。

核心原理：代码生成器

精易网页助手的代码生成功能,其核心是一个代码生成器，它的工作流程如下：

1. 数据源配置：代码生成器首先连接到你的数据库。
2. 表选择：在管理后台界面，你可以选择一个或多个你想要生成代码的数据库表。
3. 模板渲染：代码生成器内部预定义了一系列的代码模板（通常是 FreeMarker 或 Velocity 等模板引擎的模板文件），这些模板包含了各种占位符，
   • ${tableName}: 数据库表名
   • ${className}: Java类名（由表名转换而来，如 sys_user -> SysUser）
   • ${author}: 作者信息
   • ${package_name}: 包名
   • ${columns}: 表中所有列的信息（字段名、类型、注释等）
4. 数据填充：代码生成器读取所选表的元数据（表名、字段名、字段类型、字段注释等），然后将这些数据填充到模板的占位符中。
5. 文件生成：填充后的模板被渲染成最终的代码文件，并按照指定的目录结构，自动创建在你的项目中。

如何使用精易网页助手的代码生成器（图形化界面）

这是最常用、最简单的方式。

前提条件：

• 你的项目已经成功运行。
• 你已经创建了需要生成代码的数据库表（system_user 表）。

操作步骤：

1. 登录后台管理系统

   • 访问 http://localhost:8080 (根据你的项目端口而定)。
   • 使用管理员账号登录（如 admin / admin123）。

2. 进入代码生成菜单

   • 在左侧菜单栏中,找到 【系统管理】 -> 【代码生成】。
   • 点击进入代码生成页面。

3. 导入数据库表

   
   （图片来源网络，侵删）
   • 在代码生成页面,点击 【导入表】 按钮。
   • 在弹出的窗口中,你会看到你数据库中所有的表，勾选你想要生成代码的表（system_user），然后点击 【导入】。

4. 配置生成信息

   • 导入成功后,system_user 表会出现在列表中，点击该表行末尾的 【修改】 按钮。
   • 你可以对生成代码进行详细配置：
     • 基本信息：
       • 作者：填写你的名字，会自动生成到代码的注释中。
       • 包名：通常为 com.yourproject.module，com.ruoyi.system。
       • 模块名：当前模块的名称，如 system。
       • 功能名：功能名称，如 用户。
       • 表前缀：如果你的表有统一前缀（如 sys_, system_），可以在这里填写，系统会自动去掉前缀生成类名（如 system_user -> User）。
       • 生成模板：可以选择生成哪些模块，如 单表（增删改查）、树表、主子表等，新手一般选择 单表（增删改查）。
     • 字段信息：
       • 这里会列出表的所有字段,你可以为每个字段进行配置：
         • 类型：对应Java类型，如 String, Long, Integer 等，系统会自动推断，你也可以手动修改。
         • 显示类型：对应前端表单的组件类型，如 文本框、下拉框、单选框、日期选择器 等。
         • 是否查询：该字段是否需要在查询表单中显示。
         • 查询方式：查询的方式，如 （等于）、LIKE（模糊查询）。
         • 必填：在后端表单验证中是否为必填项。
         • 显示类型：在后端表单验证中的类型，如 String、Integer。
   • 配置完成后,点击 【提交】。

5. 生成代码

   • 返回代码生成列表,点击对应表操作栏的 【生成代码】 按钮。
   • 浏览器会自动下载一个 .zip 压缩包。

6. 部署代码

   • 将下载的 .zip 文件解压。
   • 将解压后的文件覆盖到你项目的对应目录下，精易框架的目录结构非常清晰，通常会包含：
     • main/java：后端Java代码（Entity, Mapper, Service, Controller）。
     • main/resources：Mapper的XML文件。
     • src/views：前端Vue页面组件。
     • src/api：前端API请求接口文件。
   • 注意：覆盖前最好备份，避免覆盖掉你已手动修改的文件。

7. 刷新和重启

   • 在IDE（如IDEA）中，右键点击你的项目根目录，选择 【Maven】 -> 【Reload Project】，让IDE重新识别新文件。
   • 重启你的Spring Boot应用。

8. 验证

   • 重新登录后台系统,进入 【系统管理】 -> 【用户管理】，你就能看到新功能已经可以正常使用了。

手动编写核心代码示例（理解本质）

即使你使用代码生成器,理解这些核心代码的编写原理也是非常重要的。

假设我们有一个 sys_user 表，我们想实现一个“用户查询”的功能。

后端代码

a. 实体类 这是与数据库表对应的Java对象。

// src/main/java/com/ruoyi/system/domain/SysUser.java
@Data // Lombok注解，自动生成getter/setter等方法
public class SysUser {
    private static final long serialVersionUID = 1L;
    private Long userId;     // 用户ID
    private String userName; // 用户账号
    private String nickName; // 用户昵称
    private String email;    // 用户邮箱
    private String phonenumber; // 手机号码
    private String sex;      // 性别
    private String avatar;   // 头像地址
    private String status;   // 帐号状态（0正常 1停用）
    private String delFlag;  // 删除标志（0代表存在 2代表删除）
    private String loginIp;  // 登录IP
    private Date loginDate;  // 登录时间
    private String createBy; // 创建者
    private Date createTime; // 创建时间
    private String updateBy; // 更新者
    private Date updateTime; // 更新时间
    private String remark;   // 备注
}

b. Mapper 接口及 XML 负责与数据库进行交互，执行SQL语句。

// src/main/java/com/ruoyi/system/mapper/SysUserMapper.java
public interface SysUserMapper {
    // 根据条件分页查询用户列表
    public List<SysUser> selectUserList(SysUser user);
}

<!-- src/main/resources/mapper/system/SysUserMapper.xml -->
<select id="selectUserList" parameterType="SysUser" resultMap="SysUserResult">
    select u.user_id, u.dept_id, u.user_name, u.nick_name, u.email, u.avatar, u.mobile,
           u.sex, u.status, u.del_flag, u.login_ip, u.login_date, u.create_by,
           u.create_time, u.remark
    from sys_user u
    <where>
        u.del_flag = '0'
        <if test="userName != null and userName != ''">
            AND u.user_name like concat('%', #{userName}, '%')
        </if>
        <if test="status != null and status != ''">
            AND u.status = #{status}
        </if>
        <if test="phonenumber != null and phonenumber != ''">
            AND u.mobile like concat('%', #{phonenumber}, '%')
        </if>
    </where>
    order by u.create_time desc
</select>

c. Service 接口及实现 处理业务逻辑。

// src/main/java/com/ruoyi/system/service/ISysUserService.java
public interface ISysUserService {
    public List<SysUser> selectUserList(SysUser user);
}

// src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java
@Service
public class SysUserServiceImpl implements ISysUserService {
    @Autowired
    private SysUserMapper userMapper;
    @Override
    public List<SysUser> selectUserList(SysUser user) {
        return userMapper.selectUserList(user);
    }
}

d. Controller 控制器 提供RESTful API接口，供前端调用。

// src/main/java/com/ruoyi/system/controller/SysUserController.java
@RestController
@RequestMapping("/system/user")
public class SysUserController {
    @Autowired
    private ISysUserService userService;
    // @PreAuthorize("@ss.hasPermi('system:user:list')") // 权限控制注解
    @GetMapping("/list")
    public TableDataInfo list(SysUser user) {
        startPage(); // 精易框架提供的分页插件方法
        List<SysUser> list = userService.selectUserList(user);
        return getDataTable(list); // 精易框架提供的方法，封装分页结果
    }
}

前端代码 (Vue + Element UI)

a. API 请求文件 定义向后端发送请求的函数。

// src/api/system/user.js
import request from '@/utils/request'
// 查询用户列表
export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  })
}

b. Vue 页面组件

<!-- src/views/system/user/index.vue -->
<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber">
        <el-input
          v-model="queryParams.phonenumber"
          placeholder="请输入手机号码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="用户状态" clearable>
          <el-option
            v-for="dict in dict.type.sys_normal_disable"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作按钮区域 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['system:user:add']"
        >新增</el-button>
      </el-col>
      <!-- ... 其他按钮 ... -->
    </el-row>
    <!-- 用户表格 -->
    <el-table v-loading="loading" :data="userList">
      <el-table-column label="用户编号" align="center" prop="userId" />
      <el-table-column label="用户名称" align="center" prop="userName" />
      <el-table-column label="用户昵称" align="center" prop="nickName" />
      <el-table-column label="部门" align="center" prop="dept.deptName" />
      <el-table-column label="手机号码" align="center" prop="phonenumber" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
            type="text"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:user:edit']"
          >修改</el-button>
          <el-button
            type="text"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:user:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup name="User">
import { listUser, delUser, changeUserStatus } from "@/api/system/user";
const { proxy } = getCurrentInstance();
const userList = ref([]);
const loading = ref(true);
const total = ref(0);
const showSearch = ref(true);
// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  userName: undefined,
  phonenumber: undefined,
  status: undefined
});
/** 查询用户列表 */
function getList() {
  loading.value = true;
  listUser(queryParams.value).then(response => {
    userList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
// ... 其他方法如 handleQuery, resetQuery, handleAdd, handleUpdate, handleDelete ...
</script>

最佳实践：

1. 善用代码生成器：对于标准的CRUD功能，优先使用代码生成器，将精力集中在业务逻辑和复杂功能的实现上。
2. 理解核心代码：即使使用生成器，也要花时间去理解生成的代码，这样在需要修改或扩展时才能游刃有余。
3. 自定义模板：对于有特殊需求的团队，可以基于精易的模板进行二次开发，创建符合自己公司规范的代码生成模板。

希望这份详细的指南能帮助你完全掌握精易网页助手的JSON生成代码功能！