上一篇简单的写了微信小程序实战小程序端业务功能代码实现,这一篇开始做springboot后端项目搭建。
1.springboot后端项目搭建。
项目源码在git 下载
1.1. 新建Maven项目导入项目需要的相关依赖
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.example</groupId> <artifactId>miniProgreamMall</artifactId> <version>1.0-SNAPSHOT</version> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.2.6.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <!-- 连接池 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.10</version> </dependency> <!-- mybatis-plus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.3.2</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <!-- 添加Httpclient支持 --> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <!-- <version>4.5.2</version>--> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.40</version> </dependency> <!-- JWT --> <dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt</artifactId> <version>3.2.0</version> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.7.0</version> </dependency> <dependency> <groupId>jdom</groupId> <artifactId>jdom</artifactId> <version>1.1</version> </dependency> <dependency> <groupId>dom4j</groupId> <artifactId>dom4j</artifactId> <version>1.6.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.5</version> </dependency> </dependencies> </project>
1.2. 新建数据库执行数据库初始化脚本
数据库脚本 在git 下载
网络异常，图片无法展示
|
1.3.idea连接数据库 MybatisX生成代码
该流程可以参考之前的文章 mybatisx 插件的踩坑使用 与以前不同的的是，之前用的是mybatis，而本项目使用mybatis-plus，在生成代码时记得选择mybatisplus3选项
网络异常，图片无法展示
|
1.4.主应用MiniProgramApplication
这块记得增加@MapperScan注解，否则无法扫描识别Mapper接口。也可以通过在mapper接口上增加@Mapper，但是这个注解需要后面每个mapper接口都要加上，所以不如在主程序上加上@MapperScan 设置扫描mapper文件所在的包一劳永逸.
import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; /** * @Author : lizzu * @create 2022/10/8 22:33 */ @SpringBootApplication @MapperScan("com.ctsi.sddx.mapper") //扫描包 与在mapper文件上增加@Mapper注解一样、 public class MiniProgramApplication { public static void main(String[] args) { SpringApplication app = new SpringApplication(MiniProgramApplication.class); app.run(args); } }
1.5.添加Controller测试
import com.ctsi.sddx.domain.TProduct; import com.ctsi.sddx.service.TProductService; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.List; /** * @Author : lizzu * @create 2022/10/13 13:54 */ @RestController @RequestMapping("v1/miniProgram") public class ProductController { @Resource TProductService tProductService; @GetMapping() public List<TProduct> getTest(){ return tProductService.list(); } }
测试：
网络异常，图片无法展示
|
1.6.增加查询轮播图接口
/** * 查询轮播图片商品 */ @GetMapping("product/isSwiper") public List<TProduct> getIsSwiper(){ QueryWrapper<TProduct> tProductQueryWrapper = new QueryWrapper<TProduct>().eq("isSwiper", true).orderByAsc("swiperSort"); return tProductService.list(tProductQueryWrapper); }
测试
网络异常，图片无法展示
|
2.微信小程序轮播图实现
2.1 导入支持less插件
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 微信开发者工具默认不支持less，我们需要自己安装插件。 安装步骤 插件的使用见：2.4
2.2 微信小程序轮播图实现
小程序轮播图官文：swiper组件文档
2.3 轮播图片存储
至于商城项目需要用到的图像存放： 1.放在本地磁盘使用 实现WebMvcConfigurer 的addResourceHandlers进行虚拟路径映射。
2.使用Minio对象存储工具存储,参考之前的文章：[minio对象存储工具] (https://juejin.cn/post/7143865564308439077)
3.使用阿里云的oss对象存储进行存储图片(刚好z最近搞OSS,这次就用它了)
网络异常，图片无法展示
|
将项目图片上传到文件存储服务器（图片资源放在了在git中）
网络异常，图片无法展示
|
2.4静态swiper实现：
<!--index.wxml--> <view> <SearchBar></SearchBar> </view> <!-- 轮播图开始 --> <view class="index_swiper"> <swiper> <swiper-item> <navigator> <image mode="widthFix" src="https://jkb-public.oss-cn-beijing.aliyuncs.com/images/2022/08/miniProgream/swiperImgs/1.jpg"></image> </navigator> </swiper-item> <swiper-item> <navigator> <image mode="widthFix" src="https://jkb-public.oss-cn-beijing.aliyuncs.com/images/2022/08/miniProgream/swiperImgs/2.jpg"></image> </navigator> </swiper-item> <swiper-item> <navigator> <image mode="widthFix" src="https://jkb-public.oss-cn-beijing.aliyuncs.com/images/2022/08/miniProgream/swiperImgs/3.jpg"></image> </navigator> </swiper-item> </swiper> </view> <!-- 轮播图结束 -->
2.5 使用.less 自动生成 wxss
将wxss文件后缀改为.less 设置样式
/**index.less**/ .index_swiper{ swiper{ width: 750rpx; height: 375rpx; swiper-item{ image{ width: 100%; } } } }
自动生成wxss文件
网络异常，图片无法展示
|
效果测试
网络异常，图片无法展示
|
下一篇： 调用后端接口实现轮播图展示
