1024的程序员节日马上就要来啦，用我们的话语留下节日祝福吧，又是1年的节日不知道各位对我们未来有什么规划呀？

华为开发者大赛·全国赛区上周成功报名并填写参赛确认书，但本周五（10月17日）并未收到云资源券    

GAUSSDB集中式数据库，是否可以实现指定只对SQL中涉及的某些表使用并行 cid:link_4有哪些图像增强的方法？cid:link_0什么是模型的全量微调？cid:link_1什么是模型量化、剪枝和蒸馏？cid:link_5什么是长尾类别？cid:link_2用干净数据训练出来的模型，为什么上线后总是翻车？应该怎么解决？cid:link_6AI大模型是如何理解图像的？cid:link_7为什么AI模型大都部署在GPU、NPU上，CPU不是也能跑吗？ cid:link_8扩散模型和生成对抗网络哪个好？cid:link_9有哪些好用的视频动作识别算法？cid:link_10模型的输入尺寸与模型的参数量有关系吗？cid:link_11有哪些好用图像拼接算法？cid:link_3H2821e的SLE串口透传sdk开发 cid:link_12通过临时授权url上传文件提示SignatureDoesNotMatch cid:link_13为啥没有测试方案的环节？使用测试设计替换了么cid:link_14  

案例介绍本案例开发一个针对个人对健身的建议咨询，如今时过境迁，很多人都是亚健康的状态，对自己的身体可能有时候能感觉到没有那么友好，没有以前精力那么充沛，想去锻炼，想去健身，但是无从下手。该案例针对的就是这一类人群，让健身不再困难，让身体不再亚健康！案例内容1). 概述1.1 概述Astro低代码开发平台核心定位：华为云推出的全场景可视化应用开发平台，通过拖拽组件、模板化设计和自动化流程，大幅降低开发门槛，流程，大幅降低开发门槛，助力快速构建Web、移动端、大屏等应用核心优势：高效开发支持零代码/低代码模式，业务人员可直接参与开发，无需深厚编程基础预置丰富组件（表单、流程引擎、数据看板等），10倍提升应用搭建效率全场景覆盖覆盖轻应用、工作流、可视化大屏、企业级系统开发，支持多终端适配智能集成内置AI助手，支持自然语言生成应用界面；提供大模型连接器，一键接入DeepSeek等10+主流AI模型企业级能力支持权限分级、数据安全管控、私有化部署，满足大型企业需求适用场景：OA审批、数据可视化、轻量级业务系统数据可视化、轻量级业务系统（如个人健身建议应用）MaaS（Model as a Service）核心定位：华为云ModelArts提供的“大模型即服务”，集成开源与自研大模型，提供从开发到部署的一站式AI能力核心优势：开箱即用预置99%主流开源大模型（如DeepSeek-V3），免配置调优，分钟级部署全生命周期工具链支持模型调优、压缩、部署、评测，降低AI应用开发难度灵活集成通过API快速对接应用（如Astro平台），结合RAG、Agent等组件构建智能体低成本体验提供免费额度（如ModelArts免费tokens），适合个人开发者和小型项目验证典型应用：智能对话助手、知识库问答、行业解决方案（如健身建议中的个性化模型调用）Astro与MaaS的协同价值Astro快速搭建用户界面与流程，集成健康数据输入表单MaaS提供DeepSeek模型API，生成个性化健身方案两者结合，实现了“低代码搭台+AI智能决策”的轻量化智能应用模式。轻量化智能应用模式。1.2 适用对象企业个人开发者高校学生1.3 案例流程说明：领取华为开发者空间，登录华为开发者空间-低代码应用开发平台；新建低代码应用，进入Astro轻应用服务控制台主页，开发应用；1.4 资源总览华为开发者空间 - 低代码应用开发平台华为云 MaaS 提供的免费 DeepSeek-R1 || DeepSeek-V32). 环境准备2.1 领取免费 Deepseek-R1 满血版华为云提供了单模型 200 万免费 Tokens，包含 DeepSeek-R1&V3 满血版，我们可以登录华为云 ModelArts Studio(MaaS) 控制台领取免费额度，这里我们选择 DeepSeek-R1 满血版。用火狐浏览器访问ModelArts Studio首页：https://www.huaweicloud.com/product/modelarts/studio.html点击 ModelArts Studio 控制台跳转到登录界面，按照登录界面提示登录，即可进入 ModelArts Studio控制台。进入控制台之后该登录登录免责声明该同意同意区域选择 “西南-贵阳一”，左侧菜单栏：选择在线推理右边主内容：预置服务 > 免费服务，选择 DeepSeek-R1-32K 模型，点击领取额度，领取 200 万免费 token。然后点击旁边的调用说明，即可看到响应的 API 地址以及模型名称（后面会用到）点击上图中 “API Key 管理”创建 API Key，自定义标签和描述，点击确定创建 API Key。（注意保存好 API Key ）到这里华为云MaaS提供的免费DeepSeek Tokens就领取完成啦，记录对应的API地址、模型名称、API Key留作下面步骤使用。2.2 创建低代码应用华为开发者空间-低代码应用开发平台是华为云推出的一款可视化应用开发平台，旨在通过"拖拽式"组件和模板化设计，降低开发门槛，提升企业数字化应用构建效率。平台主要特点包括：可视化开发：通过图形化界面和预置组件，无需编写复杂代码即可快速搭建应用；全场景支持：覆盖Web、移动端、大屏等多终端应用开发；高效集成：内置连接器可快速对接华为云及其他主流企业系统；智能辅助：提供AI辅助开发能力，如智能表单生成、流程自动化等；企业级能力：具备权限管理、数据安全、高可用等企业所需特性；登录华为开发者空间: https://developer.huaweicloud.com/space/home，在左侧菜单列表选择华为开发者空间 -> 开发平台 -> Astro 低代码开发，进入华为开发者空间-低代码应用开发平台。第一次进入的时候会弹出一个框让你填写命名空间！注：命名空间为租户数据唯一标识，为免重复，首次创建或使用工程时需定义命名空间。请务必慎重，一旦定义，不可修改，推荐使用公司前缀。本案例中使用 xiaoxia 作为命名空间。在右侧弹出的新建空白应用配置页签中，配置应用名称填 Test，标签填 健身计划。这些都可以自定义，有助于自己分辨项目即可。点击右下角确认按钮，平台会自动打开一个新的页面：Astro轻应用服务控制台。注：在点击确认后，在 Astro 轻应用管理页会同时新增一条刚才创建的名称为 xiaoxia__Test 的应用，点击编辑同样可以进入 Astro 轻应用服务控制台。至此，环境安装完成了，接下来我们就可以对咱们的项目进行开发3). 开发项目3.1 添加调查表记录对象首先我们的第一件事，就是先创建好对象！！这个很重要，开发之前一定要确定好数据结构，尽量避免边开发边设计数据结构，因为后续步骤如果页面绑定了模型、数据源之后再重新修改对象的话就需要重新解绑所有的东西再创建模型再重新绑定！这就会导致非常麻烦！！！！！点击左侧栏 数据 -> 对象旁边的 " + " 号 -> 创建新对象对象名称 以及唯一标识可以自定义，推荐跟笔者一样，因为后续用到的时候如果自定义如果分不清的话就会很麻烦，后续笔者也会根据标题提醒创建好新对象之后点击新对象旁边的笔触小按钮，对对象进行操作然后点击添加，给对象添加字段以下是笔者添加的字段，可以自行增加或者减少：显示名称 – 唯一标识 – 字段类型当前身高 – now_height – 数字当前体重 – now_weight – 数字当前体脂 – now_body_fat – 数字性别 – sex – 文本健身的目的 – purpose – 文本区每天花费时间 – time – 文本目标体重 – target_weight – 数字目标体脂 – target_body_fat – 数字建议 – suggestion – 文本区注意！！ 由于 健身的目的 我们页面中是打算用一个多选框来进行选择，请务必把字段 purpose 设置成 “文本区”，不要设置成 “文本”！ 目前不知道是为什么出现一些比较奇怪的报错！后续笔者会提到。3.2 添加全局结构体点击左侧侧边栏中 数据 -> 结构体旁边的 ‘+’ 号 进行添加新的结构体名称 跟 唯一标识 可以自定义，笔者这里用 Message 为例，后续如果用到的话，笔者依旧会提醒，注意即可然后点击 结构 -> 结构体旁边的笔触按钮 对结构体进行修改点击添加 给结构体添加详情按图下添加即可名称可以自定义，后续用到笔者会提保存成功之后就可以去开发页面啦！3.3 开发页面点击左侧侧边栏 -> 界面 -> 页面旁边的 ‘+’ 号按钮 进行添加页面标签名称尽量保持一致，亦可以自定义，后续用到笔者会说明。第一步，先直接把表单拖拽到页面中，拖拽进去之后会弹出一个向导，直接取消即可然后点击表单 -> 右边的侧边栏 -> 数据绑定右边的小设置按钮 来绑定数据源点击新增模型 -> 填写 模型名称 -> 来源选择 对象选择 3.1 创建的对象，并且把字段全部勾选，然后下一步，然后直接确定即可创建完模型之后直接勾选，将其绑定在该表单上绑定之后我们选择，只绑定模型，然后我们自己来构建页面，因为如果选择 绑定并生成表单的话，他生成只有一些 Input 标签，我们依然需要重新布局，相比重头开始会更加的麻烦！这个表单就相当于我们的容器，我们接下来所有的组件都放在该表单中我们把标题拖拽到表单中标题的内容 样式 等等都可以自定义，根据自己的喜好来即可如果需要多语言 可以点击旁边的“地球”按钮来设置多语言！然后添加图片，同理把图片拖拽到表单中，注意不要拖拽到外层页面了噢添加图片前要记得把图片上传噢，或者直接给链接样式也是可以自己喜欢就好再给页面添加一个 二级标题 让页面看起来更加的丰富多彩然后我们在一行中添加两个"数字"输入框分别对应 当前身高 当前体重 （因为我们之前设置的字段 身高 体重 都是数字类型，如果填的是 文本 类型的话就选择输入框即可！）先拖一个输数字入框 然后再拖另外一个数字输入框 在先前数字输入框的旁边 即可让他们处于同一行页面操作非常的简单，样式自己调试也快捷方便，如果想学习到更多的知识，建议可以尝试着自己去设置，自己去玩一下。接下来添加 健身目的 复选按钮里边的内容可以自己想 自己填写，包括按钮的选项，必填错误信息，样式等等…然后到 每天愿意花的时间 单选按钮然后可以添加一个分隔行笔者这里是添加一个 Markdown 卡片，然后内容填写 --- 即可分隔最后再添加一个提交按钮 以及 两个 数字 输入框 来让用户填写 目标体重 以及 目标体脂 即可！3.4 给各个组件绑定数据源单击需要绑定数据源的组件 -> 右边侧边栏数据绑定 -> 小设置按钮一个个的给他们绑定好数据源比如说：当前身高 -> xiaoxia_now_height__CST当前体重 -> xiaoxia_now_weight__CST只需要一一对应即可，对应之前创建对象中的命名噢！suggestion 暂时不需要绑定，这是 Page2 需要用到的注意，之前创建对象的时候说到的，需要优先确定好数据结构，已经创建好对象，然后现在再绑定！如果！！！！！！！一个个绑定好数据源之后，再修改对象的话现在需要重新一个个解绑，然后删除模型，再重新创建模型，再重新绑定！！！！！ 根据 3.3 重新创建一个 Page2并且里边的多行输入框数据绑定的是 xiaoxia__suggestion__CST3.5 集成 MaaS 云平台首先我们来创建连接器实例右边侧边栏 集成 -> 连接器实例 -> 大模型（ MaaS 云平台 ） -> ‘+’ 号按钮注意，模型名称 以及 APIKey 皆由 2.1 中领取的，请对内容进行复制！不要手动输入！！！创建成功之后 点击 测试，随便输入什么东西进行测试即可如果报错，请检查填写的 apiKey 以及 模型名称是否正确！！！接下来我们添加逻辑点击左侧侧边栏逻辑 -> 编排 -> 新建编排然后点屏幕上的元数据 -> 基本信息 -> 全局上下文 -> 添加变量以及对象变量添加一个 input 变量、 一个 output 变量input 变量类型为 文本ouput 变量类型为 任意然后添加 对象变量全局结构体选择的是之前 3.2 中创建的全局结构体，命名跟笔者不一样也不用慌添加所需图元：点击画布上的开始图元，点击参数，将刚才创建的变量分别拖进入参和出参：选择左侧赋值图元，拖入界面，并将开始图元与赋值图元连接：选择赋值图元，点击赋值按钮，将变量赋值，第一行为刚才的全局结构体变量名称“messages[0].role”，我们将值设置为"user"(要用英文双引号)，第二行为全局结构体变量名称“messages[0].content”，变量值可直接将变量中的input拖入：左侧选择连接器 - 自定义连接器，选择前面步骤我们创建的连接器。将其拖拽进页面，并将赋值图元与连接图元连接：选择连接器按钮，将连接器的入参message为对象变量message拖拽入，输出参数result为变量output拖拽：设置好之后保存，并且进行测试进入到测试页面之后输入参数一定要正确！！！双引号不要忘了 而且 注意是英文的双引号！！！！如果出现图下，则证明逻辑没有问题，就已经集成成功啦！3.6 完善页面事件给 Page1 中的按钮 添加点击事件// 表单校验 var _form = context.$component.form; var validFlag = _form.formValidateUnPromise(); if (!validFlag) return false; const modelName = 'test' const namespace = 'xiaoxia__' const suffix = '__CST' const model = $model.ref(modelName) const getDataByName = (name) => formData[`${namespace + name + suffix}`] const formData = model.getData(); const formDataCopy = {...formData} const text = `本人性别${getDataByName('sex')}，当前身高为：${getDataByName('now_height')} cm，当前体重为：${getDataByName('now_weight')} kg，当前体脂为：${getDataByName('now_body_fat')} %，健身的目的：${getDataByName('purpose').join('，')}，每天愿意花的时间为：${getDataByName('time')}，健身后目标的体重为：${getDataByName('target_weight')} kg，健身后目标的体脂为：${getDataByName('target_body_fat')} %，请你根据以上的信息给我一个健身的建议！请你保证你的建议合理，谢谢你的帮助！` var _flow = context.flow("xiaoxia__ds"); // 调用AI服务获取建议 try { // 提示信息 context.$message.info("信息分析中，正在生成建议。。。。。。"); const resp = await _flow.run({ input: text }); const reader = resp.body.getReader(); const decoder = new TextDecoder(); let buffer = ''; let msg = ''; while (true) { const { done, value } = await reader.read(); if (done) break; buffer += decoder.decode(value); const lines = buffer.split('\n'); // 保留最后一行（可能不完整） buffer = lines.pop() || ''; for (const line of lines) { if (!line.trim()) continue; try { const jsonStr = line.startsWith('data: ') ? line.substring(6) : line; if (jsonStr.trim() === '[DONE]') continue; const obj = JSON.parse(jsonStr); const newMsg = obj?.choices[0]?.delta?.content || ''; if (newMsg) msg += newMsg; } catch (err) { console.warn('解析JSON失败，保留到下一轮处理:', err.message); buffer = line + '\n' + buffer; } } } // 最终保存结果 formDataCopy.xiaoxia__suggestion__CST = msg; formDataCopy[namespace + 'purpose' + suffix] = formData[namespace + 'purpose' + suffix].join(',') model.setData(formDataCopy); // 提交数据 const saveResult = await model.save(); if (saveResult.resCode == 0) { const recordId = saveResult.result[0]?.id; if (recordId) { context.$page.loadStdPage('xiaoxia__Page2', "recordId=" + recordId); // 成功消息 context.$message.success('生成成功'); } } } catch (error) { context.$message.error('AI 服务调用失败：', error); } 注意参数！！！！！！！const modelName = ‘test’const namespace = ‘xiaoxia__’const suffix = ‘__CST’const text = `本人性别getDataByName(′sex′)，当前身高为：{getDataByName('sex')}，当前身高为：getDataByName(′sex′)，当前身高为：{getDataByName(‘now_height’)} cm，当前体重为：getDataByName(′nowweight′)kg，当前体脂为：{getDataByName('now_weight')} kg，当前体脂为：getDataByName(′noww​eight′)kg，当前体脂为：{getDataByName(‘now_body_fat’)} %，健身的目的：getDataByName(′purpose′).join(′，′)，每天愿意花的时间为：{getDataByName('purpose').join('，')}，每天愿意花的时间为：getDataByName(′purpose′).join(′，′)，每天愿意花的时间为：{getDataByName(‘time’)}，健身后目标的体重为：getDataByName(′targetweight′)kg，健身后目标的体脂为：{getDataByName('target_weight')} kg，健身后目标的体脂为：getDataByName(′targetw​eight′)kg，健身后目标的体脂为：{getDataByName(‘target_body_fat’)} %，请你根据以上的信息给我一个健身的建议！请你保证你的建议合理，谢谢你的帮助！`var _flow = context.flow(“xiaoxia__ds”);formDataCopy.xiaoxia__suggestion__CST = msg;formDataCopy[namespace + ‘purpose’ + suffix] = formData[namespace + ‘purpose’ + suffix].join(‘,’)注意替换里边的 modelName namespace 字段名等参数（ 如果是你自定义的话 ）然后到 Page2点击导航栏中的页面 -> 事件 -> 加载 旁边的 ‘+’ 按钮 添加加载事件// var a = 1; // console.log('test', a); function parseJSON(str) { var flag = false; try { JSON.parse(str); flag = true } catch (err) { flag = false; } return flag; } var recordId = context.$page.params.recordId; if (!recordId) return; try { // 获取data model = model_1实例的数据 var _object = context.object('xiaoxia__testForm__CST'); // 查询满足条件数据 var _condition = { conjunction: 'AND', conditions: [{ field: 'id', operator: 'eq', value: recordId }] }; const res = await _object.query(_condition); if (res.resCode !== '0' || !res.result || res.result.length === 0) return; const data = res.result[0]; // 解析JSON字符串字段 Object.keys(data).forEach(item => { if (data[item] && parseJSON(data[item])) { try { const parsed = JSON.parse(data[item]); data[item] = parsed; } catch (e) { // 不是有效JSON，保持原值 } } }); $model.ref("test").setData(data); } catch (err) { console.error("数据查询或处理失败:", err); } 注意参数！！！var _object = context.object(‘xiaoxia__testForm__CST’);这里填的是你之前创建对象的时候那个对象名！！！！如果跟笔者一样的话可以不需要改！事件添加完成之后保存回到 Page1 进行测试！点击预览之后进到我们开发的页面填写必填数据，如果有未填的话，到最后提交的时候会校验的！填完之后点击提交信息分析中，正在生成建议。。。。。。等待一小段时间之后就会跳转到 Page2跳转之后就能看到 AI 的数据至此案例已经全部完成！！如果还有疑问欢迎私信笔者噢让我们一起进步！4. 总结本项目利用华为云Astro低代码平台和MaaS（Model as a Service）大模型技术，构建了一个精准的个人健身建议咨询应用。Astro优势： 显著降低开发门槛，通过可视化拖拽快速搭建应用界面和流程，省时省力。MaaS优势： 直接调用云上强大的预训练大模型API，省去自研AI模型的巨大投入，轻松获得智能分析和个性化建议能力。项目成功结合两者优势，实现了基于用户数据的个性化健身分析与建议生成。笔者认为项目可以更加的完善，数据更丰富点： 能接入更多健康设备数据（如手环、体脂秤），建议会更准。交互再友好点： 让用户输入目标、反馈感受更方便，比如语音或更简单的表单。展示更直观点： 建议的动作最好配上示范视频或动图，用户照着练更不容易出错。反馈更实时点： 如果能用摄像头实时指导动作标准度就更棒了（这需要更强的模型和硬件支持）。当然如果有时间的话，可以对功能的实现进行更多样性的开发，让项目更加得完善，更加的接近生活！学无止境，希望看到这里的同学能够在以后的时间多花点时间学习，跟笔者一起成长，一起进步，共勉。我正在参加【案例共创】第7期 基于MaaS商用服务 + 华为开发者空间 - Astro 低代码开发平台构建低代码应用 https://bbs.huaweicloud.com/forum/thread-0232192246736262012-1-1.html?fid=557

