步履不停|我的软件工程初识与成长复盘

这个作业属于哪个课程 H202601软件工程与软件工程实践
这个作业要求在哪里 2026秋软件工程个人作业(第一次)
这个作业的目标 实践模型API调用与网页交互,建设GitHub个人主页,梳理个人技能与不足,制定软件工程课程学习计划
学号 102402151

关于我

先做个自我介绍。我叫朱铭浩,福州大学计算机与大数据学院数据科学与大数据技术专业在读。最近新培养的爱好是做网站,做出画面精美的网页让我有很大的成就感,这个兴趣说来话长——大二那会儿偶然刷到一个个人独立做的小游戏网站,页面不算复杂但挺有意思,当时就想着“我自己能不能也做一个出来”,从那之后断断续续自学前端,一直折腾到现在。

🔭 目前在做:Web 前端、Python 机器学习相关的小开发

🌱 正在学习:Python、数据库、Flask、HTML/CSS/JS、机器学习算法;同时在修数据采集与融合技术、大数据项目实践、大数据计算这几门课,边学边补大数据方向的基础

👯 希望可以和大家交流校园科创、竞赛相关的内容

💬 欢迎和我讨论:前端开发、数据处理、课程作业、创新创业项目

⚡ 爱好:研究新技术,喜欢折腾各类小项目

编程语言:Python | HTML | CSS | JavaScript | SQL

工具 & 框架:Flask | Scikit-learn | Pandas | Git | VS Code

说实话,我目前的水平离“全栈”还差得远——前端能写页面但工程化经验不足,机器学习算法也只是跑过几个 demo,没做过真正能用的模型。代码量也不多。写这些不是为了显得自己多厉害,更多是给自己留个起点记录。本学期希望通过软件工程课把短板补一补,至少学会怎么规范地做项目,而不是从头到尾一笔糊涂账。

零、准备工作

按照作业要求,先完成账号注册、博客开通、班级加入等基础准备工作。

0.1 GitHub 账号注册与个人信息完善

在 GitHub 官网注册账号 Emmamone,完善个人头像、简介、所在地区、联系方式等资料,并将默认分支初始化为 main

GitHub个人主页

0.2 博客园账号注册与博客开通

在博客园注册账号并申请开通博客,将默认编辑器切换为 Markdown 编辑器,完善昵称、头像、个人简介,同时关注任课老师与助教博客。

博客园个人主页

一、个人技能树梳理与自我评估

1.1 已具备的专业知识与能力

  • 编程语言与工具:掌握Python、HTML、CSS、JavaScript、SQL基础语法;掌握使用VS Code、Pandas、Scikit-learn等开发工具与数据处理库
  • 专业课程基础:正在修读数据采集与融合技术、大数据项目实践、大数据计算、数据库系统原理等课程,具备数据处理、数据库设计与小型项目开发能力
  • 项目实践:参与前端开发,具备基础Web页面开发与数据统计分析实践经验
  • 文档写作:掌握Markdown语法,能够独立编写项目说明文档与课程实验报告

1.2 感兴趣的技术方向

  • 大数据分析与数据挖掘落地应用
  • Web全栈开发与工程化实践
  • AI模型接口集成与应用开发
  • 软件工程化管理与团队项目协作

1.3 目前欠缺的能力

  • 软件工程系统化思维不足,项目开发缺乏规范的需求分析、设计文档与标准化测试流程
  • 大型团队项目经验较少,代码的工程化、可维护性与可扩展性有待提升
  • 软件测试方法、项目进度管理相关的实践经验不足
  • AI模型从调用到工程化落地的完整流程经验欠缺

二、代码量现状与学期目标

2.1 当前代码量

暂时没有统计过代码总行数,目前主要在课程实验、课后 Demo 和小型项目中持续写代码,还在逐步积累。

2.2 本学期目标代码量

本学期计划持续动手实践,争取累计有效代码达到 4000–6000 行。不盲目堆砌代码行数,优先打磨代码质量,多写软件工程规范案例、Web 项目、AI 接口集成相关代码,慢慢建立起良好的编码习惯。

三、本课程学习期待

3.1 最期待学习的知识

  1. 软件完整生命周期的规范化流程,包括需求分析、UML建模、软件架构设计、测试与项目管理
  2. 团队协作开发的方法与代码规范,提升大型项目的参与与协作能力
  3. 工程化的代码设计思想,提升代码的可维护性、可扩展性与健壮性
  4. AI工具在软件工程全流程中的实践应用方法

