|做一個技術(shù)前沿的開發(fā)者，我們都知道Vue與NodeJs是現(xiàn)在很流行的前端框架及后端語言。在前端群發(fā)現(xiàn)很多小伙伴都在學(xué)Vue。也是自己抽寫了個小項目，從數(shù)據(jù)庫設(shè)計到后端接口的編寫最后到前端的實現(xiàn)整個過程，希望對小伙伴們能有很大的幫助。

前言

本人前端愛好者?，因為項目需要用到前端的技術(shù)(主要是vue)，自己自學(xué)了一段時間，在空閑之余的時間終于自己完完整整寫下來一整個前后端商城項目
項目采用的技術(shù)棧是基于：vue + node + mySQL，用vue-cli寫的前端，用node-express搭建的后端應(yīng)用服務(wù)器，數(shù)據(jù)庫用的是MySQL。

一、項目整體效果預(yù)覽

1. web端-項目部分效果演示

商城前臺部分

（1）首頁

（2）商品倒計時模塊

（3）右側(cè)隱藏小購物車(未登錄時的情況）（4）登錄注冊模塊? （支持驗證碼登錄）

? ??

?（5）商品詳情頁

這里做了放大鏡效果

---

?（6）商品分類

（7）客服系統(tǒng)前后臺界面

? ? ? ?

---

?初次之外對商城背景音樂,搜索，優(yōu)惠卷等功能進行二次改進添加

?

其他前臺功能尚未展示完全（包括商品評論，購物車，訂單模塊等等）（具體見項目源碼）

---

商城后臺部分（完整版）

訂單數(shù)據(jù)展示

---

---

本商城項目中加入了站內(nèi)搜索功能（閑著無聊）

2. 服務(wù)器端

服務(wù)器端我主要用的是Node的express框架搭建的應(yīng)用服務(wù)器, 自己定義了項目中需要的接口, 主要基于post/get。服務(wù)器端沒有進行深度的開發(fā)，主要實現(xiàn)了對數(shù)據(jù)流的增刪改查，為客戶端進行動態(tài)數(shù)據(jù)支撐。

---

二、功能

普通用戶

注冊、登錄（圖形驗證碼）

定位 （騰訊地圖定位功能）、自主選擇所在城市

在線搜索引擎

客服聊天

商品分類

簡單展示商品

查看商品詳情

商品評論

分頁功能

購物車功能

加入購物車

購物車商品數(shù)量增減

清空購物車

商品結(jié)算

多關(guān)鍵詞模糊搜索商品 （關(guān)鍵詞需為商品名稱）

用戶個人中心

修改用戶信息 （頭像、昵稱、簡介…）

修改手機號

修改密碼

管理員

• 登錄（固定賬號密碼）
• 查看數(shù)據(jù)庫商品信息
• 商品上架（添加商品）
• 刪除/修改商品
• 分頁功能

?

三、項目開發(fā)中坑點記錄

雖然是跟著視頻一步步學(xué)習(xí)的，但是自己在動手做的時候還是遇到了各種奇葩問題，在寫完項目后總結(jié)記錄下，一方面方便自己回顧，另一方面其他朋友遇到類似的問題可以參考借鑒。

1.1 二級路由界面底部Tabbar隱藏

通過vue-router配置完全局路由后, 在項目中一級路由界面是需要有底部tabbar的, 但是由一級界面過渡到二級界面是不需要的

解決方案: 在路由選中有個meta屬性, 可以在該屬性中傳一個字面量對象記錄是否顯示底部的tabbar, 然后在頁面中做判斷即可!

1.2?坑坑坑的跨域

問題描述: 主要是前端請求圖形驗證碼引發(fā)的血案，因為我服務(wù)器的地址是localhost:3000,

但是問題在于：我在服務(wù)器端是用session保存了該驗證碼，用于前端請求時來做前后端比對的，但是每次請求都不能從session中獲取，始終的undefined。此刻，我第一反應(yīng)是跨域，檢查前端頁面沒有問題，于是檢查后端的跨域配置：

也沒有問題，百思不得其解后只能灰溜溜的去問老師，最終的問題在于：我客戶端的其他請求都是統(tǒng)一配置好的路徑：http://localhost:3000, 但在請求圖形驗證碼出使用了：http://127.0.0.1:3000/api/captcha?，在后端驗證是localhost:3000和127.0.0.1:3000代表的不是同一個客戶端，所以始終拿不到值，改了之后瞬間好了。非常小的一個細節(jié)，粗心、粗心！

1.3 配置vuex中的細節(jié)點分析

一開始不是很理解為什么要繞這一圈來使用vuex進行狀態(tài)和數(shù)據(jù)的管理，當使用了之后才發(fā)現(xiàn)中大型項目中使用vuex進行數(shù)據(jù)管理是十分有必要的，當你理解了它的運作機制，流程就顯得異常簡單了

使用vuex進行狀態(tài)管理要注意的一些細節(jié)點：

• 如果項目比較大，一定要把state，action，mutation劃分成獨立的文件夾，這樣以后在進行狀

• action向mutation直接commit數(shù)據(jù)的時候，要注意參數(shù)保持一致，否則會出錯，如下圖所示：
• 在請求網(wǎng)絡(luò)數(shù)據(jù)時，一定要在action中處理，主要是通過async和await進行異步和同步，mutation中因為是唯一修改state的地方，所以始終得是同步的

vuex中大致要注意的細節(jié)差不多就這些，其它的都是按照固定流程處理即可。

1.4 node連接MySQL數(shù)據(jù)丟失

問題描述：第一次發(fā)起請求的時候，連接數(shù)據(jù)庫都是正常的；但是第二個接口發(fā)起請求時，數(shù)據(jù)庫就連接不上了，會報錯說連接丟失。

原因分析：因為每操作完一次數(shù)據(jù)庫就關(guān)閉了數(shù)據(jù)庫連接，再次訪問的時候就找不到連接了，但是連接又不能不關(guān)閉，問題在于我把連接數(shù)據(jù)庫的代碼沒有放到db.query的函數(shù)中，而是放在外面，這樣就導(dǎo)致連接只生成一次，關(guān)閉了以后，第二請求時得不到連接。

解決方案：直接寫好一個數(shù)據(jù)庫連接文件，用 module.exports = conn;輸出，這樣每次訪問都是一個新的請求。

1.5 node連接mysql數(shù)據(jù)池一定要釋放

使用node連接mysql進行數(shù)據(jù)交互一定要釋放數(shù)據(jù)池，不然請求幾次之后會出現(xiàn)“一直請求中”的狀態(tài)導(dǎo)致無法完成交互

1.6 頁面刷新后vuex中狀態(tài)被清空

• 解決方案1：localStorage
  使用localStorage進行數(shù)據(jù)本地化，但電商類型的項目我感覺并不是太適合，因為localStorage是長時間緩存，有可能導(dǎo)致數(shù)據(jù)不同步。

• 解決方案二：判斷數(shù)據(jù)是否存在，不存在重新從服務(wù)器端獲取，或者可以進行路由懶加載保持數(shù)據(jù)在內(nèi)存中也是可以的。

1.8 nextTick的使用

問題描述：在使用自定義組件的時候，或者使用第三方的組件（輪播圖等），因為數(shù)據(jù)是異步獲取的，所以組件初始化會在數(shù)據(jù)獲取之前完成，此時可能導(dǎo)致組件無法正常工作，就拿輪播圖舉例子，正確的寫法是在watch中進行深度監(jiān)視，當數(shù)據(jù)請求完成后進行組件的初始化：

當然也可以通過回調(diào)來處理，主要目的是延遲初始化，這樣組件就能正常運轉(zhuǎn)了。

nextTick主要作用在于將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行;
在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新;
它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動綁定到調(diào)用它的實例上。

運行
項目后端服務(wù)器是基于node、MySQL開發(fā)，運行前請確認系統(tǒng)已安裝相關(guān)應(yīng)用

服務(wù)器端
cd web-server
將web-server文件夾下的shop.sql導(dǎo)入MySQL數(shù)據(jù)庫中
npm install 安裝依賴
修改web-server/src/config.js文件，此文件記錄項目的全局變量，在文件中找到password、database、user屬性，根據(jù)你的數(shù)據(jù)庫信息修改它們的值
npm run dev 在本地運行，啟動服務(wù)器
客戶端
cd web-client
npm install 安裝依賴
npm run dev 在本地運行
接著就可以在http://localhost:8080下訪問到該項目
三、目錄結(jié)構(gòu)
web-client 前端部分：
├── build ? ? ? ? ? ? ? ? ? ? ?// 構(gòu)建相關(guān) ?
├── config ? ? ? ? ? ? ? ? ? ? // 配置相關(guān)
├── src ? ? ? ? ? ? ? ? ? ? ? ?// 源代碼
│ ? ├── api ? ? ? ? ? ? ? ? ? ?
│ ? | ? ├── ajax.js ? ? ? ? ? ?// 使用axios，封裝ajax
│ ? | ? ├── index.js ? ? ? ? ? // 后端接口，封裝請求接口
│ ? ├── common ? ? ? ? ? ? ? ? // 字體、圖片等靜態(tài)資源
│ ? ├── components ? ? ? ? ? ? // 全局公用組件
│ ? ├── config ? ? ? ? ? ? ? ? // 全局配置
│ ? | ? ├── filters.js ? ? ? ? // 全局過濾器
│ ? | ? ├── utils.js ? ? ? ? ? // 全局方法
│ ? | ? ├── area.js ? ? ? ? ? ?// 全國城市區(qū)域，配合element-ui級聯(lián)選擇器
│ ? ├── pages ? ? ? ? ? ? ? ? ?// 項目視圖頁面
│ ? ├── router ? ? ? ? ? ? ? ? // 路由配置
│ ? ├── store ? ? ? ? ? ? ? ? ?// Vuex數(shù)據(jù)存儲器
│ ? ├── App.vue ? ? ? ? ? ? ? ?// 入口頁面
│ ? ├── main.js ? ? ? ? ? ? ? ?// 入口文件
├── static ? ? ? ? ? ? ? ? ? ? // 靜態(tài)資源
├── .babelrc ? ? ? ? ? ? ? ? ? // babel-loader 配置
├── .gitignore ? ? ? ? ? ? ? ? // git 忽略
├── index.html ? ? ? ? ? ? ? ? // 項目html
└── package.json ? ? ? ? ? ? ? // 包依賴配置

web-server 后端部分：
├── db ? ? ? ? ? ? ? ? ? ? ? ? // MySQL數(shù)據(jù)連接 ?
├── public ? ? ? ? ? ? ? ? ? ? // 靜態(tài)資源
├── routes ? ? ? ? ? ? ? ? ? ? // 后端路由,項目接口
├── static ? ? ? ? ? ? ? ? ? ? // 靜態(tài)資源
├── src ? ? ? ? ? ? ? ? ? ? ? ?// 源代碼
│ ? ├── app.js ? ? ? ? ? ? ? ? // 項目入口文件，配置，初始化
│ ? ├── config.js ? ? ? ? ? ? ?// 全局公用參數(shù)記錄
├── utils ? ? ? ? ? ? ? ? ? ? ?// 全局公用方法
├── views ? ? ? ? ? ? ? ? ? ? ?// 視圖頁面
├── .babelrc ? ? ? ? ? ? ? ? ? // babel-loader 配置
├── main.js ? ? ? ? ? ? ? ? ? ?// 入口文件
├── package.json ? ? ? ? ? ? ? // 包依賴配置
├── README.md ? ? ? ? ? ? ? ? ?// 項目說明文件
└── shop.sql ? ? ? ? ? ? ? ? ? // 注入MySQL的sql語句

四、開發(fā)中的一些細節(jié)
跨域問題
后端部分使用cors來解決跨域

cd web-server
npm i -S cors
? ? // 在 web-server/src/app.js 中引入
? ? import cors from 'cors'
? ? app.use(cors());

前端部分進行跨域配置

? ?// 在 web-client/config/index.js 中進行配置
? ?proxyTable: {
? ? ? ?'/api': { ?//使'api'代替服務(wù)器地址
? ? ? ? ? target: 'http://127.0.0.1:3000/', //源地址
? ? ? ? ? changeOrigin: true, //改變源
? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ?'^/api': '' //路徑重寫
? ? ? ? ? ?}
? ? ? ?},
? ?},

