成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

一個(gè)前端界面vue ssr , 后端界面 react spa , 服務(wù)node的項(xiàng)目

Tony_Zby / 534人閱讀

摘要：前臺(tái)演示網(wǎng)站地址小隨筆后臺(tái)演示網(wǎng)站地址小隨筆后臺(tái)演示網(wǎng)站賬戶(hù)密碼資源有點(diǎn)大，可能要加載一段時(shí)間兼容方面目前還是主推薦用瀏覽器吧備注因?yàn)轫?xiàng)目是一直在寫(xiě)的，周期比較長(zhǎng)，改了又改，代碼可能比較亂，大家能看則看，有意見(jiàn)的，直接提意見(jiàn)，發(fā)出來(lái)的目的，

Kite

This is a vue + react project

kite

前臺(tái)演示網(wǎng)站地址： 小隨筆https://www.xiaosuibi.com/

后臺(tái)演示網(wǎng)站地址： 小隨筆https://www.xiaosuibi.com/_admin

后臺(tái)演示網(wǎng)站賬戶(hù)：kitetest 密碼：q123456 （資源有點(diǎn)大，可能要加載一段時(shí)間）

兼容方面目前還是主推薦用google瀏覽器吧

備注：因?yàn)轫?xiàng)目是一直在寫(xiě)的，周期比較長(zhǎng)，改了又改，代碼可能比較亂，大家能看則看，有意見(jiàn)的，直接提意見(jiàn)，發(fā)出來(lái)的目的，就是希望大家多提建議，或者意見(jiàn)
然后我再來(lái)改，代碼方面我會(huì)一直優(yōu)化的?。。。。?！
關(guān)于項(xiàng)目的維護(hù)，會(huì)一直維護(hù)下去的

再次備注：代碼方面美觀，或者有問(wèn)題的代碼，各位大佬直接指出即可，都是自己一個(gè)人在學(xué)，所以代碼方面質(zhì)量方面肯定沒(méi)那么好

后續(xù)是先做小程序版本+app版本

然后邊維護(hù)和改bug

目前還需要對(duì)編輯器進(jìn)行優(yōu)化

Build 
# npm install || cnpm install  安裝所有的包，可能有些多，前臺(tái)和后臺(tái)是在一起的

打包后臺(tái)界面 npm run admin-build

打包前臺(tái)界面 npm run client-build
Start 
# 目前用的數(shù)據(jù)庫(kù)只有mysql 本地開(kāi)發(fā)的話(huà)，下一個(gè)phpstudy即可

初始化：npm run init 然后打開(kāi)瀏覽器收入 localhost:8086 按照步驟操作即可

然后可以選擇pro or dev 開(kāi)始


pro 生產(chǎn)環(huán)境

pro1.1 在cmd 中輸入 npm run server 即可進(jìn)入程序

pro1.2 (url或者ip)+ :8086端口即可看到客戶(hù)端主頁(yè)

pro1.3 (url或者ip)+ :8086/admin端口即可看到客戶(hù)端后臺(tái)頁(yè)面



dev 本地開(kāi)發(fā)環(huán)境

dev1.1 在cmd 中輸入 npm run server-start 即可進(jìn)開(kāi)啟接口服務(wù)

dev1.2 在cmd 中輸入 npm run admin-start 即可進(jìn)入后臺(tái)開(kāi)發(fā)預(yù)覽（地址為：localhost:8083）

dev1.3 在cmd 中輸入 npm run client-start 即可進(jìn)入前臺(tái)開(kāi)發(fā)預(yù)覽（地址為：localhost:8081）

dev1.4 開(kāi)發(fā)環(huán)境下 一定要先運(yùn)行dev1.1的情況下再運(yùn)行 dev1.2 或者 dev1.3

目前cli部分代碼寫(xiě)的比較亂，等后期有時(shí)間再繼續(xù)優(yōu)化，哈哈
項(xiàng)目斷斷續(xù)續(xù)的寫(xiě)著，主體基本寫(xiě)完，目前就是優(yōu)化和改bug，代碼的邏輯啥的，能看則看，不能看就略過(guò)吧，也是自己學(xué)習(xí)的一個(gè)過(guò)程，
放心這個(gè)代碼會(huì)一直優(yōu)化的，已經(jīng)堅(jiān)持了很久了，可以看提交，哈哈
目錄結(jié)構(gòu) 
kite/
   |
   ├──admin/                     * 后臺(tái)頁(yè)面目錄react
   |
   ├──client/                    * 前臺(tái)ssr文件目錄
   │   ├──build                  * vur ssr build 配置文件
   │   ├──config                 * 部分配置文件
   │   ├──public                 * index模版文件
   │   ├──request                * 請(qǐng)求配置文件
   │   ├──server                 * dev 模式下的開(kāi)始文件
   │   ├──src                    * src ssr 主文件目錄
   │   └──static                 * 靜態(tài)資源目錄
   │
   │──config/                    * 部分可配置文件
   │
   │──db/                        * mysql and lowdb
   |
   ├──server/                    * 服務(wù)層，所有前臺(tái)后臺(tái)接口
   │
   ├──static/                    * 靜態(tài)資源目錄
   |
   ├──views/                     * cli 模版目錄
   │
   │──plugins/                   * 第三方組件 + 自有js庫(kù) + 其他插件性質(zhì)的腳本
   │
   │──static/                    * 不經(jīng)編譯器處理的靜態(tài)資源
   │
   │──store/                     * 全局?jǐn)?shù)據(jù)狀態(tài)管理
   │
   │──package.json               * 包信息
   │
   │──.eslintrc                  * Eslint配置
   │
   │──_nodemon.json              * _nodemon配置
   │
   │──.gitignore                 * Git忽略文件配置
   │
   └──pm2.json                   * pm2配置