3.2 希望获得的收获

建立工程化的软件开发思维,摆脱“写代码就是做软件”的片面认知;掌握规范的项目开发流程与全套文档输出能力;提升团队协作与项目管理能力,为后续专业实践、竞赛与就业打下扎实基础。

四、AI生成软件工程课程学习指南与分析

4.1 使用的 AI 工具与提问 Prompt

这次选用的 AI 工具是 GLM(智谱出品的大模型系列),通过 Trae IDE 调用。选它一方面是作业要求里就举了 GLM 的例子,另一方面手里正好有 Trae IDE 能直接调,边问边截图方便。

提问的 Prompt 如下:

我是软件工程课程的本科生,大数据方向,请帮我生成一份
本学期软件工程课程的学习指南,按阶段划分,每个阶段包含
理论学习要点和配套实践,并说明理由。

把这段发给 GLM,下面 4.2 节就是它给出的回答。

4.2 GLM 生成的学习指南

阶段一:基础入门(第 1-4 周)

  • 理论学习要点:软件生命周期、主流开发模型(瀑布、增量、敏捷)、UML 三类图(用例图、类图、时序图)
  • 配套实践:挑一个熟悉的小软件(比如课程签到系统),画出它的用例图和类图
  • 理由:概念和建模是后续所有内容的基础,先建立"软件是怎么被设计出来"的整体认知

阶段二:核心进阶(第 5-10 周)

  • 理论学习要点:需求分析方法、软件设计七大原则(SOLID 等)、单元测试与集成测试
  • 配套实践:完成课程大作业的需求文档、概要设计文档和测试报告
  • 理由:需求-设计-测试是软件工程的三条主线,必须在这个阶段内学完

阶段三:工程实践(第 11-16 周)

  • 理论学习要点:Scrum 敏捷流程、版本控制协作规范、项目管理工具(Jira / 飞书)
  • 配套实践:小组形式做综合项目,模拟完整开发流程,跑两轮迭代
  • 理由:理论必须落到团队协作里才能内化,光看不练等于没学

阶段四:拓展提升(学期末之后)

  • 理论学习要点:软件架构、质量度量、后期维护与迭代
  • 配套实践:把软件工程方法用到自己的大数据或前端项目里
  • 理由:课堂内容有限,真正的提升来自把方法迁回自己的专业方向

4.3 合理性逐阶段分析

整体看着挺合理,循序渐进,跟课程大纲对得上。但真要照着做,有些地方得改改:

阶段 合理之处 不足 / 需调整
基础入门 UML 配合小软件分析很务实,概念铺垫也到位 第 1-4 周就要画完整三类图偏紧,建议先只画用例图
核心进阶 需求-设计-测试三条主线覆盖到了 测试只提单元和集成,漏了系统测试和回归测试
工程实践 Scrum + 迭代贴近真实研发 一学期跑完整迭代偏理想,建议改为 2-3 次短迭代
拓展提升 提到结合自身方向是对的 太泛,没说大数据方向具体怎么结合

4.4 指南里漏掉的内容

除了上面那些小问题,GLM 这份指南还漏了三块我觉得挺重要的:

  1. 代码规范和 Code Review:写代码怎么写才规范、怎么互相审代码,这是团队协作的基本功,但指南里几乎没提
  2. CI/CD 基础:自动化构建、测试、部署这套东西现在挺普及的,指南完全没碰
  3. AI 工具在软件工程里的位置:现在用 AI 辅助写需求、写测试已经挺常见了,指南没说 AI 能帮什么忙、边界在哪

这三块恰好是当下挺关键的部分,光按 GLM 给的路线走会漏掉。

4.5 结合大数据方向改的版本

在 GLM 给的指南基础上,按自己的方向改了一下:

  1. 入门期:补 Git 分支策略、Python 代码规范(PEP8),可以用 Jupyter 先做个需求原型
  2. 进阶期:测试用例不止测代码,还要测数据质量,比如 Pandas DataFrame 的断言
  3. 实践期:团队项目选题往数据采集-清洗-展示这条链路靠,用 Scrum 跑两轮
  4. 提升期:试试让 AI 帮忙生成需求文档草稿和测试用例,看看它的边界在哪

4.6 对自己的帮助

