毕业设计-智能自选综合商城设计(毕业设计源码+系统+文档+部署)
|做一個技術(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ù)據(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux系统pcb软件下载,开源PCB
- 下一篇: java 线程池 初始大小_为什么tom