华为开发者空间携手HCSD校园大使助力全国高校“百团大战”！不仅为高校开发者基于“华为开发者空间”提供云开发环境、AI Notebook等平台工具，更有千元开发者定制好礼，快叫上小伙伴一起来参加吧~ 【活动流程】① 点击报名 →  ② 提交活动策划方案 → ③ 活动执行 → ④ 活动验收备注：活动方案：格式不限，需包含社团情况介绍，活动策划方案（含开发者空间推广方案）等。活动验收：提交活动总结报告，并在HCSD社区论坛发布活动组织心得或简报。 【参与条件】1.参与形式：HCSD校园大使在社团活动、学生会、各协会及班级/年级群等组织，策划落地。2.参与资格：已加入华为云学生开发者计划（HCSD）的校园大使，非HCSD校园大使可立即至官网申请加入。3.支持名额有限，以完成活动验收的次序进行支持。 【活动激励】1.众多奖品可供选择，华为音箱、体脂称、手环，更有开发者双肩包、冲锋衣、云宝盲盒等好礼，线下推广易拉宝，宣传单页等物料。可用于社团招新、活动推广、社员福利等场景。（其中线下物料可预支申领）2.活动覆盖人数达百人的，可支持累计价值千元的奖品；单次活动累计奖品价值最高为三千元；具体奖品支持数量视活动覆盖人数及社团规模而定。3.校园大使晋级激励：参与完成活动，可在年度优秀校园大使评选中作为加分项。具体活动细则见HCSD校园大使官方社群 部分奖品实物图如下~

本次产品体验官活动获奖名单如下：一、有效建议奖：昵称建议分值奖项礼品yd_28463775010有效建议奖第一名1000元开发者定制礼品给无眠点压力9有效建议奖第二名800元开发者定制礼品小草飞上天3.5有效建议奖第三名500元开发者定制礼品二、优质建议奖：无恭喜以上3名获奖用户，请获奖用户通过以下问卷反馈奖品收件信息（10月30日前反馈有效），感谢大家对云声平台的关注和支持~ 华为开发者空间已经上线一年多啦！在这一年多的时间里，我们不断成长，不断丰富产品能力，目前已经拥有上百万用户；我们有多形态的云上开发环境，开发者可通过各类终端远程访问云端资源，还能无缝对接 VS Code、PyCharm 等主流 IDE，支持多种开发工具链与框架；我们有AI智能体开发平台，支持低代码/零代码对话式Agent开发，提供常用模板，快速构建各类职能Agent；我们还有低代码Astro平台、云函数FunctionGraph、AI Notebook等一系列平台与工具；同时提供各种免费资源，如GaussDB领取、tokens领取等等；面对开发者空间的成长与变化，作为开发者的您是怎么看的呢？您又希望开发者空间提供哪些能力？大家可以针对开发者空间的使用感受，问题bug，优化建议，未来方向，提出宝贵意见；提交建议还可以领取开发者礼包，包括但不限于华为耳机、手环等好礼；快叫上小伙伴一起提建议吧~ 【实践项目】登录华为开发者空间，实践任意项目皆可。建议种类不限，可以是：产品bug、使用体验、对产品未来功能与形态的建议等等。 【活动时间】2025年9月9日-10月8日 【参与方式】01 体验开发者空间   》   02 去云声平台提建议    》  03 建议评估公示  》   04 获奖公示（活动结束后两周内） ps：建议标题需要以“开发者空间体验官”开头 【奖项设置】奖项设置评选条件获奖名额激励礼品有效建议奖1、有效建议数量不少于2条，有效建议由内部技术专家评审得出2、建议内容需针对上述实践项目3、有效建议中有不低于一条是关于功能建议的3名积分榜第1名：1000元礼品/人积分榜第2名：800元礼品/人积分榜第3名：500元礼品/人优质建议奖1、优质有效建议不少于1条，由内部技术专家评审选出10名每人100-200元开发者定制礼品【活动说明】1、建议预审通过即为有效建议，其中1条有效功能类建议为1分，1条有效体验类建议为0.5分，1条有效Bug类建议0.5分；有效建议奖与优质建议奖不可叠加2、建议提交时需要在标题中以“【开发者空间体验官】”为建议标题开头，比如【开发者空间体验官】开发者空间增加XX/优化XX/导入XX等3、建议内容仅针对以上实践项目中“开发平台功能体验+开发平台案例体验”涉及的云产品，非以上实践项目涉及产品建议内容不参与此活动4、优质建议要求建议对云产品功能及优化改进有重要作用，优先从已被采纳的建议的选择；建议内容需要表述清晰，有明确的建议方案，最好有操作截图或链接等能进一步详细描述；高价值建议数量不限，且与有效建议奖可叠加，每位用户每月最多可获得一次。5、注意事项1）若出现积分相同且排名一致的情况，结合已实现和已采纳建议情况，由内部技术专家选出价值更高的建议用户给予奖励2）同一用户在同一页面（文档）提出的同一类用户体验问题（包括但不限于错别字、语句不通顺、视觉体验等），在通过审核后仅算作一条有效建议数3）若发现代他人提交优化建议，此建议分值只取原分值30%；若发现2次及以上重复提交他人建议，或3次及以上重复提交体验类相关建议进行恶意刷量（包括但不限于错别字、语句不通顺、视觉体验等），取消本人活动参与资格；在活动截止日前进行大量刷屏提交建议，或者重复提交同类型体验建议，直接取消活动参与资格4）以上兑换礼品均为仓库现有实物礼品，有货的情况下优先满足，其中1-3名可优先选择华为自营品牌电子礼品，礼品价值不能超过商品原价，无货则不可以指定，如遇商品缺货，将随机换成其他等价值礼品发放5）此【开发者空间体验官】与云声月度例行激励活动不叠加，若标题无【开发者空间体验官】标记，则有效建议默认参与月度例行激励

各位亲爱的版主们，大家好！经过大家一个月的努力角逐，8月外部版主激励评比结果已出炉，数据公示如下，请查看！（在新标签页打开图片可查看清晰大图/见附件）·外部版主激励规则：点击了解更多转正礼/基础任务/额外任务（在线时长15小时+，主题帖15+，回帖30+，技术长文5+/原创技术干货1+，合集1+，有效回复问题求助帖10+，话题互动1+，完成这4项指标可获对应价值的代金券/实物礼品）请完成任务获得激励的版主，点击填写激励发放意愿统计问卷反馈截止时间：2025年9月17日，以便小编进行相应的激励发放。 注：在线时长数据达标后，才会再去考察达标版主的三项任务完成情况；主题数+回帖数达标后，才会再去考察达标版主的技术长文数量情况。 

 产品已提供在线申请，有镜像分享需求开发者，请在“我的镜像”页面右上角，点击申请分享权限，白名单内测关闭。  华为开发者空间云主机镜像分享能力开始内测啦,从此后我们可以自己制作云主机镜像，并分享给他人使用了！即日起,只需要提交问卷,提供华为云账号的domainid( 账号ID)和iamid(IAM用户ID),审核通过后就可以抢先体验空间云主机镜像分享能力,赶快报名吧! domainid与iamid获取路径：华为云账号中心——我的凭证（鼠标悬浮右上角账号）——即可找到“IAM用户ID”与“账号ID”  点击此处报名：报名链接 点击此处查看使用指导：使用指导

【浅谈】CNN在小样本学习中存在哪些局限？cid:link_0【浅谈】为什么深层CNN容易出现梯度消失问题cid:link_3【浅谈】在医学图像中，CNN如何实现病灶自动检测cid:link_1【浅谈】为什么轻量化CNN对移动端应用非常重要cid:link_4【浅谈】卷积神经网络能否有效处理序列数据cid:link_5【浅谈】为什么深度CNN容易过拟合cid:link_6【浅谈】卷积神经网络未来可能会在哪些方向突破cid:link_7【浅谈】为什么多尺度特征对目标检测中的CNN很重要cid:link_2【浅谈】如何解释CNN中每一层学到的特征cid:link_8【浅谈】在CNN中引入残差结构的优势是什么cid:link_9  

我在通过4门微认证后立刻填写了领取优惠券的问卷，并没有等待到第二天，所以没有领取成功，但是我想重新填写问卷的时候，他自动重定向到其他地址去了。请问我还能申领优惠券吗

