Java新手从小窗口到页面的详细教程、框架学习、全栈开发、若依框架-优快云博客

本文链接：https://blog.youkuaiyun.com/WaXiaoHui/article/details/143572131

前言

在当今的职场中，我们常常会遇到这样一种现象：刚入职的新人虽然具备一定的编程基础，但在面对实际项目时，却往往因为缺乏对基础框架的了解和使用经验而感到困惑和吃力。尤其是像若依框架这样的成熟框架，虽然其本身设计得易于上手，但由于缺乏系统的培训和指导，新人们往往需要花费大量的时间和精力去摸索和学习。
为了帮助这些新人更好地适应工作环境，提高工作效率，我决定撰写一篇保姆级的教程，详细介绍若依框架的使用方法和技巧。希望通过这篇教程，能够让新人们快速掌握若依框架的核心功能，从而更加自信地应对工作中的挑战。
在接下来的教程中，我将从环境准备、框架安装、基本配置、功能模块介绍、代码示例等多个方面进行详细阐述，确保每一位读者都能够轻松理解并掌握若依框架的使用方法。同时，我也会结合实际项目案例，帮助读者更好地理解框架的应用场景和实际价值。
希望这篇教程能够对大家有所帮助，让我们一起开启框架的学习之旅吧！

1. 环境准备

• 安装JDK 1.8及以上版本
• 安装Maven 3.0及以上版本
• 安装MySQL 5.7及以上版本

2. 下载并运行若依框架

后端运行

• 从若依官网下载最新版本的代码
• 解压后，使用IDEA或Eclipse等开发工具导入项目
• 修改application.yml文件中的数据库配置，确保与你的MySQL数据库连接信息一致
• 在项目根目录下运行mvn clean package命令，编译并打包项目
• 运行java -jar ruoyi-admin.jar命令，启动项目

前端运行

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

3. 登录系统

• 打开浏览器，访问http://localhost:8080
• 使用默认的管理员账号登录：用户名admin，密码admin123

4. 了解若依框架的基本结构

若依框架主要分为以下几个模块：

ruoyi-admin：管理后台模块
ruoyi-generator：代码生成器模块
ruoyi-framework：基础框架模块
ruoyi-common：公共模块
ruoyi-system：系统管理模块

每个模块都有自己的功能和职责，开发者可以根据需要进行扩展和定制。

5. 使用代码生成器

• 若依框架提供了强大的代码生成器，可以根据数据库表结构自动生成实体类、Mapper、Service和Controller等代码。
• 登录系统后，点击左侧菜单栏的“系统工具”->“代码生成”，进入代码生成页面。
• 点击“导入”按钮，选择需要生成代码的数据库表，点击“确定”。
• 在生成页面中，可以配置生成的代码类型、包名、作者等信息，点击“生成代码”按钮。
• 生成的代码会自动保存到项目的src/main/java和src/main/resources目录下。

6. 权限管理

• 若依框架提供了完善的权限管理功能，可以对用户、角色和菜单进行管理。
• 登录系统后，点击左侧菜单栏的“系统管理”->“用户管理”，可以查看和管理用户信息。
• 点击左侧菜单栏的“系统管理”->“角色管理”，可以查看和管理角色信息。
• 点击左侧菜单栏的“系统管理”->“菜单管理”，可以查看和管理菜单信息。
• 通过分配角色和菜单，可以实现不同用户的权限控制。

7. 数据字典

• 若依框架提供了数据字典功能，可以对系统中的常量进行管理。
• 登录系统后，点击左侧菜单栏的“系统管理”->“数据字典”，可以查看和管理数据字典信息。
• 通过数据字典，可以实现系统中常量的统一管理和维护。

8. 其他功能

• 若依框架还提供了其他一些实用的功能，如定时任务、邮件发送、文件上传等。
• 开发者可以根据需要在项目中使用这些功能。
通过以上步骤，刚工作的小白可以快速上手若依框架，并开始进行项目开发。若依框架的文档和社区也提供了丰富的资源和帮助，开发者可以在遇到问题时查阅相关资料。

