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

    你可能感兴趣的文章
    PHP常量、变量作用域详解(一)
    查看>>
    PHP应用目录结构设计
    查看>>
    PHP应用程序连接MSQL数据库Demo(附crud程序)
    查看>>
    PHP应用程序连接Oracle数据库Demo(附Oracle客户端安装文件)
    查看>>
    PHP开发api接口安全验证
    查看>>
    PHP开发规范PSR
    查看>>
    PHP开发遇到错误0001
    查看>>
    rabbitmq guestguest用户不能远程登录
    查看>>
    php异常处理
    查看>>
    PHP引入了泛型和集合两大重要特性,大大改善 PHP 代码的可维护性和可读性
    查看>>
    PHP引擎php.ini参数优化
    查看>>
    PHP引用(&)使用详解
    查看>>
    php引用及垃圾回收
    查看>>
    php当前时间的集中写法
    查看>>
    php循环比较数组中的值,如何从PHP数组中计算值并在foreach循环中仅显示一次值?...
    查看>>
    php微信 开发笔记,微信WebApp开发总结笔记
    查看>>
    php微信公众号开发access_token获取
    查看>>
    php微信公众号开发微信认证开发者
    查看>>
    php微信公众号开发用户基本信息
    查看>>
    php怎么将对象变成数组,php怎么将对象转换成数组
    查看>>