余年方十七，习编程已有数载，虽非初学，然深知学无止境，技艺之精进，如逆水行舟，不进则退。 技艺渐精 昔日初学时，常为类型错误而苦恼，今已能熟练运用多种语言。ts之强大，Python之优雅，前端三剑客之灵动，后端框架之稳健，皆有所涉猎。数据结构与算法，亦略有心得，排序查找，动态规划，虽不敢言精通，然基本功底尚算扎实。 项目实战 近年来，陆续完成数个项目：网站开发、移动应用、数据分析工具等。每一次从需求分析到架构设计，从编码实现到测试部署，皆亲力亲为。虽过程艰辛，然收获颇丰。始知纸上谈兵易，实际开发难。用户体验、性能优化、代码维护，诸般考量，方显编程之深奥。 开源贡献 偶有小作，贡献于开源社区，虽微不足道，然能为他人所用，心甚慰藉。GitHub上星标虽少，然每一个fork，每一个issue，皆是对余之鞭策与鼓励。 技术视野 关注前沿技术，人工智能、区块链、云计算等，皆有所了解。深知技术日新月异，昨日之新技术，今日或已过时。唯有保持学习之心，方能不被时代所抛弃。 反思与展望 回首来路，虽有所成，然亦深感不足。代码质量有待提升，系统设计能力尚需磨练，团队协作经验亦显匮乏。他日若能进入知名企业，与高手切磋，定能更上一层楼。 夫编程者，匠心独运之艺也。既要有扎实之基础，又需具创新之思维。余虽年少，然志在千里，愿以代码改变世界，以技术服务社会。作者写此文时正值十七岁生日前夕，虽习编程数年，然经验尚浅，见解有限，往有不足之处，请在评论区指出。案例简介：本案例选择bun + Next.js作为示例编写了学生成绩管理系统，并借助开发者空间云开发环境提供的免费 GaussDB数据库和HCE2.0开发环境进行本地部署Next.js生态组件、轻松部署上云，直观地展示在实际应用开发中为开发者带来的便利。一、概述1.1 案例介绍Bun + Next.js + tRPC 是一个现代化的全栈 TypeScript Web 开发技术栈，可以快速开发高性能和可维护的网站。Bun 作为超快的 JavaScript 运行时和包管理器，Next.js 负责处理前端和后端开发中的复杂部分，tRPC 提供端到端类型安全的 API 层。在数据库操作方面，本技术栈支持直接使用原生 SQL 语句进行数据库交互，无需额外的 ORM 抽象层，既保证了查询性能的最优化，又提供了最大的灵活性。让开发者可以专注于编写业务逻辑，而无需重复造轮子。本案例借助开发者空间云开发环境部署 Next.js 项目，通过 tRPC 构建类型安全的 API 接口，并直接使用 SQL 语句与开发者空间提供的免费 GaussDB 数据库实例对接，完成一个现代化 Web 应用构建。通过实际操作，让大家深入了解如何利用 Bun + Next.js + tRPC + 原生 SQL 技术栈开发并部署一个高性能的全栈 Web 应用。华为开发者空间，是为全球开发者打造的专属开发者空间，致力于为每位开发者提供一台 云开发环境、一套开发工具和云上存储空间，汇聚昇腾、鸿蒙、鲲鹏、GaussDB、欧拉 等华为各项根技术的开发工具资源，并提供配套案例指导开发者 从开发编码到应用调 测，基于华为根技术生态高效便捷的知识学习、技术体验、应用创新。1.2 适用对象企业个人开发者初高中学生和高校学生1.3 案例时间本案例总时长预计120分钟。1.4 案例流程本案例将通过三个主要步骤，带领大家在华为云开发者空间上构建一个完整的 Bun + Next.js + tRPC + 原生 SQL 全栈应用：第一步：申请华为云开发者空间的 GaussDB 数据库注册并登录华为云开发者空间申请免费的 GaussDB 数据库实例获取数据库连接配置信息第二步：进行华为云开发者空间的云开发环境进行 Bun + Next.js + tRPC 安装与配置创建云开发环境实例安装 Bun 运行时环境初始化 Next.js TypeScript 项目集成 tRPC 框架，配置端到端类型安全的 API设置数据库连接和环境变量第三步：启用 Next.js Web 服务，适配 GaussDB，在客户端测试原生 SQL 的建表和数据操作编写原生 SQL 建表脚本通过 tRPC 封装数据库操作接口启动 Next.js 开发服务器在客户端测试数据库的增删改查功能验证端到端类型安全和性能表现通过这三个步骤，您将完整体验从环境搭建到应用部署的全流程，深入理解 Bun + Next.js + tRPC + 原生 SQL 技术栈在华为云开发者空间上的强大能力。1.5 资源总览本案例预计花费0.8元。资源名称规格单价（元）时长（分钟）华为开发者空间 - 云开发环境鲲鹏通用计算增强型 kc1 2vCPUs 4G免费40华为开发者空间 - 生态版GaussDB单副本集中式版 4 vCPUs 16G HCE OS 64bit (200GB)免费40弹性公网IP按流量计费 5Mbit/s0.8元/GB40二、案例准备工作2.1 配置云开发环境根据案例《开发者空间 - 云开发环境使用指导》，请查看下面链接，配置云开发环境，并通过xshell等链接工具登录云开发环境。开发者空间 - 云开发环境使用指导2.2 领取GaussDB数据库免费领取GaussDB在线试用版（2025年 06月 21日 - 2025年 12月 31日）。华为开发者空间-GaussDB云数据库领取与使用指导注：部署的Django项目需要对接GaussDB，因此GaussDB需要绑定EIP，参考上述指导中领取部分第(5)步bunx create-next-app@latest2.3 验证云开发环境与GaussDB互通通过xshell或windows命令终端登录云开发环境，使用ping [ip]测试GaussDB能否连接，如下是通的2.4 新建数据库及用户修改dn:password_encryption_type字段为1。0表示采用md5方式对密码加密。1表示采用sha256和md5两种方式分别对密码加密，2表示采用sha256方式对密码加密，3表示采用sm3方式对密码加密。MD5加密算法安全性低，存在安全风险，不建议使用。点击右上角登录数据库管理界面创建数据库使用如下图配置。通过右上角登录GaussDB的SQL操作界面，用如下SQL创建Django链接的登录用户。create user myuser with sysadmin password 'GaussDB@123'; 三、Bun + Next.js + Prisma 安装配置指南3.1 安装 Bun# 全局安装 bun sudo npm install -g bun # 验证安装 bun --version # 检查安装位置 which bun3.2 创建 Next.js 项目# 交互式创建next.js项目 bunx create-next-app@latest看到如下输出即为成功创建Next.js项目3.3测试Next.js是否安装成功# 查看项目结构 ls -la # 启动开发服务器测试 bun dev # 在另一个终端测试（如果需要） curl http://localhost:3000 3.4 安装trpc步骤 1: 安装依赖bun add @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query zod superjson依赖说明@trpc/server - 服务器端 tRPC 核心@trpc/client - 客户端 tRPC 核心@trpc/react-query - React Query 集成@trpc/next - Next.js 集成@tanstack/react-query - 数据获取和缓存zod - 类型验证superjson - 序列化（支持 Date、BigInt 等）步骤 2: 创建服务器端配置创建 app/lib/trpc.tsimport { initTRPC } from '@trpc/server'; import superjson from 'superjson'; import { ZodError } from 'zod'; const t = initTRPC.create({ transformer: superjson, errorFormatter({ shape, error }) { return { ...shape, data: { ...shape.data, zodError: error.cause instanceof ZodError ? error.cause.issues : null, }, }; }, }); export const createTRPCRouter = t.router; export const publicProcedure = t.procedure; 配置说明transformer: superjson - 使用 SuperJSON 进行序列化errorFormatter - 自定义错误格式化，支持 Zod 验证错误createTRPCRouter - 创建路由的工厂函数publicProcedure - 公开的 API 过程（无需认证）步骤 3: 创建路由tRPC 路由（Router）是服务端定义 API 端点和业务逻辑的核心组件，它通过类型安全的方式组织和管理所有的远程过程调用，包括查询（query）、变更（mutation）和订阅（subscription），并自动生成 TypeScript 类型定义供客户端使用，实现了从后端到前端的完整类型推断和 API 结构管理。创建主路由 app/lib/routers/_app.tsimport { createTRPCRouter } from '../trpc'; export const appRouter = createTRPCRouter({ }); export type AppRouter = typeof appRouter; 步骤 4: 创建 API 路由处理创建 app/api/trpc/[trpc]/route.tsimport { fetchRequestHandler } from '@trpc/server/adapters/fetch'; import { appRouter } from '../../../lib/routers/_app'; const handler = (req: Request) => fetchRequestHandler({ endpoint: '/api/trpc', req, router: appRouter, createContext: () => ({}), }); export { handler as GET, handler as POST }; 说明使用 Next.js App Router 的 API 路由fetchRequestHandler 处理 HTTP 请求createContext 创建请求上下文（当前为空对象）步骤 5: 创建客户端配置创建 utils/trpc.tsimport { createTRPCReact } from '@trpc/react-query'; import { type AppRouter } from '../app/lib/routers/_app'; export const trpc = createTRPCReact<AppRouter>(); 创建独立客户端 utils/trpc-client.tsimport { createTRPCProxyClient, httpBatchLink } from '@trpc/client'; import superjson from 'superjson'; import { type AppRouter } from '../app/lib/routers/_app'; export const trpcClient = createTRPCProxyClient<AppRouter>({ links: [ httpBatchLink({ url: '/api/trpc', transformer: superjson, }), ], }); 步骤 6: 设置提供者创建 app/providers.tsx'use client'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { httpBatchLink } from '@trpc/client'; import React, { useState } from 'react'; import superjson from 'superjson'; import { trpc } from '../utils/trpc'; export function TRPCProvider({ children }: { children: React.ReactNode }) { const [queryClient] = useState(() => new QueryClient()); const [trpcClient] = useState(() => trpc.createClient({ links: [ httpBatchLink({ url: '/api/trpc', transformer: superjson, }), ], }) ); return ( <trpc.Provider client={trpcClient} queryClient={queryClient}> <QueryClientProvider client={queryClient}>{children}</QueryClientProvider> </trpc.Provider> ); } tRPC Provider 是一个配置组件，用于在客户端应用中设置 tRPC 客户端实例，它负责配置 API 端点、管理请求状态和缓存，并提供端到端的 TypeScript 类型安全，让前端能够直接调用后端函数而无需手动定义 API 接口类型。步骤 7: 集成到应用更新 app/layout.tsximport type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; import { TRPCProvider } from "./providers"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} > <TRPCProvider>{children}</TRPCProvider> </body> </html> ); } 3.5 连接和初始化数据库并编写相关方法步骤1：安装sql相关依赖bun add pg dotenv bun add -d @types/bun @types/pg tsxdotenv 是一个零依赖的模块，它可以从 .env 文件中加载环境变量到 process.env 中。步骤2：设置数据库连接创建 .env# GaussDB 数据库配置 DB_HOST=your-gaussdb-host.com DB_PORT=3306 DB_USER=your-username DB_PASSWORD=your-password DB_NAME=your-database-name # 可选配置 DB_MAX_CONNECTIONS=20 说明DB_HOST就是你数据库IPDB_PORT为数据库端口默认是8000DB_USER和DB_PASSWORD就是你刚刚创建的用户的密码步骤3：编写数据库相关代码创建 scripts/init-database.ts 用来初始化数据库import { Client } from 'pg'; import dotenv from 'dotenv'; dotenv.config(); //这里连接到数据库，如果连接失败就去检查你的.env文件 const client = new Client({ host: process.env.DB_HOST || 'localhost', port: parseInt(process.env.DB_PORT || '5432'), database: process.env.DB_NAME || 'student_management', user: process.env.DB_USER || 'postgres', password: process.env.DB_PASSWORD || 'password', }); //这里开始初始化数据库 async function initDatabase() { try { console.log('连接数据库...'); await client.connect(); console.log('数据库连接成功'); // 创建学生表 console.log('创建学生表...'); await client.query(` CREATE TABLE IF NOT EXISTS students ( id SERIAL PRIMARY KEY, student_id VARCHAR(20) UNIQUE NOT NULL, name VARCHAR(100) NOT NULL, gender VARCHAR(10) CHECK (gender IN ('男', '女')), birth_date DATE, class_name VARCHAR(50), phone VARCHAR(20), email VARCHAR(100), address TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); `); // 创建课程表 console.log('创建课程表...'); await client.query(` CREATE TABLE IF NOT EXISTS courses ( id SERIAL PRIMARY KEY, course_code VARCHAR(20) UNIQUE NOT NULL, course_name VARCHAR(100) NOT NULL, credits DECIMAL(3,1) NOT NULL, teacher_name VARCHAR(100), description TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); `); // 创建成绩表 console.log('创建成绩表...'); await client.query(` CREATE TABLE IF NOT EXISTS grades ( id SERIAL PRIMARY KEY, student_id INTEGER REFERENCES students(id) ON DELETE CASCADE, course_id INTEGER REFERENCES courses(id) ON DELETE CASCADE, semester VARCHAR(20) NOT NULL, score DECIMAL(5,2) CHECK (score >= 0 AND score <= 100), grade VARCHAR(2) CHECK (grade IN ('A+', 'A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'F')), exam_date DATE, remarks TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, UNIQUE(student_id, course_id, semester) ); `); // 插入测试数据 console.log('插入测试数据...'); // 学生数据 实在想不出来什么好名字了。。。就张三李四吧，为啥都是高三呢因为作者高三了 await client.query(` INSERT INTO students (student_id, name, gender, birth_date, class_name, phone, email) VALUES ('2024001', '张三', '男', '2006-03-15', '高三(1)班', '13800138001', 'zhangsan@example.com'), ('2024002', '李四', '女', '2006-07-22', '高三(1)班', '13800138002', 'lisi@example.com'), ('2024003', '王五', '男', '2006-01-10', '高三(1)班', '13800138003', 'wangwu@example.com'), ON CONFLICT (student_id) DO NOTHING; `); // 课程数据 让高中生学高数是不是很好玩 await client.query(` INSERT INTO courses (course_code, course_name, credits, teacher_name, description) VALUES ('MATH101', '数学', 4.0, '陈老师', '高等数学基础课程'), ('CHI101', '语文', 4.0, '刘老师', '语文基础课程'), ('ENG101', '英语', 4.0, '王老师', '英语基础课程'), ('PHY101', '物理', 3.5, '李老师', '物理基础课程'), ('CHE101', '化学', 3.5, '张老师', '化学基础课程'), ('BIO101', '生物', 3.0, '赵老师', '生物基础课程') ON CONFLICT (course_code) DO NOTHING; `); // 成绩数据 await client.query(` INSERT INTO grades (student_id, course_id, semester, score, grade, exam_date) VALUES (1, 1, '2024-春季', 85.5, 'B+', '2024-06-15'), (1, 2, '2024-春季', 92.0, 'A', '2024-06-16'), (1, 3, '2024-春季', 78.5, 'C+', '2024-06-17'), (2, 1, '2024-春季', 95.0, 'A+', '2024-06-15'), (2, 2, '2024-春季', 88.5, 'B+', '2024-06-16'), (2, 3, '2024-春季', 91.0, 'A', '2024-06-17'), (3, 1, '2024-春季', 72.0, 'C', '2024-06-15'), (3, 2, '2024-春季', 85.0, 'B+', '2024-06-16'), (3, 3, '2024-春季', 79.5, 'C+', '2024-06-17') ON CONFLICT (student_id, course_id, semester) DO NOTHING; `); // 创建索引 console.log('创建索引...'); await client.query(` CREATE INDEX IF NOT EXISTS idx_students_student_id ON students(student_id); CREATE INDEX IF NOT EXISTS idx_students_class_name ON students(class_name); CREATE INDEX IF NOT EXISTS idx_courses_course_code ON courses(course_code); CREATE INDEX IF NOT EXISTS idx_grades_student_id ON grades(student_id); CREATE INDEX IF NOT EXISTS idx_grades_course_id ON grades(course_id); CREATE INDEX IF NOT EXISTS idx_grades_semester ON grades(semester); `); console.log('数据库初始化完成！'); // 显示统计 const stats = await client.query(` SELECT (SELECT COUNT(*) FROM students) as student_count, (SELECT COUNT(*) FROM courses) as course_count, (SELECT COUNT(*) FROM grades) as grade_count; `); console.log(`学生数量: ${stats.rows[0].student_count}`); console.log(`课程数量: ${stats.rows[0].course_count}`); console.log(`成绩记录: ${stats.rows[0].grade_count}`); } catch (error) { console.error('数据库初始化失败:', error); throw error; } finally { await client.end(); console.log('数据库连接已关闭'); } } if (require.main === module) { initDatabase() .then(() => { console.log('数据库初始化完成！'); process.exit(0); }) .catch((error) => { console.error('初始化失败:', error); process.exit(1); }); } export { initDatabase }; 创建 types/database.ts 类型文件// 学生信息 export interface Student { id: number; student_id: string; name: string; gender: '男' | '女'; birth_date: Date | null; class_name: string | null; phone: string | null; email: string | null; address: string | null; created_at: Date; updated_at: Date; } // 课程信息 export interface Course { id: number; course_code: string; course_name: string; credits: number; teacher_name: string | null; description: string | null; created_at: Date; updated_at: Date; } // 成绩信息 export interface Grade { id: number; student_id: number; course_id: number; semester: string; score: number | null; grade: 'A+' | 'A' | 'A-' | 'B+' | 'B' | 'B-' | 'C+' | 'C' | 'C-' | 'D+' | 'D' | 'F' | null; exam_date: Date | null; remarks: string | null; created_at: Date; updated_at: Date; } // 成绩详情（包含学生和课程信息） export interface GradeWithDetails { id: number; student_id: number; course_id: number; semester: string; score: number | null; grade: string | null; exam_date: Date | null; remarks: string | null; student_name: string; student_id_code: string; course_name: string; course_code: string; teacher_name: string | null; created_at: Date; updated_at: Date; } // 学生成绩统计 export interface StudentGradeStats { student_id: number; student_name: string; student_id_code: string; class_name: string | null; total_courses: number; average_score: number; total_credits: number; gpa: number; } // 课程成绩统计 export interface CourseGradeStats { course_id: number; course_name: string; course_code: string; teacher_name: string | null; total_students: number; average_score: number; highest_score: number; lowest_score: number; pass_rate: number; } // 查询参数 export interface StudentQueryParams { page?: number; limit?: number; search?: string; class_name?: string; gender?: '男' | '女'; } export interface GradeQueryParams { page?: number; limit?: number; student_id?: number; course_id?: number; semester?: string; min_score?: number; max_score?: number; } // 创建学生参数 export interface CreateStudentParams { student_id: string; name: string; gender: '男' | '女'; birth_date?: Date; class_name?: string; phone?: string; email?: string; address?: string; } // 更新学生参数 export interface UpdateStudentParams { name?: string; gender?: '男' | '女'; birth_date?: Date; class_name?: string; phone?: string; email?: string; address?: string; } // 创建成绩参数 export interface CreateGradeParams { student_id: number; course_id: number; semester: string; score?: number; grade?: string; exam_date?: Date; remarks?: string; } // 更新成绩参数 export interface UpdateGradeParams { score?: number; grade?: string; exam_date?: Date; remarks?: string; } // 创建课程参数 export interface CreateCourseParams { course_code: string; course_name: string; credits: number; teacher_name?: string; description?: string; } // 更新课程参数 export interface UpdateCourseParams { course_name?: string; credits?: number; teacher_name?: string; description?: string; } 创建lib/database.ts提供相关数据库操作方法import { Pool, PoolClient } from 'pg'; import dotenv from 'dotenv'; import { Student, Course, Grade, GradeWithDetails, StudentGradeStats, CourseGradeStats, StudentQueryParams, GradeQueryParams, CreateStudentParams, UpdateStudentParams, CreateGradeParams, UpdateGradeParams, CreateCourseParams, UpdateCourseParams, } from '../types/database'; dotenv.config(); class DatabaseService { private pool: Pool; constructor() { this.pool = new Pool({ host: process.env.DB_HOST || 'localhost', port: parseInt(process.env.DB_PORT || '5432'), database: process.env.DB_NAME || 'student_management', user: process.env.DB_USER || 'postgres', password: process.env.DB_PASSWORD || 'password', max: 20, idleTimeoutMillis: 30000, connectionTimeoutMillis: 2000, }); // 监听连接错误 this.pool.on('error', (err) => { console.error('数据库连接池错误:', err); }); } // 获取数据库连接 async getClient(): Promise<PoolClient> { return await this.pool.connect(); } // 关闭连接池 async close(): Promise<void> { await this.pool.end(); } // 学生相关方法 async getStudents(params: StudentQueryParams = {}): Promise<Student[]> { const { page = 1, limit = 10, search, class_name, gender } = params; const offset = (page - 1) * limit; let query = 'SELECT * FROM students WHERE 1=1'; const values: any[] = []; let paramIndex = 1; if (search) { query += ` AND (name ILIKE $${paramIndex} OR student_id ILIKE $${paramIndex})`; values.push(`%${search}%`); paramIndex++; } if (class_name) { query += ` AND class_name = $${paramIndex}`; values.push(class_name); paramIndex++; } if (gender) { query += ` AND gender = $${paramIndex}`; values.push(gender); paramIndex++; } query += ` ORDER BY created_at DESC LIMIT $${paramIndex} OFFSET $${paramIndex + 1}`; values.push(limit, offset); const client = await this.getClient(); try { const result = await client.query(query, values); return result.rows; } finally { client.release(); } } async getStudentById(id: number): Promise<Student | null> { const client = await this.getClient(); try { const result = await client.query('SELECT * FROM students WHERE id = $1', [id]); return result.rows[0] || null; } finally { client.release(); } } async getStudentByStudentId(studentId: string): Promise<Student | null> { const client = await this.getClient(); try { const result = await client.query('SELECT * FROM students WHERE student_id = $1', [studentId]); return result.rows[0] || null; } finally { client.release(); } } async createStudent(params: CreateStudentParams): Promise<Student> { const client = await this.getClient(); try { const result = await client.query(` INSERT INTO students (student_id, name, gender, birth_date, class_name, phone, email, address) VALUES ($1, $2, $3, $4, $5, $6, $7, $8) RETURNING * `, [ params.student_id, params.name, params.gender, params.birth_date, params.class_name, params.phone, params.email, params.address, ]); return result.rows[0]; } finally { client.release(); } } async updateStudent(id: number, params: UpdateStudentParams): Promise<Student | null> { const client = await this.getClient(); try { const fields = Object.keys(params).filter(key => params[key as keyof UpdateStudentParams] !== undefined); if (fields.length === 0) return null; const setClause = fields.map((field, index) => `${field} = $${index + 2}`).join(', '); const values = [id, ...fields.map(field => params[field as keyof UpdateStudentParams])]; const result = await client.query(` UPDATE students SET ${setClause}, updated_at = CURRENT_TIMESTAMP WHERE id = $1 RETURNING * `, values); return result.rows[0] || null; } finally { client.release(); } } async deleteStudent(id: number): Promise<boolean> { const client = await this.getClient(); try { const result = await client.query('DELETE FROM students WHERE id = $1', [id]); return (result.rowCount || 0) > 0; } finally { client.release(); } } // 课程相关方法 async getCourses(): Promise<Course[]> { const client = await this.getClient(); try { const result = await client.query('SELECT * FROM courses ORDER BY course_code'); return result.rows; } finally { client.release(); } } async getCourseById(id: number): Promise<Course | null> { const client = await this.getClient(); try { const result = await client.query('SELECT * FROM courses WHERE id = $1', [id]); return result.rows[0] || null; } finally { client.release(); } } async createCourse(params: CreateCourseParams): Promise<Course> { const client = await this.getClient(); try { const result = await client.query(` INSERT INTO courses (course_code, course_name, credits, teacher_name, description) VALUES ($1, $2, $3, $4, $5) RETURNING * `, [ params.course_code, params.course_name, params.credits, params.teacher_name, params.description, ]); return result.rows[0]; } finally { client.release(); } } async updateCourse(id: number, params: UpdateCourseParams): Promise<Course | null> { const client = await this.getClient(); try { const fields = Object.keys(params).filter(key => params[key as keyof typeof params] !== undefined); if (fields.length === 0) return null; const setClause = fields.map((field, index) => `${field} = $${index + 2}`).join(', '); const values = [id, ...fields.map(field => params[field as keyof typeof params])]; const result = await client.query(` UPDATE courses SET ${setClause}, updated_at = CURRENT_TIMESTAMP WHERE id = $1 RETURNING * `, values); return result.rows[0] || null; } finally { client.release(); } } // 成绩相关方法 async getGrades(params: GradeQueryParams = {}): Promise<GradeWithDetails[]> { const { page = 1, limit = 10, student_id, course_id, semester, min_score, max_score } = params; const offset = (page - 1) * limit; let query = ` SELECT g.*, s.name as student_name, s.student_id as student_id_code, c.course_name, c.course_code, c.teacher_name FROM grades g JOIN students s ON g.student_id = s.id JOIN courses c ON g.course_id = c.id WHERE 1=1 `; const values: any[] = []; let paramIndex = 1; if (student_id) { query += ` AND g.student_id = $${paramIndex}`; values.push(student_id); paramIndex++; } if (course_id) { query += ` AND g.course_id = $${paramIndex}`; values.push(course_id); paramIndex++; } if (semester) { query += ` AND g.semester = $${paramIndex}`; values.push(semester); paramIndex++; } if (min_score !== undefined) { query += ` AND g.score >= $${paramIndex}`; values.push(min_score); paramIndex++; } if (max_score !== undefined) { query += ` AND g.score <= $${paramIndex}`; values.push(max_score); paramIndex++; } query += ` ORDER BY g.created_at DESC LIMIT $${paramIndex} OFFSET $${paramIndex + 1}`; values.push(limit, offset); const client = await this.getClient(); try { const result = await client.query(query, values); return result.rows; } finally { client.release(); } } async getGradeById(id: number): Promise<GradeWithDetails | null> { const client = await this.getClient(); try { const result = await client.query(` SELECT g.*, s.name as student_name, s.student_id as student_id_code, c.course_name, c.course_code, c.teacher_name FROM grades g JOIN students s ON g.student_id = s.id JOIN courses c ON g.course_id = c.id WHERE g.id = $1 `, [id]); return result.rows[0] || null; } finally { client.release(); } } async createGrade(params: CreateGradeParams): Promise<Grade> { const client = await this.getClient(); try { const result = await client.query(` INSERT INTO grades (student_id, course_id, semester, score, grade, exam_date, remarks) VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING * `, [ params.student_id, params.course_id, params.semester, params.score, params.grade, params.exam_date, params.remarks, ]); return result.rows[0]; } finally { client.release(); } } async updateGrade(id: number, params: UpdateGradeParams): Promise<Grade | null> { const client = await this.getClient(); try { const fields = Object.keys(params).filter(key => params[key as keyof UpdateGradeParams] !== undefined); if (fields.length === 0) return null; const setClause = fields.map((field, index) => `${field} = $${index + 2}`).join(', '); const values = [id, ...fields.map(field => params[field as keyof UpdateGradeParams])]; const result = await client.query(` UPDATE grades SET ${setClause}, updated_at = CURRENT_TIMESTAMP WHERE id = $1 RETURNING * `, values); return result.rows[0] || null; } finally { client.release(); } } async deleteGrade(id: number): Promise<boolean> { const client = await this.getClient(); try { const result = await client.query('DELETE FROM grades WHERE id = $1', [id]); return (result.rowCount || 0) > 0; } finally { client.release(); } } // 统计方法 async getStudentGradeStats(studentId: number): Promise<StudentGradeStats | null> { const client = await this.getClient(); try { const result = await client.query(` SELECT s.id as student_id, s.name as student_name, s.student_id as student_id_code, s.class_name, COUNT(g.id) as total_courses, AVG(g.score) as average_score, SUM(c.credits) as total_credits, AVG(CASE WHEN g.grade = 'A+' THEN 4.3 WHEN g.grade = 'A' THEN 4.0 WHEN g.grade = 'A-' THEN 3.7 WHEN g.grade = 'B+' THEN 3.3 WHEN g.grade = 'B' THEN 3.0 WHEN g.grade = 'B-' THEN 2.7 WHEN g.grade = 'C+' THEN 2.3 WHEN g.grade = 'C' THEN 2.0 WHEN g.grade = 'C-' THEN 1.7 WHEN g.grade = 'D+' THEN 1.3 WHEN g.grade = 'D' THEN 1.0 WHEN g.grade = 'F' THEN 0.0 ELSE NULL END) as gpa FROM students s LEFT JOIN grades g ON s.id = g.student_id LEFT JOIN courses c ON g.course_id = c.id WHERE s.id = $1 GROUP BY s.id, s.name, s.student_id, s.class_name `, [studentId]); return result.rows[0] || null; } finally { client.release(); } } async getCourseGradeStats(courseId: number): Promise<CourseGradeStats | null> { const client = await this.getClient(); try { const result = await client.query(` SELECT c.id as course_id, c.course_name, c.course_code, c.teacher_name, COUNT(g.id) as total_students, AVG(g.score) as average_score, MAX(g.score) as highest_score, MIN(g.score) as lowest_score, (COUNT(CASE WHEN g.score >= 60 THEN 1 END) * 100.0 / COUNT(g.id)) as pass_rate FROM courses c LEFT JOIN grades g ON c.id = g.course_id WHERE c.id = $1 GROUP BY c.id, c.course_name, c.course_code, c.teacher_name `, [courseId]); return result.rows[0] || null; } finally { client.release(); } } } // 创建单例实例 const databaseService = new DatabaseService(); export default databaseService; 步骤4：初始化数据库在package.json的scripts中添加 "db:init": "tsx scripts/init-database.ts", 然后执行bun run db:init看到输出数据库初始化完成！即为成功初始化初始化后可以在华为云的数据库管理界面看到有三张表被创建了!3.6 编写业务代码步骤1：trpc路由创建app/lib/routers/course.tsimport { z } from 'zod'; import { createTRPCRouter, publicProcedure } from '../trpc'; import databaseService from '../../../lib/database'; export const courseRouter = createTRPCRouter({ // 获取所有课程 getAll: publicProcedure .query(async () => { return await databaseService.getCourses(); }), // 根据ID获取课程 getById: publicProcedure .input(z.number()) .query(async ({ input }) => { return await databaseService.getCourseById(input); }), // 创建课程 create: publicProcedure .input(z.object({ course_code: z.string(), course_name: z.string(), credits: z.number(), teacher_name: z.string().optional(), description: z.string().optional(), })) .mutation(async ({ input }) => { return await databaseService.createCourse(input); }), // 更新课程 update: publicProcedure .input(z.object({ id: z.number(), data: z.object({ course_name: z.string().optional(), credits: z.number().optional(), teacher_name: z.string().optional(), description: z.string().optional(), }), })) .mutation(async ({ input }) => { return await databaseService.updateCourse(input.id, input.data); }), // 获取课程成绩统计 getGradeStats: publicProcedure .input(z.number()) .query(async ({ input }) => { return await databaseService.getCourseGradeStats(input); }), }); 创建app/lib/routers/grade.tsimport { z } from 'zod'; import { createTRPCRouter, publicProcedure } from '../trpc'; import databaseService from '../../../lib/database'; export const gradeRouter = createTRPCRouter({ // 获取所有成绩 getAll: publicProcedure .input(z.object({ page: z.number().optional(), limit: z.number().optional(), student_id: z.number().optional(), course_id: z.number().optional(), semester: z.string().optional(), min_score: z.number().optional(), max_score: z.number().optional(), }).optional()) .query(async ({ input }) => { return await databaseService.getGrades(input); }), // 根据ID获取成绩 getById: publicProcedure .input(z.number()) .query(async ({ input }) => { return await databaseService.getGradeById(input); }), // 创建成绩 create: publicProcedure .input(z.object({ student_id: z.number(), course_id: z.number(), semester: z.string(), score: z.number().optional(), grade: z.string().optional(), exam_date: z.date().optional(), remarks: z.string().optional(), })) .mutation(async ({ input }) => { return await databaseService.createGrade(input); }), // 更新成绩 update: publicProcedure .input(z.object({ id: z.number(), data: z.object({ score: z.number().optional(), grade: z.string().optional(), exam_date: z.date().optional(), remarks: z.string().optional(), }), })) .mutation(async ({ input }) => { return await databaseService.updateGrade(input.id, input.data); }), // 删除成绩 delete: publicProcedure .input(z.number()) .mutation(async ({ input }) => { return await databaseService.deleteGrade(input); }), // 获取学生成绩 getByStudent: publicProcedure .input(z.object({ student_id: z.number(), semester: z.string().optional(), })) .query(async ({ input }) => { return await databaseService.getGrades({ student_id: input.student_id, semester: input.semester, }); }), // 获取课程成绩 getByCourse: publicProcedure .input(z.object({ course_id: z.number(), semester: z.string().optional(), })) .query(async ({ input }) => { return await databaseService.getGrades({ course_id: input.course_id, semester: input.semester, }); }), }); 创建app/lib/routers/student.tsimport { z } from 'zod'; import { createTRPCRouter, publicProcedure } from '../trpc'; import databaseService from '../../../lib/database'; export const studentRouter = createTRPCRouter({ // 获取所有学生 getAll: publicProcedure .input(z.object({ page: z.number().optional(), limit: z.number().optional(), search: z.string().optional(), class_name: z.string().optional(), gender: z.enum(['男', '女']).optional(), }).optional()) .query(async ({ input }) => { return await databaseService.getStudents(input); }), // 根据ID获取学生 getById: publicProcedure .input(z.number()) .query(async ({ input }) => { return await databaseService.getStudentById(input); }), // 根据学号获取学生 getByStudentId: publicProcedure .input(z.string()) .query(async ({ input }) => { return await databaseService.getStudentByStudentId(input); }), // 创建学生 create: publicProcedure .input(z.object({ student_id: z.string(), name: z.string(), gender: z.enum(['男', '女']), birth_date: z.date().optional(), class_name: z.string().optional(), phone: z.string().optional(), email: z.string().email().optional(), address: z.string().optional(), })) .mutation(async ({ input }) => { return await databaseService.createStudent(input); }), // 更新学生 update: publicProcedure .input(z.object({ id: z.number(), data: z.object({ name: z.string().optional(), gender: z.enum(['男', '女']).optional(), birth_date: z.date().optional(), class_name: z.string().optional(), phone: z.string().optional(), email: z.string().email().optional(), address: z.string().optional(), }), })) .mutation(async ({ input }) => { return await databaseService.updateStudent(input.id, input.data); }), // 删除学生 delete: publicProcedure .input(z.number()) .mutation(async ({ input }) => { return await databaseService.deleteStudent(input); }), // 获取学生成绩统计 getGradeStats: publicProcedure .input(z.number()) .query(async ({ input }) => { return await databaseService.getStudentGradeStats(input); }), }); 更新主路由文件app/lib/routers/_app.tsimport { createTRPCRouter } from '../trpc'; import { studentRouter } from './student'; import { courseRouter } from './course'; import { gradeRouter } from './grade'; export const appRouter = createTRPCRouter({ student: studentRouter, course: courseRouter, grade: gradeRouter, }); export type AppRouter = typeof appRouter; 步骤2：编写前端页面app/page.tsx'use client'; import { useState } from 'react'; import { trpc } from "../utils/trpc"; import Navigation from './components/Navigation'; import StudentManager from './components/StudentManager'; import CourseManager from './components/CourseManager'; import GradeManager from './components/GradeManager'; import ReportManager from './components/ReportManager'; function StatCard({ title, value, icon }: { title: string; value: string | number; icon: string }) { return ( <div className="bg-white rounded-lg shadow p-6"> <div className="flex items-center"> <div className="flex-1"> <p className="text-sm text-black">{title}</p> <p className="text-2xl font-bold text-black">{value}</p> </div> <div className="text-3xl">{icon}</div> </div> </div> ); } function SimpleTable({ title, data, columns }: { title: string; data: any[]; columns: { key: string; label: string }[]; }) { if (!data || data.length === 0) { return ( <div className="bg-white rounded-lg shadow p-6"> <h3 className="text-lg font-semibold mb-4 text-black">{title}</h3> <p className="text-black">暂无数据</p> </div> ); } return ( <div className="rounded-lg shadow p-6 bg-white"> <h3 className="text-lg font-semibold mb-4 text-black">{title}</h3> <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="border-b"> {columns.map((col) => ( <th key={col.key} className="text-left py-2 px-4 font-medium text-black"> {col.label} </th> ))} </tr> </thead> <tbody> {data.slice(0, 5).map((row, index) => ( <tr key={index} className="border-b hover:bg-gray-50 text-black"> {columns.map((col) => ( <td key={col.key} className="py-2 px-4 text-black"> {row[col.key] || '-'} </td> ))} </tr> ))} </tbody> </table> </div> {data.length > 5 && ( <p className="text-sm text-gray-500 mt-2">显示前5条，共{data.length}条</p> )} </div> ); } export default function HomePage() { const [currentPage, setCurrentPage] = useState('dashboard'); const students = trpc.student.getAll.useQuery(); const courses = trpc.course.getAll.useQuery(); const grades = trpc.grade.getAll.useQuery({ limit: 10 }); const allGrades = trpc.grade.getAll.useQuery(); const totalStudents = students.data?.length || 0; const totalCourses = courses.data?.length || 0; const totalGrades = allGrades.data?.length || 0; const validGrades = allGrades.data?.filter(grade => grade.score !== null && grade.score !== undefined) || []; const avgScore = validGrades.length > 0 ? (validGrades.reduce((sum, grade) => sum + (parseFloat(String(grade.score)) || 0), 0) / validGrades.length).toFixed(1) : '0.0'; const showPage = () => { switch (currentPage) { case 'students': return <StudentManager />; case 'courses': return <CourseManager />; case 'grades': return <GradeManager />; case 'reports': return <ReportManager />; default: return ( <div className="space-y-6"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <StatCard title="学生总数" value={totalStudents} icon="👥" /> <StatCard title="课程总数" value={totalCourses} icon="📚" /> <StatCard title="成绩记录" value={totalGrades} icon="📊" /> <StatCard title="平均分" value={avgScore} icon="⭐" /> </div> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <SimpleTable title="学生列表" data={students.data || []} columns={[ { key: 'name', label: '姓名' }, { key: 'student_id', label: '学号' }, { key: 'class_name', label: '班级' } ]} /> <SimpleTable title="课程列表" data={courses.data || []} columns={[ { key: 'course_name', label: '课程名称' }, { key: 'teacher_name', label: '教师' }, { key: 'credits', label: '学分' } ]} /> </div> <SimpleTable title="最新成绩" data={grades.data || []} columns={[ { key: 'student_name', label: '学生' }, { key: 'course_name', label: '课程' }, { key: 'score', label: '分数' }, { key: 'semester', label: '学期' } ]} /> </div> ); } }; return ( <div className="min-h-screen bg-gray-50"> <Navigation currentPage={currentPage} onPageChange={setCurrentPage} /> <main className="max-w-7xl mx-auto px-4 py-8"> {showPage()} </main> <footer className="bg-white border-t mt-12 py-6"> <div className="max-w-7xl mx-auto px-4 text-center text-gray-500 text-sm"> <p>学生成绩管理系统 作者dylan su</p> </div> </footer> </div> ); } app/components/Navigation.tsx'use client'; import { useState } from 'react'; interface NavigationProps { currentPage: string; onPageChange: (page: string) => void; } export default function Navigation({ currentPage, onPageChange }: NavigationProps) { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const menuItems = [ { id: 'dashboard', label: '仪表板' }, { id: 'students', label: '学生管理' }, { id: 'courses', label: '课程管理'}, { id: 'grades', label: '成绩管理' }, { id: 'reports', label: '统计报表'}, ]; return ( <nav className="bg-white shadow-sm border-b"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex justify-between h-16"> <div className="flex items-center"> <div className="flex-shrink-0 flex items-center"> <span className="text-xl font-bold text-gray-900">学生管理系统</span> </div> </div> <div className="hidden md:flex items-center space-x-8"> {menuItems.map((item) => ( <button key={item.id} onClick={() => onPageChange(item.id)} className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${ currentPage === item.id ? 'bg-blue-100 text-blue-700' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50' }`} > {item.label} </button> ))} </div> <div className="md:hidden flex items-center"> <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" > <span className="sr-only">打开主菜单</span> {isMobileMenuOpen ? ( <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> </svg> ) : ( <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /> </svg> )} </button> </div> </div> </div> {isMobileMenuOpen && ( <div className="md:hidden"> <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t"> {menuItems.map((item) => ( <button key={item.id} onClick={() => { onPageChange(item.id); setIsMobileMenuOpen(false); }} className={`flex items-center w-full px-3 py-2 rounded-md text-base font-medium transition-colors ${ currentPage === item.id ? 'bg-blue-100 text-blue-700' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50' }`} > {item.label} </button> ))} </div> </div> )} </nav> ); } app/components/StudentManager.tsx'use client'; import { useState } from 'react'; import { trpc } from '../../utils/trpc'; export default function StudentManager() { const [showForm, setShowForm] = useState(false); const [editingId, setEditingId] = useState<number | null>(null); const [form, setForm] = useState({ student_id: '', name: '', gender: '男' as '男' | '女', class_name: '', phone: '', email: '' }); const students = trpc.student.getAll.useQuery(); const createStudent = trpc.student.create.useMutation({ onSuccess: () => { students.refetch(); resetForm(); } }); const updateStudent = trpc.student.update.useMutation({ onSuccess: () => { students.refetch(); resetForm(); } }); const deleteStudent = trpc.student.delete.useMutation({ onSuccess: () => students.refetch() }); const resetForm = () => { setForm({ student_id: '', name: '', gender: '男', class_name: '', phone: '', email: '' }); setEditingId(null); setShowForm(false); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (editingId) { updateStudent.mutate({ id: editingId, data: form }); } else { createStudent.mutate(form); } }; const handleEdit = (student: any) => { setEditingId(student.id); setForm({ student_id: student.student_id, name: student.name, gender: student.gender, class_name: student.class_name || '', phone: student.phone || '', email: student.email || '' }); setShowForm(true); }; const handleDelete = (id: number) => { if (confirm('确定删除这个学生？')) { deleteStudent.mutate(id); } }; return ( <div className="space-y-6 text-black"> <div className="flex justify-between items-center"> <h1 className="text-2xl font-bold">学生管理</h1> <button onClick={() => setShowForm(true)} className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" > 添加学生 </button> </div> <div className="bg-white rounded-lg shadow p-6"> <h2 className="text-lg font-semibold mb-4">学生列表</h2> {students.isLoading ? ( <p>加载中...</p> ) : students.error ? ( <p className="text-red-500">加载失败</p> ) : ( <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="border-b"> <th className="text-left py-2 px-4">学号</th> <th className="text-left py-2 px-4">姓名</th> <th className="text-left py-2 px-4">性别</th> <th className="text-left py-2 px-4">班级</th> <th className="text-left py-2 px-4">操作</th> </tr> </thead> <tbody> {students.data?.map((student) => ( <tr key={student.id} className="border-b hover:bg-gray-50"> <td className="py-2 px-4">{student.student_id}</td> <td className="py-2 px-4">{student.name}</td> <td className="py-2 px-4">{student.gender}</td> <td className="py-2 px-4">{student.class_name || '-'}</td> <td className="py-2 px-4"> <button onClick={() => handleEdit(student)} className="text-blue-600 hover:text-blue-800 mr-2" > 编辑 </button> <button onClick={() => handleDelete(student.id)} className="text-red-600 hover:text-red-800" > 删除 </button> </td> </tr> ))} </tbody> </table> </div> )} </div> {showForm && ( <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"> <div className="bg-white rounded-lg p-6 w-full max-w-md"> <h2 className="text-lg font-semibold mb-4"> {editingId ? '编辑学生' : '添加学生'} </h2> <form onSubmit={handleSubmit} className="space-y-4"> <div> <label className="block text-sm font-medium mb-1">学号</label> <input type="text" value={form.student_id} onChange={(e) => setForm({...form, student_id: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required /> </div> <div> <label className="block text-sm font-medium mb-1">姓名</label> <input type="text" value={form.name} onChange={(e) => setForm({...form, name: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required /> </div> <div> <label className="block text-sm font-medium mb-1">性别</label> <select value={form.gender} onChange={(e) => setForm({...form, gender: e.target.value as '男' | '女'})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" > <option value="男">男</option> <option value="女">女</option> </select> </div> <div> <label className="block text-sm font-medium mb-1">班级</label> <input type="text" value={form.class_name} onChange={(e) => setForm({...form, class_name: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" /> </div> <div> <label className="block text-sm font-medium mb-1">电话</label> <input type="text" value={form.phone} onChange={(e) => setForm({...form, phone: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" /> </div> <div> <label className="block text-sm font-medium mb-1">邮箱</label> <input type="email" value={form.email} onChange={(e) => setForm({...form, email: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" /> </div> <div className="flex gap-2 pt-4"> <button type="submit" className="flex-1 bg-blue-500 text-white py-2 rounded hover:bg-blue-600" disabled={createStudent.isPending || updateStudent.isPending} > {createStudent.isPending || updateStudent.isPending ? '保存中...' : '保存'} </button> <button type="button" onClick={resetForm} className="flex-1 bg-gray-500 text-white py-2 rounded hover:bg-gray-600" > 取消 </button> </div> </form> </div> </div> )} </div> ); } app/components/ReportManager.tsx'use client'; import { trpc } from '../../utils/trpc'; export default function ReportManager() { const students = trpc.student.getAll.useQuery(); const courses = trpc.course.getAll.useQuery(); const grades = trpc.grade.getAll.useQuery(); // 计算统计数据 const totalStudents = students.data?.length || 0; const totalCourses = courses.data?.length || 0; const totalGrades = grades.data?.length || 0; // 计算平均分 - 只计算有效的成绩，处理字符串类型的分数 const validGrades = grades.data?.filter(grade => grade.score !== null && grade.score !== undefined) || []; const avgScore = validGrades.length > 0 ? (validGrades.reduce((sum, grade) => sum + (parseFloat(String(grade.score)) || 0), 0) / validGrades.length).toFixed(1) : '0.0'; // 分数分布 - 只使用有效的成绩，处理字符串类型的分数 const scoreDistribution = validGrades.length > 0 ? { excellent: validGrades.filter(g => parseFloat(String(g.score)) >= 90).length, good: validGrades.filter(g => parseFloat(String(g.score)) >= 80 && parseFloat(String(g.score)) < 90).length, average: validGrades.filter(g => parseFloat(String(g.score)) >= 70 && parseFloat(String(g.score)) < 80).length, poor: validGrades.filter(g => parseFloat(String(g.score)) < 70).length } : { excellent: 0, good: 0, average: 0, poor: 0 }; return ( <div className="space-y-6 text-black"> <h1 className="text-2xl font-bold">统计报表</h1> <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="bg-white rounded-lg shadow p-6"> <div className="flex items-center"> <div className="flex-1"> <p className="text-sm text-black">学生总数</p> <p className="text-2xl font-bold text-black">{totalStudents}</p> </div> <div className="text-3xl">👥</div> </div> </div> <div className="bg-white rounded-lg shadow p-6"> <div className="flex items-center"> <div className="flex-1"> <p className="text-sm text-black">课程总数</p> <p className="text-2xl font-bold text-black">{totalCourses}</p> </div> <div className="text-3xl">📚</div> </div> </div> <div className="bg-white rounded-lg shadow p-6"> <div className="flex items-center"> <div className="flex-1"> <p className="text-sm text-black">成绩记录</p> <p className="text-2xl font-bold text-black">{totalGrades}</p> </div> <div className="text-3xl">📊</div> </div> </div> <div className="bg-white rounded-lg shadow p-6"> <div className="flex items-center"> <div className="flex-1"> <p className="text-sm text-black">平均分</p> <p className="text-2xl font-bold text-black">{avgScore}</p> </div> <div className="text-3xl">⭐</div> </div> </div> </div> <div className="bg-white rounded-lg shadow p-6"> <h2 className="text-lg font-semibold mb-4">分数分布</h2> <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="text-center"> <div className="text-2xl font-bold text-green-600">{scoreDistribution.excellent}</div> <div className="text-sm text-gray-600">优秀 (90+)</div> </div> <div className="text-center"> <div className="text-2xl font-bold text-blue-600">{scoreDistribution.good}</div> <div className="text-sm text-gray-600">良好 (80-89)</div> </div> <div className="text-center"> <div className="text-2xl font-bold text-yellow-600">{scoreDistribution.average}</div> <div className="text-sm text-gray-600">中等 (70-79)</div> </div> <div className="text-center"> <div className="text-2xl font-bold text-red-600">{scoreDistribution.poor}</div> <div className="text-sm text-gray-600">需努力 (&lt;70)</div> </div> </div> </div> <div className="bg-white rounded-lg shadow p-6"> <h2 className="text-lg font-semibold mb-4">课程平均分</h2> {courses.isLoading ? ( <p>加载中...</p> ) : ( <div className="space-y-3"> {courses.data?.map((course) => { const courseGrades = grades.data?.filter(g => g.course_id === course.id) || []; const avg = courseGrades.length > 0 ? (courseGrades.reduce((sum, g) => sum + (parseFloat(String(g.score)) || 0), 0) / courseGrades.length).toFixed(1) : '0.0'; return ( <div key={course.id} className="flex justify-between items-center py-2 border-b"> <span>{course.course_name}</span> <span className="font-semibold">{avg}分</span> </div> ); })} </div> )} </div> </div> ); } app/components/GradeManager.tsx'use client'; import { useState } from 'react'; import { trpc } from '../../utils/trpc'; export default function GradeManager() { const [showForm, setShowForm] = useState(false); const [editingId, setEditingId] = useState<number | null>(null); const [form, setForm] = useState({ student_id: 0, course_id: 0, score: 0, semester: '' }); const grades = trpc.grade.getAll.useQuery(); const students = trpc.student.getAll.useQuery(); const courses = trpc.course.getAll.useQuery(); const createGrade = trpc.grade.create.useMutation({ onSuccess: () => { grades.refetch(); resetForm(); } }); const updateGrade = trpc.grade.update.useMutation({ onSuccess: () => { grades.refetch(); resetForm(); } }); const deleteGrade = trpc.grade.delete.useMutation({ onSuccess: () => grades.refetch() }); const resetForm = () => { setForm({ student_id: 0, course_id: 0, score: 0, semester: '' }); setEditingId(null); setShowForm(false); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (editingId) { updateGrade.mutate({ id: editingId, data: form }); } else { createGrade.mutate(form); } }; const handleEdit = (grade: any) => { setEditingId(grade.id); setForm({ student_id: grade.student_id, course_id: grade.course_id, score: grade.score, semester: grade.semester }); setShowForm(true); }; const handleDelete = (id: number) => { if (confirm('确定删除这个成绩？')) { deleteGrade.mutate(id); } }; const getGradeLevel = (score: number) => { if (score >= 90) return { text: '优秀', color: 'text-green-600' }; if (score >= 80) return { text: '良好', color: 'text-blue-600' }; if (score >= 70) return { text: '中等', color: 'text-yellow-600' }; return { text: '需努力', color: 'text-red-600' }; }; return ( <div className="space-y-6 text-black"> <div className="flex justify-between items-center"> <h1 className="text-2xl font-bold">成绩管理</h1> <button onClick={() => setShowForm(true)} className="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600" > 录入成绩 </button> </div> <div className="bg-white rounded-lg shadow p-6"> <h2 className="text-lg font-semibold mb-4">成绩列表</h2> {grades.isLoading ? ( <p>加载中...</p> ) : grades.error ? ( <p className="text-red-500">加载失败</p> ) : ( <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="border-b"> <th className="text-left py-2 px-4">学生</th> <th className="text-left py-2 px-4">课程</th> <th className="text-left py-2 px-4">分数</th> <th className="text-left py-2 px-4">等级</th> <th className="text-left py-2 px-4">学期</th> <th className="text-left py-2 px-4">操作</th> </tr> </thead> <tbody> {grades.data?.map((grade) => { const level = getGradeLevel(grade.score || 0); return ( <tr key={grade.id} className="border-b hover:bg-gray-50"> <td className="py-2 px-4">{grade.student_name}</td> <td className="py-2 px-4">{grade.course_name}</td> <td className="py-2 px-4">{grade.score}</td> <td className={`py-2 px-4 ${level.color}`}>{level.text}</td> <td className="py-2 px-4">{grade.semester}</td> <td className="py-2 px-4"> <button onClick={() => handleEdit(grade)} className="text-blue-600 hover:text-blue-800 mr-2" > 编辑 </button> <button onClick={() => handleDelete(grade.id)} className="text-red-600 hover:text-red-800" > 删除 </button> </td> </tr> ); })} </tbody> </table> </div> )} </div> {showForm && ( <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"> <div className="bg-white rounded-lg p-6 w-full max-w-md"> <h2 className="text-lg font-semibold mb-4"> {editingId ? '编辑成绩' : '录入成绩'} </h2> <form onSubmit={handleSubmit} className="space-y-4"> <div> <label className="block text-sm font-medium mb-1">学生</label> <select value={form.student_id} onChange={(e) => setForm({...form, student_id: parseInt(e.target.value)})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required > <option value="">选择学生</option> {students.data?.map((student) => ( <option key={student.id} value={student.id}> {student.name} ({student.student_id}) </option> ))} </select> </div> <div> <label className="block text-sm font-medium mb-1">课程</label> <select value={form.course_id} onChange={(e) => setForm({...form, course_id: parseInt(e.target.value)})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required > <option value="">选择课程</option> {courses.data?.map((course) => ( <option key={course.id} value={course.id}> {course.course_name} ({course.course_code}) </option> ))} </select> </div> <div> <label className="block text-sm font-medium mb-1">分数</label> <input type="number" min="0" max="100" value={form.score} onChange={(e) => setForm({...form, score: parseInt(e.target.value)})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required /> </div> <div> <label className="block text-sm font-medium mb-1">学期</label> <input type="text" value={form.semester} onChange={(e) => setForm({...form, semester: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="如：2024春季" required /> </div> <div className="flex gap-2 pt-4"> <button type="submit" className="flex-1 bg-purple-500 text-white py-2 rounded hover:bg-purple-600" disabled={createGrade.isPending || updateGrade.isPending} > {createGrade.isPending || updateGrade.isPending ? '保存中...' : '保存'} </button> <button type="button" onClick={resetForm} className="flex-1 bg-gray-500 text-white py-2 rounded hover:bg-gray-600" > 取消 </button> </div> </form> </div> </div> )} </div> ); } app/components/CourseManager.tsx'use client'; import { useState } from 'react'; import { trpc } from '../../utils/trpc'; export default function CourseManager() { const [showForm, setShowForm] = useState(false); const [editingId, setEditingId] = useState<number | null>(null); const [form, setForm] = useState({ course_code: '', course_name: '', credits: 0, teacher_name: '', description: '' }); const courses = trpc.course.getAll.useQuery(); const createCourse = trpc.course.create.useMutation({ onSuccess: () => { courses.refetch(); resetForm(); } }); const updateCourse = trpc.course.update.useMutation({ onSuccess: () => { courses.refetch(); resetForm(); } }); const resetForm = () => { setForm({ course_code: '', course_name: '', credits: 0, teacher_name: '', description: '' }); setEditingId(null); setShowForm(false); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (editingId) { updateCourse.mutate({ id: editingId, data: form }); } else { createCourse.mutate(form); } }; const handleEdit = (course: any) => { setEditingId(course.id); setForm({ course_code: course.course_code, course_name: course.course_name, credits: course.credits, teacher_name: course.teacher_name || '', description: course.description || '' }); setShowForm(true); }; return ( <div className="space-y-6 text-black"> <div className="flex justify-between items-center"> <h1 className="text-2xl font-bold">课程管理</h1> <button onClick={() => setShowForm(true)} className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600" > 添加课程 </button> </div> <div className="bg-white rounded-lg shadow p-6"> <h2 className="text-lg font-semibold mb-4">课程列表</h2> {courses.isLoading ? ( <p>加载中...</p> ) : courses.error ? ( <p className="text-red-500">加载失败</p> ) : ( <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="border-b"> <th className="text-left py-2 px-4">课程代码</th> <th className="text-left py-2 px-4">课程名称</th> <th className="text-left py-2 px-4">学分</th> <th className="text-left py-2 px-4">教师</th> <th className="text-left py-2 px-4">操作</th> </tr> </thead> <tbody> {courses.data?.map((course) => ( <tr key={course.id} className="border-b hover:bg-gray-50"> <td className="py-2 px-4">{course.course_code}</td> <td className="py-2 px-4">{course.course_name}</td> <td className="py-2 px-4">{course.credits}</td> <td className="py-2 px-4">{course.teacher_name || '-'}</td> <td className="py-2 px-4"> <button onClick={() => handleEdit(course)} className="text-blue-600 hover:text-blue-800" > 编辑 </button> </td> </tr> ))} </tbody> </table> </div> )} </div> {showForm && ( <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"> <div className="bg-white rounded-lg p-6 w-full max-w-md"> <h2 className="text-lg font-semibold mb-4"> {editingId ? '编辑课程' : '添加课程'} </h2> <form onSubmit={handleSubmit} className="space-y-4"> <div> <label className="block text-sm font-medium mb-1">课程代码</label> <input type="text" value={form.course_code} onChange={(e) => setForm({...form, course_code: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required /> </div> <div> <label className="block text-sm font-medium mb-1">课程名称</label> <input type="text" value={form.course_name} onChange={(e) => setForm({...form, course_name: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required /> </div> <div> <label className="block text-sm font-medium mb-1">学分</label> <input type="number" value={form.credits} onChange={(e) => setForm({...form, credits: parseInt(e.target.value)})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required /> </div> <div> <label className="block text-sm font-medium mb-1">教师</label> <input type="text" value={form.teacher_name} onChange={(e) => setForm({...form, teacher_name: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" /> </div> <div> <label className="block text-sm font-medium mb-1">描述</label> <textarea value={form.description} onChange={(e) => setForm({...form, description: e.target.value})} className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" rows={3} /> </div> <div className="flex gap-2 pt-4"> <button type="submit" className="flex-1 bg-green-500 text-white py-2 rounded hover:bg-green-600" disabled={createCourse.isPending || updateCourse.isPending} > {createCourse.isPending || updateCourse.isPending ? '保存中...' : '保存'} </button> <button type="button" onClick={resetForm} className="flex-1 bg-gray-500 text-white py-2 rounded hover:bg-gray-600" > 取消 </button> </div> </form> </div> </div> )} </div> ); } 3.6 运行项目执行bun dev然后看到终端返回打开http://localhost:3000即可看到项目运行的状况4.1 页面展示4.1.1仪表盘这是学生管理系统的仪表板页面，作为系统的主控制面板，它通过四个关键数据卡片（学生总数6人、课程总数10门、成绩记录10条、平均分77.0）快速展示系统整体状况，同时以表格形式分别列出了学生基本信息、课程设置和最新成绩记录，让管理员能够一目了然地掌握当前教学管理的核心数据和最新动态。4.1.2 学生管理这是学生管理系统的学生管理页面，专门用于学生信息的维护和管理。页面顶部设有"添加学生"按钮用于新增学生记录，主体部分以表格形式展示了6名学生的详细信息，包括学号（2024001-2024006）、姓名、性别和所属班级，每行末尾都提供"编辑"和"删除"操作按钮，方便管理员对学生信息进行实时的增删改查操作。4.1.3 课程管理这是学生管理系统的课程管理页面，用于管理学校的课程信息。页面顶部提供"添加课程"按钮用于新增课程，主体部分以表格形式展示了10门课程的详细信息，包括：核心课程：数学、语文、英语、物理、化学、生物等主要学科每门课程都配有相应的任课教师和学分设置课程信息包含：课程代码（如MATH101、CHI101等标准化编码）课程名称学分（2.0-4.0学分不等）任课教师编辑操作按钮4.1.4 成绩管理这是学生管理系统的成绩管理页面，用于记录和管理学生的考试成绩。页面功能包括：主要功能录入成绩：页面右上角提供"录入成绩"按钮，用于添加新的成绩记录成绩查看：以表格形式展示所有学生的成绩信息成绩信息展示页面显示了3名学生（张三、李四、王五）在2024春季学期的各科成绩：学生成绩概况：张三：语文92分（优秀）、英语78.5分（中等）、数学85.5分（良好）李四：数学95分（优秀）、语文88.5分（良好）、英语91分（优秀）王五：数学72分（中等）、语文85分（良好）、英语79.5分（中等）每条成绩记录都提供"编辑"和"删除"操作，方便教师对成绩进行修改和维护。整个界面设计清晰，便于教务人员进行成绩管理工作。4.1.5 统计报表5.1总结本项目基于华为开发者空间的云开发环境，采用 Bun + Next.js + tRPC 现代化全栈技术栈，成功构建了一个功能完善的学生成绩管理系统。系统包含课程管理和成绩管理两大核心模块，实现了标准化的课程编码体系和科学的成绩评价机制。通过 Bun 超快运行时提升构建效率，Next.js 处理前后端复杂逻辑，tRPC 确保端到端类型安全，原生 SQL 直接对接华为 GaussDB 数据库实现最优查询性能。项目充分利用华为开发者空间提供的免费数据库实例和完整开发工具链，体验了从开发编码到应用调测的全流程云开发模式。系统界面简洁直观，支持课程信息维护、成绩录入编辑、智能等级评定等功能，为学校教务管理提供了高效便捷的数字化解决方案。通过实际开发实践，深入了解了现代全栈开发最佳实践和华为根技术生态的强大能力，为未来进一步集成昇腾AI、鸿蒙等技术打下了坚实基础。至此本案例关于在开发者空间–远程开发环境中部署Bun + Next.js + tRPC与开发者空间生态版GaussDB实践操作并编写学生成绩管理系统完毕。我正在参加【案例共创】第6期 开发者空间-基于云开发环境和GaussDB构建应用(https://bbs.huaweicloud.com/forum/thread-0229189398343651003-1-1.html)