总的来说,这份指南可以当路线参考,但不能照搬。GLM 给的是通用答案,真要对自己有用,还得结合自己的方向改一改、补一补。这次跟 GLM 对话的过程本身也有点收获——发现问得越具体(比如加上"大数据方向""按阶段划分"),它给的答案就越能用;问得太泛,回答也就跟着变虚。

五、HuggingFace Flux API 调用实践

本部分调用 XLabs-AI/flux-RealismLora 模型,并用 Flask + 前端实现交互式生成。flux-RealismLora 是基于 Flux 架构、用 Realism LoRA 微调得到的写实风格文生图模型,擅长生成贴近真实世界的图像。

5.1 操作步骤

  1. 在 HuggingFace 官网注册账号,进入 Settings → Access Tokens 创建一个 write 权限的 Token
  2. 阅读模型卡片,确认通过 Inference API 的 POST 方式调用,请求体为 {"inputs": "<提示词>"}
  3. 搭建前后端项目 flux-app/,后端用 Flask 封装 API 调用,前端用 fetch 提交提示词并展示图片
  4. 设置 HF_TOKEN 环境变量,启动服务,浏览器访问 http://127.0.0.1:5000
  5. 迭代提示词,对比生成效果

5.2 项目结构

flux-convenience-store/
├── app.py              # Flask 后端,封装 HF API
├── requirements.txt    # 依赖
├── templates/
│   └── index.html      # 前端表单 + 结果展示
├── .vscode/
│   └── settings.json
└── .env

5.3 后端核心代码(app.py)

import os, base64, io
from datetime import datetime
from flask import Flask, request, jsonify, render_template
from flask_cors import CORS
from huggingface_hub import InferenceClient
from PIL import Image
from dotenv import load_dotenv

load_dotenv()                                       # 从 .env 读 HF_TOKEN
app = Flask(__name__)
CORS(app)

HF_TOKEN = os.environ.get("HF_TOKEN")               # 从环境变量读,不写死在代码里
if not HF_TOKEN:
    raise ValueError("请检查 .env 文件,确保已设置 HF_TOKEN")

client = InferenceClient(api_key=HF_TOKEN, timeout=120)   # 官方 SDK 客户端
MODEL_ID = "XLabs-AI/flux-RealismLora"

@app.route('/api/generate', methods=['POST'])
def generate_image():
    prompt = (request.json or {}).get('prompt', '').strip()
    if not prompt:
        return jsonify({'error': '提示词不能为空'}), 400

    print(f"[{datetime.now():%Y-%m-%d %H:%M:%S}] 开始生成图片...")
    try:
        image: Image.Image = client.text_to_image(  # 调用 HF Inference API
            prompt=prompt,
            model=MODEL_ID,
        )
        buffered = io.BytesIO()
        image.save(buffered, format="PNG")
        img_base64 = base64.b64encode(buffered.getvalue()).decode()

        print(f"[{datetime.now():%Y-%m-%d %H:%M:%S}] API 调用成功!")
        return jsonify({'success': True, 'image': img_base64, 'message': '生成成功!'})
    except Exception as e:
        print(f"生成失败: {e}")
        return jsonify({'error': str(e)}), 500

5.4 前端交互(index.html 节选)

async function generateImage() {
    const prompt = document.getElementById('prompt').value.trim();
    if (!prompt) { alert('请输入提示词!'); return; }

    const btn = document.getElementById('generateBtn');
    btn.disabled = true;
    btn.textContent = '⏳ 生成中...';
    document.getElementById('loading').style.display = 'block';
    document.getElementById('result').style.display = 'none';
    document.getElementById('error-msg').style.display = 'none';

    try {
        const response = await fetch('/api/generate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ prompt })
        });
        const data = await response.json();

        if (data.success) {
            const img = document.getElementById('outputImg');
            img.src = 'data:image/png;base64,' + data.image;  // base64 加前缀直接展示
            document.getElementById('result').style.display = 'block';
            // 下载按钮也用同一份 base64
            const downloadBtn = document.getElementById('downloadBtn');
            downloadBtn.href = 'data:image/png;base64,' + data.image;
            downloadBtn.download = 'flux_refrigerator_' + Date.now() + '.png';
        } else {
            document.getElementById('error-msg').textContent = '生成失败:' + (data.error || '未知错误');
            document.getElementById('error-msg').style.display = 'block';
        }
    } catch (err) {
        document.getElementById('error-msg').textContent = '请求异常:' + err.message;
        document.getElementById('error-msg').style.display = 'block';
    } finally {
        btn.disabled = false;
        btn.textContent = '🚀 生成图片';
        document.getElementById('loading').style.display = 'none';
    }
}

