由於我是做後端的，一直沒有做過前端的頁面，以前在學校圖書館看的都是jsp技術，幾乎是把java程式碼巢狀在前端介面。後面出來實習了才發現，jsp是真的落後了。現在的大學和實際工作所需偏差太大了，沒辦法。後面接觸到前端，是在實習的第二家公司。那時候除了寫後端介面，還得把PC端的管理介面寫出來。因為前端模板用到的是springboot的thymeleaf技術。開源框架是若依，程式碼一般都是能直接生成的。倒是也搗鼓過一些前端的東西。這幾天想要幫別人做一個商品展示頁面。功能相對比較簡單，也是沒有太多要求。
我們現在這家公司用的是angular,這個東西這麼說，還是比較龐大的，不太好搭建環境。最後就選擇了用uni-app開發，相關技術就是vue了。
首先是參考了uni-app的一個外掛：瀑布流商品展示 ，不得不說，這個頁面還挺好看，特別是開箱即用，對我這種特別友好。
由於上面那個作者沒有做重新整理，後面我就加了一個手動重新整理資料的下一頁功能，然後又給移動端新增了下拉重新整理的功能。參考： uni-app實現上拉載入，下拉重新整理（下拉帶動畫）
整體問題不是很多，但是要整合兩者，還是花了一點時間。先看最終效果圖
PC端(手動點下一頁)：
移動端(下拉重新整理)：
移動端(下拉重新整理，兩行適配)：
細心的人就能看出來，前往購買按鈕還沒對齊，不過要求沒那麼高，所以這個留著以後在解決。現在說一下專案的開發以及開發完了，怎麼部署到伺服器上。
後端：後端我是用idea開發，主要做的事情就是從資料庫查詢資料返回給前端，用mybatis-puls做分頁，這些資料從哪裡來呢？大家百度：淘寶聯盟 。就能找到相關介面了。我的做法是做個定時任務，每天凌晨三點，去拉取相關介面資料更新到資料表中。
核心介面：定時任務介面說明
清空表程式碼：
truncate table shoppinglist(表名)
注意事項：
RestTemplateConfig 使用http傳送請求，需要配置（這些配置，百度上都是一樣的）
MybatisPlusConfig 使用mybtis-plus分頁，要在裡面新增分頁外掛
@MapperScan("com/chonghuzhuang/designmode/dao/mapper") 掃描mapper檔案所在的資料夾
maven打包如果出現外掛報錯，要新增下面這個配置到pom.xml中
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.12.4</version>
<configuration>
<skipTests>true</skipTests>
</configuration>
</plugin>
如果執行報錯資訊為找不到XXXmapper.xml檔案，需要新增下面這個配置到pom.xml中
<resource>
<directory>src/main/resources</directory>
<filtering>true</filtering>
</resource>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
然後就是資料庫：其實應該用駝峰命名，但是時間太趕了，為了保持一致，我就偷懶了，然後在返回資料的時候，在做了轉換，轉換也不嚴謹，要是是為了配合上面的外掛，然後就沒對資料進行大改，後面再優化了
後端基本上就是這樣了，下面來看前端
前端使用uni-app開發，前端懂的不多，不太知道哪裡是重點
首先是傳送請求到後端，獲取資料，newsList是測試資料，真正用到的是list
然後拿到資料，就渲染到前端介面
前往購買的資料，在後端返回的本來就是一個連結，我們直接在新視窗開啟即可
前端拿到載入的資料，但是介面上卻沒有渲染出效果，此時我們要強制渲染一下
其他就沒什麼需要注意的了。開發完成，除錯沒有問題，就部署到伺服器上。
uni-app打包教程網上有很多，我就不細說了
打包完成，我們得到一個static和html檔案
我們只需要把這個放到伺服器上就可以了。注意，網上很多說放到伺服器根目錄下，這個容易誤導別人。我伺服器上部署的是tomcat，因此這個根目錄指的就是webapp下。後端用maven打包成jar包，放到指定目錄，然後在cmd中執行java -jar xxx.jar (百度springboot打jar包，就有很詳細的教學了)。
這裡需要注意的是，我們後端單獨打包成一個服務，需要一個介面，比如我後端用的介面是9015，我就要去阿里雲的後臺，把9015埠開啟（百度阿里雲伺服器開放指定埠）。
為什麼很多步驟我都叫你們百度呢，因為我現在把詳細步驟放出來，軟體更新了，那些步驟的位置也很可能會傳送變化，所以還是去百度看最新的操作步驟。
最後附上沒優化之前的專案，各種bug，各種醜哭
頁面沒有做適配
<a>標籤紅配藍，真心覺得不好看，所以後面才換成按鈕點選世界開啟新視窗
這個是快完工的了
哈哈，水平有限，其他翻車現場，就不放出來了。經過這次，也對前後端分離有了更深一步的實踐，不得不說，vue真是方便了很多事情。uni-app對我來說也是一個福音。作為一個後端開發人員，特別喜歡這些能快速上手的技術，這樣自己寫好介面，也能搗鼓一下前端的頁面來對接介面了。最後感謝那些開箱即用的大佬，給我們創造了一個很好用的輪子。這個專案，後面如果有時間優化，我就放到我的gitee上面，給後面的新人練練手也是很不錯的選擇。