美文网首页
college(学院)设计文档

college(学院)设计文档

作者: 叶赫icon | 来源:发表于2017-07-07 18:33 被阅读0次

    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. 列表页

      1. 详情页
    5. 功能分析:

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

    相关文章

      网友评论

          本文标题:college(学院)设计文档

          本文链接:https://www.haomeiwen.com/subject/eyjrhxtx.html