Awesome Open Source
Awesome Open Source

Vue-shiyanlou

一年简介~

回头看,已经一年了,这是一个非常基础的项目,里面的内容没有复杂的地方作为初学还是不错的一次实践,vue全家桶技术栈都有用到,包括插件的编写,但Vue开发中一些很棒的特性都没有涉及,如果你想深入这个项目基本毫无帮助。

如果你是初学者刷到了此仓库可以找另外一个网站,跟着官方文档用Vue脚手架搭建起一个基础目录,分析那个网站的结构,从首页开始,从写HTML开始,写一个页面基本的思路就是搞清楚布局,罗列HTML,用CSS画出HTML的布局。

Vue的概念是渐进式你想得到的东西可以随着需求的不断递进而递进,如果你在学习时遇到问题而没有答案可以开启一个Issues或者给我发邮件,我会的话一定会作出解答~。

===

啊哈! (〃'▽'〃)

用Vue实现的非官方实验楼整站,用于学习交流。

选择实验楼原因也很简单:实验楼的设计个人很喜欢,简单鲜明一目了然,但实际用CSS实现起来又不乏一些“高级”用法,动画,过渡,纯CSS小箭头等等都可以从实验楼的源码中学习到。前后端分离通过一步步分析API慢慢搭建出整个页面的过程仿佛真的参与其中,抓取API分析HTTP,处理登录逻辑,筛选课程,购买课程,发帖回帖参与讨论等等都可以慢慢从中抽丝剥茧般的熟悉起来。

🎉 线上展示 (Github Page)

🎉 项目配套开发教程(收费),从0到发布 邀请码 eee1ZIbn,有优惠呦~

💪技术栈

vue2 + vuex + vue-router + axios + webpack + ES6/7 + flex

🚀 项目运行(本地)

git clone [email protected]:HuberTRoy/vue-shiyanlou.git

cd vue-shiyanlou

npm install

npm run serve

👊 关于接口数据

实验楼API不能跨域,需要再写一个代理。
用Django写了个简单的后端转发。
没有API的话是没有数据可以展示的呦~。

代理请求API后端

😉 说明

如果对您有帮助,希望可以得到一枚您的Star~。(〃'▽'〃)

有任何可以改进的地方希望您可以花费一些时间开启一个Issue或者直接PR~。φ(>ω<*)