华为开发者空间推荐官第一期活动可兑奖名单如下，请获奖的小伙伴在11月4日前反馈收件信息（逾期反馈不再补发），报名用户积分统计明细请查看附件清单。华为云账号名hw0****3314huy****34hw3****dan****jikongzhongxinhid****7_ovlxw7pv8mjac****bithhid****1ifa25zm3vwohid****oebixpzcsk1tGT-****0161443hw0****3976hw8****549lic****qian1207hid****20xjdev_3p9phid****ez52-g4tnneahw_****15102517719_01hw5****jos****yhid****8jbsk12d0e78hid****_zbcinmpv181GT-****5655215CSD****_35655215hid****m9v6qo05banrhid****69lei-l9eypqhid****35zv6a1s9uv-hid****9_o479gzk8poCCI****luo****hid****xmbj5f41hwr3mav****kshwfre****yGT-****_zhang_zhanzhu****clin****hw8****062h_v****9802063Rob****iuyshw_****18844196063_01mql****16hid****p8u1_k84yq4zhw_****17671701081_01a18****60983hid****gqha3hgwtdirhw6****927 开发者空间推荐官第一期来啦~成功邀请好友报名/开通开发者空间/参与空间案例实践，可获得不同积分激励，累计最高可兑换千元开发者定制好礼+千元代金券，不仅有华为音箱、耳机、手环，更有开发者双肩包、冲锋衣、云宝盲盒等好礼，快叫上小伙伴一起来参加吧~ 【活动时间】2025年8月27日-9月30日 【活动流程】① 完成报名 →  ② 分享专属推广链接  →  ③ 邀请好友报名 / 开通开发者空间 / 参与空间案例实践 → ④ 积分兑换激励ps：报名成功后一定要从“分享有礼”获取自己专属推广链接哦~    【案例参考】可以选择下方任意1个案例进行实践或独立完成开发者空间云主机相关的开发，实践完成后请在此帖下方评论，评论需包含案例名称+案例截图+使用感受，活动结束后，小编会对有真实使用记录的同学给与积分激励技术场景阶段实践案例难度系数AI 入门云主机调用DeepSeek实现代码自动生成★★本地部署DeepSeek构建RAG向量数据库★★★基于DeepSeek搭建Agent智能助手★★★进阶自主编程之Cline×DeepSeek的智能融合探索★★★基于TensorFlow的手写体识别★★★基于PyTorch的手写体识别★★★场景开发开发者空间部署Cherry Studio＋高德地图MCP Server构建出行规划助手★★★基于华为开发者云主机部署FastGPT并构建知识库智能体★★★FastGPT问答系统实战：知识库检索×联网搜索★★★基于开发者空间通过调用MySQL MCP Server实现对外部数据源的获取等实操★★★软件开发入门基于云主机的CodeArts IDE运行Java电商项目★基于CodeArts Repo云仓库管理云主机代码★进阶基于CodeArts Build的项目容器化构建★★★场景开发CodeArts IDE调用API实现电商平台问答助手★★使用云主机CodeArts IDE进行远程JVM服务调试★★ 【积分规则说明】积分项目积分数积分发放说明活动报名1分/人邀请者和被邀请者参加活动报名，可各积1分开通开发者空间2分/人每新邀请一个好友新开通空间，则邀请者和被邀请者各积2分参与空间案例实践5分/人完成空间案例实践或独自完成空间应用构建，在论坛评论区回帖案例名称+使用截图，核实真实有效后可积5分/人 【礼品兑换说明】序号积分兑换规则可兑换礼品（云资源代金券和实物礼品可同时获得）可兑换数量兑换前提条件云资源代金券实物礼品价值110分＞积分＞1分20元云资源代金券开发者定制鼠标垫（大号）200推荐开通开发者空间数≥2或完成空间案例实践220分＞积分≥10分30元云资源代金券50元实物礼品100推荐开通开发者空间数≥3或完成空间案例实践330分＞积分≥20分50元云资源代金券100元实物礼品30440分＞积分≥30分100元云资源代金券200元实物礼品15推荐开通开发者空间数≥5或完成空间案例实践560分＞积分≥40分200元云资源代金券300元实物礼品5推荐开通开发者空间数≥8或完成空间案例实践680分＞积分≥60分300元云资源代金券500元实物礼品27100分＞积分≥80分500元云资源代金券800元实物礼品1推荐开通开发者空间数≥12或完成空间案例实践8积分＞100分800元云资源代金券1000元实物礼品1推荐开通开发者空间数≥20或完成空间案例实践1、活动结束后，按积分高低排名依次兑换，部分礼品兑换数量有限，必须足额积分后且满足兑换前提条件下再填写兑换问卷，否则兑奖无效。若高兑换档位名额已空，则按积分高低自动往下占用低档位兑换名额；反之若高兑换名额无人兑换，则低兑换名额会自动扩充。2、实物礼品包括华为无线耳机、体脂称、手环9、云宝礼盒、开发者定制冲锋衣、定制短袖等，如遇缺货，将随机发货，部分礼品实物图如下~  【活动说明】用户限制说明:1、参加本次社区活动的用户必须为华为云注册用户。同时为保证活动公平性，禁止用户以IAM账号身份参与活动，否则将视为无效。2、领取奖品的用户需为华为云实名用户，未完成实名认证的用户将不发放对应活动奖励。3、本次活动如一个实名认证对应多个账号，只有一个账号可领取奖励。如在同一概率活动中，同一账号重复获奖，只发放首先获奖奖品。4、本次活动一个实名认证账号只能对应一个收件人，如同一账号填写多个不同收件人，不予发放奖励。5、请开发者不要在活动期间随意修改社区昵称和华为云账号，由此产生的统计问题，如过了申诉期，小助手不再处理。（申诉期为活动结果公示3天内。）奖品发放说明:1、本活动结束之后15个工作日内公示获奖信息，获奖开发者用户需在截止时间在获奖信息收集表中填写获奖信息，获奖信息截止收集日过后10个工作日内，将统一发出实物奖品和云资源代金券。华为云遵守《中华人民共和国个人信息保护法》规定，将以上个人信息仅用于礼品发放之目的，不会向任何第三方披露。若由于获奖开发者用户自身原因（包括但不限于联系方式有误、身份不符或超过截止登记日期等）造成奖品无法发送，视为获奖开发者用户放弃领奖。2、为保证活动的公平公正，华为云有权对恶意刷活动资源（“恶意”是指为获取资源而异常注册账号等破坏活动公平性的行为），利用资源从事违法违规行为的开发者用户收回抽奖及奖励资格。3、若发放实物奖品时出现库存不足，则优先发放等价值的其他实物奖品；云资源券领取有效期为60天，领取后有效使用时间为1年内，逾期未使用不予补发4、所有参加本活动的开发者用户，均视为认可并同意遵守《华为云开发者用户协议》，包括以援引方式纳入《华为云开发者用户协议》、《可接受的使用政策》、《法律声明》、《隐私政策声明》、相关服务等级协议（SLA），以及华为云服务网站规定的其他协议和政策（统称为“云服务协议”）的约束。 

