← 返回首页
基于JoyCode的全栈开发探索与实践 | JoyCode
Skip to main content
JoyCode功能案例文档插件
下载 IDE
On this page

基于JoyCode的全栈开发探索与实践

一、引言#

软件开发已经进入了新的时代，前后端之间的壁垒逐渐消解。软件开发工程师应该具备更全面的知识体系、更强的岗位、业务适应能力。而AI coding的能力现在愈发强大，使用自然语言的描述，现在的大模型就能给出一份完整的代码；依托公司JoyCode平台的技术支持，我们可进一步探索基于大模型的全栈开发实践路径。

二、概要#

抱着借助JoyCode进行全栈开发实践的想法，本文在“标准化巡检打分”这一需求上进行了从端到端的全链路JoyCode辅助开发的实践。该需求旨在实现以下核心功能：1）支持终端管理人员对站点标准化程度进行线上评分；2）提供问题整改及复审闭环管理；3）允许配置标准化检查项与审核人员权限。

使用JoyCode进行全栈开发的总流程如下，全程依托JoyCode进行代码生成，通过多轮对话迭代优化AI输出结果，并结合必要的人工微调，最终完成了“标准化巡检打分”这一需求的全栈开发。

人工开发 前后端合计 工时：51人日，采用大模型辅助开发，工时：23人日，整体提效28/51 = 54.90%。

人工开发排期甘特图

JoyCode辅助开发排期甘特图

三、实施内容#

本文以“标准化巡检打分”需求的一个接口为例，展示使用JoyCode辅助进行全栈开发的实践流程。

本文所使用的工具为JoyCode模型为Claude4-sonnet

1. PRD分析#

prompt输入：#

0327-NY-【标准化】-标准化巡检打分PRD你是一名全栈架构师，以上是标准化巡检打分的prd，帮我根据这个prd，生成一个关键设计说明。Copy

JoyCode输出：#

关键设计说明

  1. 权限体系设计

    • 动态权限加载：通过青龙接口实时获取用户角色权限
    • 三级权限控制：
      • 功能入口级（京ME/站长工作台）
      • 页面级（巡检/审核/整改视图）
      • 操作级（提交/驳回/配置权限）
    • 跨省区拦截：通过组织机构编码校验属地规则

  2. 状态机设计

  3. 核心模块设计要点

    1. 巡检打分模块
    • 动态表单生成：根据BZHY/BZHE编号动态渲染评分项
    • AI集成标记：对标记"是否应用AI"的项增加智能识别入口
    • 双校验机制：
      • 前端实时计算总分（不超过100分）
      • 后端提交二次校验
    1. 任务配置模块
    2. 得分计算模块
      • 实时得分预览：展示当前巡检得分影响链（站点→片区→省区→集团）
      • 虚拟站点处理：未巡检站点得分按省区平均分特殊计算规则
      • 双倍扣分警示：对超时未处理项标红显示

  4. 消息机制设计

    • 分级推送策略：

  5. 需要特别注意的PRD细节：

    • 角色权限表需要建立映射字典（ERP角色 ↔ 前端权限标识）
    • 时间计算需考虑闰年等边界条件
    • 组织机构编码校验需支持正式/虚拟机构双模式
    • AI检测结果与人工评分的数据融合策略

2. 技术方案设计#

前端设计prompt输入：#

0327-NY-【标准化】-标准化巡检打分PRD你是一名前端架构师，以上是标准化巡检打分的prd，帮我根据这个prd，生成前端功能流程图。Copy

JoyCode输出：#

根据PRD内容，我为您梳理前端功能流程图如下：

功能流程图（Mermaid语法）

后端设计prompt输入：文字#

生成UML活动图输入： 请协助生成巡检系统的UML活动图； 巡检人员开始巡检 系统获取巡检标准打分项给巡检人 巡检人对打分项打分并提交 系统根据打分结果将不合格项推送至对应站点整改 站点进行整改并提交 系统根据打分项和站点省区随机选取审核人 审核人审核整改并提交生成UML时序图输入： 请协助生成巡检系统的UML时序图； 用户开始巡检，从基础资料获取人员信息和站点信息校验用户是否能够开启巡检 有巡检权限则下发巡检标准打分项 用户根据进行打分，最终提交不合格项给巡检服务 对不合格项进行扣分并推送站点进行整改Copy

