持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情
上一篇简单的写了微信小程序实战小程序端业务功能代码实现,这一篇开始做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对象存储工具] (juejin.cn/post/714386…)
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文件
效果测试
下一篇： 调用后端接口实现轮播图展示
