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

    你可能感兴趣的文章
    PostgreSQL 如何从崩溃状态恢复(上)
    查看>>
    PostgreSQL 存储过程基本语法
    查看>>
    PostgreSQL 实现批量更新、删除、插入
    查看>>
    PostgreSQL 导入 .gz 备份文件
    查看>>
    PostgreSQL 批量插入&更新数据时报错(ERROR: ON CONFLICT DO UPDATE command cannot affect row a second time)
    查看>>
    PostgreSQL 新增数据返回自增ID
    查看>>
    postgresql 更新多列数据
    查看>>
    PostgreSQL 服务启动后停止
    查看>>
    PostgreSQL 辟谣存在任意代码执行漏洞:消息不实
    查看>>
    PostgreSQL+PostGIS实现两坐标点之间最短路径查询算法函数(地图工具篇.12)
    查看>>
    Qt开发——简易调色板QPalette
    查看>>
    PostgreSQL-解决连接时遇到的乱码问题
    查看>>
    PostgreSQL15.2最新版本安装_远程连接_Navicat操作_pgAdmin操作_Windows10上安装---PostgreSQL工作笔记001
    查看>>
    PostgreSQL9.1 双机部署配置(主备数据同步)
    查看>>
    Qt开发——简易网络浏览器(一)
    查看>>
    Qt开发——简易成绩登记系统
    查看>>
    Postgresql中PL/pgSQL代码块的语法与使用-声明与赋值、IF语句、CASE语句、循环语句
    查看>>
    Postgresql中PL/pgSQL的游标、自定义函数、存储过程的使用
    查看>>
    SpringBoot中集成XXL-JOB分布式任务调度平台,轻量级、低侵入实现定时任务
    查看>>
    Postgresql中的表结构和数据同步/数据传输到Mysql
    查看>>