这个项目用了 react、vue、node、webpack、grophql、express 基本涉及到了前端大部分主流的技术了,都是用的最新的版本,都是从零开始搭建包括 ssr 脚手架,主要是让学的人,接触前端整个的生态圈,后期 node 会用 ts 重构,而且会根据所有框架的版本实时更新项目,个人对 node 特别喜欢,哈哈,所以就想写点东西,
项目源码地址: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 重构
MIT
1
SniperXu 2020-01-03 15:50:01 +08:00 1
我还以为我打开了简书。。。
|
2
xiaoquan1995 OP @SniperXu 哈哈,我抄了样式
|
3
xiaoquan1995 OP 样式部分抄了一些,这个我必须要提前说明,但是功能都是手写,哈哈
|
4
rimutuyuan 2020-01-03 16:42:02 +08:00
先点用户管理,后点小书管理,会同时显示两个子界面
|
5
gengbo25hao 2020-01-03 16:55:01 +08:00
后台登录提示 错误信息:5-22 个英文字符!
|
6
ylsc633 2020-01-03 16:56:39 +08:00
很棒!!
前台颜色太亮.. 后台有点卡.. 先 star, 后续我重构我 bbs 的时候,抄一下 ssr (非前端,所以不太擅长这块) |
7
robinlovemaggie 2020-01-03 17:01:34 +08:00
grophql or graphql?
|
8
laravel 2020-01-03 17:13:18 +08:00
有点儿厉害,学习学习
|
9
yhxx 2020-01-03 17:14:19 +08:00
静态资源是不是可以考虑找个 CDN 用一下
而且一共也只有不到 2M,我这加载了 12 秒。。。1M 带宽的服务器? |
10
xiaoquan1995 OP @robinlovemaggie 阿西吧,写错了,马上改
|
11
xiaoquan1995 OP 是 graphql,写错了,v2 下次发文章一定要好好看清楚字,阿西吧,现在不能修改了,我的锅,
|
12
xiaoquan1995 OP @rimutuyuan 好的,已经记录
|
13
xiaoquan1995 OP @gengbo25hao 可以登录,看看是不是输入错密码了,我好像没有去掉前后空格,看看有没有空格
|
14
Bean0cean 2020-01-03 17:23:50 +08:00
学习 学习
|
15
xiaoquan1995 OP @yhxx 是可以,主要是好点的要钱,免费的,怕不稳定
|
16
xiaoquan1995 OP @ylsc633 后台代码马上会重构,等 antd 4.0 出来,马上重构代码,加载速度会优化很多,
|
17
xiaoquan1995 OP 大 V2EX 感觉是最活跃的社区了,发的几个社区,v2 感觉是最活跃的
|
18
xiaoquan1995 OP @yhxx 前台会很快,后台是有点慢,近期开始重构了,带宽是 2M 的
|
19
grewer 2020-01-03 17:33:10 +08:00
antd 的 icon 不是能用 alias 解决么
|
20
iseejun 2020-01-03 17:33:17 +08:00
小老弟,加油,到时用你的系统上一个站哈
|
21
xiaoquan1995 OP @grewer 嗯嗯,我知道,其实我想等 antd4 出来的时候看看有没有变更啥的,一起改,同时一起改下界面
|
22
xiaoquan1995 OP @iseejun 感谢,感谢,大佬支持,哈哈
|
23
yhxx 2020-01-03 17:50:22 +08:00
@xiaoquan1995 又拍七牛之类的都有免费额度,可以试试
|
24
Masons 2020-01-03 17:54:24 +08:00
做得非常棒
|
25
ztmqg 2020-01-03 18:09:32 +08:00 via iPhone
赞一个
|
26
xiaoquan1995 OP @yhxx 好的,我之前用过一段时间七牛,我看看七牛去
|
27
Juszoe 2020-01-03 18:23:10 +08:00
start 了,学习学习,刚好我也要做个站能参考一下
|
28
HytonightYX 2020-01-03 18:25:58 +08:00
现在 GraphQL 的热度如何呀,正在观望要不要学然后直接用在下一个项目上了。。。
|
29
yuang 2020-01-03 18:30:44 +08:00 via Android
不错不错,有无 ssr 差别巨大。
|
30
54sword 2020-01-03 18:42:44 +08:00
非常不错,赞一个👍!
|
31
xiaoquan1995 OP @HytonightYX 感觉很难火起来,条件比较苛刻,但是用起来了,感觉是挺好用的
|
32
piaoxue 2020-01-03 20:07:38 +08:00
你咋这么 666
|
33
loveToMy1 2020-01-04 16:09:35 +08:00
楼主厉害啊 请问用了多少时间啊
|
34
xiaoquan1995 OP @loveToMy1 我也忘记了,哈哈,有时间就写
|
35
gengbo25hao 2020-01-11 13:59:30 +08:00
服务端启动 npm run server-start 报错 Cannot find module '../../static/_client/vue-ssr-server-bundle.json'
|
36
xiaoquan1995 OP @gengbo25hao 不好意思,前段时间忘记看 v2 了,先 npm run client-build 一下就可以
|
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 |
38
xiaoquan1995 OP @wwwwzf vue ssr vuex 保存在本地的,可以看下官方的文档解释,里面的字段暴露可见也不碍事,最近在缩减下
|