寫在前面
這個項目大概是20天的課程，斷斷續續地跟着視頻敲，自己完善一些簡單的增刪改查等等，算是基本完成了。其實只是完成了主流程，即用戶搜索——放入購物車——注冊——登錄——下單——支付。也算是體會到了一個商城開發的不易了。這次學習全是前后端分離的，即后端只提供接口，前端調用接口。也是一種當下十分流行的結構了。在這個項目中使用了很多微服務框架(SpringCloud)，很多框架都是大概知道了怎么用，有什么用就上手了。如果日后再有這方面的需求或許會加深一些理解吧。
項目架構
首先來看架構圖:
Tips:大致解釋:前端主要使用了vue及其相關的框架來構建界面，通過nodejs來部署到服務器，請求的發送通過nginx進行轉發，全部請求都要經過網關進行處理，在網關處需要進行權限的鑒定和處理，確定有對應權限后才可以轉發訪問微服務集群。微服務集群有很多，不同權限的用戶可以訪問不同的微服務。所有的請求都是由網關進行轉發的，使用了相應的框架做了負載均衡，並有熔斷處理。微服務與微服務之間的通知調用使用了消息隊列框架來實現。最終使用了redis,mysql等來存儲不同類型的數據。使用了elasticsearch來當索引庫，作為搜索服務的數據庫。
使用的技術要點
前端技術：
- 基礎的HTML、CSS、JavaScript（基於ES6標准）
- Vue.js 2.0以及基於Vue的UI框架：Vuetify
- 前端構建工具：WebPack
- 前端安裝包工具：NPM
- Vue腳手架：Vue-cli
- Vue路由：vue-router
- ajax框架：axios
- 基於Vue的富文本框架：quill-editor
后端技術：
- 基礎的SpringMVC、Spring 5.0和MyBatis3
- Spring Boot 2.0.1版本
- Spring Cloud 最新版 Finchley.RC1
- Redis-4.0
- RabbitMQ-3.4
- Elasticsearch-5.6.8
- nginx-1.10.2
- FastDFS - 5.0.8
- Thymeleaf
- JWT
踩坑記錄
-
1.在使用PageHelper插件做分頁模糊查詢時，由於數據庫連接參數沒有正確設置導致中文參數無法被識別。
解決方案：
url: jdbc:mysql://localhost:3306/leyou?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai以后每次寫jdbc連接路徑時都要寫上后面的編碼格式設置參數和時區設置參數
-
2.在使用了最新版本的spring-cloud和springboot后,eureka會自動導入一個jackson的解析包，使得我們的返回值都變成了xml.只需要在發起請求的類注解寫上produces,里面寫上JSON前綴即可。
@RequestMapping(value = "brand",produces = MediaType.APPLICATION_JSON_VALUE) -
3.vue的相關命令:
npm init -y # 進行項目初始化 npm install vue --save # 安裝vue npm install # 安裝依賴 npm run dev # 啟動項目 -
4.2020.7.2號晚11點，出現了莫名其妙的BUG，最后莫名其妙的好了。仔細思考后應該是因為前端的變量名沒有寫好，導致后端接收不正確。這也提醒了我以后一定要先寫好后端代碼再去寫前端，，，同時也要把邏輯理清楚，不然會出現很多莫名其妙的錯誤。
前端的v-model和script里面的變量名稱一定要對應起來，不然會出現意想不到的錯誤，同時也必須和后台接口接收的變量名對應起來。處理的時候要理清前端和前端的關系，不要太着急，要仔細理清前后端的邏輯。
-
5.2020.7.3號晚11點 配置FastDFS配置了三個小時。從這次的配置里我學到了很多時候版本不同要配置的也不同，所以一定要跟着自己教程里的東西去配置，不要去下載最新版本什么的，因為網上的資料太層次不齊，搜到的不一定正確。還是要按照資料里給的配置去配置。同時一定要注意，配置linux的各種東西都十分繁瑣，一不小心會漏掉一步，因此一定要細心細心再細心。也算對linux的一些操作有了一些了解吧。或許會在以后自己的項目中用這個配置好的FastDFS。
-
6.關於vue里的watch執行周期:根據官方API文檔所說,如下回調:
// 該回調會在任何被偵聽的對象的 property 改變時被調用，不論其被嵌套多深 c: { handler: function (val, oldVal) { /* ... */ }, deep: true },這樣的回調會在改變時調用，而我遇到的問題是在改變時卻沒有被調用，因此可以使用以下的情況:
// 該回調將會在偵聽開始之后被立即調用 d: { handler: 'someMethod', immediate: true },會在偵聽開始后立即被調用，這樣的handler方法一定會被執行。再結合deep屬性即可做到立即獲取對象了。
注：我在自定義的層級選擇器中和修改的表單中都加了該選項,頁面就會顯示完全了。
-
7.修改品牌的業務邏輯:先把中間表的所有相關部分刪除，再插入新的即可(想不到我會想這么久這玩意，好菜啊我)
-
8.在使用axios傳遞數據到后台時,要使用$qs把Request Payload數據轉換成表單數據,不然后台無法接收
-
9.在vue中的方法里的賦值語句可以使用js的表達式來進行操作,如name : name == 0?null:1 這樣的表達式
-
10.非坑 在學習完該項目后去補習一下java的lamda表達式和一些其他的基礎。java基礎太差了.
-
11.在redis中配置了配置文件后,需要使用
```sh redis-server redis.conf ``` 來啟動已配置好的redis
總結
通過這次的大型項目，也算是了解到真正的項目是有多么的復雜。在這次的項目中，很多技術我都是第一次聽說。而且很多技術都只是粗略地了解的一下，權當日后入門了吧。在這次編碼過程中，發現自己的java基礎還是很薄弱，暑假會再學習一下java的基礎，對java的基礎特性加強訓練。
源碼分享
鏈接：https://pan.baidu.com/s/1UFjC1gNmJEXiD1mutvD02w
提取碼：clsy