BAI_SHOP

BAI_SHOP 項目

一、專案簡介

專案簡介：本專案採用前後端分離開發模式,vue_api_server 是後端程式碼文件，vue_shop 是前端開發程式碼文件，vue_shop_server 是前端生產程式碼文件，相比起來直接運行vue_shop_server 會比vue_shop 輕鬆很多

前端專案技術堆疊	說明
Vue	一套建構使用者介面的漸進式框架
Vue-router	vue-router 是vue.js 官方路由管理器
Element-UI	ElementUI Element ,一套為開發者、設計師和產品經理準備的基於Vue 2.0 的組件庫,提供了配套設計資源,幫助你的網站快速成型
Axios	axios 是一個基於Promise 的Http 函式庫，可以用在node.js 環境和瀏覽器中
Echarts	ECharts簡單來說是互聯網開發程式過程中,後台資料庫用以實現資料到圖形的映射的一個插件

後端專案技術棧	說明
Node.js	nodejs 他是用C++開發的一種運行於伺服器端的語言,可以寫網站後台程式,可以做服務端應用開發
Express	Express 是一個基於Node.js 平台的極簡、靈活的web 應用開發框架,它提供一系列強大的特性,幫助你創建各種Web 和移動設備應用
Jwt	json web token 是為了在網路應用環境中傳遞聲明而執行的一種基於json 的開放標準
Mysql	資料庫
Sequelize	Sequelize.js 提供對MySQL，MariaDB，SQLite 和PostgreSQL 資料庫的簡單訪問，透過映射資料庫條目到對象，或物件到資料庫條目。簡而言之，就是ORM（Object-Relational-Mapper）。 Sequelize.js 完全是使用JavaScript 編寫，適用於Node.js 的環境。

二、文件說明

1.vue_api_server 檔案說明

• config設定檔目錄
  • default.json預設設定檔（其中包含資料庫配置，jwt 配置）
• dao資料存取層，存放資料庫的增刪改查操作
  • DAO.js提供的公共存取資料庫的方法
• models存放具體資料庫ORM 模型文件
• modules當前專案模組
  • authorization.js API 權限驗證模組
  • database.js資料庫模組（資料庫載入基於nodejs-orm2 函式庫載入）
  • passport.js基於passport 模組的登入搭建
  • resextra.js API 統一回傳結果介面
• node_modules專案依賴的第三方模組
• routes統一路由
  • api提供api 介面
  • mapp提供行動APP 介面
  • mweb提供行動web 站點
• services服務層，業務邏輯程式碼在這一層編寫，透過不同的介面所取得的資料轉換成統一的前端所需的數據
• app.js主專案入口文件
• package.json專案設定檔

2.vue_shop 文件說明

• dist資料夾專案打包後產生的資料夾（用於生產環境）

  • 包含css 、 fonts 、 img 、 js 、 favicon.ico和index.html
  • 只需啟動一個簡單的伺服器將項目掛載上去,運行伺服器,訪問預設端口
  • 如何運行打包好的vue 專案:https://www.cnblogs.com/zhujiabin/p/10557982.html

• public資料夾存放靜態資源的資料夾

  • 包含favicon.ico和index.html文件

• src資料夾存放原始程式的資料夾

  • assets ：存放項目一些較大的資源文件，例如：圖片、字體等。

  • components ：存放項目vue 子元件

  • plugins ：項目引入的element-ui組件

  • router ：專案路由index.js

  • tools ：專案工具類

  • App.vue ：vue 根元件

  • main.js ：網頁入口

• 其他設定檔

  • .browserslistrc ：這個配置能夠分享目標瀏覽器和nodejs 版本在不同的前端工具,這些工具能根據目標瀏覽器自動來進行配置
  • .editorconfig ：幫助開發人員在不同的編輯器和IDE 之間定義和維護一致的編碼樣式
  • .eslintignore ：設定不被eslint 校驗的檔案（ ESLint是一個插件化且可設定的JavaScript 語法規則和程式碼風格的檢查工具）
  • .eslintrc.js ：eslint 的設定文件
  • .gitignore ：設定git 忽略的文件
  • .prettierrc ：當我們使用右鍵格式化的時候,就會自動幫我們補全符號,但是,有些符號在eslint 中就會報語法錯誤,那我們需要怎麼辦呢?可以透過.prettierrc 來進行文件配置
  • babel.config.js ：babel 設定檔（ Babel 是一個工具鏈,主要用於將ECMAScript 2015+ 版本的程式碼轉換為向後相容的JavaScript 語法,以便能夠運行在目前和舊版的瀏覽器或其他環境中）

3.vue_shop_server 檔案說明

• dist資料夾vue_shop打包的生產環境專案文件
• 包含css 、 fonts 、 img 、 js 、 favicon.ico和index.html
  • 執行專案時先刪除node_modules依賴套件，然後在進入vue_shop_server目錄，執行npm install重新下載新的依賴套件
  • 依賴套件下載完成之後，在doc 視窗執行指令nodemon app.js並造訪http://localhost:3000就能看到專案的前端頁了
• app.js檔案伺服器運行入口文件，裡麵包含一些伺服器的基本配置

三、專案運作注意事項

1.下載並解壓縮BAI_SHOP.zip

2.進入vue_api_server/db資料夾,將db 資料夾下的mydb.sql資料庫檔案匯入到mysql 資料庫中

3.資料導入成功後,開啟config資料夾中的default.json檔案配置其中的db_config

4.開啟doc 指令視窗,進入vue_api_server目錄,執行npm install指令載入項目所需的依賴

5.依賴載入完畢之後執行nodemon app.js運行

6.開啟一個新的doc 指令視窗,進入vue_shop 目錄,執行npm install指令載入專案所需的依賴

7.依賴載入完畢之後, 在目前視窗執行npm run serve指令執行專案,當提示Compiled successfully in xxxxms ,開啟瀏覽器存取localhost:8080

8.後記：一般來說開發模式的專案就運作成功啦！注意：先要有nodejs 環境哦！而且要全域安裝nodemon 依賴程式碼： npm install nodemon -g

如果想要掛載生產模式的項目，請看上面的vue_shop 檔案說明和vue_shop_server 檔案說明， dist 資料夾就是vue 項目打包之後的文件，只需將它掛載到伺服器上即可。