RuoYi-Cloud后端与移动端协同开发：从零构建用户管理模块实战

1. 环境准备与项目初始化在开始构建用户管理模块前我们需要先搭建好开发环境。这里我推荐使用HBuilderX作为开发工具它内置了uniapp开发所需的所有插件和调试工具。安装完成后通过以下步骤初始化项目从RuoYi官方仓库克隆前端模板git clone https://gitee.com/y_project/RuoYi-App.git安装依赖建议使用pnpm提升安装速度cd RuoYi-App pnpm install后端环境建议使用RuoYi-Cloud的最新版本确保Nacos服务已启动。我在实际项目中遇到过版本不兼容的问题所以特别提醒大家要检查版本对应关系前端版本后端兼容版本v1.2.0RuoYi-Cloud 3.7.0配置中最容易出错的是Nacos服务发现配置。记得在application.yml中检查这两个关键配置spring: cloud: nacos: discovery: server-addr: 127.0.0.1:8848 config: server-addr: 127.0.0.1:88482. 后端用户模块开发实战2.1 数据库设计与实体映射用户表设计要考虑扩展性这是我优化过的表结构CREATE TABLE app_user ( user_id bigint NOT NULL AUTO_INCREMENT COMMENT 用户ID, user_name varchar(30) NOT NULL COMMENT 用户账号, nick_name varchar(30) NOT NULL COMMENT 用户昵称, email varchar(50) DEFAULT COMMENT 邮箱, phonenumber varchar(11) DEFAULT COMMENT 手机号码, sex char(1) DEFAULT 0 COMMENT 性别0未知 1男 2女, avatar varchar(100) DEFAULT COMMENT 头像地址, status char(1) DEFAULT 0 COMMENT 状态0正常 1停用, del_flag char(1) DEFAULT 0 COMMENT 删除标志, login_ip varchar(50) DEFAULT COMMENT 最后登录IP, login_date datetime DEFAULT NULL COMMENT 最后登录时间, create_by varchar(64) DEFAULT COMMENT 创建者, create_time datetime DEFAULT NULL COMMENT 创建时间, update_by varchar(64) DEFAULT COMMENT 更新者, update_time datetime DEFAULT NULL COMMENT 更新时间, remark varchar(500) DEFAULT NULL COMMENT 备注, PRIMARY KEY (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户信息表;对应的Domain对象要加上Swagger注解方便调试Data ApiModel(用户实体) public class AppUser { ApiModelProperty(用户ID) private Long userId; NotBlank(message 用户账号不能为空) Size(min 2, max 30) ApiModelProperty(用户账号) private String userName; // 其他字段省略... }2.2 业务逻辑层实现Service层要处理好事务和异常这是我的实现方案Service public class AppUserServiceImpl implements IAppUserService { Autowired private AppUserMapper userMapper; Override Transactional(readOnly true) public ListAppUser selectAppUserList() { return userMapper.selectAppUserList(); } Override Transactional(rollbackFor Exception.class) public int insertAppUser(AppUser user) { // 用户名唯一性校验 if (userMapper.checkUserNameUnique(user.getUserName()) 0) { throw new ServiceException(用户名已存在); } user.setCreateTime(DateUtils.getNowDate()); return userMapper.insertAppUser(user); } }2.3 控制层RESTful设计控制器要处理好参数校验和返回格式RestController RequestMapping(/app/user) Api(tags 用户管理) public class AppUserController extends BaseController { Autowired private IAppUserService userService; GetMapping(/list) ApiOperation(获取用户列表) public TableDataInfo list(AppUser user) { startPage(); ListAppUser list userService.selectAppUserList(user); return getDataTable(list); } PostMapping ApiOperation(新增用户) public AjaxResult add(Validated RequestBody AppUser user) { return toAjax(userService.insertAppUser(user)); } }3. 前端uni-app集成3.1 API请求封装在api/user.js中封装用户相关接口import request from /utils/request export function getUserList(params) { return request({ url: /app/user/list, method: get, params }) } export function addUser(data) { return request({ url: /app/user, method: post, data }) }3.2 页面组件开发使用uni-ui的组件快速搭建界面template view classcontainer uni-card uni-table :datauserList uni-table-column propuserName label用户名/uni-table-column uni-table-column propnickName label昵称/uni-table-column uni-table-column label操作 template #defaultscope uni-link clickeditUser(scope.row)编辑/uni-link /template /uni-table-column /uni-table uni-pagination :totaltotal changehandlePageChange / /uni-card /view /template script import { getUserList } from /api/user export default { data() { return { userList: [], total: 0, queryParams: { pageNum: 1, pageSize: 10 } } }, mounted() { this.loadData() }, methods: { async loadData() { const res await getUserList(this.queryParams) this.userList res.rows this.total res.total }, handlePageChange(e) { this.queryParams.pageNum e.current this.loadData() } } } /script4. 跨平台适配与调试技巧4.1 条件编译处理平台差异不同平台需要特殊处理的地方template !-- #ifdef MP-WEIXIN -- button open-typegetUserInfo微信授权/button !-- #endif -- !-- #ifdef H5 -- button clickh5LoginH5登录/button !-- #endif -- /template script export default { methods: { // #ifdef MP-WEIXIN wxLogin() { uni.login({ success(res) { console.log(res.code) } }) }, // #endif // #ifdef H5 h5Login() { this.$refs.form.validate() } // #endif } } /script4.2 性能优化实践图片懒加载image lazy-load :srcuser.avatar modeaspectFill /image分页加载优化// 使用z-paging组件实现上拉加载 z-paging refpaging v-modeldataList queryqueryList !-- 列表内容 -- /z-paging接口缓存策略// 在store中缓存用户数据 const userStore defineStore(user, { state: () ({ cache: new Map() }), actions: { async getUser(id) { if (this.cache.has(id)) { return this.cache.get(id) } const res await getUserDetail(id) this.cache.set(id, res) return res } } })5. 常见问题解决方案跨域问题在gateway模块添加CORS配置Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); CorsConfiguration config new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin(*); config.addAllowedHeader(*); config.addAllowedMethod(*); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); }小程序真机调试白屏检查以下配置确保域名已加入小程序后台request合法域名基础库版本不低于2.10.0清除编译缓存后重新运行H5页面路由刷新404配置Nginx重定向location / { try_files $uri $uri/ /index.html; }表单验证最佳实践uni-forms :modelform :rulesrules refform uni-forms-item label用户名 nameuserName uni-easyinput v-modelform.userName / /uni-forms-item /uni-forms script export default { data() { return { rules: { userName: { rules: [{ required: true, errorMessage: 请输入用户名 }] } } } } } /script