GithubHelp home page GithubHelp logo

maoxiaoquan / kite Goto Github PK

View Code? Open in Web Editor NEW
557.0 11.0 116.0 11.64 MB

:palm_tree: Kite 前台页面是vue ssr服务端渲染、后台页面是react spa、服务层nodejs express、mysql编写的一套多权限文章、动态管理系统

License: MIT License

JavaScript 62.31% HTML 2.04% CSS 0.50% TypeScript 33.02% SCSS 2.13%
nodejs react redux react16 webpack3 vue vuessr ssr markdown mark

kite's Introduction

Kite

GitHub stars GitHub issues GitHub forks

✨ kite (目前处于停止维护阶段,仅供学习使用)

简介:这个项目用了 react、vue、node 、webpack、graphql、express 基本涉及到了前端大部分技术了,都是从零开始搭建包括 ssr 脚手架,主要是让学的人,接触前端整个的生态圈

项目划分为三个项目

项目名字 项目地址 主要技术 介绍
kite https://github.com/maoxiaoquan/kite express、graphql、socket.io、typescript 主项目、如果主要是使用,只需要当前项目即可
kite-client https://github.com/maoxiaoquan/kite-client vue、vuex、vue-ssr 前台页面项目(开发前台需要下载项目)
kite-admin-v2 https://github.com/maoxiaoquan/kite-admin-v2 react、redux、 后台页面项目(开发后台需要下载项目)

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

😊 前台界面

client

💼 最新版本更新记录

更新时间:2020.5.15 11.08
版本号:0.9.1
此次更新需要运行升级 npm run kite-update

1.admin 后台使用react hook + react-router v6 + typescript 重构完成 (文件体积减少一半)
2.client 页面所有图片替换展现方式
3.ui界面微调
4.增加一些等级展示得地方
5.修复一些bug

版本更新历史记录

⌨️ 程序升级


初次使用请忽略以下,直接下载最新版本使用即可,以下是旧版本升级的程序
official 始终与最新版本同步
升级需要备份 mysql、 /db/lowdb/db.js、/static/update 文件夹
备份后运行 npm run kite-update 升级程序会自动判断

📦 Start

初始直接 git clone https://github.com/maoxiaoquan/kite.git
或者 official 分支 都是最新代码
# npm install || cnpm install  安装所有的包,可能有些多,前台和后台是在一起的

# 目前用的数据库只有mysql 本地开发的话,下一个phpstudy即可
初始化:npm run init 然后打开浏览器收入 localhost:8085 按照步骤操作即可
然后可以选择pro 或者 dev 开始
本地开发模式 npm run start 打开 localhost:8086即可预览页面

pro 生产环境

pro1.1 在cmd 中输入 npm run server 即可进入程序
pro1.2 (url或者ip)+ :8086端口即可看到客户端主页
pro1.3 (url或者ip)+ :8086/admin端口即可看到客户端后台页面

dev 本地开发环境

1.需要同时克隆 kite、kite-client、kite-admin三个项目,保持在同一层级目录
2.运行kite 项目 npm run start 即可开发接口服务
3.运行kite-client或者kite-admin项目中 npm run start 即可开发前台或者后台页面

本地开发预览,前端方面还有点问题,需要优化,必须等编译完成才能打开,否则会报错
目前cli部分代码写的比较乱,等后期有时间再继续优化,哈哈
cli 的邮箱一定要填写完成,否则前台无法发送注册的邮件
项目断断续续的写着,主体基本写完,目前就是优化和改bug,代码的逻辑啥的,能看则看,不能看就略过吧,也是自己学习的一个过程,

☂️ 开发规范(以主文件夹开始)


vue以及react 开始时涉及的页面级文件夹、无状态组件文件夹、有状态组件文件夹、无状态组件、有状态组件、组件内部的类名、
文件夹内组件(只要是涉及 react 和 vue 的可用组件或者页面级组件) ----- 帕斯卡命名法 或者是 小驼峰 主要是为了提高辨识度

所有页面内变量名、组件内类的方法、文件内类的方法、函数、不属于上面的文件
其他文件夹 例如 src、admin、client、utils 都以小驼峰命名
不太清楚的就都以小驼峰来命名

涉及到以及数据库操作的都以下划线分隔 _
index.js、index.vue、index.jsx、index.css、index.scss以 index.* 的文件都是小写单词
vuex action 都以大写开始下划线分隔例如:ARTICLE_COMMENT
admin 文件夹和 server 文件夹 变量多为下划线居多,主要是与mysql直接交互的多,mysql存储字段大部分都为下划线
以后的维护以及改版、开发规范都是如此,

😊 后台界面

admin

🔨 初始化

admin

👓 说明

使用的技术栈:

前台方面:vue 服务端渲染 + vuex + vue-router + vue-server-renderer
后台方面:react + redux + react-redux + react-router
server: express + mysql + graphql
公共部分:webpack

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

LICENSE

MIT

kite's People

Contributors

maoxiaoquan avatar zhennann avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kite's Issues

关于小随笔无法注册以及想要联系作者问题。

1.在小随笔使用时无法进行注册操作点击注册前端返回501错误。
2.我下载了小随笔的前后端代码分析使用后我用Java重新做了一份后台,如果有需要可以给您发送一份或者开源。
3.此外希望能给作者取的联系。谢谢

联系方式: 邮箱: [email protected] 微信 18438672298

初始化第一步

错误信息:Client does not support authentication protocol requested by server; consider upgrading MySQL client

后台用户角色问题

我现在在学后台权限这块功能。
现在后台是一个用户只能对一个角色吗,如果多个角色怎么做高效,还有每次验证权限都得请求数据库,可以一次请求存下来吗,如果能,怎么存,可以下次更新代码的时候添加一下吗,感谢

本地不启动后端api,使用代理转发到公共测试环境后端

管理后台直接更改proxy设置 OK
前端项目 webpack.server.dev.config.js 里的mode使用了production,导致dev 模式下后端渲染过程API都直接请求到localhost:8086,proxy没有生效

是不是该改为development,这样能支持前端人员本地不用启动后端

这个留言是点赞的

看了一下,我之前一直在看类似于这种项目的.看到github的推荐就点进来了.
UI做的挺不错的,感谢开源的作者.o( ̄︶ ̄)o

error

Error: Cannot find module '../../static/_client/vue-ssr-server-bundle.json'

发布文章容易一次性重复发多章

路径:write/create

发布文章时,如果网络较差,没有及时反应,用户以为没点到会点击多次发布按钮,而导致同一篇文章多次重复发布

关于使用sync问题

models.admin_user.sync({
  force: true
}).then(() => {
  console.log('所有数据表创建完成')
})

设置force:true,数据丢失不会有问题吗?

关于本项目

最新版本的开发是在分支后面带-develop,表示最新正在开发的分支

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.