由於我是做后端的，一直沒有做過前端的頁面，以前在學校圖書館看的都是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上面，給后面的新人練練手也是很不錯的選擇。