☺️ 总结

  1. 自己想要学习前端,看到Vue框架比较火热,上手简单功能也很强大于是学习了起来,无奈的是搜索到的项目大部分都比较简单,不是TODO就是音乐播放器,逻辑没有想象中的复杂。(;´д`)ゞ
  2. 在 Github 搜索时看到大佬用 Vue 写的饿了么应用,于是自己也想试试实现一个这样的应用。(o°ω°o)
  3. 实验楼的编程课在初学时很友好,界面自己也很喜欢。慢慢模仿下来如在里面学习一样,页面逻辑刚开始会简单些,学习HTML,CSS基础就可以摸索着写出来,随着越来越多的内容,动画,过渡也慢慢浮现出来,同时处理登录,查看状态,绑定邮箱,发布内容,参与讨论等等一系列逻辑复杂的东西也进入眼帘。╮( ̄▽ ̄)╭
  4. 整个项目从vue-cli自动生成开始,未配置任何东西,直接上手就开始写了,跟随commit的话可以找到各种初学时可能会犯的错误以及未注意到的地方,比如一开始没有用CSS框架,也没有统一的CSS文件归类,导致每个组件里越写重复的越多,之后才恍然大悟,喔...class和框架的作用原来是这样用的,但同时也通过这样全部都写的原生CSS得以一窥CSS真容。。◕ᴗ◕。
  5. 项目初步已经完成,包括子页面在内有20+个页面,完全独立的页面有18个,可以抓取到的API有53个,配合后端的API转发可以得到实验楼真实数据,进行真实交互。ヽ(•ω•ゞ)
  6. 项目还有大量可以优化的地方,并未完全完成。( ̄▽ ̄)/

📷 部分截图

首页

首页1 首页2

路径

路径1

课程

课程1 课程2

社区讨论

社区1 社区2 社区3

📢 目标

TODO 前端部分

  • [x] 主页
  • [x] 课程挑选页
  • [x] 具体课程页
  • [x] 路径页
  • [x] 具体路径页
  • [x] 社区讨论页
  • [x] 社区具体问题页
  • [x] 帖子编辑页。
  • [ ] 用户页面
    • [x] 登录栏
    • [x] 导航栏
    • [x] 课程与路径页编辑框
    • [x] question出现编辑框
    • [X] 继续实验
    • [x] user/id self 标志为仅自己可见
      • [x] user/id (总览)
        • [x] 基础信息
        • [x] 学习卡片 (self)
        • [x] 学习记录(热点图)
        • [x] 下列子应用
        • [x] 最近来访
      • [ ] user/id/courses
        • [x] 历史学习
        • [x] 关注的
        • [ ] 发布的
      • [x] user/id/learning_path
      • [x] user/id/reports
      • [x] user/id/discuss
      • [ ] user/id/contest ( self )
      • [ ] user/id/tutorial ( self )
      • [ ] user/id/software ( self )
      • [ ] user/id/messages ( self )
  • [x] 用户信息设置页
    • [x] 基础信息设置
    • [x] 账号密码设置
    • [x] 邮件通知设置
    • [x] 兑换码
  • [x] 搜索页
  • [x] 404页
  • [x] 教程页
  • [x] 独立的登录注册页
  • [x] 报告总览页
  • [x] 报告详情页
  • [x] Markdown 编辑器。
    • [x] 基础功能(加粗,斜线,链接...)
    • [x] 编辑后预览
    • [x] 上传图片
  • [x] 挑战页
  • [x] 直播页

TODO 后端(代理)配合部分

  • [x] 对接登陆.
  • [x] 对接主页API.
    • [x] 轮播图。
    • [x] 课程分类/推荐。
    • [x] 楼+推荐。
    • [x] 路径。
  • [ ] 对接课程页API.
    • [x] 课程挑选。
    • [x] 课程信息。
    • [x] 课程状态。
    • [x] 课程评论/报告/问答。
    • [x] 关注/取消关注。
    • [x] 加入课程/继续学习。
    • [ ] 相关课程推荐(暂时找不到相关API)
  • [x] 对接路径页API.
    • [x] 路径总览。
    • [x] 路径信息。
    • [x] 路径评论。
    • [x] 加入路径。
  • [x] 对接问答区API.
    • [x] 发帖。
    • [x] 回帖。
    • [x] 签到。
  • [x] 各区域回复.
  • [x] 各区域删除.
  • [x] 对接用户主页API.
    • [x] 基础信息。
    • [x] 课程信息。
    • [x] 路径信息。
    • [x] 报告信息。
    • [x] 问答信息。
  • [x] 修改个人信息。
    • [x] 修改基础信息。
    • [x] 上传头像(上传到实验楼)。
    • [x] 修改邮件通知。
    • [x] 修改/绑定手机/邮箱/密码。
  • [x] 搜索API。
  • [x] 教程区API。
  • [x] 报告总览API。
  • [x] 报告详情API。
  • [x] 挑战区API。
  • [x] 直播区API。

细节优化:

  • [ ] 多分辨率支持。
  • [ ] CSS优化。
    • [x] CSS分块隔离。
    • [ ] 抽离公共样式。
    • [ ] 使用框架简化。
  • [x] route优化, 加入切换动画使其更加平滑切换。
  • [x] loading优化, 加入loading状态。
  • [x] 无需配置即插即用的loading插件。
  • [ ] 细微处1px优化。

🔎 目录结构

api                           存放各类需要与后端交互获取数据的api   
    courses   
        course_information    获取某一个课程的信息。   
        courses_content       获取出合适的所有课程,适用于courses_selections中的大分类获取。 
        course_comment        课程评论
        course_qa             课程问答
        course_report         课程报告
    home
        home                  主页内容
    logged_info
        logged_info           登录后才会解锁的内容(用户课程信息获取) 
    login
        login                 登录和获取登录成功后的用户信息。
    path                      
        course_path           某个路径的具体信息
        course_path_comment   路径评论
        path                  所有路径的简介
    questions
        questions             请求所有问题的api
        question              请求查看具体问题的api
    related_stuff
        related_stuff         获取近期活动/楼+信息。
    user
        user                  获取用户主页下的各类用户信息。
    base.js                   配置api域名等基础信息。

store                         vuex进行数据流控制的仓库  
   modules  
      course                  具体课程的信息仓库。  
      courses_category        课程主页的分类仓库  
          courses_category    里面包含各个query的state设置,更改与变化后的路由导向与触发数据请求。
      home                    主页信息仓库。
      logged_info             用户学习过的课程的信息仓库。
      login_state             包含所有与登录有关信息。
      path                    包含路径部分的状态信息。
      questions               包含所有与社区问题讨论有关的状态信息。
      scroll_bar  
          scroll_bar          包含是否正在向下滚动,是否不处于顶层,是否在向上滚动。  
      tab_page                暂时无用。
      user                    用户主页信息仓库。

components  
    common_components          项目中会在多个页面中用到的公共子组件
       footer
           footer              版权导航信息
       scroll_bar              一个会随着滚动的顶部导航,包括注册,搜索,跳转到主要的分类区。
           scroll_bar
       cards                   不同的小的选项卡,提供多种不同的效果。
           card                普通的card,盛放一个可设置跳转链接的img。
           card_plus           普通card的加强版,放置有一个可设置跳转链接的img和text。
           lou_plus_card       楼+部分的card。
           float_card          一个带有鼠标悬停时会向上略微浮动动画的card_plus
           courses_card        课程card分为:背景img,标题,介绍和 参与人数与课程类型(免费,训练营,会员和无),课程介绍会在无访问时隐藏,访问时由下至上出现,一个动画实现。
           traning_card        算是上面课程card的扩展实现,取消动画,取而代之的是由更大的占地面积直接铺出来。
           ...
       sign_on_up              触发登陆和注册页面的组件。
            login              包含登陆和注册组件
            sign_on            登陆组件
            sign_up            注册组件  
       qa_item                 问答组件。
       report_item             报告组件。
       loading                 loading组件。

    home_page  
       // 查阅pages中的信息   
       ...   
    
    courses_page   
       // 查阅pages中的信息   
       ...   
    
    path_page
       // 查阅pages中的信息
       ...

    questions
       // 查阅pages中的信息
       ...

    user_page
       // 查阅pages中的信息
       ...

pages       
    home                                   实验楼主页
       navigation                          顶部导航栏
           -- other                           子组件
       main_course                         依然是导航栏,分布的是主要的课程分类和广告
           -- other   
       luoplus                             楼+的课程推广
       kindsOfCourses                      其他各类课程的推广 基础/精选/大数据 等等
       footer                              最后的底部导航版权信息等   
    courses                                课程页面
        sub_components
          order_button
          selection_button
          tab_page
        course
          sub_components
            course_discuss_sub_components/ 课程讨论部分的子组件

            course_content                 课程主内容
            course_description             课程长简介
            course_discuss                 课程讨论部分 包括评论/报告/问答。
            course_header_bar              下拉时出现的课程基础信息导航。
            course_knowledge_point         课程主要学习点
            course_related                 相关课程
            course_side_content            课程区右侧会出现的内容
            course_teacher                 课程教师信息
            nav_title                      课程基础信息+导航
    path
        path                               所有路径页面
        sub_components/
          paths                                                 
          title                            所有路径页面下的子组件。
        course_path/
          course_path                      某个路径的信息页。
          sub_components/
            nav_title                      基础信息+导航
            path_course_detail             路径详情。
            path_description               路径简介。
            path_operation                 路径操作面板(加入路径)。
            related_items                  相关的一些信息
    questions                              讨论页面
      questions                            所有问题的主页
      sub_compoents/
        main_questions                     问答区。
        side                               其他的一些工具(发帖签到相关内容等)。
        main_questions_sub_components/
          nav_bar                          基础信息+导航
          question_list                    问题列表盒子。
          tab_page                         翻页组件。
        side_sub_components/               
          ...
      question/
        question                           具体问答页。
        sub_components/
          main_question                    具体问答页主体。
          side                             其他的一些工具(相关帖子等)
          main_question_sub_components/
            nav_bar                        基础信息+导航
            question_content               问题的主体。
            question_reply                 问题的回复(包括回帖/翻页)。
    user                       
        user                               用户界面总页面
        sub_components/
          base_info                        基础信息
          learning_card                    学习卡
          learning_record                  学习记录热点图
          stuff_board                      各类信息包括课程/讨论/报告/教程...
          visited_user                     访问过的用户


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,368
vue (4,286
webpack (1,157
js (547
es6 (527
html5 (466
vuex (422
vue-router (287
vue2 (269
css3 (208
flex (54