【Java课设】开发如此轻松!基于开源神器Erupt框架及Amis框架开发的课设 [一起组队吧]

本文介绍了使用Erupt后台框架和Amis前端框架完成Java课设的过程,强调了这两个框架在开发中的便利性和效率提升。通过Erupt的注解开发和Amis的JSON配置快速生成页面,结合Semantic UI组件库,实现了从数据库设计到界面展示的完整流程。此外,还涵盖了QQ登录、JWT认证、图片存储和邮件发送等技术点。
摘要由CSDN通过智能技术生成

前言

采用Erupt框架 + amis前台框架 快速搭建项目程序

【目前开放访问:前台链接】(没做完,但组队功能做完了)

  • 首先吹爆Erupt框架!!这个框架简直是后台开发利器,你甚至不需要先建表,直接拿来跑就出现了后台管理页面,利用代码生成反向生成实体类,直接映射生成了数据库,配合jpa,熟悉的话1小时不用一个简单的系统包括后台包括全套api就实现了。让你把时间放到具体业务上!!

  • 其次就是Amis低代码前端框架!!这个前台我是配合semantic一起弄的,我前台只是仅限于改点别人页面,这次第一次完全独立自己实现了一套定制的前台,虽然说不上很美观,但至少框架出来了。后面打算简单学下vue配合amis感觉可以起飞。

这两个框架现在github/gitee虽说不上热门,以我现有的开发感受来说,觉得是两个后面会起来的黑马。难在初学者入门,用起来后是真的起飞,下面简单看下我的开发过程吧。~

一、框架结构

> 目前项目开发周期:5月中旬到6.10号大半个月

主要是学习一些新技术:技术原理简单,但实际用起来还是不是一个概念层级的,断断续续把一些技术成功对接进来,也还有很多欠缺,后面还会继续完善这个项目的【项目跟进】

因为分离的项目,所以后面可能会用vue+amis重构前台,或者安卓手机端或者鸿蒙;

二、界面展示

流体式布局+电脑手机端适配

前台界面:

在这里插入图片描述

在这里插入图片描述

组队详细界面

https://img-blog.csdnimg.cn/img_convert/70fcf931ea25c41c7c8343510745ad52.png#align=left&display=inline&height=472&margin=[object Object]&name=image.png&originHeight=944&originWidth=1666&size=803465&status=done&style=none&width=833

通用后台管理框架

在这里插入图片描述
在这里插入图片描述

后台代码界面

在这里插入图片描述

前台代码

在这里插入图片描述

分布式部署/资源存放

在这里插入图片描述

三、数据库设计

ER流程图

省略属性

在这里插入图片描述

数据库关联

在这里插入图片描述

四、框架使用介绍

**业务展示层:Erupt后台通用框架 + Amis百度前台通用框架 + Semantic通用前台组件库 **
交互规范层:[ restful接口规范 + 阿里java开发手册规范]
**
框架具体使用后面会在总结|总结后更新到下方

Erupt后台管理 – 基于注解开发管理页面[详细 待更新]

在这里插入图片描述
在这里插入图片描述

Amis百度前台框架 – 基于json开发前台界面[详细 待更新]

什么是 amis
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。快速开发页面模板。
在这里插入图片描述

Semantic通用组件库[详细 待更新]

通过semantic提供好的丰富组件,基于amis构建的框架上构建内容,相当于amis是建房子,而semantic就是家具库。

image.png
image.png

五、技术点梳理

  1. 本系统仅采用qq登录,解决用户密码登录注册困难一问题,做到扫码即登录,登录即使用
  2. 技术点按照业务流程来梳

流程及技术点
qq登录 – 用户绑定 – 生成令牌 – 组队请求[jwt校验 + 图片存储] – 邮箱通知

qq登录[JustAuth支持]

业务流程
qq请求登录 – 后台controller层封装返回qq登录链接 – 前台跳转登录链接 – 登录请求发送到腾讯 – 腾讯验证后调用回调地址 --后台controller层响应处理数据绑定验证用户 – 生成权限+用户打包发送给前台 – 前台获取储存
绑定用户流程

相关代码:

    @RequestMapping("/callback/qq")
	//QQ登录回调请求
    public Result login(AuthCallback callback) {
   
        Object obj = null;
        try{
   
            AuthRequest authRequest = getAuthRequest();
            obj = authRequest.login(callback);
        }catch (Exception e){
   
Erupt 框架中,可以通过 `@Button` 注解来实现自定义按钮的功能。下面是一个简单的示例,以实现一个“清空数据”按钮为例: 1. 首先,在你要自定义按钮的实体类中,添加一个`@Button`注解,并且指定按钮的名称和图标: ```java @Entity @Table(name = "t_user") @Erupt(name = "用户管理") public class User { // 省略其他字段 @Button("清空数据") @Icon(value = "fa fa-trash", color = Icon.Color.RED) public void clearData() { // 清空数据的具体实现逻辑 } } ``` 2. 在 `EruptConfig` 中,需要添加一个 `EruptButtonModel` 来对按钮进行配置: ```java @Configuration public class EruptConfig { @Bean public EruptButtonModel clearDataButton() { return EruptButtonModel.builder() .setTitle("清空数据") .setFetchMethod("/erupt-api/user/clearData") .setType(EruptButtonModel.Type.TIPS) .setMessage("你确认要清空所有数据吗?此操作不可恢复!") .setIcon(new FontAwesomeIcon("fa fa-trash", Icon.Color.RED)) .build(); } } ``` 注意,这里的 `fetchMethod` 属性是指定了按钮点击后将会触发的请求的路径。在这个路径中,需要定义一个处理请求的控制器方法。 3. 在控制器中,添加一个处理按钮请求的方法: ```java @RestController @RequestMapping("/erupt-api/user") public class UserController { @Autowired private UserService userService; @PostMapping("/clearData") public void clearData() { userService.clearData(); } } ``` 这里的 `UserService` 是你自己定义的服务类,用于处理具体的业务逻辑。 4. 最后,在你的页面中,使用 `erupt-buttons` 标签来渲染按钮: ```html <erupt-buttons :buttons="buttons"></erupt-buttons> ``` 在对应的 Vue 实例中,需要定义一个 `buttons` 对象,来指定要显示的按钮。在这个对象中,可以引用前面在 `EruptConfig` 中定义的 `EruptButtonModel`: ```javascript data() { return { buttons: [ clearDataButton ] } } ``` 至此,一个简单的自定义按钮就实现了。当用户点击按钮时,将会弹出提示框,询问用户是否确认进行清空数据操作。如果用户确认操作,将会触发后台的 `clearData` 方法进行清空数据的操作。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

404name

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值