微信小程序实战(springboot后端项目搭建)

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: 微信小程序实战(springboot后端项目搭建)

上一篇简单的写了微信小程序实战小程序端业务功能代码实现,这一篇开始做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文件

网络异常,图片无法展示
|

效果测试

网络异常,图片无法展示
|

下一篇: 调用后端接口实现轮播图展示

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
4天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
14 0
|
4天前
|
缓存 JSON 安全
【Uniapp 专栏】Uniapp 与后端接口对接的实战要点
【5月更文挑战第12天】在 Uniapp 项目开发中,成功对接后端接口至关重要。要点包括:深入理解后端提供的接口文档,确保数据格式(如 JSON)正确处理,选择合适的请求方式(如 GET、POST),设置正确的请求头,做好错误处理和数据缓存策略,确保安全性(如使用 HTTPS 和令牌验证)并进行全面测试。同时,进行版本管理和团队协作,与后端开发人员保持良好沟通,以实现高效、稳定的接口对接。
|
4天前
|
小程序 Java API
微信小程序和springboot实现微信支付
微信小程序和springboot实现微信支付
12 0
|
4天前
|
小程序
外卖小程序-购物车模块表结构设计和后端代码
外卖小程序-购物车模块表结构设计和后端代码
14 0
|
4天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
25 0
|
4天前
|
机器学习/深度学习 算法 安全
深度学习在图像识别中的应用与挑战构建高效可扩展的RESTful API:后端开发的实战指南
【4月更文挑战第30天】 随着计算机视觉技术的飞速发展,深度学习在图像识别领域取得了显著的成果。本文将探讨深度学习技术在图像识别中的应用及其所面临的挑战。首先,我们将介绍深度学习的基本原理和关键技术,然后分析其在图像识别中的优势和应用案例。最后,我们将讨论当前深度学习在图像识别领域所面临的主要挑战和未来的发展趋势。
|
4天前
|
编解码 前端开发 JavaScript
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
34 1
|
4天前
|
存储 缓存 NoSQL
node实战——koa给邮件发送验证码并缓存到redis服务(node后端储备知识)
node实战——koa给邮件发送验证码并缓存到redis服务(node后端储备知识)
24 0
|
4天前
|
安全 关系型数据库 MySQL
node实战——后端koa结合jwt连接mysql实现权限登录(node后端就业储备知识)
node实战——后端koa结合jwt连接mysql实现权限登录(node后端就业储备知识)
27 3
|
4天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
50 4

热门文章

最新文章