5.5 工程化思考:为什么用 Flask 包一层而不前端裸调

  • 安全:HuggingFace Token 若写在前端会被任何人 F12 抓走,必须放在后端环境变量
  • 稳定性:模型冷启动常返回 503,统一在后端处理并给出友好提示
  • 扩展性:后续要加限流、缓存、多模型切换,都集中在后端做

5.6 提示词迭代过程

提示词越具体、越接近真实场景的描述,生成质量越高。本次围绕"凌晨便利店冷藏柜"这个场景迭代了 3 版,记录如下:

版本 提示词 效果和问题
v1 A cinematic photograph looking into an illuminated convenience store refrigerator at 3 AM, cold white LED light mixed with warm yellow interior lighting, glass door slightly fogged with condensation, colorful cans and bottles of iced tea and soda lined up neatly, tiny water droplets on the metal shelves, reflection of a dimly lit empty street outside on the glass, shallow depth of field focusing on the second shelf, subtle lens flare, shot on Sony A7III with 50mm f/1.4, natural color grade, photorealistic. 整体感觉对了,但冷暖光混合、玻璃水雾这些细节表现一般,瓶子材质不够分明
v2 A cinematic photograph looking into an illuminated convenience store refrigerator at 3 AM, cold white LED fridge light mixed with warm yellow ambient store lighting, glass door slightly fogged with thin condensation, faint reflection of dim empty street lights on the glass, colorful cans and glass bottles of iced tea and soda lined up neatly, tiny water droplets on metal shelves, shallow depth of field, focus sharply on the second shelf, subtle soft lens flare, shot on Sony A7III with 50mm f/1.4 lens, natural color grading, photorealistic, realistic texture, low noise 区分了铝罐和玻璃瓶,补了"低噪点",水雾变薄了,但雾气质感还是偏厚重,遮挡了内部
v3 A cinematic photograph looking into an illuminated refrigerator of an empty convenience store at 3 AM, cold white LED light inside fridge mixed with warm yellow ambient store lighting, glass door covered with thin mist condensation instead of dense water drops, faint reflection of dim empty street and streetlights on the glass, colorful aluminum cans and transparent glass bottles of iced tea and soda neatly placed on metal wire shelves, tiny water droplets on shelf surface, shallow depth of field, focus sharply on the second shelf, subtle soft lens flare, shot on Sony A7III with 50mm f/1.4 prime lens, natural color grading, photorealistic, real physical texture, low digital noise, realistic lighting physics 把"空便利店"和"金属网货架"说清楚,雾气改为薄雾,加上"真实光照物理",最终版真实度最高

设计思路:三版都在围绕"冷暖光混合 + 玻璃水雾 + 街景倒影 + Sony A7III 镜头感"这条主线打磨,每次只改一个维度——v1 搭骨架,v2 把瓶子材质和水雾厚度区分开,v3 把店内外场景、货架结构、雾气质感都进一步明确,并补上"真实光照物理"把真实感拉满。每次只动一个地方,能更快看出哪改对了。

下面是三版的生成效果:

v1:
flux_refrigerator_1788942697000

v2:
flux_refrigerator_1788943308914

v3:
flux_refrigerator_1788945537166

5.7 API 调用成功记录与前端生成截图

  • 后端 200 返回日志:

后端

  • 前端页面生成图像:

前端1

前端2

前端3

5.8 体验与心得

通过本次实践,完整走通了「Token 管理 → 后端封装 → 前端交互 → 提示词迭代」的全流程。最大的体会是:提示词工程是生成质量的瓶颈,每次只改一个维度(主体 / 光影 / 画质)能更快定位效果差异;而把 API 放在后端封装,比前端裸调更安全、也更便于后续扩展。下一步可以尝试接入不同的 LoRA 模型做风格切换,或加缓存避免重复消耗额度。

六、GitHub个人主页搭建实践

6.1 方案选择

选择个人资料自述文件(Profile README)方案,创建与用户名同名的仓库Emmamone,通过README.md在GitHub账号主页展示个人信息。