JoyCode输出：#

  1. 巡检系统设计的UML活动图
  2. 巡检流程的时序图

基于JoyCode输出的再加工：#

查看生成的uml活动图发现，有两点异常

  1. 巡检人打分时循环评分逻辑异常
  2. 提示词中未描述清楚，审核人审核后应双倍扣分，不会再推重新整改了

prompt输入：#

请检查此处uml代码逻辑 ，并修改审核人审核不通过的处理方式为双倍扣分repeat:巡检人对当前项打分;repeat while (还有未评分项?) is (否)->是;Copy

JoyCode输出：#

3. 编码#

新增巡检页面生成#

prompt输入：#

UI设计图：使用Relay提供的工具，由设计稿转成的静态vue代码这段代码是静态页面代码，请帮我使用flex布局修改成自适应高宽的、列表中的卡片使用v-for动态生成、其中的class名称帮我修改成语义化的类名，不要用mod，cnt这种不可读的

JoyCode输出：#

<template> <div class="inspection-container"> <!-- Fixed Category Navigation --> <div class="category-nav" ref="categoryNav"> <div v-for="category in categories" :key="category.id" class="category-tab" :class="{ 'active': activeCategory === category.id, 'has-failures': hasFailures(category.id) }" @click="scrollToCategory(category.id)" > <span>{{ category.name }}</span> <div v-if="hasFailures(category.id)" class="failure-indicator"></div> </div> </div> <!-- Inspection Content --> <div class="inspection-content" ref="contentContainer" @scroll="handleScroll"> <div class="instructions"> <p>请勾选不合格项并录入不合格原因</p> <p class="hint">点击问号会弹出检查标准页面，并且自动定位到对应标准说明位置</p> </div> <!-- All Categories Displayed --> <div v-for="category in categories" :key="'category-'+category.id" class="inspection-section" :ref="'category-'+category.id" > <div class="category-header"> <h2>{{ category.name }}</h2> <button class="info-button" @click="showStandards(category.id)"> <img src="//img12.360buyimg.com/ling/jfs/t1/287266/15/1006/1042/680f2af9F0a1295c4/c49a82370a53a843.png" alt="Info"> </button> </div> <div v-for="item in category.items" :key="item.id" class="inspection-item" :class="{ 'failed': selectedFailures.includes(item.id) }" @click="toggleFailure(item.id)" > <div class="checkbox"> <div class="checkmark" v-if="selectedFailures.includes(item.id)"></div> </div> <span class="item-name">{{ item.name }}</span> <div class="action-area" v-if="selectedFailures.includes(item.id)"> <span class="reason-text">填写原因</span> <button class="reason-button" @click.stop="showReasonInput(item.id)"> <img src="//img14.360buyimg.com/ling/jfs/t1/282331/7/25786/288/680e4684Fca58754b/f905097e1453955e.png" alt="Edit"> </button> </div> </div> </div> </div> <!-- Footer with Summary --> <footer class="inspection-footer"> <div class="failure-summary"> <span class="count">{{ selectedFailures.length }}</span> <span class="label">项不合格</span> </div> <button class="submit-button" :disabled="selectedFailures.length === 0" @click="submitInspection" > 提交 </button> </footer> </div></template> <script>export default { data() { return { activeCategory: 0, selectedFailures: [], scrollTimeout: null, categories: [ { id: 0, name: '品牌形象', items: [ { id: 'brand-1', name: '门头VI' }, { id: 'brand-2', name: '员工形象' } ] }, { id: 1, name: '场内布局', items: [ { id: 'layout-1', name: '场地布局' }, { id: 'layout-2', name: '功能区规范' }, { id: 'layout-3', name: '路区标识' }, { id: 'layout-4', name: '公告栏配置' }, { id: 'layout-5', name: '海报' }, { id: 'layout-6', name: '警示标识' } ] }, { id: 2, name: '场地6S', items: [ { id: '6s-1', name: '场所环境-卫生' }, { id: '6s-2', name: '场所环境-定位' }, { id: '6s-3', name: '公告张贴' } ] }, { id: 3, name: '场地安全', items: [ { id: 'safety-1', name: '用电规范-充电' }, { id: 'safety-2', name: '用电规范-布线' }, { id: 'safety-3', name: '消防-禁烟' }, { id: 'safety-4', name: '消防-灭火器' } ] }, { id: 4, name: '监控设备', items: [ { id: 'monitor-1', name: '监控设备-LCV联网' }, { id: 'monitor-2', name: '监控设备-覆盖' } ] }, { id: 5, name: '站内作业规范', items: [ { id: 'work-1', name: '暴力操作' }, { id: 'work-2', name: '定置定位' }, { id: 'work-3', name: '日清操作' }, { id: 'work-4', name: '虚假操作' }, { id: 'work-5', name: '异常处置 | 三无' }, { id: 'work-6', name: '异常处置 | 拦截' }, { id: 'work-7', name: '异常处置 | 破损' }, { id: 'work-8', name: '异常处置 | 错到' }, { id: 'work-9', name: '异常处置区 | 码放' }, { id: 'work-10', name: '异常处置区 | 弃件' }, { id: 'work-11', name: '异常处置区 | 报废' }, { id: 'work-12', name: '异常处置区 | 售后' }, { id: 'work-13', name: '派件滞留区 | 仓管-码放' }, { id: 'work-14', name: '派件滞留区 | 仓管-再投' }, { id: 'work-15', name: '派件滞留区 | 小哥-码放' }, { id: 'work-16', name: '派件滞留区 | 小哥-再投' }, { id: 'work-17', name: '发出件暂存区 | 发货' }, { id: 'work-18', name: '发出件暂存区 | 集包' } ] }, { id: 6, name: '耗材管理', items: [ { id: 'supply-1', name: '耗材储备' }, { id: 'supply-2', name: '耗材执行' } ] }, { id: 7, name: '车辆管理', items: [ { id: 'vehicle-1', name: '车体形象' }, { id: 'vehicle-2', name: '车辆停放' }, { id: 'vehicle-3', name: '部件检查 | 后视镜' }, { id: 'vehicle-4', name: '部件检查 | 灯光' }, { id: 'vehicle-5', name: '部件检查 | 制动' }, { id: 'vehicle-6', name: '部件检查 | 喇叭' } ] } ] } }, mounted() { this.setupIntersectionObserver() }, methods: { setupIntersectionObserver() { const options = { root: this.$refs.contentContainer, rootMargin: '0px', threshold: 0.5 } const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const categoryId = parseInt(entry.target.id.split('-')[1]) this.activeCategory = categoryId this.scrollCategoryIntoView(categoryId) } }) }, options) this.categories.forEach(category => { const element = this.$refs[`category-${category.id}`][0] if (element) { observer.observe(element) } }) }, scrollCategoryIntoView(categoryId) { const nav = this.$refs.categoryNav const tabs = nav.querySelectorAll('.category-tab') const activeTab = tabs[categoryId] if (activeTab) { const navWidth = nav.clientWidth const tabLeft = activeTab.offsetLeft const tabWidth = activeTab.clientWidth const scrollLeft = tabLeft - (navWidth - tabWidth) / 2 nav.scrollTo({ left: scrollLeft, behavior: 'smooth' }) } }, scrollToCategory(categoryId) { const element = this.$refs[`category-${categoryId}`][0] if (element) { this.$refs.contentContainer.scrollTo({ top: element.offsetTop - 60, // Adjust for header height behavior: 'smooth' }) } }, handleScroll() { // Debounce scroll events clearTimeout(this.scrollTimeout) this.scrollTimeout = setTimeout(() => { // The intersection observer will handle active category updates }, 50) }, toggleFailure(itemId) { const index = this.selectedFailures.indexOf(itemId) if (index === -1) { this.selectedFailures.push(itemId) } else { this.selectedFailures.splice(index, 1) } }, hasFailures(categoryId) { const category = this.categories.find(c => c.id === categoryId) if (!category) return false return category.items.some(item => this.selectedFailures.includes(item.id)) }, showReasonInput(itemId) { // Implement reason input dialog console.log('Show reason input for:', itemId) }, showStandards(categoryId) { // Implement standards display console.log('Show standards for category:', categoryId) }, submitInspection() { // Implement submission logic console.log('Submitting inspection with failures:', this.selectedFailures) } }}</script> <style scoped> /* 样式省略 */</style>Copy

UI设计稿和大模型实现样式如下所示，左图为UI设计稿，右图为大模型实现的样式。

基于JoyCode输出的再加工：#

生成的代码，未准确实现的滚动联动功能，使用大模型继续完善

再次输入：

将这段代码中的category-nav和inspection-content实现滚动导航功能，参考vant组件<van-tabs v-model="active" scrollspy sticky><van-tab v-for="index in 8" :title="'选项 ' + index">内容 {{ index }}</van-tab></van-tabs>Copy

JoyCode输出的代码正确实现了滚动功能：

巡检标准的数据表及DAO层构建#

prompt输入：#

你是一名熟悉京东技术栈的Java高级架构师，请根据的示例字段和示例数据设计巡检标准化配置表，提供mysql建表语句并生成mybatis的mapper和Gateway文件序号 1..至..43一级编号 BZHY001...至...BZHY008一级指标 品牌形象、场内布局、站内作业规范、场地6S、耗材管理、场地安全、监控设备、车辆管理二级编号 BZHE001...至...BZHE0043二级指标 门头VI分值 3打分标准 有带京东Logo的品牌门头，且符合当前品牌标准、无破损和赃污是否应用AI 是/否审核角色 标准化、作业流程、物资支持、安全支持、车辆支持Copy

JoyCode输出：#

  1. MySQL建表语句

    • 创建了inspection_standard_config.sql文件
    • 包含完整的表结构定义，支持序号、一级/二级编号、指标名称、分值、打分标准、AI应用、审核角色等字段
    • 添加了相应的索引优化查询性能
    • 包含示例数据插入语句

  2. 数据对象DO类

    • InspectionStandardConfigDO.java- 完整的数据对象类
    • 包含所有字段的getter/setter方法和toString方法
    • 使用合适的数据类型（BigDecimal用于分值，Integer用于状态等）

  3. Gateway接口

    • InspectionStandardConfigGateway.java- 数据访问网关接口
    • 提供完整的CRUD操作方法
    • 支持多种查询方式：按ID、序号、编号查询等
    • 支持批量操作

  4. MyBatis Mapper

    • InspectionStandardConfigMapper.java- MyBatis接口
    • InspectionStandardConfigMapper.xml- MyBatis XML映射文件
    • 包含完整的SQL映射配置
    • 支持动态SQL更新和批量插入

  5. Gateway实现类

    • InspectionStandardConfigGatewayImpl.java- Gateway接口实现
    • 使用Spring注解进行依赖注入
    • 完整实现所有接口方法

  6. 技术特点

    • 遵循京东技术栈规范和DDD架构模式
    • 使用MyBatis进行数据持久化
    • 支持分页查询和条件查询
    • 包含完整的审计字段（创建时间、更新时间、操作人等）
    • 数据库设计考虑了性能优化和扩展性

所有代码文件已按照项目结构正确放置，可直接用于生产环境。

Edit this page
Previous
« 一句话需求到高质量PRD
Next
JoyCode IDE 版本变更记录 »
核心产品
快速入门
功能说明
技术支持
实践案例
更新日志
更多推荐
京东云官网
JoyAgent

售前：400-098-8505转1

售后：400-098-8505转2

邮箱：org.joycode1@jd.com