XanaduCompany下載XanaduCompany源代碼下載

XanaduCompany

其他類別

1.0.0

下載

一、採用技術方案

該系統採用的主要技術如下：

Vue3

Vue.js
Element Plus
axios
node.js
Sequelize
Koa
MySQL數據庫

2022.11.19 更新
Vue3 新分支,已經是默認分支；由zerotower69開發

更新為Vue3 + TS + Element Plus

2023.03.15 更新

vue3為主分支，vue2版本請參考vue2分支,本分支當前的坑比較多，部分不完善的地方請參考vue2版本的效果。

二、開發環境

操作系統：Windows10
數據庫：MySQL（v5.7.7）
Web服務器：Nginx
開發工具：Webstorm
系統基礎環境：Node.js
瀏覽器：谷歌瀏覽器

三、目錄說明

admin---後台管理

web---前台門戶展示

server---後端服務

四、進入項目

系統已上線進行展示

企業門戶展示（https://xanadu.aerowang.cn/）
系統後台管理（https://xanadu.aerowang.cn/admin）
- 賬戶：youke，密碼：a123456
- 管理員：admin 密碼：654321
  也可以在進行註冊

五、如何本地運行

有問題看一眼package.json中的scripts，別無中生有dev,running 啥命令，命令執行不了肯定沒有定義!

npm install

npm run start(本地启动)

或者 npm run dev(实时监听改动重启，边改边跑) 需要全局安装 nodemon（任何说不是xxx命令的错误都是没有全局安装，请先安装后再运行）

 # 1.安装
npm install
   #又或者
pnpm install
# 2.启动
npm run serve 
   #又或者
pnpm serve
# 3.打包
npm run build 
 #又或者
pnpm build
# 4.清除 node_modules
npm run clear 
  # 又或者
pnpm clear #由于rmdir 安装在这里，它也会清掉，就是自己干了自己
#会有一条报错出现，请无视它

pnpm 命令請提前全局安裝

npm i pnpm -g

六、docker

docker 一鍵自動部署

命令

 # 主目录下
docker compose up -d

# 即可访问

需要更改以下文件:

./admin/.env.production
VUE_APP_BASE_API = '你自己的域名:3000/api/v1'
./admin/vue.config.js
line.27 publicPath: '/', => publicPath: '/admin/',
./server/config/dbinfo.js
host: "localhost", => host: "xanadu-db",
./web/.env.production
VUE_APP_PRODURL = "你自己的域名/admin/#/login"
./web/src/utils/request.ts
baseURL: '/api' =>你自己的域名:3000/api

docker並未使用go版本

七、補充說明

由於本系統進行了CDN加載資源優化，所以運行本系統務必連接一個比較快速穩定的網絡，否則係統頁面將會出現一些錯誤！

2022.11.19 更新

部分資源引用來源於cdn.jsdelivr.net，目前（2022.11.19）訪問可能有些慢，有興趣的可以自己修改引用鏈接

2023.03.15 更新

1.一定要cd到各自的目錄下跑，準確來說，本系統分為前端、後端，前端管理端三個項目,此根目錄無法直接運行。

2.請嚴格檢查自己的node版本。鑑於已經發現的問題，在windows環境下，建議使用node 14的大版本；另外，QQ群的群文件提供了依賴包的壓縮包，也可以作為嘗試；mac系統14和16都OK(運行在APPLE M1之上)。

3.如果數據庫連接報錯，請首先檢查server(後端node)下config目錄中的dbinfo.js的配置與你自己的數據庫配置是否正確。

4.項目運行前，請一定要npm install安裝相關的依賴，並進入到pcweb端、管理端、後端看看各自的package.json文件看看scripts部分，確認你要運行的命令是已經定義了的。都沒有定義dev命令，你偏偏要執行npm run dev ，肯定是要報錯的，而且第一句報錯信息的意思就會是dev不在scripts中，反正你看到package.json和scripts兩個關鍵字出現在你報錯的第一行肯定就是執行了未定義的命令

5.數據庫腳本（initial_data.sql）請參考QQ群：434063310（這個群主並非原作者，而是自願來維護的）。

