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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1785 天前的主题，其中的信息可能已经有所发展或是发生改变。

这个项目用了 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

Vue

ssr

后台

React

38 条回复 • 2020-02-18 16:32:29 +08:00

SniperXu

2020-01-03 15:50:01 +08:00

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

xiaoquan1995

2020-01-03 16:37:09 +08:00

@SniperXu 哈哈，我抄了样式

xiaoquan1995

2020-01-03 16:37:55 +08:00

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

rimutuyuan

2020-01-03 16:42:02 +08:00

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

gengbo25hao

2020-01-03 16:55:01 +08:00

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

ylsc633

2020-01-03 16:56:39 +08:00

很棒!!

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

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

robinlovemaggie

2020-01-03 17:01:34 +08:00

grophql or graphql?

laravel

2020-01-03 17:13:18 +08:00

有点儿厉害，学习学习

yhxx

2020-01-03 17:14:19 +08:00

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

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

xiaoquan1995

2020-01-03 17:16:40 +08:00

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

xiaoquan1995

2020-01-03 17:21:12 +08:00

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

xiaoquan1995

2020-01-03 17:21:33 +08:00

@rimutuyuan 好的，已经记录

xiaoquan1995

2020-01-03 17:23:32 +08:00

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

Bean0cean

2020-01-03 17:23:50 +08:00

学习学习

xiaoquan1995

2020-01-03 17:24:36 +08:00

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

xiaoquan1995

2020-01-03 17:25:31 +08:00

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

xiaoquan1995

2020-01-03 17:26:32 +08:00

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

xiaoquan1995

2020-01-03 17:27:16 +08:00

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

grewer

2020-01-03 17:33:10 +08:00

antd 的 icon 不是能用 alias 解决么

iseejun

2020-01-03 17:33:17 +08:00

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

xiaoquan1995

2020-01-03 17:41:34 +08:00

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

xiaoquan1995

2020-01-03 17:41:56 +08:00

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

yhxx

2020-01-03 17:50:22 +08:00

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

Masons

2020-01-03 17:54:24 +08:00

做得非常棒

ztmqg

2020-01-03 18:09:32 +08:00 via iPhone

赞一个

xiaoquan1995

2020-01-03 18:10:01 +08:00

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

Juszoe

2020-01-03 18:23:10 +08:00

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

HytonightYX

2020-01-03 18:25:58 +08:00

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

yuang

2020-01-03 18:30:44 +08:00 via Android

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

54sword

2020-01-03 18:42:44 +08:00

非常不错，赞一个👍！

xiaoquan1995

2020-01-03 18:44:35 +08:00

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

piaoxue

2020-01-03 20:07:38 +08:00

你咋这么 666

loveToMy1

2020-01-04 16:09:35 +08:00

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

xiaoquan1995

2020-01-07 14:54:56 +08:00

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

gengbo25hao

2020-01-11 13:59:30 +08:00

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

xiaoquan1995

2020-01-28 16:47:53 +08:00

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

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

2020-02-18 16:32:29 +08:00

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

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

kite

说明

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

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

后台管理界面 (react spa )

初始化 （ ejs ）

LICENSE

初始化（ ejs ）