AI小项目之springboot+vue

https://github.com/naby1/springboot_vue

由于客观原因,尝试0基础接触springboot+vue

在Ai的帮助下(指99%的代码,使用的是元宝的deepseek深度思考,无联网),写了两个小项目,这里记录一下。

文件系统

(由于本人技术太差,基本都是写在一个文件中,勿喷)

实现了简单的文件系统,根目录配置在java/src/main/java/org.example/controller/FileController.java第31行的BASE_PATH中

实现功能:

  1. 左上角显示当前目录路径,AI的说法是面包屑导航。

  2. 右上角有新建文件夹和上传功能,上传按钮左侧点击是可以直接上传文件,右侧按钮可以选择上传文件夹和上传文件。在设计时新建文件夹功能会在当前目录生成一个空文件夹,命名为“新建文件夹”,并且由于不可重名问题,无法在新建文件夹,所以算是bug吧,但我懒得改了。
    2

  3. 下方本体就是显示文件的表,有名称,大小(文件才有),修改时间,都有排序功能(自带的sortable)

  4. 对于下方文件表中每一栏文件/目录,双击可以进入目录(修改当前访问路径并向后端请求所在目录文件)。右键会有菜单栏,可以进行下载、重命名和删除操作。
    3

学生管理系统

实现前端、后端和数据库的基本操作,增删改查等基础功能。
个人感悟:使用路由,分开设计比较方便管理。
1

数据库设计

1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE user (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(20) NOT NULL,
passwd CHAR(32) NOT NULL,
birthday DATE,
sex ENUM('M','F') DEFAULT 'M',
phone VARCHAR(20),
email VARCHAR(50),
addr VARCHAR(125),
education ENUM('PHD','MASTER','BACHELOR','ASSOCIATE','HIGHSCHOOL','JUNIORHS','JUNIORHS','OTHER'),
create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
last_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

PHD - 博士
MASTER - 硕士
BACHELOR - 本科
ASSOCIATE - 大专
HIGHSCHOOL - 高中
JUNIORHS - 初中
PRIMARY - 小学
OTHER - 其他

测试数据

1
2
3
4
5
6
7
8
9
10
11
INSERT INTO user (name, passwd, birthday, sex, phone, email, addr, education) 
VALUES (
'张三',
MD5('zhangsan'),
'2000-01-01',
'M',
'13812345678',
'zhangsan@example.com',
'北京市朝阳区',
'BACHELOR'
);

查询功能

点击后就会显示查询到的所有数据,密码在后端就进行了隐藏。默认一页显示20条数据,最下方可以选择页数和显示条数。在最上方能对四个属性进行查询,可单独查询也可组合查询。
2

删除功能

输入待删除的ID,点击查询,会先显示用户信息进行确认,然后再删除(删除一开始不可点,当然这只是前端设置)
3

添加功能

就是简单的添加数据,在后端会对添加数据进行校验(在model处)
4

修改功能

先查询后修改,ID、创建时间和修改时间不可更改,其他都可以更改,同样由于model的设置,会对数据进行校验。
5

总结

感觉AI写小功能还行,但是上下文有点差,特别是格式都很难统一,对于分文件编写有点困难。写了这两个项目感觉不能说没有收获,只能说收获很小,如果只是自己随便当小玩意用那没啥说的,但如果想要深入了解对应技术,还是不太够,对于真正的项目结构、代码规范和一些理论基础还是要靠时间和努力。


AI小项目之springboot+vue
http://example.com/2025/03/19/springbootvue/
作者
Naby
发布于
2025年3月19日
许可协议