6.node推薦使用nvm版本管理工具，windows用戶直接使用.exe無煩惱安裝, mac用戶可以使用brew安裝

brew install nvm

安裝了nvm你就可以使用其切換node的版本了，nvm install xxx是安裝命令，每次切換記得使用nvm use xxx切換到你想使用的版本。

7.web項目使用了CDN,你如果不想使用，請註釋掉配置中external中的邏輯；如果使用，請檢查相關的CDN鏈接是否能正常訪問，直接粘貼到瀏覽器你就可以檢查了，並正確配置你的external。

8.關於使用proxy，請一定要在生產環境nginx中配置反向代理。

9.後端node當下確實沒有合適的打包方案，一般直接服務器使用pm2啟動node服務，請在服務端安裝pm2使用:

npm i pm2 -g

如果確實需要打包，請知乎查閱文章，百度的質量不太行。但這裡的打包和java等的概念不一樣的，即使用webpack打包，你的代碼還是js而不是像java那樣經過編譯器轉為字節碼，node的本質是c++(因為node嚴謹來說是一個javascript運行時而不是一門新的語言，只是c++編寫的V8內核提供了node的這些API，真正負責和系統交互語言是c++)，你使用的語言仍然是javascript。

10.新手請注意辨明前端打包的目的，當前我們寫的代碼是瀏覽器不能直接運行的，我們需要將我們的代碼轉為瀏覽器可識別並執行的格式，本質上是js到另一種js規範的過程，和後端意義的打包完全不同。

11.圖片路徑問題請盡量使用自己的cdn服務或者把資源放在自己的服務器上，替換數據庫已經存在的圖片路徑，你可以使用如下的sql語句：

 UPDATE [tablename] SET [fieldname] = REPLACE([fieldname], ' locolhost:3000 ' , ' [yourHOST] ' )

圖片資源不太需要nginx反向代理，你可以參考如下的配置:

 location ~ .*.(gif|jpg|jpeg|png|bmp|swf|webp|jfif)$
    {
        #图片在server/static里，改写root路径就可以了！
        root /www/wwwroot/zero/company/server/static;
        expires      30d ;
        error_log /dev/null;
        access_log /dev/null;
    }

12.遇到報錯看到英文不要煩，看看第一句最後一句。比如後端報錯有“foreign key”, 肯定是外鍵有問題，請檢查模型定義或者數據庫的定義或者數據好吧。前端Vue undefined,這個問題多半和不正確使用cdn有關，vue.config.js(vue3)註釋自己看好吧，已經有了說明。英文報錯不要多就不看，打開有道（更推薦google）翻譯翻一翻也不是多難的事。

群內提問建議提問具體的問題，如果你要問nginx如何安裝，建議先google或者bing.com(如果你太煩nginx不想折騰也可以使用寶塔傻瓜式部署，但仍然建議你部署後看一眼其nginx的配置，學習學習)。百度不推薦的原因是檢索的內容多半是CSDN，其內容質量參差不齊，對初學者是不利的。博客貼的東西不一定全對，你如果是小白最好還是耐心看看文檔，如果看不下去B站也是學習的好地方。本項目涉及的東西還很簡單，文檔和B站其實已經能解答你的大多數問題了。可能說到這，看到這有人就覺得我們不想讓人提問。但你的問題如果太大，連個安裝入門都沒過，你要提問大多數人不是不想回答，而是實在不知道從哪個角度回答你，要解釋的東西太多了不如直接無視。

14.需要加入新的功能建議先讀懂代碼，代碼其實不難，你無非是不熟悉新的語言剛開始陣痛而已。功能上的設計沒啥特色，想這部分代碼都嫖是不可能的，只能是你自己幸苦原創了。看不懂的代碼部分可以貼圖提問（一定要貼圖）,代碼一段時間不看就會忘掉一些，貼圖提問可保證你的困惑能及時被回答。

期望大家能從文檔不僅知道使用好本項目，更收穫相關的技能，以使自己在前端上有所進步。看到這，還不點個star?留下你的star再嫖好吧（dog.）