0
0

微信小程序-JAVA Springboot项目-后端搭建-项目搭建02

一、序言

    本文主要讲述一个微信小程序前后端项目搭建的过程，主要内容包括小程序（前端）搭建和后端搭建，其中会描述可能遇到的问题以及解决措施，文章将会分为几个部分进行讲述，**这章将讲述后端（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：工具类，例如日期工具、加密解密工具等

  1. 连接数据库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 指的是数据库密码

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

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

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

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

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

<dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
</dependency>

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<Test> getList();
}

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

TestMapper.xml： 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace = "com.example.demo.mapper.TestMapper">
    <sql id = "selectAll">
        SELECT *
    </sql>

    <sql id = "selectAllCount">
        SELECT COUNT(*)
    </sql>

    <insert id = "insert">
        insert into test(t_name) value (#{t_name})
    </insert>

    <update id="update">
        update test
        <set>
            <if test="t_name!=null and t_name!='' ">
                t_name=#{t_name}
            </if>
        </set>
        where t_id=#{t_id}
    </update>
    <delete id="delete" parameterType="int">
        delete from test where t_id=#{t_id}
    </delete>
    <select id="getList"  resultType="com.example.demo.model.Test">
        <include refid="selectAll"></include>
        from test
    </select>

</mapper>

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

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

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

<mapper namespace = "com.example.demo.mapper.TestMapper">

** 注意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<Test> getList() {
        return testMapper.getList();
    }

}

控制层：TestController，创建控制类

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

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
</dependency>

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<Test> 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方法；

  1. 实现效果

打开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
                        });
                    }
                })
            },

全部代码：

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">名称：{{title}}</text>
        </view>
        <input class="input-box" placeholder="请输入修改的名称" v-model="tempTitle" @input="setTitle" />
        <button @click="postData"> 修改</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                tempTitle: ""
            }
        },
        onLoad() {
            let isThis = this;
            var option = {
                method: "GET",
            };
            isThis.getData(option);
        },
        methods: {
            setTitle: function(e) {
                console.log(e.detail.value)
                this.tempTitle = e.detail.value;
            },
            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
                        });
                    }
                })
            },
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }

    .input-box {
        margin: 10px auto;
        padding: 10px;
        width: 80%;
        border: #b8b8be 1px solid;
        height: 60rpx;
        border-radius: 10px;
    }
</style>

三、最终效果

获取数据列表

发送数据

数据库数据修改成功：

终于终于完成！恭喜！

标签： 微信小程序 spring boot java
本文转载自: https://blog.csdn.net/qq_53316719/article/details/133924718
版权归原作者 阿君哥学习记 所有， 如有侵权，请联系我们删除。
登录后发布评论

“微信小程序-JAVA Springboot项目-后端搭建-项目搭建02”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航