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
-
实现技术：
- vue-cli + vue-router + vuex + axios + webpack
- 样式控制由SASS实现
- Element / iView 组件库（有可能会用到）
-
技术分析：
- vue-router: 实现路由切换，构建单页应用
- axios：进行页面的数据请求
- vuex: 解决兄弟组件之间的通信问题
-
组件分析：
学院模块主要由干货、活动、内推、招聘、新闻五个子模块构成，所以导航模块切换通过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 //详情页底部推荐课程
-
-
接口分析：
-
首页
列表页
- 精选干货：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
- 详情页
- 精选干货：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}
-
-
功能分析：
- 全局：
- 登录、注册功能
- 利用vue实现搜索功能
- 利用vue实现导航跟随效果功能
- 利用vue实现数据交互功能
- 首页：
- banner轮播图部分（点击左右键进行切换）
- Tab切换：默认选中【最新文章】，点击进行切换，并实现滚动无限加载功能
- 右侧内部推荐、推荐课程、热门课程、面包活动（引入组件）
- 列表页：
- 添加当前浏览页面的所在位置
- 根据筛选条件（综合、阅读量、点赞量、评论量）排列数据
- 添加行业、城市等搜索功能 （根据传入不同的参数发起数据请求）
- 实现分页功能
- 列表中之前的阅读、点赞量改为标签
- 右侧推荐课程、热门课程、热门文章（引入组件）
-
详情页：
- 添加当前页面所在位置
- 评论功能、评论分页浏览功能
- 点赞、收藏、分享功能
- 右侧内部推荐（引入组件）
