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

    你可能感兴趣的文章
    nginx反向代理解决跨域问题,使本地调试更方便
    查看>>
    nginx启动脚本
    查看>>
    Nginx在Windows下载安装启动与配置前后端请求代理
    查看>>
    Nginx多域名,多证书,多服务配置,实用版
    查看>>
    nginx开机启动脚本
    查看>>
    nginx异常:the “ssl“ parameter requires ngx_http_ssl_module in /usr/local/nginx/conf
    查看>>
    nginx总结及使用Docker创建nginx教程
    查看>>
    nginx报错:the “ssl“ parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf:128
    查看>>
    nginx报错:the “ssl“ parameter requires ngx_http_ssl_module in usrlocalnginxconfnginx.conf128
    查看>>
    nginx日志分割并定期删除
    查看>>
    Nginx日志分析系统---ElasticStack(ELK)工作笔记001
    查看>>
    Nginx映射本地json文件,配置解决浏览器跨域问题,提供前端get请求模拟数据
    查看>>
    nginx最最最详细教程来了
    查看>>
    Nginx服务器---正向代理
    查看>>
    Nginx服务器上安装SSL证书
    查看>>
    Nginx服务器的安装
    查看>>
    Nginx模块 ngx_http_limit_conn_module 限制连接数
    查看>>
    nginx添加模块与https支持
    查看>>
    Nginx用户认证
    查看>>
    Nginx的location匹配规则的关键问题详解
    查看>>