按需加載組件（優(yōu)化首屏加載速度）
路由懶加載
? // web-client/src/router/index.js 示例
? const Home = ()=> import('./../pages/Home/Home');
??
? routes: [
? ?? ?{
? ?? ? ?path: '/home',
? ?? ? ?component: Home
? ?? ?},
? ]

前臺頁面頂部搜索區(qū)的顯示和隱藏
通常在購物商城中，會發(fā)現(xiàn)頁面頂部會實現(xiàn)搜索框，考慮到它在多個頁面都會出現(xiàn)，于是封裝成全局組件，即 src\components\HeaderSearch\HeaderSearch.vue 并在App.vue中引入

然后問題出現(xiàn)了，有些頁面其實并不需要出現(xiàn)搜索框，比如商品詳情頁、登錄/注冊…于是決定在router內(nèi)動態(tài)設(shè)置meta，來控制全局組件的顯示和隱藏

? ? // 在 router\index.js 中設(shè)置mate ?示例
? ? routes: [
? ? ?? ?{
? ? ?? ? ?path: '/home',
? ? ?? ? ?component: Home,
? ? ?? ? ?// true 代表該路由頁面顯示相關(guān)的全局組件
? ? ?? ? ?meta: {showHeaderTop: true, showHeaderSearch: true}
? ? ?? ?},
? ? ]

