博客
关于我
结对作业二
阅读量:425 次
发布时间:2019-03-06

本文共 4689 字,大约阅读时间需要 15 分钟。

结对作业二

课程信息

  • 该作业属于软件工程课程

作业要求

  • 根据原型实现产品,记录PSP表格

结对学号

  • 221801102, 221801107

作业目标

  • 根据原型实现产品,记录PSP表格

其他参考文献

git 仓库连接

代码规范链接

网站链接

PSP表格

学号:221801102

阶段 PSP2.1 预估耗时(分钟) 实际耗时(分钟)
Planning 计划
Estimate 估计这个任务需要多少时间 10d 11d
Development 开发 58h 10min 72h 10min
Analysis 需求分析 (包括学习新技术) 3h 5h
Design Spec 生成设计文档 1h 1h
Design Review 设计复审 1h 2h
Coding Standard 代码规范 (为目前的开发制定合适的规范) 10min 10min
Design 具体设计 5h 8h
Coding 具体编码 45h 52h
Code Review 代码复审 1h 1h
Test 测试(自我测试,修改代码,提交修改) 2h 3h
Reporting 报告 1h 1h 10min
Test Report 测试报告 30min 30min
Size Measurement 计算工作量 10min 10min
Postmortem & Process Improvement Plan 事后总结, 并提出过程改进计划 20min 30min
合计 59h 10min 73h 20min

学号:221801107

阶段 PSP2.1 预估耗时(分钟) 实际耗时(分钟)
Planning 计划 120 120
Estimate 估计这个任务需要多少时间 120 120
Development 开发 1000 860
Analysis 需求分析 (包括学习新技术) 240 200
Design Spec 生成设计文档 30 30
Design Review 设计复审 20 20
Coding Standard 代码规范 (为目前的开发制定合适的规范) 30 30
Design 具体设计 30 30
Coding 具体编码 500 400
Code Review 代码复审 60 60
Test 测试(自我测试,修改代码,提交修改) 90 90
Reporting 报告 110 120
Blog 博客 80 90
Postmortem & Process Improvement Plan 事后总结, 并提出过程改进计划 30 30
合计 1230 1080

成品展示

  • 页面列表

  • 首页
  • 搜索界面
  • 收藏夹界面
  • 数据统计界面
  • 手机端首页
  • 移动端搜索界面
  • 移动端收藏夹界面
  • 移动端数据统计界面
  • 搜索页动画
  • 数据统计界面加载动画
  • 数据统计界面切换动画
  • 404界面
  • 特性

    • 所有页面均支持自适应显示
    • 可以在手机、平板、2K屏幕等不同终端上观看
    • Loading动画优化,提升用户体验
    • 数据统计界面支持动画效果

结对讨论

