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

[xiaoquan1995]

这个项目用了 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，和官网示例类似的)

后台管理界面 (react spa )

初始化 （ ejs ）

LICENSE

MIT

[SniperXu]

我还以为我打开了简书。。。

[xiaoquan1995]

@SniperXu 哈哈，我抄了样式

[xiaoquan1995]

样式部分抄了一些，这个我必须要提前说明，但是功能都是手写，哈哈

[rimutuyuan]

先点用户管理，后点小书管理，会同时显示两个子界面

[gengbo25hao]

后台登录提示 错误信息：5-22 个英文字符!

[ylsc633]

很棒!!

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

先 star, 后续我重构我 bbs 的时候,抄一下 ssr (非前端,所以不太擅长这块)

[robinlovemaggie]

grophql or graphql?

[laravel]

有点儿厉害，学习学习

[yhxx]

静态资源是不是可以考虑找个 CDN 用一下

而且一共也只有不到 2M，我这加载了 12 秒。。。1M 带宽的服务器？

[xiaoquan1995]

@robinlovemaggie 阿西吧，写错了，马上改

[xiaoquan1995]

是 graphql，写错了，v2 下次发文章一定要好好看清楚字，阿西吧，现在不能修改了，我的锅，

[xiaoquan1995]

@rimutuyuan 好的，已经记录

[xiaoquan1995]

@gengbo25hao 可以登录，看看是不是输入错密码了，我好像没有去掉前后空格，看看有没有空格

[Bean0cean]

学习 学习

[xiaoquan1995]

@yhxx 是可以，主要是好点的要钱，免费的，怕不稳定

[xiaoquan1995]

@ylsc633 后台代码马上会重构，等 antd 4.0 出来，马上重构代码，加载速度会优化很多，

[xiaoquan1995]

大 V2EX 感觉是最活跃的社区了，发的几个社区，v2 感觉是最活跃的

[xiaoquan1995]

@yhxx 前台会很快，后台是有点慢，近期开始重构了，带宽是 2M 的

[grewer]

antd 的 icon 不是能用 alias 解决么

[iseejun]

小老弟，加油，到时用你的系统上一个站哈

[xiaoquan1995]

@grewer 嗯嗯，我知道，其实我想等 antd4 出来的时候看看有没有变更啥的，一起改，同时一起改下界面

[xiaoquan1995]

@iseejun 感谢，感谢，大佬支持，哈哈

[yhxx]

@xiaoquan1995 又拍七牛之类的都有免费额度，可以试试

[Masons]

做得非常棒

[ztmqg]

赞一个

[xiaoquan1995]

@yhxx 好的，我之前用过一段时间七牛，我看看七牛去

[Juszoe]

start 了，学习学习，刚好我也要做个站能参考一下

[HytonightYX]

现在 GraphQL 的热度如何呀，正在观望要不要学然后直接用在下一个项目上了。。。

[yuang]

不错不错，有无 ssr 差别巨大。

[54sword]

非常不错，赞一个👍！

[xiaoquan1995]

@HytonightYX 感觉很难火起来，条件比较苛刻，但是用起来了，感觉是挺好用的

[piaoxue]

你咋这么 666

[loveToMy1]

楼主厉害啊 请问用了多少时间啊

[xiaoquan1995]

@loveToMy1 我也忘记了，哈哈，有时间就写

[gengbo25hao]

服务端启动 npm run server-start 报错 Cannot find module '../../static/_client/vue-ssr-server-bundle.json'

[xiaoquan1995]

@gengbo25hao 不好意思，前段时间忘记看 v2 了，先 npm run client-build 一下就可以

[wwwwzf]

挺漂亮，不过这些代码全输出好吗？

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]

@wwwwzf vue ssr vuex 保存在本地的，可以看下官方的文档解释，里面的字段暴露可见也不碍事，最近在缩减下