Skip to content
🌴 Kite 前台页面是vue ssr服务端渲染、后台页面是react spa、服务层nodejs、koa、mysql编写的一套多权限内容管理系统
JavaScript Vue CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
admin fix bug Nov 12, 2019
client fix bug Nov 12, 2019
db fix Nov 10, 2019
docs fix Nov 11, 2019
server fix Nov 12, 2019
static fix Oct 30, 2019
update fix Nov 10, 2019
views fix Oct 28, 2019
.eslintrc kite project init Jul 18, 2019
.gitignore kite project init Jul 18, 2019
README.md fix Nov 11, 2019
_nodemon.json kite project init Jul 18, 2019
kite.config.js fix ...... Nov 10, 2019
package.json
pm2.json fix bug Oct 28, 2019
postcss.config.js kite project init Jul 18, 2019

README.md

Kite

这是一个前台 vue 服务端渲染(ssr) + 后台 react单页(spa) + 接口层 node koa 的项目

GitHub stars GitHub issues GitHub forks

kite

做这个项目的目的是想把目前所学的都用在里面,避免遗忘,后期维护的时候都会过一遍,这样学了的就不会忘掉, 项目覆盖了前端大半的知识点和框架

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

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

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

😊 前台界面

client

💼 最新版本更新记录

更新时间:2019.11.11 15:44
外部版本号:v0.12.0 内部版本号:0.7
此次更新需要运行升级 npm run kite-update

1.增加贝壳积分系统(试运行)
2.增加购买系统,暂时在小书试运行,消息系统全面改造
3.sql优化
4.修改现存的bug,部分页面结构重写

版本更新历史记录

⌨️ 程序升级


初次使用请忽略以下,直接下载最新版本使用即可,以下是旧版本升级的程序
版本分内部版本和外部版本 v0.10.5 是外部版本
beta0.1、beta0.2 为内部版本、新版本发布,github 会发布响应版本的分支
official 始终与最新版本同步
0.2 版本之前的版本需要手动前往 /db/lowdb/db.js 中修改 config.version 为 0.1 , 类型为数字
然后备份 mysql、 /db/lowdb/db.js、/static/update 文件夹
备份后运行 npm run kite-update 升级程序会自动判断

📦 Start

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

打包后台界面 npm run admin-build
打包前台界面 npm run client-build

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

pro 生产环境

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

dev 本地开发环境

dev1.1 在cmd 中输入 npm run server-start 即可进开启接口服务
dev1.2 在cmd 中输入 npm run admin-start 即可进入后台开发预览(地址为:localhost:8083)
dev1.3 在cmd 中输入 npm run client-start 即可进入前台开发预览(地址为:localhost:8081)
dev1.4 开发环境下 一定要先运行dev1.1的情况下再运行 dev1.2 或者 dev1.3

本地开发预览,前端方面还有点问题,需要优化,必须等编译完成才能打开,否则会报错
目前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

📁 目录结构

kite/
   |
   ├──admin/                     * 后台页面目录react
   |
   ├──client/                    * 前台ssr文件目录
   │   ├──build                  * vur ssr build 配置文件
   │   ├──config                 * 部分配置文件
   │   ├──public                 * index模版文件
   │   ├──request                * 请求配置文件
   │   ├──server                 * dev 模式下的开始文件
   │   ├──src                    * src ssr 主文件目录
   │   └──static                 * 静态资源目录
   │
   │──config/                    * 部分可配置文件
   │
   │──db/                        * mysql and lowdb
   |
   ├──server/                    * 服务层,所有前台后台接口
   │
   ├──static/                    * 静态资源目录
   |
   ├──views/                     * cli 模版目录
   │
   │──static/                    * 不经编译器处理的静态资源
   │
   │──store/                     * 全局数据状态管理
   │
   │──package.json               * 包信息
   │
   │──.eslintrc                  * Eslint配置
   │
   │──_nodemon.json              * _nodemon配置
   │
   │──.gitignore                 * Git忽略文件配置
   │
   └──pm2.json                   * pm2配置

👓 说明

使用的技术栈:

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

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

LICENSE

MIT

You can’t perform that action at this time.