记录第一次完整的uni-app开发经验

由于我是做后端的，一直没有做过前端的页面，以前在学校图书馆看的都是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上面，给后面的新人练练手也是很不错的选择。