一个前端界面vue ssr , 后端界面 react spa , 服务node的项目

ErrorFree
• 阅读 1310

Kite

This is a vue + react project

kite

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

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

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

兼容方面目前还是主推荐用google浏览器吧

备注:因为项目是一直在写的,周期比较长,改了又改,代码可能比较乱,大家能看则看,有意见的,直接提意见,发出来的目的,就是希望大家多提建议,或者意见
然后我再来改,代码方面我会一直优化的!!!!!!
关于项目的维护,会一直维护下去的

再次备注:代码方面美观,或者有问题的代码,各位大佬直接指出即可,都是自己一个人在学,所以代码方面质量方面肯定没那么好

后续是先做小程序版本+app版本

然后边维护和改bug

目前还需要对编辑器进行优化

Build


# npm install || cnpm install  安装所有的包,可能有些多,前台和后台是在一起的

打包后台界面 npm run admin-build

打包前台界面 npm run client-build

Start


# 目前用的数据库只有mysql 本地开发的话,下一个phpstudy即可

初始化:npm run init 然后打开浏览器收入 localhost:8086 按照步骤操作即可

然后可以选择pro or 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部分代码写的比较乱,等后期有时间再继续优化,哈哈
项目断断续续的写着,主体基本写完,目前就是优化和改bug,代码的逻辑啥的,能看则看,不能看就略过吧,也是自己学习的一个过程,
放心这个代码会一直优化的,已经坚持了很久了,可以看提交,哈哈

目录结构

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 模版目录
   │
   │──plugins/                   * 第三方组件 + 自有js库 + 其他插件性质的脚本
   │
   │──static/                    * 不经编译器处理的静态资源
   │
   │──store/                     * 全局数据状态管理
   │
   │──package.json               * 包信息
   │
   │──.eslintrc                  * Eslint配置
   │
   │──_nodemon.json              * _nodemon配置
   │
   │──.gitignore                 * Git忽略文件配置
   │
   └──pm2.json                   * pm2配置

初始化

一个前端界面vue ssr , 后端界面 react spa , 服务node的项目

前台用户界面

一个前端界面vue ssr , 后端界面 react spa , 服务node的项目

后台管理界面

一个前端界面vue ssr , 后端界面 react spa , 服务node的项目

说明

使用的技术栈:

前台方面: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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(