初始化

前臺(tái)用戶(hù)界面

后臺(tái)管理界面

說(shuō)明

使用的技術(shù)棧：

前臺(tái)方面：vue + vuex + vue-router + vue-server-renderer

后臺(tái)方面：react + redux + react-redux + react-router

server: koa + mysql

公共部分：webpack

其他詳細(xì)的直接看 package.json 就可以了

前臺(tái)界面目前是用的 vue 的 ssr，但是沒(méi)有采用 nuxt.js 代碼的閱讀應(yīng)該還是可以的，cli 比較亂，后臺(tái)界面采用的是 react

前臺(tái)目前比較簡(jiǎn)單，就是一個(gè)多人文章發(fā)布系統(tǒng)，用戶(hù)可以注冊(cè)賬號(hào)，發(fā)布文章，關(guān)注用戶(hù)，喜歡文章，評(píng)論等等

后臺(tái)管理文章的發(fā)布、審核，評(píng)論的審核，管理員權(quán)限管理，系統(tǒng)配置等等，前后臺(tái)用戶(hù)管理員獨(dú)立

初始化界面是對(duì)整個(gè)文章發(fā)布系統(tǒng)的一個(gè)初始化，包括初始管理員角色，mysql 等等

LICENSE

MIT

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105654.html

相關(guān)文章

  • 構(gòu)建前端項(xiàng)目

    摘要：解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個(gè)應(yīng)用，然后通過(guò)構(gòu)建工具及配置，確定哪些組件需要再服務(wù)器端渲染，那些組件需要再客戶(hù)端渲染。服務(wù)器端渲染，由框架與構(gòu)建工具配合，并依據(jù)一定的項(xiàng)目結(jié)構(gòu)和編碼方式，共同運(yùn)行。 分離 為什么需要 前后端分離、web服務(wù)器與static服務(wù)器分離: 前端與后端耦合 (需求) 自動(dòng)化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件) 模塊化、組件化，項(xiàng)目共享代碼 (...

    mindwind 評(píng)論0 收藏0

  • Laravel-Vue-SSR-SPA 服務(wù)端渲染/單頁(yè)面渲染實(shí)現(xiàn)骨架

    摘要：提供服務(wù)端渲染單頁(yè)面渲染實(shí)現(xiàn)骨架同時(shí)集成打包構(gòu)建文件名實(shí)現(xiàn)內(nèi)置等套件提供端渲染方案前后端分離單頁(yè)面方案前后端分離單頁(yè)面方案等三種常見(jiàn)方案項(xiàng)目地址歡迎項(xiàng)目需求基于和提供的強(qiáng)大的功能組合并根據(jù)已有項(xiàng)目實(shí)踐經(jīng)驗(yàn)提供完整的集成方案幫助快速 Laravel-Vue-SSR-SPA 提供服務(wù)端渲染/單頁(yè)面渲染實(shí)現(xiàn)骨架, 同時(shí)集成webpack打包構(gòu)建 MD5文件名/gzip 實(shí)現(xiàn), 內(nèi)置 vue-...

    zr_hebo 評(píng)論0 收藏0

  • Laravel-Vue-SSR-SPA 服務(wù)端渲染/單頁(yè)面渲染實(shí)現(xiàn)骨架

    摘要：提供服務(wù)端渲染單頁(yè)面渲染實(shí)現(xiàn)骨架同時(shí)集成打包構(gòu)建文件名實(shí)現(xiàn)內(nèi)置等套件提供端渲染方案前后端分離單頁(yè)面方案前后端分離單頁(yè)面方案等三種常見(jiàn)方案項(xiàng)目地址歡迎項(xiàng)目需求基于和提供的強(qiáng)大的功能組合并根據(jù)已有項(xiàng)目實(shí)踐經(jīng)驗(yàn)提供完整的集成方案幫助快速 Laravel-Vue-SSR-SPA 提供服務(wù)端渲染/單頁(yè)面渲染實(shí)現(xiàn)骨架, 同時(shí)集成webpack打包構(gòu)建 MD5文件名/gzip 實(shí)現(xiàn), 內(nèi)置 vue-...

    U2FsdGVkX1x 評(píng)論0 收藏0

  • 服務(wù)端預(yù)渲染之Nuxt（介紹篇）

    摘要：為了解決問(wèn)題，推出了服務(wù)端預(yù)渲染，以便提高對(duì)優(yōu)化。應(yīng)用，到了，單頁(yè)面應(yīng)用優(yōu)秀的用戶(hù)體驗(yàn)，逐漸成為了主流，頁(yè)面整體式渲染出來(lái)的，稱(chēng)之為客戶(hù)端渲染。客戶(hù)端接收數(shù)據(jù)，然后完成最終渲染。通過(guò)對(duì)客戶(hù)端服務(wù)端基礎(chǔ)框架的抽象組織，主要關(guān)注的是應(yīng)用的渲染。 現(xiàn)在前端開(kāi)發(fā)一般都是前后端分離，mvvm和mvc的開(kāi)發(fā)框架，如Angular、React和Vue等，雖然寫(xiě)框架能夠使我們快速的完成開(kāi)發(fā)，但是由于前...

    Shonim 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<