后端编写顺序

1. 在数据库中建表
2. 定义实体类domain
3. 编写.mapper及对应的.xml文件
4. 编写service
5. 编辑controller

注意：
数据库表和实体类编写要注意驼峰命名；实体类中使用@Data或生成get\set方法、构造方法和toString方法；
Mapper和对应的.xml 文件名要一致，定义的方法名要一一对应好；
在service中要有**@Service**注解，在impl中尽量使用@Resource注解使用mapper；
在controller中使用@RestController,以便把接口暴露给前端，定义service使用@Autowired(感兴趣可以搜一下@Autowired和@Resource~~注解依赖注入的区别~~ )

前端编写注意

如今有了vue，其实使用起来还是很简单的，在.js文件中定义好接口，在vue界面中引入后使用即可。繁琐的也就是界面的排版等问题。说一下近期的一些小问题吧

项目中需要在弹窗中显示出上传的文件？
答：我用过iframe组件没成功、后来使用的是@vue-office/docx这个组件，详细的可以看看Vue 展示word\excel\pdf 内容
列表操作栏中根据行内容选择是否显示某一操作按钮？
答：使用v-if可以实现，但注意如果是list的话，使用v-if="myList.length > 0"这样去实现
如：

<el-form-item v-if="myList.length > 0" content-position="center"></el-form-item>

显示富文本字段内容
答：使用v-html实现
如：

<div v-html="form.richEdit" style="max-height:300px; overflow-y: scroll"/>

例子

1、数据库-sys_user表结构

在这里插入图片描述

2、SysUser实体类

@Data
public class SysUser extends BaseEntity
{
   
    private static final long serialVersionUID = 1L;

    /** 用户ID */
    @Excel(name = "用户序号", type = Type.EXPORT, cellType = ColumnType.NUMERIC, prompt = "用户编号")
    private Long userId;

    /** 部门ID */
    @Excel(name = "部门编号", type = Type.IMPORT)
    private Long deptId;

    /** 用户账号 */
    @Excel(name = "登录名称")
    private String userName;

    /** 用户昵称 */
    @Excel(name = "用户名称")
    private String nickName;

    /** 用户邮箱 */
    @Excel(name = "用户邮箱")
    private String email;

    /** 手机号码 */
    @Excel(name = "手机号码", cellType = ColumnType.TEXT)
    private String phonenumber;

    /** 用户性别 */
    @Excel(name = "用户性别", readConverterExp = "0=男,1=女,2=未知")
    private String sex;

    /** 用户头像 */
    private String avatar;

    /** 密码 */
    private String password;

    /** 帐号状态（0正常 1停用） */
    @Excel(name = "帐号状态", readConverterExp = "0=正常,1=停用")
    private String status;

    /** 删除标志（0代表存在 2代表删除） */
    private String delFlag;

    /** 最后登录IP */
    @Excel(name = "最后登录IP", type = Type.EXPORT)
    private String loginIp;

    /** 最后登录时间 */
    @Excel(name = "最后登录时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss", type = Type.EXPORT)
    private Date loginDate;
}

3、SysUserMapper.java

public interface SysUserMapper
{
   
    /**
     * 根据条件分页查询用户列表
     * 
     * @param sysUser 用户信息
     * @return 用户信息集合信息
     */
    public List<SysUser> selectUserList(SysUser sysUser);
    /**
     * 通过用户ID查询用户
     * 
     * @param userId 用户ID
     * @return 用户对象信息
     */
    public SysUser selectUserById(Long userId);

    /**
     * 新增用户信息
     * 
     * @param user 用户信息
     * @return 结果
     */
    public int insertUser(SysUser user);

    /**
     * 修改用户信息
     * 
     * @param user 用户信息
     * @return 结果
     */
    public int updateUser(SysUser user);

    /**
     * 删除用户信息
     *
     * @param userId 用户ID
     * @return 结果
     */
    public int deleteUserById(Long userId);
}

4、SysUserMapper.xml

