V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaoquan1995
V2EX  ›  Vue.js

前台界面 vue ssr ,后台管理界面 react spa 多权限管理的社区系统,涵盖了大部分前端技术(分享)

  •  1
     
  •   xiaoquan1995 · 2020-01-03 14:59:10 +08:00 · 2097 次点击
    这是一个创建于 1771 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这个项目用了 react、vue、node、webpack、grophql、express 基本涉及到了前端大部分主流的技术了,都是用的最新的版本,都是从零开始搭建包括 ssr 脚手架,主要是让学的人,接触前端整个的生态圈,后期 node 会用 ts 重构,而且会根据所有框架的版本实时更新项目,个人对 node 特别喜欢,哈哈,所以就想写点东西,

    kite

    项目源码地址:https://github.com/maoxiaoquan/kite

    前台演示网站地址: https://www.xiaosuibi.com/

    后台演示网站地址: https://www.xiaosuibi.com/_admin

    后台演示网站账户:kitetest 密码:q123456 (资源有点大,可能要加载一段时间)

    说明

    使用的技术栈:

    前台方面:vue + vuex + vue-router + vue-server-renderer

    后台方面:react + redux + react-redux + react-router + antd

    server: express + mysql + graphql + apollo-server-express

    公共部分:webpack

    其他详细的直接看 package.json 就可以了,部分接口开始使用 graphql 改写 前台界面目前是用的 vue 的 ssr,但是没有采用 nuxt.js 代码的阅读应该还是可以的,后台界面采用的是 react 前台目前比较简单,就是一个多人文章发布系统,用户可以注册账号,发布文章,关注用户,喜欢文章,评论等等 后台管理文章的发布、审核,评论的审核,管理员权限管理,系统配置等等,前后台用户管理员独立 初始化界面是对整个文章发布系统的一个初始化,包括初始管理员角色,mysql 等等 前后台是写在一起的

    目前需要优化的,以及存在的一些问题

    vue 的 ssr 占用内存,非常高,需要对一些接口和页面进行缓存,目前存在的很大的问题

    后台的加载有点慢,主要是 antd 的 icon 包太大了,等 4.0 解决,然后对后台界面程序翻新下

    服务层的 node 接口代码某些地方写的有点陈旧,需要重写,打算开始使用 ts 重构

    前台用户界面 ( vue ssr --- 不是 nuxt.js 是最基础的 vue ssr,和官网示例类似的)

    client.png

    后台管理界面 (react spa )

    xiaosuibi_admin.png

    初始化 ( ejs )

    init.png

    LICENSE

    MIT

    38 条回复    2020-02-18 16:32:29 +08:00
    SniperXu
        1
    SniperXu  
       2020-01-03 15:50:01 +08:00   ❤️ 1
    我还以为我打开了简书。。。
    xiaoquan1995
        2
    xiaoquan1995  
    OP
       2020-01-03 16:37:09 +08:00
    @SniperXu 哈哈,我抄了样式
    xiaoquan1995
        3
    xiaoquan1995  
    OP
       2020-01-03 16:37:55 +08:00
    样式部分抄了一些,这个我必须要提前说明,但是功能都是手写,哈哈
    rimutuyuan
        4
    rimutuyuan  
       2020-01-03 16:42:02 +08:00
    先点用户管理,后点小书管理,会同时显示两个子界面
    gengbo25hao
        5
    gengbo25hao  
       2020-01-03 16:55:01 +08:00
    后台登录提示 错误信息:5-22 个英文字符!
    ylsc633
        6
    ylsc633  
       2020-01-03 16:56:39 +08:00
    很棒!!

    前台颜色太亮..
    后台有点卡..

    先 star, 后续我重构我 bbs 的时候,抄一下 ssr (非前端,所以不太擅长这块)
    robinlovemaggie
        7
    robinlovemaggie  
       2020-01-03 17:01:34 +08:00
    grophql or graphql?
    laravel
        8
    laravel  
       2020-01-03 17:13:18 +08:00
    有点儿厉害,学习学习
    yhxx
        9
    yhxx  
       2020-01-03 17:14:19 +08:00
    静态资源是不是可以考虑找个 CDN 用一下

    而且一共也只有不到 2M,我这加载了 12 秒。。。1M 带宽的服务器?
    xiaoquan1995
        10
    xiaoquan1995  
    OP
       2020-01-03 17:16:40 +08:00
    @robinlovemaggie 阿西吧,写错了,马上改
    xiaoquan1995
        11
    xiaoquan1995  
    OP
       2020-01-03 17:21:12 +08:00
    是 graphql,写错了,v2 下次发文章一定要好好看清楚字,阿西吧,现在不能修改了,我的锅,
    xiaoquan1995
        12
    xiaoquan1995  
    OP
       2020-01-03 17:21:33 +08:00
    @rimutuyuan 好的,已经记录
    xiaoquan1995
        13
    xiaoquan1995  
    OP
       2020-01-03 17:23:32 +08:00
    @gengbo25hao 可以登录,看看是不是输入错密码了,我好像没有去掉前后空格,看看有没有空格
    Bean0cean
        14
    Bean0cean  
       2020-01-03 17:23:50 +08:00
    学习 学习
    xiaoquan1995
        15
    xiaoquan1995  
    OP
       2020-01-03 17:24:36 +08:00
    @yhxx 是可以,主要是好点的要钱,免费的,怕不稳定
    xiaoquan1995
        16
    xiaoquan1995  
    OP
       2020-01-03 17:25:31 +08:00
    @ylsc633 后台代码马上会重构,等 antd 4.0 出来,马上重构代码,加载速度会优化很多,
    xiaoquan1995
        17
    xiaoquan1995  
    OP
       2020-01-03 17:26:32 +08:00
    大 V2EX 感觉是最活跃的社区了,发的几个社区,v2 感觉是最活跃的
    xiaoquan1995
        18
    xiaoquan1995  
    OP
       2020-01-03 17:27:16 +08:00
    @yhxx 前台会很快,后台是有点慢,近期开始重构了,带宽是 2M 的
    grewer
        19
    grewer  
       2020-01-03 17:33:10 +08:00
    antd 的 icon 不是能用 alias 解决么
    iseejun
        20
    iseejun  
       2020-01-03 17:33:17 +08:00
    小老弟,加油,到时用你的系统上一个站哈
    xiaoquan1995
        21
    xiaoquan1995  
    OP
       2020-01-03 17:41:34 +08:00
    @grewer 嗯嗯,我知道,其实我想等 antd4 出来的时候看看有没有变更啥的,一起改,同时一起改下界面
    xiaoquan1995
        22
    xiaoquan1995  
    OP
       2020-01-03 17:41:56 +08:00
    @iseejun 感谢,感谢,大佬支持,哈哈
    yhxx
        23
    yhxx  
       2020-01-03 17:50:22 +08:00
    @xiaoquan1995 又拍七牛之类的都有免费额度,可以试试
    Masons
        24
    Masons  
       2020-01-03 17:54:24 +08:00
    做得非常棒
    ztmqg
        25
    ztmqg  
       2020-01-03 18:09:32 +08:00 via iPhone
    赞一个
    xiaoquan1995
        26
    xiaoquan1995  
    OP
       2020-01-03 18:10:01 +08:00
    @yhxx 好的,我之前用过一段时间七牛,我看看七牛去
    Juszoe
        27
    Juszoe  
       2020-01-03 18:23:10 +08:00
    start 了,学习学习,刚好我也要做个站能参考一下
    HytonightYX
        28
    HytonightYX  
       2020-01-03 18:25:58 +08:00
    现在 GraphQL 的热度如何呀,正在观望要不要学然后直接用在下一个项目上了。。。
    yuang
        29
    yuang  
       2020-01-03 18:30:44 +08:00 via Android
    不错不错,有无 ssr 差别巨大。
    54sword
        30
    54sword  
       2020-01-03 18:42:44 +08:00
    非常不错,赞一个👍!
    xiaoquan1995
        31
    xiaoquan1995  
    OP
       2020-01-03 18:44:35 +08:00
    @HytonightYX 感觉很难火起来,条件比较苛刻,但是用起来了,感觉是挺好用的
    piaoxue
        32
    piaoxue  
       2020-01-03 20:07:38 +08:00
    你咋这么 666
    loveToMy1
        33
    loveToMy1  
       2020-01-04 16:09:35 +08:00
    楼主厉害啊 请问用了多少时间啊
    xiaoquan1995
        34
    xiaoquan1995  
    OP
       2020-01-07 14:54:56 +08:00
    @loveToMy1 我也忘记了,哈哈,有时间就写
    gengbo25hao
        35
    gengbo25hao  
       2020-01-11 13:59:30 +08:00
    服务端启动 npm run server-start 报错 Cannot find module '../../static/_client/vue-ssr-server-bundle.json'
    xiaoquan1995
        36
    xiaoquan1995  
    OP
       2020-01-28 16:47:53 +08:00
    @gengbo25hao 不好意思,前段时间忘记看 v2 了,先 npm run client-build 一下就可以
    wwwwzf
        37
    wwwwzf  
       2020-02-12 17:15:15 +08:00
    挺漂亮,不过这些代码全输出好吗?

    dmin-img-service\u002F2019-7\u002F1563647132508.png","description":"nodejs","subscribe_count":0,"article_count":0},{"tag_id":"kR4p2cHlM","name":"flutter","en_name":"flutter","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647137552.png","description":"flutter","subscribe_count":0,"article_count":0},{"tag_id":"g0hrlBunp","name":"php","en_name":"php","icon":"\thttps:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647146925.png","description":"php","subscribe_count":0,"article_count":0},{"tag_id":"IUwzFbCkN","name":"小程序","en_name":"applets","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647317842.png","description":"小程序","subscribe_count":0,"article_count":0},{"tag_id":"7UF0Lk6w2","name":"python","en_name":"python","icon":"\thttps:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647258962.jpeg","description":"python","subscribe_count":0,"article_count":0},{"tag_id":"54CaSV2uW","name":"go","en_name":"go","icon":"\thttps:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647268704.png","description":"go","subscribe_count":0,"article_count":1},{"tag_id":"4m-RmtWaC","name":"生活","en_name":"life","icon":"\thttps:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647298940.png","description":"生活","subscribe_count":0,"article_count":7},{"tag_id":"bqpu5C_MW","name":"学习","en_name":"learn","icon":"\thttps:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647324157.png","description":"learn","subscribe_count":0,"article_count":3},{"tag_id":"uI78rXjCo","name":"工具","en_name":"tool","icon":"\thttps:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647336955.png","description":"tools","subscribe_count":0,"article_count":4},{"tag_id":"eUh-EThD1","name":"旅行","en_name":"travel","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647344504.png","description":"travel","subscribe_count":0,"article_count":0},{"tag_id":"UdpUg1cu2","name":"webpack","en_name":"webpack","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647354922.png","description":"webpack","subscribe_count":0,"article_count":0},{"tag_id":"mQcfZErwx","name":"数据分析","en_name":"data_analysis","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647285782.png","description":"data_analysis","subscribe_count":0,"article_count":1},{"tag_id":"0t7sI9aH3","name":"qq 音乐","en_name":"qqyinyue","icon":"\thttps:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647264359.png","description":"qq 音乐","subscribe_count":0,"article_count":1},{"tag_id":"LBxugQGek","name":"scss","en_name":"scss","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647279221.png","description":"scss","subscribe_count":0,"article_count":0},{"tag_id":"6yCkvwNGP","name":"bug 反馈","en_name":"bug_feedback","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647350288.png","description":"bug_feedback","subscribe_count":0,"article_count":6},{"tag_id":"uNjwktc9N","name":"网站建议","en_name":"suggestion","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647310892.png","description":"suggestion","subscribe_count":0,"article_count":6},{"tag_id":"IuKeUrjZG","name":"游戏","en_name":"game","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647333128.png","description":"游戏","subscribe_count":0,"article_count":0},{"tag_id":"-e9bit1-a","name":"小随笔专属","en_name":"xiaosuibi","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647378589.png","description":"小随笔专属","subscribe_count":0,"article_count":16},{"tag_id":"15meU68Xu","name":"kitecms 专属","en_name":"kitecms","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647378589.png","description":"kitecms 暂时不知道起啥名,就叫这个了","subscribe_count":0,"article_count":30},{"tag_id":"KK-l6stN8","name":"测试专用标签","en_name":"testTag","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019-7\u002F1563647378589.png","description":"测试专用标签,可以随意发帖,一周清空一次,次标签不被推荐到首页中,","subscribe_count":0,"article_count":7},{"tag_id":"UbkX8eaeK","name":"科技","en_name":"technology","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019\u002F10\u002F1572490214749.png","description":"科技","subscribe_count":0,"article_count":2},{"tag_id":"NK-YCErtq","name":"影视","en_name":"movie","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019\u002F10\u002F1572490227262.png","description":"影视","subscribe_count":0,"article_count":2},{"tag_id":"Q_78w9GqV","name":"数码","en_name":"digital","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019\u002F10\u002F1572490241925.png","description":"数码","subscribe_count":0,"article_count":0},{"tag_id":"HNlQq_tAT","name":"职场","en_name":"workplace","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019\u002F10\u002F1572491243555.png","description":"职场","subscribe_count":0,"article_count":2},{"tag_id":"NAnYaLGpN","name":"综合","en_name":"comprehensive","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019\u002F11\u002F1573699553547.png","description":"综合","subscribe_count":0,"article_count":2},{"tag_id":"8O4lG0K-z","name":"graphql","en_name":"graphql","icon":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fupload\u002Fadmin-img-service\u002F2019\u002F11\u002F1574158159003.png","description":"graphql","subscribe_count":0,"article_count":1}],"user_article_tag":[],"subscribe":{"article_tag_list":[],"count":0,"page":1,"tag_name":"","pageSize":25},"tag":{"article_tag":{},"article_list":[],"tag_id":"","count":0,"page":1,"pageSize":25,"subscribe_count":0,"tag_all":[]}},"articleColumn":{"homeColumn":[],"column_list":{"count":0,"list":[],"page":1,"pageSize":25},"column":{},"currColumnEnName":""},"articleBlog":{"blogs":{"count":0,"list":[],"page":1,"pageSize":25},"blogInfo":{},"blogArticleList":{"count":0,"list":[],"page":1,"pageSize":25}},"articleComment":{},"dynamicComment":{},"setting":{},"search":{"searchArticle":{"article_list":[],"count":0,"page":1,"pageSize":25,"search":"","tag_all":[]}},"website":{"meta":{"website_name":"小随笔","domain_name":"https:\u002F\u002Fwww.xiaosuibi.com","introduction":"用文字沟通世界","miibeian":"粤 ICP 备 19031505 号","about":"https:\u002F\u002Fgithub.com\u002Fmaoxiaoquan\u002Fkite","feedback":"https:\u002F\u002Fgithub.com\u002Fmaoxiaoquan\u002Fkite\u002Fissues","logo":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fdefault\u002Fimg\u002Fxiaosuibi.png","description":"小随笔是一个优质的创作社区,在这里,你可以创作和学习还有分享,一篇文章、一首诗、一张照片、一幅画......每个人的创造力是无限的,发挥你的创造和想象力。","keywords":"小随笔、创作、学习、生活、娱乐、旅行"},"config":{"on_login":"yes","on_register":"yes","on_comment":"yes","googleCode":"UA-150227013-1"},"notice":[{"title":"关于本站、以及安装教程、开源源码地址","link":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fp\u002F10000","enable":true},{"title":"如有违规,联系我马上修改","link":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fp\u002F10000","enable":true},{"title":"kite 版本还在飞速迭代中,各位对于本站的意见和建议","link":"https:\u002F\u002Fwww.xiaosuibi.com\u002Fp\u002F10037","img_url":"","enable":true},{"title":"建议意见交流群 671489196","link
    xiaoquan1995
        38
    xiaoquan1995  
    OP
       2020-02-18 16:32:29 +08:00
    @wwwwzf vue ssr vuex 保存在本地的,可以看下官方的文档解释,里面的字段暴露可见也不碍事,最近在缩减下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4815 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 09:48 · PVG 17:48 · LAX 01:48 · JFK 04:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.