做这个项目的目的是想把目前所学的都用在里面,避免遗忘,后期维护的时候都会过一遍,这样学了的就不会忘掉, 项目覆盖了前端大半的知识点和框架
前台演示网站地址: 小随笔 https://www.xiaosuibi.com/
后台演示网站地址: 小随笔 https://www.xiaosuibi.com/_admin
后台演示网站账户:kitetest 密码:q123456 (资源有点大,可能要加载一段时间)
更新时间:2019.10.28 15:32
外部版本号:v0.11.0 内部版本号:0.6
此次更新需要运行升级 npm run kite-update
1.client代码全面改造,移除了element ui (嵌套在一起,过于臃肿)
2.移除了原来的编辑器,对原来的编辑器进行瘦身,提取了一个精简版出来
3.seo代码部分优化、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 升级程序会自动判断
初始直接 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存储字段大部分都为下划线
以后的维护以及改版、开发规范都是如此,
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 等等
MIT