目录前言一、搞懂开发根基前端、后端到底怎么分工1.1 前端只管“好看、展示”1.2 后端负责“干活、算数”1.3 为什么前端更容易被AI替代二、后端代码编写2.1 不懂技术的人问问题2.2 稍微知道一点的2.3 有成熟经验的开发者三、前端代码编写3.1 提示词编写四、前后端测试结语 云泽Q个人主页 专栏传送入口: 《C语言》《数据结构》《C》《Linux》《蓝桥杯系列》《笔试算法》《AI赋能》⛺️遇见安然遇见你不负代码不负卿~前言大家好啊我是云泽Q欢迎阅读我的文章一名热爱计算机技术的在校大学生喜欢在课余时间做一些计算机技术的总结性文章希望我的文章能为你解答困惑~该篇主要是做整个项目重构和前端制作~一、搞懂开发根基前端、后端到底怎么分工接下来就要搭建前端并连接前后端了在开始之前要先知道前端和后端都是干什么的不然连基础分工都搞不懂自然写不出精准AI指令1.1 前端只管“好看、展示”我们肉眼能看到的一切全部属于前端网页页面、HTML界面、手机APP画面、按钮样式、字体排版。它的核心工作只有一件事把内容展示给用户不负责数据校验、不负责逻辑运算。举个最简单的登录例子我们在APP输入账号密码、点击登录按钮这个页面、输入框、按钮全是前端前端只负责收集我们输入的信息本身不会校验账号密码对错。1.2 后端负责“干活、算数”后端也叫服务器开发所有业务代码全部存放在云端服务器肉眼看不见、摸不着我们之前所写的代码都属于后端。承接全部核心工作账号密码校验、数据计算、业务规则判定、接口调度。依旧拿登录举例前端把账号密码传给后端后端比对数据库信息判定对错再把「登录成功/失败」结果传回前端最后由前端弹窗展示结果。前端要把用户输入的账号密码传给后端是要通过调用后端上的某一个服务来实现1.3 为什么前端更容易被AI替代行业现状直白来说前端入门门槛低、业务逻辑简单核心工作只是美化页面、适配样式没有复杂业务逻辑也是目前AI适配度最高、最先被替代的开发岗位。而后端牵扯业务规则、数据安全、服务联动逻辑错综复杂AI很难独立吃透也是目前开发行业更吃香、更保值的方向。我们搭建Spring Boot后端项目本质目的不是炫技术而是统一前后端对接规则我们现在的项目相当于服务器都没有搭好就是因为在这个Spring Boot架构底下前端会在指定的文件夹底下按照指定的方式去找对应的服务让前端能精准找到后端服务避免对接错乱所以我们的难点就在后端服务怎么改二、后端代码编写现在都说用AI辅助编码但绝大多数人效率极低问题从来不在AI而是在使用者自身比如说我们现在就利用AI改后端服务2.1 不懂技术的人问问题把这个代码看怎么样整理一下看到这类指令AI也会懵逼它再聪明都接受不了含糊不清的指令这类指令完全是无效指令AI无法判定代码适配Spring Boot还是Python架构、代码存放路径、编码规范、输出格式。再强大的AI面对模糊需求也只能胡乱输出代码最后返工整改白白浪费时间。2.2 稍微知道一点的这个文件当中的代码是阿里云官方的示例代码认真读取当前代码的含义。理解完成后把当前代码进行合理的归类和整理为springboot的后端项目。归类按照springboot项目的结构划分比如应该在service文件夹下的放到service下应该在controller下的放到controller应该是常量的代码按照常量的方式进行划分后端也增加slf4j作为日志的部分。日志路径保存在当前项目的根目录logs/app.log可以抽离为配置的放在config的文件目录下。遵循REST API接口的约定总体目标是方便后续工程化管理。所有代码注释使用中文方便维护。但是这个看起来很专业的话术也不一定能做好因为你也不懂controller这些东西到底是什么可能需要来回沟通好多次才会成功2.3 有成熟经验的开发者# 阿里云示例代码重构为 Spring Boot 项目 ## 任务目标 将提供的阿里云官方示例代码在 test 包下的 RecognizeVideoCastCrewList 类和 GetAsyncJobResult 类进行整合转换为一个结构清晰、便于工程化管理的 Spring Boot 后端项目。 目前 RecognizeVideoCastCrewList 类中的执行结果 System.out.println(com.aliyun.teautil.Common.toJSONString(TeaModel.buildMap(response)));中包含一个 RequestId。 因为是异步调用这个 RequestId 的值将会在 GetAsyncJobResult 类中使用到。会传给 setJobId 方法作为参数。GetAsyncJobResult 类的调用结果打印出来之后为 System.out.println(com.aliyun.teautil.Common.toJSONString(TeaModel.buildMap(getAsyncJobResu ltResponse)));需要把最终这个打印结果以 Json 形式返回给前端前端会解析这个数据。 ## 具体要求 ###1.代码结构划分 按照 Spring Boot 标准项目结构进行组织-**Controller 层**处理 HTTP 请求的代码放入 controller 包下-**Service 层**业务逻辑代码放入 service 包下如有必要可进一步分为 service.impl-**常量类**常量定义集中放入 constant 包下-**配置类**可抽离的配置如 Bean 定义、属性加载等放入 config 包下-**其他**根据实际情况可能需要 model实体/DTO、utils工具类等按 Spring Boot 惯例放置 ###2.日志记录-使用**SLF4J**作为日志门面具体实现推荐**Logback**-日志配置文件如 logback-spring.xml放置在 src/main/resources 下-日志输出路径项目根目录下的 logs/app.log-建议按日期或大小滚动保留适当历史-控制台输出可保留用于开发环境 ###3.注释规范-所有代码注释使用**中文**便于团队维护-关键类、方法、字段一定要添加清晰的功能说明及必要的参数/返回值注释 ###4.工程化管理目标-代码层次分明职责单一-配置外部化使用 application.properties-遵循 Spring Boot 约定便于后续集成测试、部署与扩展-遵循 REST API接口的约定 ## 交付成果 请输出完整的项目代码结构包含-按上述包结构组织的 Java 文件-配置文件日志配置、应用配置等-如有必要提供 pom.xml 依赖说明-不要修改RecognizeVideoCastCrewList 类和 GetAsyncJobResult 类只需重新生成其他类即可-先不着急写代码先分析和理解我的问题。注意请先认真阅读并理解原始阿里云示例代码的功能与逻辑再进行重构。这是一个有经验的大佬写的提示词但是其是可以复用的就算在座的你写不出来也没有关系可以让AI来帮助写这个提示词前提就是这已经是一个完整的springboot项目了你找一个这样的专业人员完成的完整springboot项目然后让AI倒推根据当前完整的项目写一个提示词然后把提示词拿出来只改任务目标部分看清楚有哪些类哪些ID把这些内容进行改动就可以了下面的部分完全不用动这样vibeCoding的模式就出来了我们可以先用没那么精准的沟通方式让AI做项目经过一些时间之后项目做出来了可以回过头来让它把整个项目精炼出专业的提示词。以便下次复用只要是springboot项目都可以引用我上面的提示词所以归根结底Vibe Coding本质是自然语言没有问题但并不是真的大白话不存在不懂技术就可以靠大白话做项目的说法这是一定要有一定技术基础才可以玩起来的东西就像图示代码必须要理解每一个代码文件最终返回了什么又需要什么接下来我就把这段提示词复制进入Trae点击新建任务把提示词放入输入框扔给AI让它先做等代码写好之后就会生成一份配置文件每次配置一些信息的时候直接在配置文件配置即可不需要去每一份代码里都做改动了我依旧一键进行代码审查代码就不看了接下来把要填的信息填入这个配置文件接下来我们把前端界面写出来再运行项目三、前端代码编写效果如下3.1 提示词编写## 目标要求1上传本地的单个视频的功能2上传之后点击按钮进行视频解析3解析完成后后端会把阿里云生成的异步调用后的响应结果以 JSON 的形式返回。4前端必须先熟悉后端返回的 JSON 结构然后才能更正确的解析这个 JSON 文件5字段 subtitlesChineseResultsUrl 和 subtitlesEnglishResultsUrl 在返回 JSON 的 body.Data.Result 中这是一个 JSON 字符串需要先解析它。解析后的结构是{subtitlesResults:[{subtitlesChineseResultsUrl,subtitlesEnglishResultsUrl}]}具体路径是 body.Data.Result.subtitlesResults[0].subtitlesChineseResultsUrl 和 body.Data.Result.subtitlesResults[0].subtitlesEnglishResultsUrl对应的分别是中文字幕识别对应的标准 SRT 格式文件下载地址和英文字幕识别对应的标准 SRT 格式文件下载地址。这2个都是链接这2个链接可以显示在页面上用户点击下载按钮就可以下载对应的字幕文件文件格式为 SRT 格式。 其它情况1为了更好的打通前后端的交互必要情况下可以修改后端的代码2前后端做好统一响应可以利用ResponseEntity处理。3前端采用 HTMLCSSJavaScript 的技术栈页面一定要美观因为你是专业的前端4需要在控制台输出的同时前端页面也要展示后端返回给前端的响应数据。方便用户校验。有兄弟看到这就懵逼了因为写前端还需要前面第二篇文章所提到的该界面的各种参数的我们最终要解析的数据就是这些返回数据有兄弟说这个解析后的结构后面一大堆东西我不会描述没有关系。根据我的实测你甚至不需要说字段因为AI很擅长写前端你只需要告诉他你的目标要求然后告诉他你要解析的数据是subtitlesChineseResultsUrl和subtitlesEnglishResultsUrl里面的数据就可它也是可以完成的我这里之所以写的很详细是因为第二篇文章的最后Java Run在终端输出结果了我们也可以把那个结果复制出来然后告诉AI我想描述一下我要哪两个字段让它帮准确你描述一下此时它就会告诉你怎么描述然后把它描述的东西拿出来就可以放到提示词里面了但是这一步始终都要看清楚返回结果的包含结构甚至于我们可以把图片中的所有内容都展开截一个图发给AI告诉它前端要哪两个字段subtitlesChineseResultsUrl和subtitlesEnglishResultsUrl中文字幕和英文字幕让它帮你用大白话描述一下也是可以的这也就是这部分写前端的唯一的难点了然后接着把提示词复制新建一个任务发给AI让它去写前端就好了同样的中间出现什么问题都可以把报错信息发给他让它自己解决现在AI做完了我们可以看到文件现在最大允许上传的大小是500MB这个是可以自己改的打开它所给的网址可以看出这个前端页面做的也还可以我们从浏览器打开把示例视频拖拽进去给它让它解析一下看看具体效果如何下面的**后端响应数据 (JSON)**就是后端返回给前端的所有内容这个折叠显示组件是我自己让AI做的大家都一样有好的想法都可以让AI实现也可以反过头来把这些内容全部复制扔给AI为AI解析图中所框选的字段怎么解析用大白话描述这些内容在第二篇文章搭建后端的时候也打印过补充一个点如果你的项目做的有问题而AI只修改了前端修改之后项目是不需要重新启动的刷新一下网页就可以了这样整个视频字幕提取的项目就全部OK了如果你觉得这个界面不好看也可以把自己的想法告诉它来改但是想必都听说过AI幻觉这个词也就是如果你的描述模糊不清它就会擅作主张改你的代码这其中就会有改错的可能所以如果你后续想和AI交互的时候就可以这样说当前项目没有任何问题按当前界面的功能也没问题现在不改变当前前端的任何功能的情况下只修改页面的美观性。前提你是一个专业的前端工程师美学师四、前后端测试netstat-ano|findstr:8080taskkill/F/PID50164这里补充一个端口被占用问题的解决办法不过这一块是需要懂技术的所以我把办法摆在这里可以看懂的就懂了看不懂也没关系还是那句话出问题了把报错信息扔给AI让它自己解决结语