记录第一次完整的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>

View Code

如果运行报错信息为找不到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>

View Code

 

 

 

然后就是数据库:其实应该用驼峰命名,但是时间太赶了,为了保持一致,我就偷懒了,然后在返回数据的时候,在做了转换,转换也不严谨,要是是为了配合上面的插件,然后就没对数据进行大改,后面再优化了

 

 

 

 

 

后端基本上就是这样了,下面来看前端

前端使用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上面,给后面的新人练练手也是很不错的选择。