<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jiaoyuketishenbao.system.mapper.SysUserMapper">

   <resultMap type="SysUser" id="SysUserResult">
       <id     property="userId"       column="user_id"      />
       <result property="deptId"       column="dept_id"      />
       <result property="userName"     column="user_name"    />
       <result property="nickName"     column="nick_name"    />
       <result property="email"        column="email"        />
       <result property="phonenumber"  column="phonenumber"  />
       <result property="sex"          column="sex"          />
       <result property="avatar"       column="avatar"       />
       <result property="password"     column="password"     />
       <result property="status"       column="status"       />
       <result property="delFlag"      column="del_flag"     />
       <result property="loginIp"      column="login_ip"     />
       <result property="loginDate"    column="login_date"   />
       <result property="createBy"     column="create_by"    />
       <result property="createTime"   column="create_time"  />
       <result property="updateBy"     column="update_by"    />
       <result property="updateTime"   column="update_time"  />
       <result property="remark"       column="remark"       />
       <association property="dept"    javaType="SysDept"         resultMap="deptResult" />
       <collection  property="roles"   javaType="java.util.List"  resultMap="RoleResult" />
   </resultMap>
   
   <resultMap id="deptResult" type="SysDept">
       <id     property="deptId"    column="dept_id"     />
       <result property="parentId"  column="parent_id"   />
       <result property="deptName"  column="dept_name"   />
       <result property="ancestors" column="ancestors"   />
       <result property="orderNum"  column="order_num"   />
       <result property="leader"    column="leader"      />
       <result property="status"    column="dept_status" />
   </resultMap>
   
   <resultMap id="RoleResult" type="SysRole">
       <id     property="roleId"       column="role_id"        />
       <result property="roleName"     column="role_name"      />
       <result property="roleKey"      column="role_key"       />
       <result property="roleSort"     column="role_sort"      />
       <result property="dataScope"    column="data_scope"     />
       <result property="status"       column="role_status"    />
   </resultMap>
   
   <sql id="selectUserVo">
       select u.user_id, u.dept_id, u.user_name, u.nick_name, u.email, u.avatar, u.phonenumber, u.password, u.sex, u.status, u.del_flag, u.login_ip, u.login_date, u.create_by, u.create_time, u.remark, 
       d.dept_id, d.parent_id, d.ancestors, d.dept_name, d.order_num, d.leader, d.status as dept_status,
       r.role_id, r.role_name, r.role_key, r.role_sort, r.data_scope, r.status as role_status
       from sys_user u
           left join sys_dept d on u.dept_id = d.dept_id
           left join sys_user_role ur on u.user_id = ur.user_id
           left join sys_role r on r.role_id = ur.role_id
   </sql>
   
   <select id="selectUserList" parameterType="SysUser" resultMap="SysUserResult">
       select u.user_id, u.dept_id, u.nick_name, u.user_name, u.email, u.avatar, u.phonenumber, u.sex, u.status, u.del_flag, u.login_ip, u.login_date, u.create_by, u.create_time, u.remark, d.dept_name, d.leader from sys_user u
       left join sys_dept d on u.dept_id = d.dept_id
       where u.del_flag = '0'
       <if test="userId != null and userId != 0">
           AND u.user_id = #{userId}
       </if>
       <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.phonenumber like concat('%', #{phonenumber}, '%')
       </if>
       <if test="params.beginTime != null and params.beginTime != ''"><!-- 开始时间检索 -->
           AND to_char(u.create_time,'yyyy-MM-dd')::date &gt;= to_date(#{params.beginTime},'yyyy-MM-dd')
       </if>
       <if test="params.endTime != null and params.endTime != ''"><!-- 结束时间检索 -->
           AND to_char(u.create_time,'yyyy-MM-dd')::date &lt;= to_date(#{params.endTime},'yyyy-MM-dd')
       </if>
       <if test="deptId != null and deptId != 0">
           AND (u.dept_id = #{deptId} OR u.dept_id IN ( SELECT t.dept_id FROM sys_dept t WHERE find_in_set(#{deptId}, ancestors) ))
       </if>
       <!-- 数据范围过滤 -->
       ${params.dataScope}
   </select>
   
   <select id