Part01 ☀️

YangeIT大约 24 分钟JDKIdeaMavenMySQLSpringBootMybatisPlusHtml

Part01 ☀️

课程内容

  • 整体介绍
    • AI编程介绍
    • 成品项目的演示
  • 编程环境安装
    • Sealos云操作系统介绍
    • Trae介绍和安装
    • Deepseek介绍和使用
    • Devbox介绍和安装
    • Apifox介绍和使用
  • 编程前置知识讲解
    • 页面原型 🍐
    • 接口文档 🍐
    • Http协议、域名和端口 🍐
    • 服务器 🍐

1. 课程介绍

课程介绍

image
image

不写代码,搞定项目开发(数据库设计+后端开发+前端开发)

image
image

案例 👇

image
image
image
image
image
image

适用人群

image
image

2. 实训编码的环境

2.1 Deepseek介绍和使用

Deepseek介绍和使用

image
image

DeepSeek(中文名:深度求索)是一款由杭州深度求索人工智能基础技术研究有限公司开发的人工智能模型。其英文名“DeepSeek”可以读作“深思”(Deep)和“探索”(Seek),寓意着通过深度学习技术探索未知的领域。

官网open in new window

功能:

  • 深度学习模型:DeepSeek使用深度学习技术,可以处理和分析大量的数据,并从中提取有价值的信息。
  • 自然语言处理:DeepSeek可以理解和生成自然语言,可以用于机器翻译、情感分析、文本分类等任务。
  • 编程辅助:DeepSeek可以辅助编程,可以提供代码补全、代码生成、代码优化等功能。
  • 语音识别:DeepSeek可以处理和理解语音,可以用于语音识别、语音合成、语音翻译等任务。
  • 个性化推荐:DeepSeek可以根据用户的兴趣和行为,提供个性化的推荐服务。
image
image

考虑到官网只识别文字,因此推荐使用wenxiaobaiDeepseek

代码操作

image
image

问小白Deepseek官网open in new window

进入官网后,登录

image
image

登录页image

对话页image

总结

课堂作业

  1. 你使用过Deepseek吗?平常让他帮你做什么?🎤
  2. 向Deepseek提出你想问的问题把!!
  3. 为什么要使用wenxiaobai的Deepseek?

2.2 Sealos云操作系统介绍

Sealos云操作系统介绍

image
image

Sealos DevBox 是一个一站式云开发平台,将在线开发、测试和生产环境完美集成。只需一键点击,即可快速创建所需的开发环境和数据库依赖。开发者可以使用熟悉的本地 IDE(如 VSCode、Cursor、JetBrains 等)进行开发,同时享受简化的环境配置和自动化的应用部署体验。平台支持所有主流编程语言和框架,包括 Node.js、Python、Java、Go、PHP、Ruby 等,以及各类前端框架如 React、Vue、Angular 等。

Sealos官网open in new window

代码操作

1.登录页面

image
image

2.输入手机号进行登录

点击进入Sealos登录页open in new window 👈

3.登录成功后的页面情况image

4.新手福利image

新手完成任务,可以获得赠送金额,完成本次开发够了

总结

课堂作业

  1. 为什么要使用Sealos云操作系统?有什么好处?🎤
  2. Sealos云操作系统常用有哪些功能?🎤
  3. Sealos云操作系统是免费的吗?🎤

2.2 Trae介绍和安装

Trae介绍和安装

