V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
xjh22222228
V2EX  ›  分享创造

🔥vue 写的功能最齐全的 cnode 社区网站

  •  
  •   xjh22222228 · 2018-03-17 14:35:49 +08:00 · 3647 次点击
    这是一个创建于 2203 天前的主题,其中的信息可能已经有所发展或是发生改变。

    react 版开发之后开发的 vue 版, 其实 vue 版跟 react 版结构基本上是没多大变化的,只是语法上不同。

    这是目前 react 版和 vue 版功能最齐全的第三方 cnode 版本了!

    如果你是刚接触 react 或 vue 这恰好是一个好机会

    react 版 cnode点这里

    源码 github

    在线预览

    技术栈

    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "iview": "^2.10.1",
    "axios": "^0.17.1",
    "moment": "^2.20.1",
    "webpack": "^3.6.0",
    "simplemde": "^1.11.2",
    "highlight": "^9.12.0",
    "scss": "",
    "ES6": "",
    "flex": "",
    

    开发目录

    .
    ├── README.md
    ├── build
    │   ├── build.js
    │   ├── check-versions.js
    │   ├── logo.png
    │   ├── utils.js
    │   ├── vue-loader.conf.js
    │   ├── webpack.base.conf.js
    │   ├── webpack.dev.conf.js
    │   └── webpack.prod.conf.js
    ├── config
    │   ├── dev.env.js
    │   ├── index.js
    │   └── prod.env.js
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── App.vue                     # 视图入口
    │   ├── api                         # API 配置文件
    │   │   └── index.js
    │   ├── assets                      # 处理静态资源文件目录
    │   │   ├── images
    │   │   │   ├── app-qrcode.png
    │   │   │   ├── github.svg
    │   │   │   └── not-match.gif
    │   │   └── scss
    │   │       ├── _variable.scss
    │   │       ├── media.scss
    │   │       └── style.scss
    │   ├── components
    │   │   ├── footer
    │   │   │   └── Footer.vue          # 底部组件
    │   │   ├── header
    │   │   │   └── Header.vue          # 头部组件
    │   │   ├── msg
    │   │   │   └── Msg.vue             # 未读消息和已读消息列表组件
    │   │   ├── sidebar
    │   │   │   └── Sidebar.vue         # 侧边栏组件
    │   │   └── topics-list
    │   │       └── TopicsList.vue      # 话题列表组件
    │   ├── main.js                     # 程序入口文件
    │   ├── router
    │   │   └── index.js                # 路由配置
    │   ├── store
    │   │   └── index.js                # 状态管理
    │   └── views
    │       ├── 404
    │       │   └── 404.vue             # 404 页
    │       ├── collections
    │       │   └── Collections.vue     # 收藏页
    │       ├── index
    │       │   └── Index.vue           # 主页
    │       ├── login
    │       │   └── Login.vue           # 登录页
    │       ├── messages
    │       │   └── Messages.vue        # 未读消息页
    │       ├── release
    │       │   └── Release.vue         # 发布 /编辑页
    │       ├── topic
    │       │   └── Topic.vue           # 查看话题详情页
    │       └── user
    │           └── User.vue            # 用户详情页 /个人主页
    └── static                          # 静态资源目录
        └── images
            ├── 11.png
            ├── 22.png
            ├── 33.png
            └── 44.png
    

    API 清单 x 15

    • [√] 主题首页
    • [√] 主题详情
    • [√] 新建主题
    • [√] 编辑主题
    • [√] 收藏主题
    • [√] 取消收藏主题
    • [√] 用户所收藏的主题
    • [√] 新建评论
    • [√] 为评论点赞
    • [√] 用户详情 /个人主页
    • [√] 登录
    • [√] 获取未读消息数
    • [√] 获取已读和未读消息
    • [√] 标记全部已读
    • [√] 标记单个消息为已读

    启动程序

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:3888
    npm start
    
    # build for production with minification
    npm run build
    
    

    结语

    • CNode 主题详情是使用 markdown 写的,样式可以使用 github-markdown-css。
    • CNode 提供的 API 获取主题没有返回总条数导致不能算出总页数, 所以我写死了 250 页。
    • 大部分功能都需要登录的,所以游客只能进行浏览,如果感兴趣的可以尝试登录, 不会保存你的 accesstoken, 欢迎监督。
    • 发布话题和评论使用的 markdown 编辑器 simplemde
    • 因为托管在 github 上,所以首次打开的速度会稍微慢一点,之后基本上是秒开。
    • 这应该是一个很好的学习机会,Vue 转 react,react 转 Vue 都很好上手。

    学到东西不要忘了给个 star 哦,谢谢!

    ...

    👍👍👍


    License

    MIT

    17 条回复    2018-03-19 18:11:25 +08:00
    xjh22222228
        1
    xjh22222228  
    OP
       2018-03-17 14:37:20 +08:00
    sha fa
    oska117
        2
    oska117  
       2018-03-17 15:05:43 +08:00
    谢谢楼主分享
    xjh22222228
        3
    xjh22222228  
    OP
       2018-03-17 15:17:42 +08:00
    @oska117 谢谢老铁围观
    saran
        4
    saran  
       2018-03-17 15:24:00 +08:00
    点开帖子不到顶部感觉很神奇,这是特色吗[二哈]
    xjh22222228
        5
    xjh22222228  
    OP
       2018-03-17 15:28:11 +08:00
    @saran 哈哈,谢谢,也是改善的地方
    billychow
        6
    billychow  
       2018-03-17 15:53:05 +08:00 via Android
    学习一下,感谢分享
    ideacco
        7
    ideacco  
       2018-03-17 22:34:30 +08:00
    过来围观。
    MinonHeart
        8
    MinonHeart  
       2018-03-18 18:19:58 +08:00
    你这头像
    老了
    chuanqirenwu
        9
    chuanqirenwu  
       2018-03-18 19:35:19 +08:00
    厉害了!前端向你学习。
    xjh22222228
        10
    xjh22222228  
    OP
       2018-03-19 08:50:20 +08:00
    @MinonHeart 还好哇,已经用了好多年了😝
    xjh22222228
        11
    xjh22222228  
    OP
       2018-03-19 08:51:04 +08:00
    @chuanqirenwu 不敢当,互相学习哈。
    Kamiimeteor
        12
    Kamiimeteor  
       2018-03-19 10:43:35 +08:00
    需要邀请码?
    xjh22222228
        13
    xjh22222228  
    OP
       2018-03-19 11:15:03 +08:00
    @Kamiimeteor 不是邀请码,github 登录 cnode 之后会有 access_token, 用这个 access_token 登录就好了
    zhwithsweet
        14
    zhwithsweet  
       2018-03-19 13:36:35 +08:00
    http://v2er.leanapp.cn/#/now

    借楼。我写了个 vue 版的 v2ex,可惜接口太差了。好多功能没实现。(逃
    xjh22222228
        15
    xjh22222228  
    OP
       2018-03-19 13:53:57 +08:00
    @zhwithsweet 不错!!!
    Kamiimeteor
        16
    Kamiimeteor  
       2018-03-19 17:26:29 +08:00
    @xjh22222228 复制 token 进去了,但是显示“请求超时或服务器出错!”
    xjh22222228
        17
    xjh22222228  
    OP
       2018-03-19 18:11:25 +08:00
    @Kamiimeteor 说明 token 不存在呢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5907 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 02:11 · PVG 10:11 · LAX 19:11 · JFK 22:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.