博客
关于我
结对作业二
阅读量: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/

    你可能感兴趣的文章
    Netty框架的服务端开发中创建EventLoopGroup对象时线程数量源码解析
    查看>>
    Netty源码—2.Reactor线程模型一
    查看>>
    Netty源码—3.Reactor线程模型三
    查看>>
    Netty源码—4.客户端接入流程一
    查看>>
    Netty源码—4.客户端接入流程二
    查看>>
    Netty源码—5.Pipeline和Handler一
    查看>>
    Netty源码—5.Pipeline和Handler二
    查看>>
    Netty源码—6.ByteBuf原理一
    查看>>
    Netty源码—6.ByteBuf原理二
    查看>>
    Netty源码—7.ByteBuf原理三
    查看>>
    Netty源码—7.ByteBuf原理四
    查看>>
    Netty源码—8.编解码原理一
    查看>>
    Netty源码—8.编解码原理二
    查看>>
    Netty源码解读
    查看>>
    Netty的Socket编程详解-搭建服务端与客户端并进行数据传输
    查看>>
    Netty相关
    查看>>
    Netty遇到TCP发送缓冲区满了 写半包操作该如何处理
    查看>>
    Netty:ChannelPipeline和ChannelHandler为什么会鬼混在一起?
    查看>>
    Netty:原理架构解析
    查看>>
    Network Dissection:Quantifying Interpretability of Deep Visual Representations(深层视觉表征的量化解释)
    查看>>