深圳网站制作厂家网络营销推广的好处

深圳网站制作厂家,网络营销推广的好处,网站的布局方式有哪些,建设网站最好的第一组 - U-Linker - 第二篇冲刺博客 Fifth AssignmentU-Linker课程EE308FZ - 软件工程要求Fifth Assignment——Alpha Sprint目标记录冲刺阶段第3-4天的项目进展、团队协作与问题解决目录第一组 - U-Linker - 第二篇冲刺博客I. 项目燃起图II. 模块运行展示III. 重点代码1. 个…第一组 - U-Linker - 第二篇冲刺博客Fifth AssignmentU-Linker课程EE308FZ - 软件工程要求Fifth Assignment——Alpha Sprint目标记录冲刺阶段第3-4天的项目进展、团队协作与问题解决目录第一组 - U-Linker - 第二篇冲刺博客I. 项目燃起图II. 模块运行展示III. 重点代码1. 个人中心“我的”2. 编辑个人信息3. 积分明细IV. 成员分工 提交记录I. 项目燃起图截至目前第4天项目的整体进度如下项目目前剩余工作量为 68%。相比于理想状态下的剩余工作量约 66.7%我们的实际进度曲线红线略微浮于理想曲线蓝线上方。这意味着我们存在极小幅度的任务积压约 1-2% 的偏差但整体处于完全可控的范围内。II. 模块运行展示我们的UI设计与前端开发组完成了个人中心页面的深度交互实现了用户头像、昵称及积分数据的实时响应式展示。同时重点攻克了积分明细的可视化列表渲染通过动态样式逻辑自动区分“收入”与“支出”的视觉反馈。我们的后端开发组完成了项目最核心的交易模块开发实现了“购买服务”与“悬赏任务申请/选人”的复杂业务逻辑确立了订单状态流转与积分扣除机制。此外新增了即时通讯模块的API接口支持创建会话与发送消息并升级了用户信息接口实现了头像文件的上传、重命名与存储逻辑打通了从用户交互到数据库持久化的完整链路。我们的测试与体验优化组完成了对新上线的交易接口与聊天接口的边界测试重点验证了积分不足、重复申请任务等异常场景下的系统稳定性。同时对个人中心进行了前后端联调测试确保前端修改的信息能准确无误地同步至数据库且页面加载时的状态回显迅速、准确。编辑个人信息积分明细III. 重点代码1. 个人中心“我的”前端响应式数据绑定与用户交互个人中心页面的模板设计充分体现了Vue的数据驱动特性。我们使用多种绑定语法将JavaScript数据与HTML元素无缝连接当数据变化时视图会自动更新无需手动操作DOM。这种设计模式既提升了开发效率也保证了用户体验的一致性。template!-- 数据绑定 --h2classtext-xl font-bold text-gray-900 truncate{{ userInfo.name }}/h2!-- 条件渲染 --spanv-ifunreadMessages 0classbg-red-500 text-white text-[10px] px-1.5 rounded-full{{ unreadMessages }}/span!-- 事件绑定 --buttonclickhandleEditProfile编辑/button!-- 动态属性绑定 -- img :srcuserInfo.avatar alt用户头像!-- 响应式积分显示 --divclasstext-3xl font-bold font-mono tracking-wider{{ userInfo.points }}/div/template后端通过 models.py 定义用户结构并提供 /auth/profile 接口供前端获取当前用户的核心数据如头像、积分、姓名。classUser(db.Model):__tablename__useriddb.Column(db.Integer,primary_keyTrue)usernamedb.Column(db.String(50),uniqueTrue,nullableFalse)namedb.Column(db.String(50))pointsdb.Column(db.Integer,default100)# 对应前端显示的积分avatardb.Column(db.String(200))# 对应前端绑定的 :src# ...defto_dict(self):return{id:self.id,username:self.username,name:self.name,points:self.points,avatar:self.avatar}auth_bp.route(/profile,methods[GET])defget_profile():# 获取 URL 参数 user_iduser_idrequest.args.get(user_id)# ...# 在数据库中查找userdb.session.get(User,user_id)ifuser:returnsuccess(datauser.to_dict())# 返回包含 points, avatar 的字典else:returnerror(message用户不存在)2. 编辑个人信息前端1这是Vue最核心的功能建立了表单输入框和JavaScript数据之间的双向连接。用户输入 → 自动更新数据数据变化 → 自动更新界面显示。!-- 模板部分 --inputtypetextv-modelformData.username!--核心双向数据绑定--inputvalidateUsername !-- 数据部分 --scriptsetupconstformDatareactive({username:李晓明// 与v-model建立双向连接})/script2实现了边输入边验证的体验用户不需要点击提交按钮就能立即得到反馈。inputtypetextv-modelformData.usernameinputvalidateUsername!--核心输入时实时触发验证--scriptsetup// 核心验证函数constvalidateUsername(){constusernameformData.username.trim()if(username){validationErrors.username用户名不能为空}elseif(username.length2){validationErrors.username用户名至少2个字符}else{validationErrors.usernamecheckUsernameUnique(username)// 触发异步验证}}/script3自动计算表单是否有效并智能控制保存按钮状态用户界面状态完全由数据驱动。scriptsetup// 核心计算表单验证状态constisFormValidcomputed((){returnformData.username.trim()!!validationErrors.username})/script!-- 使用计算属性 --button :disabled!isFormValid!-- 核心自动启用/禁用按钮 --clickhandleSave 保存修改/button后端1数据接收与处理 (auth.py)对应前端的双向绑定后端在 update_profile 接口接收表单数据。虽然前端做了验证后端依然需要验证用户是否存在。auth_bp.route(/update_profile,methods[POST])defupdate_profile():# 1. 获取当前用户user_idrequest.form.get(user_id)# ...userdb.session.get(User,user_id)ifnotuser:returnerror(message用户不存在)# 2. 修改普通资料 (对应前端 v-model 绑定的数据)new_namerequest.form.get(name)ifnew_name:user.namenew_name# ...2实时验证支持虽然代码中未展示专门的“检查用户名唯一性”的独立接口但在注册接口中存在类似的逻辑可被复用或封装以支持前端的 checkUsernameUnique。# 逻辑参考检查重复 (auth.py 中的 register 函数)existing_userUser.query.filter(or_(User.usernameusername,User.student_idstudent_id)).first()ifexisting_user:# 返回错误信息供前端展示ifexisting_user.usernameusername:returnerror(message该用户名已经被注册)3保存修改与头像上传 (auth.py)对应前端“保存修改”按钮的点击事件。后端处理文件上传、重命名防止冲突以及更新数据库路径。# ...接 update_profile 函数try:# 3. 处理头像上传 (对应前端文件输入)ifavatarinrequest.files:filerequest.files[avatar]# 检查文件是否存在且格式合法iffileandallowed_file(file.filename):# 为了防止文件名冲突重命名为: user_id_时间戳.jpgextfile.filename.rsplit(.,1)[1].lower()filenamesecure_filename(fuser_{user.id}_{int(datetime.now().timestamp())}.{ext})# ...保存文件逻辑 (省略路径拼接代码)...file.save(file_path)# 4. 更新数据库里的路径user.avatarurl_for(static,filenamefavatars/{filename})db.session.commit()# 提交事务完成保存returnsuccess(message个人资料修改成功,datauser.to_dict())# ...3. 积分明细前端1通过ref和reactive建立集中式数据源积分总额与明细记录完全响应式一处更新处处同步。scriptsetupimport{ref,reactive,computed}fromvue// 核心积分总额响应式管理consttotalPointsref(350)// 核心积分明细列表响应式数据constpointsRecordsreactive([{id:1,title:完成任务数据标注,amount:90,type:income,icon:mdi:check-circle-outline,color:green,date:2025-11-05 14:30,status:任务完成},// ...更多记录])/script2利用动态CSS类绑定实现收入/支出自动颜色区分图标、背景、文字颜色完全由数据类型驱动。template!-- 积分记录列表 --divv-forrecord in pointsRecords:keyrecord.idclassbg-white p-4 rounded-xl shadow-sm border border-gray-100 flex justify-between items-center!-- 图标区域动态样式绑定 --divclassflex items-center gap-3div:class[w-10 h-10 rounded-full flex items-center justify-center, record.type income?bg-green-50 text-green-600:bg-red-50 text-red-500]spanclassiconify w-6 h-6:data-iconrecord.icon/span/divdivdivclasstext-sm font-bold text-gray-800{{ record.title }}/divdivclasstext-xs text-gray-400 mt-0.5{{ record.date }}/div/div/div!-- 金额区域动态样式绑定 --divclasstext-rightdiv:class[text-lg font-bold, record.type income?text-green-600:text-red-500]{{ record.type income ? : - }}{{ record.amount }}/divdivclasstext-[10px] text-gray-400{{ record.status }}/div/div/div/template3通过computed属性实现智能数据筛选与实时统计时间筛选、收入支出分类统计完全自动化计算。scriptsetup// 核心筛选条件响应式管理constfilterPeriodref(month)// 核心计算属性实现智能筛选constfilteredRecordscomputed((){constnownewDate()constthirtyDaysAgonewDate(now.setDate(now.getDate()-30))returnpointsRecords.filter(record{constrecordDatenewDate(record.date)if(filterPeriod.valuemonth){// 筛选本月记录returnrecordDate.getMonth()newDate().getMonth()}elseif(filterPeriod.valueweek){// 筛选本周记录constweekAgonewDate(now.setDate(now.getDate()-7))returnrecordDateweekAgo}returntrue})})// 核心统计计算consttotalIncomecomputed((){returnfilteredRecords.value.filter(recordrecord.typeincome).reduce((sum,record)sumrecord.amount,0)})consttotalExpensecomputed((){returnfilteredRecords.value.filter(recordrecord.typeexpense).reduce((sum,record)sumrecord.amount,0)})/script后端1数据源定义 (models.py)后端没有独立的积分流水表而是通过 Order订单表来记录交易。前端的“积分记录”对应后端的订单记录。classOrder(db.Model):__tablename__orders# ...buyer_iddb.Column(db.Integer,db.ForeignKey(user.id),nullableFalse)# 买家 (支出方)seller_iddb.Column(db.Integer,db.ForeignKey(user.id),nullableFalse)# 卖家 (收入方)# ...pricedb.Column(db.Integer,default0)# 对应积分金额created_atdb.Column(db.DateTime,defaultdatetime.now)# 对应时间2获取交易记录 (transaction.py)对应前端的列表渲染。后端查询我参与的所有订单我是买家或我是卖家前端根据 buyer_id 或 seller_id 是否为当前用户来判断是 income收入/绿色还是 expense支出/红色。transaction_bp.route(/my_involved,methods[GET])defget_my_involved():user_idrequest.args.get(user_id)# ...# 核心逻辑: 只要 buyer_id 是我或者 seller_id 是我都算我参与的queryOrder.query.filter(or_(Order.buyer_iduser_id,Order.seller_iduser_id)).order_by(Order.created_at.desc())# 按时间倒序对应前端的时间排序# 分页返回支持前端的滚动加载或分页paginationquery.paginate(pagepage,per_pageper_page,error_outFalse)returnsuccess(data{total:pagination.total,# ...items:[o.to_dict()foroinpagination.items]# 返回数据列表供前端 v-for})IV. 成员分工 提交记录Student IDName (姓名)Work (工作)Contribution (贡献)832301330颜一顺Backend Development8.5%832302227程一鸣Backend Development8.5%832301320陶炯Backend Development8.5%832301326曾渝Backend Development8.5%832302213林语婧Front-end development8.5%832302230薛易明Front-end development8.5%832302209陈舒薇Front-end development8.5%832301123杨璐Front-end development8.5%832301315高子言Front-end development8.5%832302225黄祉睿Testing and Optimization8.5%832302202张健涛UI Design7.5%832302205陈乐晗UI Design7.5%提交记录GitHub链接