Trae( 国际官网:https://www.trae.aiopen in new window) Trae是 字节跳动 2025年1月推出的 AI原生集成开发环境,由旗下新加坡公司SPRING PTE开发。 它主打“用自然语言生成代码”。 具备 AI 问答、代码自动补全、基于 Agent 的 AI 编程等功能,能助力程序员完成开发任务,甚至实现端到端开发。

国内官网 https://www.trae.com.cnopen in new window

image
image

Trae的功能:

  1. Builder 模式下,Trae 会自主拆解需求并自动完成多轮编码任务。从想法描述到功能实现,Trae 为你一气呵成。
  2. Trae 可以深入理解你的代码仓库,并深度结合 IDE 内信息,更准确识别你的需求,为你提供更优质的解决方法。
  3. 通过强大的上下文分析,Trae 可以实时预测和续写你的代码片段,快速无缝扩展你未完成的代码,数倍提升你的编码效率

当前时代如果还没有使用AI编程,你可能真的out了,这不代表你的技术不行,而是你还没有跟上时代的步伐。

代码操作

  1. 访问地址:https://www.trae.ai/open in new window 下载国际版
image
image
  1. 安装完图标:
image
image
  1. 打开软件登录 image

注意:可以注册github账号进行登录,这里需要用到科学上网

登录成功,可以正常使用了 image

总结

课堂作业

  1. 为什么要下载国际版Trae?🎤 image
  2. 使用Trae来开发一个贪吃蛇游戏吧!
  3. 如果没有科学上网的工具,那就下载国内版本吧:https://www.trae.com.cn/homeopen in new window

注意:没有图片理解,只能依靠文字描述问题

2.3 Trae+Sealos完成SpringBoot入门功能

入门案例

需求:基于SpringBoot的方式开发一个web应用,浏览器发起请求/hello后,给浏览器返回字符串 "yangeit"。

image
image

代码操作

步骤

  1. 在sealos上创建一个项目,名称为:springboothello
  2. 使用trae打开Sealos中已经创建的项目 springboothello
  3. 在trae中通过Builder模式进行对话,将需求提交给大模型,大模型会自动生成代码
  4. 启动sealos中的springboot项目,外网访问,观察结果
  1. 进入sealos页面,点击Devbox,创建一个项目,名称为:springboothello
image
image
image
image
image
image

总结

课堂作业

  1. 参考上述步骤,实操试试吧!🎤
完成操作后,可以关机省钱哦
完成操作后,可以关机省钱哦

3. 编程前置知识讲解

3.1 页面原型

页面原型

前后端分离模式
前后端分离模式

页面原型是指:

  1. 一个模拟真实产品界面和交互的初步模型
  2. 用于展示页面布局、功能结构和用户流程的可视化表达
  3. 不包含完整视觉设计或后端功能的"半成品"演示

点击查看首页原型open in new window

点击查看员工管理原型open in new window

页面原型截图
页面原型截图

核心作用:

  • 沟通工具
    • 让团队成员对产品有统一认知
    • 帮助非技术人员理解设计意图
  • 验证工具
    • 早期发现设计缺陷
    • 测试用户流程是否合理
  • 开发指南
    • 为工程师提供明确的实现参考
    • 减少后期修改成本

代码操作

总结

课堂作业

  1. 页面原型是谁开发的?❓
  2. 页面原型的作用是什么?能直接作为项目运行吗?🎤
  3. 页面原型的截图可以用来做什么?❓
  4. 上面提供了在线的页面原型,全部点击打开瞅瞅,观察里面的内容,有什么作用?❓

3.2 接口文档

接口文档

前后端分离模式
前后端分离模式

页面原型和接口文档对比👇

对比项页面原型接口文档
主要用途- 展示页面布局和功能结构
- 模拟用户交互流程
- 验证产品设计
- 定义接口规范
- 明确数据交互方式
- 规范前后端对接
目标用户- 产品经理
- 设计师
- 开发人员
- 非技术人员/客户
- 前端开发人员
- 后端开发人员
- 测试人员
核心作用- 统一产品认知
- 早期发现设计问题
- 验证用户体验
- 提供界面参考
- 前后端沟通桥梁
- 接口调用参考
- 后端实现依据
- 减少沟通成本
内容形式- 可视化界面
- 交互原型
- 页面布局
- 接口描述
- 参数说明
- 数据格式
开发阶段产品设计阶段技术开发阶段

接口文档截图
接口文档截图

接口文档案例 👈 点击试试

总结

课堂作业

  1. 接口文档的作用是什么?🎤
  2. 接口文档和页面原型的区别是什么?❓

页面原型偏重于产品功能和用户体验的直观展示,而接口文档则专注于技术层面的前后端数据交互规范。两者在产品开发中承担不同但相辅相成的角色。

  1. 点击上面的接口文档案例链接,观察接口文档长啥样?体会前端和后端的对接规范。❓

4. 数据库设计

4.1 数据库表分析

数据库表分析

1.数据库设计流程

数据库设计流程
数据库设计流程

2.原型图原型图

3.AI辅助数据库设计image

提示

实操过程中,我们可以截取页面原型图,通过AI工具进行数据库表设计,从而提升开发效率。做到所见即所得!!! 👈 👍

操作

下面是从原型图截取的部分页面素材,用于设计数据库表。后面会用到这些截图

班级管理
班级管理
部门管理
部门管理
学员管理
学员管理
员工管理
员工管理

因为Deepseek每次只能输入一张照片,因此数据库表需要一张一张进行设计 image

1. 部门管理表设计

使用Deepseek,分析部门模块,需要几张表 image

提示词如下:

请根据提供的页面原型和需求说明,帮我分析一下部门管理涉及到几张表,具体是什么表,只需要给出涉及到几张表即可,不需要具体的字段及建表语句。(请严格根据页面原型和需求分档分析)

经过Deepseek分析,结果如下: image

经过分析只涉及1张表,接下来,要跳转到页面原型图进行对照,确保分析结果正确。

2.员工管理表设计

使用Deepseek,分析员工模块,需要几张表 image

提示词如下:

请根据提供的页面原型和需求说明,帮我分析一下员工管理涉及到几张表,具体是什么表,只需要给出涉及到几张表即可,不需要具体的字段及建表语句。(请严格根据页面原型和需求分档分析)

经过Deepseek分析,结果如下: image

经过分析只涉及2张表,接下来,要跳转到页面原型图进行对照,确保分析结果正确。

经过和原型对照,发现AI分析并不准确,图中的工作经历没有识别出来 👇

image
image

因此,需要继续问👇

image
image

提示词:👇

根据你的分析,员工管理只涉及到一张核心表就是员工表,员工表中怎么存储员工的工作经历信息呢?(请严格根据页面原型和需求分档分析)

分析存在问题,直接提出需要新增工作经历表 image

image
image

3.接下来分析3张表的关系

image
image
好的,我知道了部门管理及员工管理模块,共涉及三张表,分别是:部门表、员工表、员工工作经历表,请帮我分析一下这三张表之间的关系。(一对一、一对多、多对多)

分析结果如下:👇 image

至此,数据库表关系分析就结束了,接下来,需要根据分析结果,设计数据库表。

提示

如果检查的结果不对,就需要继续提问,直到结果和原型页面能对应上为止!! AI编程就是不断和AI模型对话的过程,通过不断的对话,越来越接近真实需求。

总结

课堂作业

  1. 请结合页面原型和需求文档,分析一下部门和员工管理模块涉及几张表?具体是哪些表?🎤
  2. 使用AI编程只需要需求描述清楚就可以了,一次性就能成功,对吗?❓
  3. 和AI对话的过程中,如果发现分析结果不对,应该怎么处理?❓

4.1 数据库表设计

数据库表设计

上一节,我们分析了部门管理及员工管理模块,共涉及三张表,分别是:部门表、员工表、员工工作经历表,已经已经知道他们的关系了,接下来我们利用Deepseek完成建表语句的设计。

代码操作

image
image

提示词

那接下来请根据提供的部门管理的页面原型和需求文档,
帮我设计一下部门表的表结构,
注意: 目前只考虑部门表,请参照提供的需求说明,
为部门表的每个字段设置合适的字段类型和约束(严格根据页面原型和需求文档设计)。
最终给出mysql数据库的建表语句.

image
image

优化建表语句

部门表的建表语句,需要做以下调整
1.表名改为 dept;
2.department_name 字段名改为 name;
3.last operation time 字段名改为 update_time;
4.再增加一个字段 create time,记录创建时间的
5.时间类型设置为datetime类型
其他信息不变;
给出调整好的建表语句
优化完成的建表语句
优化完成的建表语句
CREATE TABLE dept (
    id INT AUTO_INCREMENT PRIMARY KEY COMMENT '部门ID',
    name VARCHAR(10) NOT NULL UNIQUE COMMENT '部门名称',
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='部门表';

至此,部门表设计完成,接下来,我们继续设计员工表。

4.4 数据库创建

数据库创建

在Sealos中创建数据库,然后使用Navicat连接数据库,执行sql语句,创建表。

代码操作

创建数据库

访问Sealos,网址:https://sealos.run/,创建数据库。open in new windowimage

点击新建 image

配置数据库并部署 image

数据库链接信息 image

总结

课堂作业

  1. 参考上述操作,完成sealos云系统操作,创建数据库,并执行sql语句,创建表。🎤

注意

因为sealos是按时间收费的,所以请尽快完成操作,然后销毁数据库,以免产生不必要的费用。