1. 程式人生 > 程式設計 >Vue 電商後臺管理專案階段性總結(推薦)

Vue 電商後臺管理專案階段性總結(推薦)

一、階段總結

該專案偏向前端更多一點,後端 API 服務是已經搭建好了的,我們只需要用既可以,(但是作為一個 全棧開發人員,它的資料庫的表設計,Restful API 的設計是我們要著重學習的!!!)

這個vue 專案是從 2020 4月開始,一直開發直至 5月23日 部署上線,也算是我的第二個 vue 的實戰專案(其實是熟悉 elementUI 的使用),在開發過程中使用 Vue cil4 腳手架進行開發,使用碼雲作為 Git 管理倉庫,目前已經基本開發完畢,在伺服器上也能夠正常執行 (nginx 配置整整用了我兩天)

專案倉庫:vue_shop
專案地址:執行地址
測試賬號:test
測試密碼:123456

鑑於可能會出現一些危險的操作,這個測試賬號只提供了查詢的功能,修改,刪除操作就通過許可權管理禁用了。(小伺服器,沒啥值錢的東西,求大佬放過)

二、專案技術棧

2.1 前端

前端採用 vue cli4 腳手架搭建框架,大體使用 elementUI 美化專案結構,所以需要安裝 elementUI 外掛

在這裡插入圖片描述

其次是環境依賴 (有開發依賴,有執行依賴),有的功能是有現成的輪子的,直接那來用就好了,比如:

富文字編輯器

在這裡插入圖片描述

載入進度條

在這裡插入圖片描述

圖表展示功能

在這裡插入圖片描述

第三方 http 庫

在這裡插入圖片描述

2.2 後端

後端是已經寫好了的,採用 express 搭建的 API 服務,返回的資料是 JSON 格式的資料,所以用起來還是比較舒服的,我們只需要匯入資料庫,並配置一下資料庫資訊,就可以跑起來了。也有對應的 API 文件

後端 API 文件:傳送門

2.3 資料庫

資料庫採用 MySQL 5.7儲存,我們只需要將專案的 sql 檔案匯入即可,資料庫的表如下

在這裡插入圖片描述

三、專案概要

3.1 開發流程

開發流程以及記錄在另一部落格上了:傳送門 (感謝 My-Belief的分享)

因為使用版本控制工具 Git 來管理工程,所以每開發一個新模組,就會提交一個新分支:倉庫地址

在這裡插入圖片描述

3.2 專案預覽

登入介面

在這裡插入圖片描述

專案首頁

在這裡插入圖片描述

專案模組展示

在這裡插入圖片描述

框架真香

使用 node 的 pm2 管理專案

在這裡插入圖片描述

在這裡插入圖片描述

使用 node 快速關閉一個埠的服務

全域性安裝: npm install -g xl_close_port關閉某一個埠 ( 8081 )xl_close_port -p 8080

四、學習資源

嗶哩嗶哩上有這個資源:B站視訊

到此這篇關於Vue 電商後臺管理專案階段性總結的文章就介紹到這了,更多相關Vue 電商後臺管理專案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!