? // 在 App.vue 中根據(jù) mate 控制組件顯示與隱藏
? <template>
? ? <div id="app">
? ?? ?<HeaderTop v-show="$route.meta.showHeaderTop"/> ?
? ? ? ? ? <HeaderSearch v-show="$route.meta.showHeaderSearch"/>
? ? ? ?? ?<keep-alive>
? ? ? ? ? ? <router-view></router-view>
? ? ? ? ? </keep-alive>
? ? </div>
? </template>

插值表達式
在Vue中，我們通常使用{undefined{data}}插值表達式來頁面取值，但是遇到需要異步請求獲取數(shù)據(jù)后，再渲染到頁面上時，實際上，頁面渲染時會先顯示數(shù)據(jù)的初始值，請求得到數(shù)據(jù)后，才會正常顯示。所以有些三級表達式剛開始加載，得不到數(shù)據(jù)會報錯。此時，可以結(jié)合v-if解決，在明確得到數(shù)據(jù)后，再渲染元素

封裝Node與MySQL連接
可以新建一個db\db.js文件,里面放數(shù)據(jù)庫連接的代碼，最后用export default conn;輸出conn，這樣在項目中操作數(shù)據(jù)庫時，只需要連接一次即可，提升效率

? ? import mysql from 'mysql'
? ? import config from '../src/config'
? ??
? ? const ?conn = mysql.createConnection({
? ? ? ? host: config.host, // 數(shù)據(jù)庫的地址
? ? ? ? user: config.user, // 賬號
? ? ? ? password: config.password, // 密碼
? ? ? ? database: config.database, // 數(shù)據(jù)庫名稱
? ? ? ? multipleStatements: true, ?// 允許多條sql同時查詢
? ? });
? ??
? ? conn.connect();
? ??
? ? export default conn;
?

---

四、結(jié)束語

• 還有很多后端服務(wù)器開發(fā)的坑，項目的深層次優(yōu)化，放到下篇來寫。
• 較少寫技術(shù)文章，不足之處請多多指教！

  ---

  對本文章及項目完整項目源碼感興趣的小伙伴可以點贊+收藏，留下你們的鼓勵支持！后續(xù)我也會把項目上線到github.

• 需要項目的可以私聊博主，謝謝支持

總結(jié)

以上是生活随笔為你收集整理的毕业设计-智能自选综合商城设计（毕业设计源码+系统+文档+部署）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。