微信小程序实战(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,搭建一个在线教育视频课程分享网站。
相关文章
|
27天前
|
存储 SQL 数据库
深入浅出后端开发之数据库优化实战
【10月更文挑战第35天】在软件开发的世界里,数据库性能直接关系到应用的响应速度和用户体验。本文将带你了解如何通过合理的索引设计、查询优化以及恰当的数据存储策略来提升数据库性能。我们将一起探索这些技巧背后的原理,并通过实际案例感受优化带来的显著效果。
41 4
|
1月前
|
运维 NoSQL Java
后端架构演进:微服务架构的优缺点与实战案例分析
【10月更文挑战第28天】本文探讨了微服务架构与单体架构的优缺点,并通过实战案例分析了微服务架构在实际应用中的表现。微服务架构具有高内聚、低耦合、独立部署等优势,但也面临分布式系统的复杂性和较高的运维成本。通过某电商平台的实际案例,展示了微服务架构在提升系统性能和团队协作效率方面的显著效果,同时也指出了其带来的挑战。
71 4
|
1月前
|
小程序 前端开发 算法
|
1月前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
109 1
|
2月前
|
自然语言处理 Java API
Spring Boot 接入大模型实战:通义千问赋能智能应用快速构建
【10月更文挑战第23天】在人工智能(AI)技术飞速发展的今天,大模型如通义千问(阿里云推出的生成式对话引擎)等已成为推动智能应用创新的重要力量。然而,对于许多开发者而言,如何高效、便捷地接入这些大模型并构建出功能丰富的智能应用仍是一个挑战。
177 6
|
2月前
|
NoSQL Java Redis
shiro学习四:使用springboot整合shiro,正常的企业级后端开发shiro认证鉴权流程。使用redis做token的过滤。md5做密码的加密。
这篇文章介绍了如何使用Spring Boot整合Apache Shiro框架进行后端开发,包括认证和授权流程,并使用Redis存储Token以及MD5加密用户密码。
36 0
shiro学习四:使用springboot整合shiro,正常的企业级后端开发shiro认证鉴权流程。使用redis做token的过滤。md5做密码的加密。
|
2月前
|
Java 数据库连接 API
springBoot:后端解决跨域&Mybatis-Plus&SwaggerUI&代码生成器 (四)
本文介绍了后端解决跨域问题的方法及Mybatis-Plus的配置与使用。首先通过创建`CorsConfig`类并设置相关参数来实现跨域请求处理。接着,详细描述了如何引入Mybatis-Plus插件,包括配置`MybatisPlusConfig`类、定义Mapper接口以及Service层。此外,还展示了如何配置分页查询功能,并引入SwaggerUI进行API文档生成。最后,提供了代码生成器的配置示例,帮助快速生成项目所需的基础代码。
115 1
|
1月前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
127 0
|
1月前
|
前端开发 JavaScript NoSQL
探索后端开发之旅:从基础到高级实战
【10月更文挑战第24天】在这个数字时代的浪潮中,后端开发如同一座巨大的宝藏岛,等待着勇敢的探险者去发掘。本文将作为你的藏宝图,引领你从浅滩走向深海,探索后端开发的广阔天地。无论你是初心者还是资深开发者,这篇文章都将为你提供价值连城的知识和技能。准备好了吗?让我们启航,一起构建强大、高效、安全的后端系统!
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
404 0

热门文章

最新文章