活动介绍：为让云服务产品更精准贴合实际场景、更全面覆盖使用需求，我们特发起本次友好开发者招募活动。无论你是熟悉业务的技术达人，还是刚接触产品的新手用户，只要你有想法、有经验，都欢迎加入进来 —— 分享你的使用心得、补充未覆盖的场景细节、提出内容优化建议。一旦您的建议经过专家评审团的认可与采纳，将会获得开发者定制礼品！我们期待着与您一起，共同打造更加优质、高效的云服务体验。活动时间2025.8.23-2025.9.30活动流程：01 领取云数据库GaussDB在线试用版02 按照实践案例深度使用体验03 在活动贴下跟帖评论运行结果04 提交开发者工单，反馈产品优化建议第1步：实验前的准备实名登录：（已注册并实名可跳过）华为云账号实名认证，点击这里。（已设置可跳过）登录后设置社区昵称，点我设置。第2步：领取云数据库GaussDB在线试用版：（1）     点击申请链接：cid:link_2（2）     填写申请信息：（3）     欢迎加入微信群交流：  第3步：动手操作吧 （1）       实践案例查看地址：cid:link_3（2）       完成体验后截图在评论区（3）       任务过程中，遇到操作问题可在本微信群进行交流（4）       遇到产品功能问题，请提交问题工单（必须是开发者工单）（5）       完成问卷调查。奖品设置奖项设置获奖要求获奖名额激励礼品建议排名奖被采纳建议数≥3条5每人价值200元开发者礼包1份高价值建议奖被评选为高价值需求5每人价值200元开发者礼包1份说明：1.      每条被采纳建议累计1积分，被采纳建议数统计截止时间为2025年9月30日24点；2.      奖品数量有限，按照时间先后顺序，先到先得；3.      如礼品库存不足将存在替换成等价值礼品的可能；4.      开发者礼包举例：序号礼包名称介绍1200元开发者礼包1开发者定制双肩包（黑武士款）开发者定制渔夫帽（2025款）开发者定制鼠标垫大号（2025款）2200元开发者礼包2开发者定制冲锋衣（M-3XL）开发者定制渔夫帽（2025款）开发者定制鼠标垫大号（2025款）活动说明（1）       建议提交时需要在标题中以“【GaussDB体验】”为建议标题开头，比如【GaussDB体验】建议增加XX/优化XX/XX操作失败等。（2）       建议内容仅针对云数据库GaussDB应用实践活动，非该活动的建议内容不参与此活动。（3）       提交的建议要求建议对云产品功能及优化改进有积极作用，建议内容需要表述清晰，有明确的建议方案，最好有操作截图或链接等能进一步详细描述。（4）       若出现积分相同且排名一致的情况，根据先到先得原则进行发放。（5）       同一用户在同一页面（文档）提出的同一类用户体验问题（包括但不限于错别字、语句不通顺、视觉体验等），在被采纳后仅算作一条积分。（6）       兑换礼品以仓库现有礼品为准，不可以指定，如遇商品缺货，将随机换成其他等价值礼品发放。

