一個前端界面vue ssr , 后端界面 react spa , 服務node的項目

Tony_Zby 發布于2019-08-23 18:40 / 514人閱讀

摘要：前臺演示網站地址小隨筆后臺演示網站地址小隨筆后臺演示網站賬戶密碼資源有點大，可能要加載一段時間兼容方面目前還是主推薦用瀏覽器吧備注因為項目是一直在寫的，周期比較長，改了又改，代碼可能比較亂，大家能看則看，有意見的，直接提意見，發出來的目的，

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 前端界面設計前端界面工程師

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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