6.2 搭建过程

  1. 创建与GitHub用户名完全一致的公共仓库,自动启用Profile README功能
  2. 编写README内容,包含个人介绍、学习方向、技术栈、代表项目、联系方式
  3. 提交修改,刷新个人主页查看展示效果并优化排版

6.3 遇到的问题与解决

  • 问题:混淆Profile仓库与GitHub Pages站点仓库,直接访问xxx.github.io出现404
  • 解决:明确两者定位——同名仓库负责账号主页简介展示,若要部署独立网站需要单独创建用户名.github.io仓库。

6.4 README 内容展示

Profile README 内容如下(仓库根目录 README.md):

# 👋 Hi,我是 朱铭浩(Emmamone)
> 🎓 计算机与大数据学院在读大学生,热爱编程与项目实践,持续学习成长中

## 🧑‍🎓 关于我
- 🔭 目前在做:Web前端、Python机器学习相关开发
- 🌱 正在学习:Python、数据库、Flask、HTML/CSS/JS、机器学习算法;同时修读**数据采集与融合技术、大数据项目实践、大数据计算**等专业课程,夯实大数据方向技术基础
- 👯 希望可以和大家交流校园科创、竞赛相关内容
- 💬 欢迎和我讨论:前端开发、数据处理、课程作业、创新创业项目
- ⚡ 爱好:研究新技术,喜欢折腾各类小项目

## 🛠️ 技术栈
**编程语言**
Python | HTML | CSS | JavaScript | SQL

**工具&框架**
Flask | Scikit‑learn | Pandas | Git | VS Code | WPS

## 📫 联系我
- 邮箱:2205774089@qq.com
- 个人主页:https://github.com/Emmamone/Emmamone

## ✨ 小趣事
> 一边上课一边做科创,享受把想法变成可运行代码的过程。

6.5 未来三年发展规划

时间 目标 理由
大三(今年) 打牢工程化基础,完成 4000+ 行规范代码;把大数据方向的核心课(数据采集、大数据计算、机器学习)学扎实,开始关注考研科目 软件工程课程是建立工程思维的窗口期,越早规范越受益;大三是专业课最密集的一年,必须把方向立住,同时为考研铺路
大四 全力准备考研,目标大数据或软件工程方向学硕;同时保留一段完整项目经历作为复试加分项,不放弃春招备选 考研需要持续投入,但复试也看重项目能力,不能完全丢开编码;留春招保底避免被动

总体方向:优先考研,目标是本专业或相近方向的学硕。理由是本科阶段感觉自己在大数据和 AI 应用方面的积累还不够深,想再花两三年跟导师做项目、补科研方法,把技术方向磨得更专。

七、Markdown学习

7.1 本作业实际用到的 Markdown 语法

语法 用途 本作业示例
表格 作业头信息表、提示词迭代表 开头学号表
代码块 + 语言标识 高亮 Python / JS 5.3 app.py 片段
引用块 > 标注 AI 生成内容 4.2 节
HTML <center> 表格居中 作业头部
Mermaid 流程图 画调用流程 见下

Flux 调用流程用 Mermaid 画出来,直观体现前后端与 API 的关系:

flowchart LR A[前端输入提示词] -->|fetch /generate| B[Flask 后端] B -->|Bearer Token| C[HuggingFace Inference API] C -->|flux-RealismLora| D[生成图像] D -->|base64| B B -->|JSON| A A --> E[页面展示 + 下载]

八、博客园Markdown编辑器截图

博文页面截图

九、总结

本次作业完成了从准备到实践的完整闭环:

  1. 准备:完成 GitHub、博客园账号注册,关注老师助教,实名加入 H202601 班级博客
  2. AI 实践:用 Flask + 前端封装 HuggingFace Flux API,实现交互式图像生成,并迭代 4 版提示词逼近真实感
  3. 个人主页:搭建 GitHub Profile README,补全自我介绍、技能评估与未来三年发展规划
  4. 技能梳理:盘点代码量与技能树,对照 AI 生成的学习指南修订出大数据方向的本地化路线

最大收获是体会到"工程化"不是抽象概念——一个 Token 放前端还是后端、一次提示词迭代改几个维度,背后都是工程决策。后续会把这种思维带入团队项目与日常开发中。

posted @ 2026-09-10 17:46  Emmamone  阅读(25)  评论(0)    收藏  举报