2025年华为全连接大会马上开始了，你最期待什么内容呢？？欢迎回帖交流  

案例介绍本案例选择 AdonisJS 作为示例，并借助开发者空间云开发环境提供的免费 GaussDB 数据库和 HCE2.0 开发环境进行本地部署 AdonisJS 生态组件、轻松部署上云案例内容1). 概述1.1 概述AdonisJS：现代 Node.js 全栈框架A. 核心定位    专为高效开发企业级 Node.js 应用设计的全功能框架，采用 MVC 架构，对标 Laravel/Rails 的开发体验。B. 核心优势    a.一体化开发        内置 ORM（Lucid）、认证系统、验证器、邮件服务        原生支持 TypeScript，强类型保障    b.高性能架构        异步 IOC 容器管理依赖        多进程 HTTP 服务器优化    c.开发者友好        CLI 工具自动生成控制器/模型/迁移文件        文件路由系统（start/routes.ts）    d.安全防护        原生 CSRF 保护        加密会话/Cookie 管理        SQL 注入防护（ORM 参数化查询）适用场景：API 服务、全栈 Web 应用、实时应用华为云 GaussDB：企业级分布式数据库A.核心定位    华为自主研发的金融级云原生分布式数据库，兼容 PostgreSQL/MySQL 生态，主打高可靠与极致性能。B.核心能力    a.金融级可靠性        RTO<30秒，RPO=0（故障秒级切换）        多地多中心容灾架构    b.极致性能        分布式并行计算（MPP）        向量化执行引擎提速 10x    c.深度云集成        存储计算分离架构        秒级扩缩容能力    d.生态兼容        完全兼容 PostgreSQL 协议        支持 AdonisJS Lucid ORM 无缝接入典型场景：金融核心系统、政企数仓、工业物联网当 AdonisJS ✖️ GaussDB：✅ 开发提效：Lucid ORM 原生支持 GaussDB 驱动✅ 成本优化：按需使用云数据库计算节点✅ 安全合规：双端中国企业级安全认证✅ 性能保障：Node.js 事件循环 + 分布式执行引擎尤其适合国产化替代项目及高并发数字业务系统构建。1.2 适用对象企业个人开发者高校学生1.3 案例流程① 用户打开华为开发者空间云主机；② 浏览器下载 VSCode，完成安装配置；③ Adonis 服务 与 华为云数据库 GaussDB 的结合；④ Adonis 服务开发及部署；1.4 资源总览华为云免费开发者空间–云主机华为开发者空间 - 生态版GaussDB弹性公网 IP （ 需要一定的花费 ）2). 环境准备2.1 领取云主机并进入云主机桌面面向广大开发者群体，华为开发者空间提供一个随时访问的“开发桌面云主机”、丰富的“预配置工具集合”和灵活使用的“场景化资源池”，开发者开箱即用，快速体验华为根技术和资源。如果还没有领取开发者空间云主机，可以参考免费领取云主机文档领取。领取云主机后可以直接进入华为开发者空间工作台界面，点击进入桌面连接云主机。2.2 领取 GaussDB 数据库免费领取GaussDB在线试用版（2025年 06月 21日 - 2025年 12月 31日）。华为开发者空间-GaussDB云数据库领取与使用指导。注意：部署的Django项目需要对接GaussDB，因此GaussDB需要绑定EIP，参考上述指导中领取部分第(5)步2.3 安装 VSCode直接打开浏览器，进入 VSCode 下载官网： https://code.visualstudio.com/Download然后根据自己的机型选择需要下载的版本即可，如果跟笔者机器一样的话，直接选择图上 .deb 下载即可下载完成之后一般都会在 /home/developer/Downloads直接左下角打开终端执行以下命令：sudo dpkg -i /home/developer/Downloads/code_xxx.debxxx 为版本号，如果不清楚的话，可以直接输入到 /code_ 然后按下 Table 键即可tip:笔者这是已经安装过了，所以有些不一样也无所谓，只要不报错即可…如果出现安装依赖报错的话可以执行以下命令尝试修复：sudo apt install -f安装完成后，执行以下命令：code2.4 安装 Nodejs 、 npm系统虽然自带了 Nodejs 但是笔者看着好像版本略低，好像是 14.x，所以建议直接更新到最新版本。可以直接去 Nodejs 官网进行下载，或者打开终端执行以下命令：# Download and install nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash # Download and install Node.js: nvm install node # Verify the Node.js version: node -v # Should print "24.5.0". # Verify npm version: npm -v # Should print "11.5.1". 至此，环境安装完成了，接下来我们就可以进行项目构建3). 构建项目3.1 更换 npm 源首先我们的第一件事，就是先把 npm 的源给换了，因为 npm 官方源可能会被墙，导致速度下载速度很慢，并且下载失败，报错的几率比较大，所以我们可以换成国内的镜像源。执行以下命令即可换源，我们现在换的是华为云，如果有需要其他 npm 源可以自行百度，更换即可：npm config set registry https://mirrors.huaweicloud.com/repository/npm/ 3.2 创建 AdonisJS 项目在终端输入以下命令：npm init adonisjs@latest my-app然后他会告诉你Need to install the fllowing packages: create-adonisjs@xxx输入 y 回车即可等待下载，需要等待一小段时间，如果时间太长的话可以 Ctrl + C 断开重新输入之前的命令然后重新下载…安装成功后根据自己所需的来选择 Starter KitSlim starter kitFor minimalists, we have created a slim starter kit. It comes with just the core of the framework and the default folder structure. You may use it when you do not want any bells and whistles of AdonisJS.Web starter kitThe Web starter kit is tailored for creating traditional server renderer web apps. Do not let the keyword “traditional” discourage you. We recommend this starter kit if you make a web app with limited frontend interactivity.The simplicity of rendering HTML on the server using Edge.js will boost your productivity as you do not have to deal with complex build systems to render some HTML.Later, you can use Hotwire, HTMX, or Unpoly to make your applications navigate like an SPA and use Alpine.js to create interactive widgets like a dropdown or a modal.API starter kitThe API starter kit is tailored for creating JSON API servers. It is a trimmed-down version of the web starter kit. If you plan to build your frontend app using React or Vue, you may create your AdonisJS backend using the API starter kitInertia starter kitInertia is a way to build server-driven single-page applications. You can use your favorite frontend framework ( React, Vue, Solid, Svelte ) to build the frontend of your application.You can use the --adapter flag to choose the frontend framework you want to use. The available options are react, vue, solid, and svelte.You can also use the --ssr and --no-ssr flags to turn server-side rendering on or off.选择完毕之后等待脚手架安装、配置环境即可…这可能会需要一段时间…到这里为止，项目就创建完成了！3.3 项目调试在终端输入 code 打开 VS Code选择 File -> Open Folder…然后找到刚刚创建的项目 my-app ，或者是你们自己填的项目名他会在当前目录下创建一个文件夹，选择他点击打开即可勾选 Trust the authors of all files in the parent folder ‘developer’选择 Yes, I trust the authors然后关掉右侧的 Copilot点击顶部管理栏中的省略号（ 或者是直接显示 Terminal ）然后选择 New Terminal 新建终端这样新开的终端就会在当前文件夹中打开这样可以更好的对项目进行调试然后输入以下命令运行项目npm run dev出现上图则证明服务启动成功了，打开浏览器输入 localhost:3333 即可看到网页！3.4 配置华为云数据库 GaussDB进入 GaussDB云数据库点击实例 进入实例详情，查看公网 ip，以及数据库端口，然后在终端输入以下命令telnet $EIP $PORT $EIP 是数据库绑定的公网 ip$PORT 为数据库端口因为笔者已经把数据库端口改成了 5432 所以我这里填的是 5432，如果没有改的话应该是 8000 好像，请注意分辨噢！而且！ 如果 telnet 没有反应的话，请检查安全组是否把服务器端口放行！！！先把华为云数据库 GaussDB 参数 password_encryption_type 的值 改为 1这步一定要在创建用户之前完成！因为目前笔者找不到 sha256 连接数据库的方法...所以先把参数改成 1 支持 md5 进行登录 使用 root@postgres 登录数据库实例，并且在 sql 查询中输入以下命令create user xiaoxia with password 'huawei@123'; create database adonis owner xiaoxia; GRANT ALL PRIVILEGES ON DATABASE adonis to xiaoxia ; ALTER ROLE xiaoxia CREATEDB; 创建用户，数据库成功后，左边选择库名：adonisSchema：public进入到 adoins 数据库中然后在执行以下 sql 创建表 departmentsCREATE TABLE departments ( department_id INTEGER NOT NULL, department_name CHAR(3), manager_id INTEGER, location_id INTEGER ); 点击左边的刷新按钮就会出现表 departments再执行以下 sql 来给表插入数据，方便后续测试insert into departments(department_id,department_name,manager_id,location_id) values (10,'Adm',200,1700),(20,'Mar',201,1800),(30,'Pur',114,1700),(40,'Hum',203,2400),(50,'Shi',121,1500),(60,'IT',103,1400),(70,'Pub',204,2700),(80,'Sal',145,2500),(90,'Exe',100,1700),(100,'Fin',108,1700),(110,'Acc',205,1700),(120,'Tre',NULL,1700),(130,'Cor',NULL,1700),(140,'Con',NULL,1700),(150,'Sha',NULL,1700),(160,'Ben',NULL,1700),(170,'Man',NULL,1700),(180,'Con',NULL,1700),(190,'Con',NULL,1700),(200,'Ope',NULL,1700),(210,'IT ',NULL,1700),(220,'NOC',NULL,1700),(230,'IT ',NULL,1700),(240,'Gov',NULL,1700),(250,'Ret',NULL,1700),(260,'Rec',NULL,1700),(270,'Pay',NULL,1700); 数据插入成功之后输入GRANT USAGE ON SCHEMA public TO xiaoxia; GRANT SELECT ON departments TO xiaoxia; SELECT * FROM departments查看表数据是否插入成功，如果呈现下图所示证明插入成功！用户名 xiaoxia 、密码 huawei@123、数据库名adonis 以及表名 departments 可以自己决定这个之后会在 AdoinsJS 中用到3.5 Adonis 项目连接华为云数据库打开 VS Code 然后编辑文件 config/databse.tsconst dbConfig = defineConfig({ connection: 'postgres', connections: { postgres: { client: 'pg', version: '7.4', connection: { host: env.get('DB_HOST'), port: env.get('DB_PORT'), user: env.get('DB_USER'), password: env.get('DB_PASSWORD'), database: env.get('DB_DATABASE'), }, migrations: { naturalSort: true, paths: ['database/migrations'], }, }, }, }) 加上 version: ‘7.4’因为不加的话，版本过新，导致他内部的方法 跟 华为云数据库返回的数据没能做到完全兼容，导致报错。再找到目录下 .env 文件TZ=UTC PORT=3333 HOST=localhost LOG_LEVEL=info APP_KEY=1iLDxooWc3Or_kxZ4YJx05On-2ftAXZ9 NODE_ENV=development SESSION_DRIVER=cookie DB_HOST=139.9.223.20 DB_PORT=5432 DB_USER=xiaoxia DB_PASSWORD=huawei@123 DB_DATABASE=adonis注意更改 DB_HOST、DB_PORT、DB_USER、DB_PASSWORD、DB_DATABASE这些都是之前设置的，如果跟笔者不一样的话请填写 3.4 中创建的用户名等信息再最后加上测试路由，编辑 start 文件夹下的 routes.ts 文件import db from '@adonisjs/lucid/services/db' router.get('/test-db', async () => { try { const response = await db.rawQuery('SELECT * FROM departments') return { status: 'success', message: '✅ 数据库连接成功！', details: 'GaussDB 连接正常', response } } catch (error) { return { status: 'error', message: '❌ 数据库连接失败', error: error.message, solution: '请检查以下配置：1. 主机地址 2. 端口 3. 用户名/密码 4. SSL设置' } } }) 注意 sql SELECT * FROM departments 中表名 departments如果跟笔者不一样的话请更改，参考 3.4更改文件记得使用 Ctrl + s 保存文件！更改完文件之后回到浏览器输入 localhost:3333/test-db就可以看到以下输出从图上可以看出，我们已经成功连接了数据库，并且能够查询出数据！3.6 报错浏览器返回报错status "error" message "❌ 数据库连接失败" error "SASL: Only mechanism(s) SCRAM-SHA-256 are supported" solution "请检查以下配置：1. 主机地址 2. 端口 3. 用户名/密码 4. SSL设置" 如果出现以下报错！ 就证明，你选择登录的用户是在修改参数 password_encryption_type 为 1 之前创建的！所以 可以先把 password_encryption_type 修改为 1 然后再重新创建用户 并且给予用户权限，再把 .env 里边的 DB_USER DB_PASSWORD 改成后创建的用户即可！控制台报错/home/developer/my-app/node_modules/pg/lib/query.js:145 throw err ^ TypeError: Cannot read properties of null (reading '1') at Client_PG._parseVersion (/home/developer/my-app/node_modules/knex/lib/dialects/postgres/index.js:135:56) at Query.<anonymous> (/home/developer/my-app/node_modules/knex/lib/dialects/postgres/index.js:129:22) at Query.handleReadyForQuery (/home/developer/my-app/node_modules/pg/lib/query.js:142:14) at Client._handleReadyForQuery (/home/developer/my-app/node_modules/pg/lib/client.js:321:19) at Connection.emit (node:events:507:28) at /home/developer/my-app/node_modules/pg/lib/connection.js:116:12 at Parser.parse (/home/developer/my-app/node_modules/pg-protocol/src/parser.ts:103:9) at Socket.<anonymous> (/home/developer/my-app/node_modules/pg-protocol/src/index.ts:7:48) at Socket.emit (node:events:507:28) at addChunk (node:internal/streams/readable:559:12) Node.js v24.5.0 如果出现以上报错则证明在 confog 文件夹下的 database.ts 文件，并没有添加上 version: ‘7.4’，版本过新，导致与华为云数据库并没有完全兼容！把 version: ‘7.4’ 添加上即可4). 项目上线4.1 前言该章节为可选章节，完成这个章节可以把自己的 AdonisJS 项目部署在服务公网上，可以让广大网友进行访问，但是需要注意的是需要到一台有公网 IP 的服务器，具体可以看看华为云 Flexus 应用服务器 L 实例，新用户性价比还是比较高的。！不建议使用前三节进行学习用到的免费华为云开发者云主机！4.2 使用 FinalShell 或者其他工具对服务器进行 SSH 连接其他工具：XShell 等笔者在该章节用 FinalShell 做演示工具，可以自行下载，或者更换其他工具，都大差不差打开 FinalShell 点击上方 Tab 栏的文件夹按钮点击 添加连接 按钮，然后选择 SSH 连接输入信息必要信息，主机 （公网IP） 由 4.1 图中所得，一般创建服务器的时候都会叫你创建一个密码以用于 SSH 连接linux 系统端口一般为 22用户名一般为 root4.3 打包 AdonisJS 项目并上传到服务器在华为云开发者空间的机器 VS Code 中，输入 npm run build 对项目进行打包出现上图字眼则证明打包成功然后使用 scp 把 build 文件夹上传到服务器scp -r ./build root@$EIP:~ $EIP 为服务器的公网 ip然后在回到 FinalShell 并且输入以下命令cd build npm ci --omit="dev" tip: 执行该命令之前，请在自己的云服务器中安装 Nodejs、Npm （章节 2.5） 以及设置好国内 Npm 源（章节 3.1）看到以下字眼则证明依赖安装成功：added 97 packages, and audited 98 packages in 32s 20 packages are looking for funding run `npm fund` for details found 0 vulnerabilities4.4 配置环境变量在 FinalShell 中执行以下命令修改配置环境变量nano ~/.bashrc 把下面的文字添加到文件的末尾export TZ=UTC export PORT=3333 export HOST=0.0.0.0 export LOG_LEVEL=info export APP_KEY=1iLDxooWc3Or_kxZ4YJx05On-2ftAXZ9 export NODE_ENV=production export SESSION_DRIVER=cookie export DB_HOST=139.9.223.20 export DB_PORT=5432 export DB_USER=xiaoxia export DB_PASSWORD=huawei@123 export DB_DATABASE=adonis注意！APP_KEY 请根据自己项目中 .env 中的 APP_KEY 进行填写！以及如果 DB_HOST DB_USER DB_PASSWORD DB_DATABASE 与笔者不一致请参考 3.4添加完成之后使用 Ctrl + x 退出然后输入 y在输入回车 确认最后再执行 source ~/.bashrc 来启用刚刚设置的环境变量没有问题之后输入以下命令启动 AdonisJS 服务node bin/server.js出现以下字眼则证明服务启动成功啦！{"level":30,"time":1755165680553,"pid":1904355,"hostname":"ECS9021","msg":"started HTTP server on 0.0.0.0:3333"} 然后打开浏览器输入 公网IP:3333 得到跟之前一样的页面！看起来没有任何问题当前案例到这里就完全结束啦！5. 总结构建了基于AdonisJS的现代化Web应用，采用华为云全栈方案：计算层：部署于华为开发者空间云主机（ECS），提供弹性计算资源数据层：集成华为云GaussDB（分布式云数据库），支撑高性能数据存储应用层：使用AdonisJS全功能框架（Node.js）开发通过npm run build编译生产版本配置环境变量实现服务监听0.0.0.0网络架构：云主机绑定弹性公网IP安全组放行3333端口公网访问核心优势：✅ 华为云生态深度整合✅ GaussDB提供金融级数据可靠性（兼容PostgreSQL）✅ AdonisJS开箱即用的身份认证/ORM功能✅ 云主机SSD磁盘保障I/O性能典型工作流：本地开发 → 构建编译 → 云主机部署 → GaussDB数据交互 → 公网用户访问此架构兼顾开发效率与生产稳定性，适合中大型企业级应用。正在参加【案例共创】第6期 开发者空间-基于云开发环境和GaussDB构建应用 https://bbs.huaweicloud.com/forum/thread-0229189398343651003-1-1.html