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

Tony_Zby 发布于2019-08-23 18:40 / 467人阅读

摘要：前台演示网站地址小随笔后台演示网站地址小随笔后台演示网站账户密码资源有点大，可能要加载一段时间兼容方面目前还是主推荐用浏览器吧备注因为项目是一直在写的，周期比较长，改了又改，代码可能比较乱，大家能看则看，有意见的，直接提意见，发出来的目的，

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 + 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

GPU云服务器云服务器用jsp做一个界面的界面前端wpf 前端界面设计前端界面工程师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105654.html

构建前端项目

摘要：解决思路服务器端渲染服务器端和前端公用同一个应用，然后通过构建工具及配置，确定哪些组件需要再服务器端渲染，那些组件需要再客户端渲染。服务器端渲染，由框架与构建工具配合，并依据一定的项目结构和编码方式，共同运行。分离为什么需要前后端分离、web服务器与static服务器分离: 前端与后端耦合 (需求) 自动化、工程化的构建前端的代码 (基础条件) 模块化、组件化，项目共享代码 (...

mindwind 2019-08-23 13:51 评论0 收藏0
Laravel-Vue-SSR-SPA 服务端渲染/单页面渲染实现骨架

摘要：提供服务端渲染单页面渲染实现骨架同时集成打包构建文件名实现内置等套件提供端渲染方案前后端分离单页面方案前后端分离单页面方案等三种常见方案项目地址欢迎项目需求基于和提供的强大的功能组合并根据已有项目实践经验提供完整的集成方案帮助快速 Laravel-Vue-SSR-SPA 提供服务端渲染/单页面渲染实现骨架, 同时集成webpack打包构建 MD5文件名/gzip 实现, 内置 vue-...

zr_hebo 2019-07-01 10:55 评论0 收藏0
Laravel-Vue-SSR-SPA 服务端渲染/单页面渲染实现骨架

摘要：提供服务端渲染单页面渲染实现骨架同时集成打包构建文件名实现内置等套件提供端渲染方案前后端分离单页面方案前后端分离单页面方案等三种常见方案项目地址欢迎项目需求基于和提供的强大的功能组合并根据已有项目实践经验提供完整的集成方案帮助快速 Laravel-Vue-SSR-SPA 提供服务端渲染/单页面渲染实现骨架, 同时集成webpack打包构建 MD5文件名/gzip 实现, 内置 vue-...

U2FsdGVkX1x 2019-08-26 12:22 评论0 收藏0
服务端预渲染之Nuxt（介绍篇）

摘要：为了解决问题，推出了服务端预渲染，以便提高对优化。应用，到了，单页面应用优秀的用户体验，逐渐成为了主流，页面整体式渲染出来的，称之为客户端渲染。客户端接收数据，然后完成最终渲染。通过对客户端服务端基础框架的抽象组织，主要关注的是应用的渲染。现在前端开发一般都是前后端分离，mvvm和mvc的开发框架，如Angular、React和Vue等，虽然写框架能够使我们快速的完成开发，但是由于前...

Shonim 2019-08-23 16:46 评论0 收藏0