記錄第一次完整的uni-app開發經驗

天下沒有收費的bug 發表於 2021-06-10

由於我是做後端的,一直沒有做過前端的頁面,以前在學校圖書館看的都是jsp技術,幾乎是把java程式碼巢狀在前端介面。後面出來實習了才發現,jsp是真的落後了。現在的大學和實際工作所需偏差太大了,沒辦法。後面接觸到前端,是在實習的第二家公司。那時候除了寫後端介面,還得把PC端的管理介面寫出來。因為前端模板用到的是springboot的thymeleaf技術。開源框架是若依,程式碼一般都是能直接生成的。倒是也搗鼓過一些前端的東西。這幾天想要幫別人做一個商品展示頁面。功能相對比較簡單,也是沒有太多要求。

我們現在這家公司用的是angular,這個東西這麼說,還是比較龐大的,不太好搭建環境。最後就選擇了用uni-app開發,相關技術就是vue了。

首先是參考了uni-app的一個外掛:瀑布流商品展示 ,不得不說,這個頁面還挺好看,特別是開箱即用,對我這種特別友好。

由於上面那個作者沒有做重新整理,後面我就加了一個手動重新整理資料的下一頁功能,然後又給移動端新增了下拉重新整理的功能。參考: uni-app實現上拉載入,下拉重新整理(下拉帶動畫) 

整體問題不是很多,但是要整合兩者,還是花了一點時間。先看最終效果圖

PC端(手動點下一頁):

記錄第一次完整的uni-app開發經驗

 

 

移動端(下拉重新整理):

記錄第一次完整的uni-app開發經驗

 

 

移動端(下拉重新整理,兩行適配):

記錄第一次完整的uni-app開發經驗

 

 

細心的人就能看出來,前往購買按鈕還沒對齊,不過要求沒那麼高,所以這個留著以後在解決。現在說一下專案的開發以及開發完了,怎麼部署到伺服器上。

 

後端:後端我是用idea開發,主要做的事情就是從資料庫查詢資料返回給前端,用mybatis-puls做分頁,這些資料從哪裡來呢?大家百度:淘寶聯盟 。就能找到相關介面了。我的做法是做個定時任務,每天凌晨三點,去拉取相關介面資料更新到資料表中。

核心介面:定時任務介面說明

記錄第一次完整的uni-app開發經驗

 

 

清空表程式碼:

truncate table shoppinglist(表名)

 

注意事項:

RestTemplateConfig 使用http傳送請求,需要配置(這些配置,百度上都是一樣的)

記錄第一次完整的uni-app開發經驗

 

 

MybatisPlusConfig    使用mybtis-plus分頁,要在裡面新增分頁外掛

@MapperScan("com/chonghuzhuang/designmode/dao/mapper")  掃描mapper檔案所在的資料夾

 

記錄第一次完整的uni-app開發經驗

 

 

maven打包如果出現外掛報錯,要新增下面這個配置到pom.xml中

記錄第一次完整的uni-app開發經驗
<plugin>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.12.4</version>
                <configuration>
                    <skipTests>true</skipTests>
                </configuration>
 </plugin>
View Code

如果執行報錯資訊為找不到XXXmapper.xml檔案,需要新增下面這個配置到pom.xml中

記錄第一次完整的uni-app開發經驗
<resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
            </resource>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
</resource>
View Code

 

記錄第一次完整的uni-app開發經驗

 

 

然後就是資料庫:其實應該用駝峰命名,但是時間太趕了,為了保持一致,我就偷懶了,然後在返回資料的時候,在做了轉換,轉換也不嚴謹,要是是為了配合上面的外掛,然後就沒對資料進行大改,後面再優化了

 

記錄第一次完整的uni-app開發經驗

 

 

記錄第一次完整的uni-app開發經驗

 

 

後端基本上就是這樣了,下面來看前端

前端使用uni-app開發,前端懂的不多,不太知道哪裡是重點

首先是傳送請求到後端,獲取資料,newsList是測試資料,真正用到的是list

記錄第一次完整的uni-app開發經驗

 

 

然後拿到資料,就渲染到前端介面

 

 記錄第一次完整的uni-app開發經驗

 

 

前往購買的資料,在後端返回的本來就是一個連結,我們直接在新視窗開啟即可

記錄第一次完整的uni-app開發經驗

 

 

前端拿到載入的資料,但是介面上卻沒有渲染出效果,此時我們要強制渲染一下

記錄第一次完整的uni-app開發經驗

 

 

其他就沒什麼需要注意的了。開發完成,除錯沒有問題,就部署到伺服器上。

uni-app打包教程網上有很多,我就不細說了

記錄第一次完整的uni-app開發經驗

 

 

打包完成,我們得到一個static和html檔案

記錄第一次完整的uni-app開發經驗

 

 

我們只需要把這個放到伺服器上就可以了。注意,網上很多說放到伺服器根目錄下,這個容易誤導別人。我伺服器上部署的是tomcat,因此這個根目錄指的就是webapp下。後端用maven打包成jar包,放到指定目錄,然後在cmd中執行java -jar xxx.jar (百度springboot打jar包,就有很詳細的教學了)。

這裡需要注意的是,我們後端單獨打包成一個服務,需要一個介面,比如我後端用的介面是9015,我就要去阿里雲的後臺,把9015埠開啟(百度阿里雲伺服器開放指定埠)。

為什麼很多步驟我都叫你們百度呢,因為我現在把詳細步驟放出來,軟體更新了,那些步驟的位置也很可能會傳送變化,所以還是去百度看最新的操作步驟。

最後附上沒優化之前的專案,各種bug,各種醜哭

頁面沒有做適配

 

 記錄第一次完整的uni-app開發經驗

 

 

<a>標籤紅配藍,真心覺得不好看,所以後面才換成按鈕點選世界開啟新視窗 

記錄第一次完整的uni-app開發經驗

 

 

這個是快完工的了 

記錄第一次完整的uni-app開發經驗

 

 

哈哈,水平有限,其他翻車現場,就不放出來了。經過這次,也對前後端分離有了更深一步的實踐,不得不說,vue真是方便了很多事情。uni-app對我來說也是一個福音。作為一個後端開發人員,特別喜歡這些能快速上手的技術,這樣自己寫好介面,也能搗鼓一下前端的頁面來對接介面了。最後感謝那些開箱即用的大佬,給我們創造了一個很好用的輪子。這個專案,後面如果有時間優化,我就放到我的gitee上面,給後面的新人練練手也是很不錯的選擇。