摘要:前臺演示網(wǎng)站地址小隨筆后臺演示網(wǎng)站地址小隨筆后臺演示網(wǎng)站賬戶密碼資源有點大,可能要加載一段時間兼容方面目前還是主推薦用瀏覽器吧備注因為項目是一直在寫的,周期比較長,改了又改,代碼可能比較亂,大家能看則看,有意見的,直接提意見,發(fā)出來的目的,
Kite
This is a vue + react project
kite前臺演示網(wǎng)站地址: 小隨筆https://www.xiaosuibi.com/
后臺演示網(wǎng)站地址: 小隨筆https://www.xiaosuibi.com/_admin
后臺演示網(wǎng)站賬戶:kitetest 密碼:q123456 (資源有點大,可能要加載一段時間)
兼容方面目前還是主推薦用google瀏覽器吧
備注:因為項目是一直在寫的,周期比較長,改了又改,代碼可能比較亂,大家能看則看,有意見的,直接提意見,發(fā)出來的目的,就是希望大家多提建議,或者意見
然后我再來改,代碼方面我會一直優(yōu)化的?。。。。?!
關(guān)于項目的維護,會一直維護下去的
再次備注:代碼方面美觀,或者有問題的代碼,各位大佬直接指出即可,都是自己一個人在學(xué),所以代碼方面質(zhì)量方面肯定沒那么好
后續(xù)是先做小程序版本+app版本
然后邊維護和改bug
目前還需要對編輯器進行優(yōu)化
Build# npm install || cnpm install 安裝所有的包,可能有些多,前臺和后臺是在一起的 打包后臺界面 npm run admin-build 打包前臺界面 npm run client-buildStart
# 目前用的數(shù)據(jù)庫只有mysql 本地開發(fā)的話,下一個phpstudy即可 初始化:npm run init 然后打開瀏覽器收入 localhost:8086 按照步驟操作即可 然后可以選擇pro or dev 開始 pro 生產(chǎn)環(huán)境 pro1.1 在cmd 中輸入 npm run server 即可進入程序 pro1.2 (url或者ip)+ :8086端口即可看到客戶端主頁 pro1.3 (url或者ip)+ :8086/admin端口即可看到客戶端后臺頁面 dev 本地開發(fā)環(huán)境 dev1.1 在cmd 中輸入 npm run server-start 即可進開啟接口服務(wù) dev1.2 在cmd 中輸入 npm run admin-start 即可進入后臺開發(fā)預(yù)覽(地址為:localhost:8083) dev1.3 在cmd 中輸入 npm run client-start 即可進入前臺開發(fā)預(yù)覽(地址為:localhost:8081) dev1.4 開發(fā)環(huán)境下 一定要先運行dev1.1的情況下再運行 dev1.2 或者 dev1.3 目前cli部分代碼寫的比較亂,等后期有時間再繼續(xù)優(yōu)化,哈哈 項目斷斷續(xù)續(xù)的寫著,主體基本寫完,目前就是優(yōu)化和改bug,代碼的邏輯啥的,能看則看,不能看就略過吧,也是自己學(xué)習(xí)的一個過程, 放心這個代碼會一直優(yōu)化的,已經(jīng)堅持了很久了,可以看提交,哈哈目錄結(jié)構(gòu)
kite/ | ├──admin/ * 后臺頁面目錄react | ├──client/ * 前臺ssr文件目錄 │ ├──build * vur ssr build 配置文件 │ ├──config * 部分配置文件 │ ├──public * index模版文件 │ ├──request * 請求配置文件 │ ├──server * dev 模式下的開始文件 │ ├──src * src ssr 主文件目錄 │ └──static * 靜態(tài)資源目錄 │ │──config/ * 部分可配置文件 │ │──db/ * mysql and lowdb | ├──server/ * 服務(wù)層,所有前臺后臺接口 │ ├──static/ * 靜態(tài)資源目錄 | ├──views/ * cli 模版目錄 │ │──plugins/ * 第三方組件 + 自有js庫 + 其他插件性質(zhì)的腳本 │ │──static/ * 不經(jīng)編譯器處理的靜態(tài)資源 │ │──store/ * 全局數(shù)據(jù)狀態(tài)管理 │ │──package.json * 包信息 │ │──.eslintrc * Eslint配置 │ │──_nodemon.json * _nodemon配置 │ │──.gitignore * Git忽略文件配置 │ └──pm2.json * pm2配置初始化 前臺用戶界面 后臺管理界面 說明
使用的技術(shù)棧:
前臺方面:vue + vuex + vue-router + vue-server-renderer
后臺方面:react + redux + react-redux + react-router
server: koa + mysql
公共部分:webpack
其他詳細的直接看 package.json 就可以了
前臺界面目前是用的 vue 的 ssr,但是沒有采用 nuxt.js 代碼的閱讀應(yīng)該還是可以的,cli 比較亂,后臺界面采用的是 react
前臺目前比較簡單,就是一個多人文章發(fā)布系統(tǒng),用戶可以注冊賬號,發(fā)布文章,關(guān)注用戶,喜歡文章,評論等等
后臺管理文章的發(fā)布、審核,評論的審核,管理員權(quán)限管理,系統(tǒng)配置等等,前后臺用戶管理員獨立
初始化界面是對整個文章發(fā)布系統(tǒng)的一個初始化,包括初始管理員角色,mysql 等等
LICENSEMIT
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/105654.html
摘要:解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個應(yīng)用,然后通過構(gòu)建工具及配置,確定哪些組件需要再服務(wù)器端渲染,那些組件需要再客戶端渲染。服務(wù)器端渲染,由框架與構(gòu)建工具配合,并依據(jù)一定的項目結(jié)構(gòu)和編碼方式,共同運行。 分離 為什么需要 前后端分離、web服務(wù)器與static服務(wù)器分離: 前端與后端耦合 (需求) 自動化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件) 模塊化、組件化,項目共享代碼 (...
摘要:提供服務(wù)端渲染單頁面渲染實現(xiàn)骨架同時集成打包構(gòu)建文件名實現(xiàn)內(nèi)置等套件提供端渲染方案前后端分離單頁面方案前后端分離單頁面方案等三種常見方案項目地址歡迎項目需求基于和提供的強大的功能組合并根據(jù)已有項目實踐經(jīng)驗提供完整的集成方案幫助快速 Laravel-Vue-SSR-SPA 提供服務(wù)端渲染/單頁面渲染實現(xiàn)骨架, 同時集成webpack打包構(gòu)建 MD5文件名/gzip 實現(xiàn), 內(nèi)置 vue-...
摘要:提供服務(wù)端渲染單頁面渲染實現(xiàn)骨架同時集成打包構(gòu)建文件名實現(xiàn)內(nèi)置等套件提供端渲染方案前后端分離單頁面方案前后端分離單頁面方案等三種常見方案項目地址歡迎項目需求基于和提供的強大的功能組合并根據(jù)已有項目實踐經(jīng)驗提供完整的集成方案幫助快速 Laravel-Vue-SSR-SPA 提供服務(wù)端渲染/單頁面渲染實現(xiàn)骨架, 同時集成webpack打包構(gòu)建 MD5文件名/gzip 實現(xiàn), 內(nèi)置 vue-...
摘要:為了解決問題,推出了服務(wù)端預(yù)渲染,以便提高對優(yōu)化。應(yīng)用,到了,單頁面應(yīng)用優(yōu)秀的用戶體驗,逐漸成為了主流,頁面整體式渲染出來的,稱之為客戶端渲染??蛻舳私邮諗?shù)據(jù),然后完成最終渲染。通過對客戶端服務(wù)端基礎(chǔ)框架的抽象組織,主要關(guān)注的是應(yīng)用的渲染。 現(xiàn)在前端開發(fā)一般都是前后端分離,mvvm和mvc的開發(fā)框架,如Angular、React和Vue等,雖然寫框架能夠使我們快速的完成開發(fā),但是由于前...
閱讀 2579·2021-11-16 11:45
閱讀 2553·2021-10-11 10:59
閱讀 2357·2021-10-08 10:05
閱讀 4160·2021-09-23 11:30
閱讀 2458·2021-09-07 09:58
閱讀 986·2019-08-30 15:55
閱讀 849·2019-08-30 15:53
閱讀 1998·2019-08-29 17:00