GitHub 讨论

  • 分支讨论

    • 最终方案:main -> dev -> (frontend-dev) / (backend-dev)
    • hotfix拉新的分支,等到v1版本准备就绪后合并到dev,再拉release进行发布
  • 项目执行方案讨论

    • 最初使用GitHub Project进行任务管理,但后来因团队在同一房间编码,决定简化流程
  • OAuth2.0 讨论

    • 使用GitHub OAuth2.0认证
    • 认证模式为accessToken模式
    • 团队遇到认证服务器访问问题(GitHub服务器在国内不易访问)
    • 需要特别注意用户信息字段(Login vs Name)
  • 页面显示讨论

    • 首页:需要完成背景图设计
    • 其他页面:界面设计完成,支持自适应显示

    后端进度讨论

    • 论文爬取部分完成
    • 爬虫定时任务设置,使用cron开启

    前后端联调讨论

    • OAuth2.0集成遇到问题
    • 接口替换优化,方便Nginx代理转发

    设计实现过程

    前端部分

  • Model层设计

    export interface SearchModelType {  namespace: ModelNameSpaces.Search;  state: SearchModelState;  effects: {    search: Effect;  };  reducers: {    changePage: ImmerReducer
    ; changeTotal: ImmerReducer
    ; saveData: ImmerReducer
    ; saveLastSearchList: ImmerReducer
    ; changeCodeStatus: ImmerReducer
    ; };}
    • 使用Immer.js管理不可变状态
    • 分离业务逻辑和服务调用层
    • 利用TypeScript进行类型推导
  • Service层设计

    import { BASE_URL } from '@/constants';import request from 'umi-request';const login = (code: string) => {  return request.get(`${BASE_URL}/login`, { params: { code } });};const logout = () => {  return request.get(`${BASE_URL}/logout`);};
    • 提取数据接口到单独层
    • 使用BASE_URL处理不同环境API地址
  • 目录结构图

    ├── assets│   └── components│       ├── chartLoading│       ├── circleLetter│       ├── constants│       ├── editModal│       ├── iconText│       ├── lineChart│       ├── loginModal│       ├── roseChart│       ├── smallLineChart│       ├── themeSearch│       └── wordCloud├── constants├── layouts├── models└── pages    ├── favorite    ├── oauth2.0    ├── search    └── statistic
  • 后端部分

  • 框架使用

    • Gin HTTP框架
    • Colly爬虫框架
    • MySQL存储论文、用户信息
    • Redis缓存爬虫结果和搜索结果
  • 架构设计

    • MVC模式
    • 前后端分离
    • API路由设计:
    apiV1 := r.Group("/api/v1")apiV1.GET("/auth", api.Auth)apiV1.GET("/auth-callback", api.Callback)apiV1.GET("/login", api.Login)authGroup := apiV1.Group("").Use(middleware.Auth()){  cors.Default()  authGroup.GET("/logout", api.Logout)  authGroup.POST("/search", api.Search)  // 其他接口...}
  • 爬虫实现

    c := cron.New(cron.WithParser(  cron.NewParser(    cron.SecondOptional | cron.Minute | cron.Hour | cron.Dom | cron.Month | cron.Dow),  ),)err := c.AddFunc("0 0 0 * * ?", func() {  crawler.Start()})if err != nil {  log.Println(err)}c.Start()
    • 定时爬取论文
    • 处理不同网站的爬取逻辑
  • 代码说明

    前端

  • 类型定义

    type UserModel = typeof UserInitialState;type SearchModel = typeof SearchInitialState;type FavoriteModel = typeof FavoriteInitialState;type StatisticModel = typeof StatisticInitialState;
    • 提取各个模块的初始状态
    • 供组件使用统一数据类型
  • Layout共用部分

    const { Header, Content } = ALayout;const Layout = ({ children }: IRouteComponentProps) => {  const dispatch = useDispatch();  const { avatar, isLogin, username } = useSelector(    (store: RootStore) => ({      const { [ModelNameSpaces.User]: UserModel } = store;      return UserModel;    })  );  // 组件逻辑};
    • 提取共用布局逻辑
    • 使用Immer.js管理状态
  • 后端

  • 模型定义

    type Model struct {  ID        uint `gorm:"primarykey" json:"-"`;  CreatedAt time.Time;  UpdatedAt time.Time;}
    • 基础模型结构
    • 使用GORM进行数据库操作
  • 路由处理

    apiV1 := r.Group("/api/v1")apiV1.GET("/auth", api.Auth)apiV1.GET("/auth-callback", api.Callback)apiV1.GET("/login", api.Login)authGroup := apiV1.Group("").Use(middleware.Auth()){  cors.Default()  authGroup.GET("/logout", api.Logout)  // 其他接口...}
    • 使用Gin框架定义API路由
    • 集成认证中间件
  • 心路历程和收获

    221801107

    • 学习了UMI框架的使用
    • 学习了自适应布局设计
    • 掌握了约定式路由
    • 与队友的协作非常愉快

    221801102

    • 增加了对后端开发的理解
    • 学习了Gin框架和Colly爬虫库
    • GitHub OAuth2.0认证过程复杂且困难
    • 提升了调试和问题解决能力

    评价结对队友

    • 221801107 → 221801102

      • 队友技术能力强,后端经验丰富
      • 协作过程愉快,遇到问题能快速解决
    • 221801102 → 221801107

      • 我对后端开发经验不足
      • 队友支持力强,帮助解决了许多问题

    转载地址:http://zfruz.baihongyu.com/

    你可能感兴趣的文章
    Nifi同步过程中报错create_time字段找不到_实际目标表和源表中没有这个字段---大数据之Nifi工作笔记0066
    查看>>
    NIFI大数据进阶_FlowFile拓扑_对FlowFile内容和属性的修改删除添加_介绍和描述_以及实际操作---大数据之Nifi工作笔记0023
    查看>>
    NIFI大数据进阶_NIFI的模板和组的使用-介绍和实际操作_创建组_嵌套组_模板创建下载_导入---大数据之Nifi工作笔记0022
    查看>>
    NIFI大数据进阶_NIFI监控的强大功能介绍_处理器面板_进程组面板_summary监控_data_provenance事件源---大数据之Nifi工作笔记0025
    查看>>
    NIFI大数据进阶_NIFI集群知识点_集群的断开_重连_退役_卸载_总结---大数据之Nifi工作笔记0018
    查看>>
    NIFI大数据进阶_内嵌ZK模式集群1_搭建过程说明---大数据之Nifi工作笔记0015
    查看>>
    NIFI大数据进阶_外部ZK模式集群1_实际操作搭建NIFI外部ZK模式集群---大数据之Nifi工作笔记0017
    查看>>
    NIFI大数据进阶_离线同步MySql数据到HDFS_01_实际操作---大数据之Nifi工作笔记0029
    查看>>
    NIFI大数据进阶_离线同步MySql数据到HDFS_02_实际操作_splitjson处理器_puthdfs处理器_querydatabasetable处理器---大数据之Nifi工作笔记0030
    查看>>
    NIFI大数据进阶_连接与关系_设置数据流负载均衡_设置背压_设置展现弯曲_介绍以及实际操作---大数据之Nifi工作笔记0027
    查看>>
    NIFI数据库同步_多表_特定表同时同步_实际操作_MySqlToMysql_可推广到其他数据库_Postgresql_Hbase_SqlServer等----大数据之Nifi工作笔记0053
    查看>>
    NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南001---大数据之Nifi工作笔记0068
    查看>>
    NIFI集群_内存溢出_CPU占用100%修复_GC overhead limit exceeded_NIFI: out of memory error ---大数据之Nifi工作笔记0017
    查看>>
    NIFI集群_队列Queue中数据无法清空_清除队列数据报错_无法删除queue_解决_集群中机器交替重启删除---大数据之Nifi工作笔记0061
    查看>>
    NIH发布包含10600张CT图像数据库 为AI算法测试铺路
    查看>>
    Nim教程【十二】
    查看>>
    Nim游戏
    查看>>
    NIO ByteBuffer实现原理
    查看>>
    Nio ByteBuffer组件读写指针切换原理与常用方法
    查看>>
    NIO Selector实现原理
    查看>>