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切换:默认选中【最新文章】,点击进行切换,并实现滚动无限加载功能
- 右侧内部推荐、推荐课程、热门课程、面包活动(引入组件)
- 列表页:
- 添加当前浏览页面的所在位置
- 根据筛选条件(综合、阅读量、点赞量、评论量)排列数据
- 添加行业、城市等搜索功能 (根据传入不同的参数发起数据请求)
- 实现分页功能
- 列表中之前的阅读、点赞量改为标签
- 右侧推荐课程、热门课程、热门文章(引入组件)
-
详情页:
- 添加当前页面所在位置
- 评论功能、评论分页浏览功能
- 点赞、收藏、分享功能
- 右侧内部推荐(引入组件)
网友评论