目录

一、序言

二、后端搭建

一、序言

        本文主要讲述一个微信小程序前后端项目搭建的过程，主要内容包括小程序（前端）搭建和后端搭建，其中会描述可能遇到的问题以及解决措施，文章将会分为几个部分进行讲述，这章将讲述后端（Springboot项目）搭建的内容，其中包括软件下载、创建项目、Maven注入依赖、springboot连接Mysql数据库，springboot接收和反馈 客户端 数据等内容；本项目的前端运用的框架是uni-app，后端运用的框架是Springboot，如各位需求满足，可继续往下看；

        关于前后端分离的好处，个人认为是可以增加代码可维护性，降低了许多后期维护成本，更容易发现问题，解决问题；其次项目可以分工给团队，减少开发难度。对于新手或者想要独立完成一个总体项目的同志是个不错的练习。

 二、后端搭建

1、开发工具

• IntelliJ IDEA Ultimate

  下载网址：下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE (jetbrains.com)https://www.jetbrains.com/zh-cn/idea/download/?section=windowshttps://www.jetbrains.com/zh-cn/idea/download/?section=windows

  2、下载数据库（MYSQL）

  • MySQL

    MySQL :: Download MySQL Installerhttps://dev.mysql.com/downloads/installer/https://dev.mysql.com/downloads/installer/

    • Navicat-for-mysql（用于操作和查看数据库数据）

      Navicat | 产品https://www.navicat.com.cn/products

      3、下载JDK

              下载JDK主要是搭建JAVA环境，如果有同志已搭建JAVA环境，此步骤可跳过；如果还没有搭建JAVA环境，可查看以下相关JDK环境搭建教程

      阿里云JDK18 下载链接（Windows x64版本）https://www.aliyundrive.com/s/yPqgaCfP821https://www.aliyundrive.com/s/yPqgaCfP821        提取码: ar79

              官网下载地址：

      Java Archive Downloads - Java SE 18 (oracle.com)https://www.oracle.com/java/technologies/javase/jdk18-archive-downloads.htmlhttps://www.oracle.com/java/technologies/javase/jdk18-archive-downloads.htmlJDK 安装与环境变量配置(Win10详细版)_jdk环境变量配置-CSDN博客https://blog.csdn.net/qq_38436214/article/details/105071088https://blog.csdn.net/qq_38436214/article/details/1050710883、创建Springboot项目

              （1）打开idea编译器

              （2）点击顶部菜单栏的“文件” 》“新建 》“项目””，然后注意以下框选的内容。

              注意：JDK选择已搭建好的JDK地址或版本，这里的项目的生成器选择 Spring Initializr，语言是JAVA，类型为Maven（注入依赖的类型），打包选择jar类型；

      ​

             （3）下一步选择Maven库的依赖项

              此功能是为了注入依赖，实现项目的某些功能；因为本项目需要连接mysql以及mapper的运用，所以将注入MySql和MyBatis的依赖，选择如图的依赖，然后点击创建。​

               项目中的根目录有一个pom.xml文件，其中框选的内容即是注入的MYSQL Driver和MyBatis Framework的依赖，其作用是实现操作数据库mysql，以及运用mybatis与xml的映射方法实现与数据库交互的作用；之后需要某些功能，可以在这里添加相应的依赖。

      ​ ​

      

              （4）设置项目文件框架

              通常项目创建，需要构建好项目的框架，来放置不同的文件，如下是本人项目的文件夹分类，可作为参考；

      

      Controller：代表控制器，是应用程序中处理用户请求的组件，用于调用Service来执行业务逻辑

      Dao：数据访问对象，是应用程序中与数据库交互的组件，封装了数据库操作的细节，主要负责提供一组标准的数据访问接口

      Exception：放置异常处理的类

      Model：模型类，pojo类（getter、setter、属性等），也可以放置vo、dto、entity等对象

      Service：是应用程序中实现业务逻辑的组件，它在控制器的指导下执行具体的操作，例如从数据库读取或写入数据，处理事务，逻辑处理等

      Impl：是实现Service接口的类（但是一般为了方便直接将Service为正常的类并进行实现逻辑处理）

      mapper：mapper层用于和数据库交互，一般在service层调用mapper的方法，通过mapper层向数据库发送sql语句，对数据库进行数据持久化操作，实现数据增删改查操作，在mybatis中方法主要与xxx.xml内相互一一映射

      utils：工具类，例如日期工具、加密解密工具等

      4. 连接数据库Mysql配置

      打开application.properties文件，输入以下语句：

      ​​​​​​​

      server.port=8888
      spring.datasource.url=jdbc:mysql://localhost:3306/testDB?serverTimezone=Asia/Shanghai&characterEncoding=utf8
      spring.datasource.username=myroot
      spring.datasource.password=myroot

      testDB：指的是数据库名称

      server.port=8888 指的是端口号为8888（与前端对接有关系）

      spring.datasource.username=myroot  指的是数据库用户名

      spring.datasource.password=myroot  指的是数据库密码

      ---

      5. （Spring boot）后端传输数据（接收和发送数据给前端）

       项目的总文件浏览：创建五个文件即可完成本后端项目的小demo的需求！！

      

      ---

      Model：Test.java     新建一个Test类，相当于一个对象

      注入lombok依赖，为运用@Data注解，使Test类 相当于一个pojo类，拥有get，set方法；

      打开pom.xml，添加以下语句 ，并加载Maven变更：

      
                  org.projectlombok
                  lombok
      

      

       Test.java：

      package com.example.demo.model;
      import lombok.Data;
      @Data
      public class Test {
          String t_name;
          int t_id;
      }
      

      Mapper层：TestMapper.java，创建一个mapper接口，添加业务逻辑方法，是与数据库交互的方法

       TestMapper.java：

      package com.example.demo.mapper;
      import com.example.demo.model.Test;
      import org.apache.ibatis.annotations.Mapper;
      import org.springframework.stereotype.Repository;
      import java.util.List;
      @Mapper
      @Repository
      public interface TestMapper {
          int insert(Test data);
          int update(Test data);
          int delete(Test data);
          List getList();
      }
      

      选择项目，展开文件夹resources，然后创建以下子文件夹，（com>example>demo>mapper，注意这里的demo是你项目的名字）再创建一个TestMapper.xml，作为 TestMapper.java的映射；注意文件夹一定要按照TestMapper.java放置的位置一 一对应，如图框选处；

       

       TestMapper.xml： 

      
      
      
          
              SELECT *
          
          
              SELECT COUNT(*)
          
          
              insert into test(t_name) value (#{t_name})
          
          
              update test
              
                  
                      t_name=#{t_name}
                  
              
              where t_id=#{t_id}
          
          
              delete from test where t_id=#{t_id}
          
          
              
              from test
          
      
      

      注意1： 以下语句需要复制，手写可能无效

              PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

              "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

      注意2：以下语句是映射TestMapper.java，请书写正确的引入位置（即TestMapper.java的位置）

       

       注意3：id所填写的内容是TestMapper.java的方法名，不需要填写参数，例如：

      TestMapper.java的insert方法对应TestMapper.xml的id为insert的映射

      TestMapper.java：

      

      TestMapper.xml：

      

      ---

      服务层：TestService，创建服务类，实现业务逻辑，或运用mapper接口的方法操作数据库数据 

       TestService.java:

      package com.example.demo.service;
      import com.example.demo.mapper.TestMapper;
      import com.example.demo.model.Test;
      import org.springframework.beans.factory.annotation.Autowired;
      import org.springframework.stereotype.Service;
      import java.util.List;
      @Service
      public class TestService {
          @Autowired
          TestMapper testMapper;
          public String addData(Test data) {
              if (data.getT_name() == null || data.getT_name().isBlank()) {
                  return "请填写信息！";
              } else {
                  int flag = testMapper.insert(data);
                  if (flag > 0) {
                      return "添加成功！";
                  } else {
                      return "添加失败！";
                  }
              }
          }
          public String updateData(Test data) {
              if (data.getT_name() == null || data.getT_name().isBlank()) {
                  return "请填写信息！";
              } else if (data.getT_id()<=0) {
                  return "编号为空！";
              } else {
                  int flag = testMapper.update(data);
                  if (flag > 0) {
                      return "更新成功！";
                  } else {
                      return "更新失败！";
                  }
              }
          }
          public String deleteData(Test data) {
              if (data.getT_id()<=0) {
                  return "编号为空！";
              } else {
                  int flag = testMapper.delete(data);
                  if (flag > 0) {
                      return "删除成功！";
                  } else {
                      return "删除失败！";
                  }
              }
          }
          public List getList() {
              return testMapper.getList();
          }
      }
      

      控制层：TestController，创建控制类

       注入org.springframework.web 依赖，为运用 @RestController和@RequestMapping注解，为了标注该类为控制类，前端可访问这里的接口；打开pom.xml文件，添加以下语句，加载Maven变更：

      
                  org.springframework.boot
                  spring-boot-starter-web
      

       TestController.java:

      package com.example.demo.controller;
      import com.example.demo.model.Test;
      import com.example.demo.service.TestService;
      import org.springframework.beans.factory.annotation.Autowired;
      import org.springframework.web.bind.annotation.RequestBody;
      import org.springframework.web.bind.annotation.RequestMapping;
      import org.springframework.web.bind.annotation.RestController;
      import java.util.List;
      @RestController
      @RequestMapping("/test")
      public class TestController {
          @Autowired
          TestService testService;
          @RequestMapping("/apiAdd")
          public String add(@RequestBody Test data) throws Exception {
              if (data == null) {
                  throw new Exception();
              }
              return testService.addData(data);
          }
          @RequestMapping("/apiUpdate")
          public String update(@RequestBody Test data) throws Exception {
              if (data == null) {
                  throw new Exception();
              }
              return testService.updateData(data);
          }
          @RequestMapping("/apiDelete")
          public String delete(@RequestBody Test data) throws Exception {
              if (data == null) {
                  throw new Exception();
              }
              return testService.deleteData(data);
          }
          @RequestMapping("/apiGetList")
          public List getList() {
              return testService.getList();
          }
      }
      

      注意1：@RestController要与@RequestMapping 搭配使用，@RestController注解表示标注这个类是控制类，@RequestMapping("/test") 注解的作用类似于标注了一个接口，这里的相当于一个url路径：http：//localhost:8888/test；

      注意2：在方法上使用@RequestMapping，作用在于调用该路径的接口可以运行此方法，例如：

       @RequestMapping("/apiAdd")

          public String add(@RequestBody Test data) throws Exception {

              if (data == null) {

                  throw new Exception();

              }

              return testService.addData(data);

          }

      项目启动后，调用http：//localhost:8888/test/apiAdd 接口则会运用add方法；

      ---

      4. 实现效果

      打开Navicat，登录数据库，可以登录root，本案例如图

      用户：myroot

      数据库：testDB

      表：test

      属性：t_name，t_id

      如图添加一个新数据Junny 

      

      打开Hbuilder X（前端开发工具）

      打开index页面：代码修改，详细信息跳转页面：

      微信小程序-JAVA Springboot项目-小程序搭建-项目搭建01-CSDN博客https://blog.csdn.net/qq_53316719/article/details/133885119?spm=1001.2014.3001.5501 接收后端数据代码：

      getData(option) {
      				let isThis = this;
      				uni.showLoading({
      					title: '加载中',
      					mask: false
      				});
      				uni.request({
      					url: 'http://localhost:8888/test/apiGetList',
      					method: option.method || 'GET', //不传默认为GET
      					data: option.data || {}, //不传默认为空
      					header: option.header || {
      						'Content-Type': 'application/json'
      					},
      					success: (res) => {
      						console.log(res, "Junny")
      						uni.hideLoading();
      						isThis.title = res.data[0].t_name;  //获取第一个名称
      					},
      					fail: (err) => {
      						uni.showToast({
      							icon: 'none',
      							title: '啊哦~ 服务器出问题了，请刷新！',
      							duration: 2000
      						});
      					}
      				})
      			},

       发送数据给后端代码：

      postData() {
      				let isThis = this;
      				uni.showLoading({
      					title: '加载中',
      					mask: false
      				});
      				var data = {
      					"t_name": isThis.tempTitle,
      					"t_id": 1
      				}
      				uni.request({
      					url: 'http://localhost:8888/test/apiUpdate',
      					method: 'POST',
      					data: data,
      					header: {
      						'Content-Type': 'application/json'
      					},
      					success: (res) => {
      						uni.hideLoading();
      						isThis.tempTitle = "";
      						var option = {
      							method: "GET",
      						};
      						isThis.getData(option);
      						uni.showModal({
      							title: '提示',
      							content: res.data,
      							showCancel: false,
      							success: res => {},
      							fail: () => {},
      							complete: () => {}
      						});
      					},
      					fail: (err) => {
      						uni.showToast({
      							icon: 'none',
      							title: '啊哦~ 服务器出问题了，请刷新！',
      							duration: 2000
      						});
      					}
      				})
      			},

      全部代码：

       运行效果：

      获取数据列表

      

      

      发送数据

      

      

      

      数据库数据修改成功：

      

      终于终于完成！恭喜！

       
       女生学平面设计吃香吗  模板网站建设开发  天津网站建设制作  北京网站设计制作网站  工信部备案官网  小程序开发制作