college(学院)设计文档

7/7/2017 11:59:01 AM

实现思路

请求接口：http://platform.breadoffer.com/api/{moduleCode}/{typeCode}/{systemCode}/{platformCode}
参考文档：http://192.168.1.2:8820/docs/projects/union/api.html

1. 实现技术：

   • vue-cli + vue-router + vuex + axios + webpack
   • 样式控制由SASS实现
   • Element / iView 组件库（有可能会用到）

2. 技术分析：

   • vue-router: 实现路由切换，构建单页应用
   • axios：进行页面的数据请求
   • vuex: 解决兄弟组件之间的通信问题

3. 组件分析：

   • 学院模块主要由干货、活动、内推、招聘、新闻五个子模块构成，所以导航模块切换通过vue-Router实现，通过切换不同的路由来展示相关页面。

   • 主要分为以下组件：

     • 一级组件：

       app.vue // 最外层根组件

       header.vue // 页面头部

       content.vue // 页面主体 （布局组件，接入其他组件）

       footer.vue // 页面底部
       * content.vue中的二级列表组件：
       >index.vue // 学院首页

     konwledge.vue // 精选干货

     activity.vue // 面包活动

     recruitinner.vue // 内部推荐

     recruitouter.vue // 招聘信息

     industrynews.vue // 行业新闻

     • 各二级列表组件中的详情页面组件：

     detail.vue // 详情页面
     * 其他公共组件：
     >login.vue // 已登录状态

     rec-course.vue // 右侧推荐课程

     hot-course.vue // 右侧热门课程

     hot-article.vue // 右侧热门文章

     hot-activity.vue // 右侧活动日历

     detail-recruit.vue // 详情页右侧内部推荐

     detail-course.vue //详情页底部推荐课程

4. 接口分析：

   1. 首页

      请求接口：http://platform.breadoffer.com/api/college/index

      参考文档：http://192.168.1.2:8820/docs/projects/union/api.html

   2. 列表页

   • 精选干货：http://platform.breadoffer.com/api/realknow
   • 行业新闻：http://platform.breadoffer.com/api/industrynews
   • 面包活动：http://platform.breadoffer.com/api/city/breadactivity
   • 招聘信息(需传参数outer)：http://platform.breadoffer.com/api/recruit
   • 内部推荐:(需传参数inner)：http://platform.breadoffer.com/api/recruit
   6. 详情页
   • 精选干货：http://platform.breadoffer.com/api/realknow/{id}
   • 行业新闻：http://platform.breadoffer.com/api/industrynews/{id}
   • 面包活动：http://platform.breadoffer.com/api/city/breadactivity/{id}
   • 招聘信息(需传参数outer)：http://platform.breadoffer.com/api/recruit/{id}
   • 内部推荐:(需传参数inner)：http://platform.breadoffer.com/api/recruit/{id}

5. 功能分析：

   1. 全局：
   • 登录、注册功能
   • 利用vue实现搜索功能
   • 利用vue实现导航跟随效果功能
   • 利用vue实现数据交互功能
   2. 首页：
   • banner轮播图部分（点击左右键进行切换）
   • Tab切换：默认选中【最新文章】，点击进行切换，并实现滚动无限加载功能
   • 右侧内部推荐、推荐课程、热门课程、面包活动（引入组件）
   • 列表页：
   • 添加当前浏览页面的所在位置
   • 根据筛选条件（综合、阅读量、点赞量、评论量）排列数据
   • 添加行业、城市等搜索功能 （根据传入不同的参数发起数据请求）
   • 实现分页功能
   • 列表中之前的阅读、点赞量改为标签
   • 右侧推荐课程、热门课程、热门文章（引入组件）
   • 详情页：
     • 添加当前页面所在位置
     • 评论功能、评论分页浏览功能
     • 点赞、收藏、分享功能
     • 右侧内部推荐（引入组件）