目录
一、序言
本文主要讲述一个微信小程序前后端项目搭建的过程,主要内容包括小程序(前端)搭建和后端搭建,其中会描述可能遇到的问题以及解决措施,文章将会分为几个部分进行讲述,这章将讲述后端(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变更:
<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方法;
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
});
}
})
},
全部代码:
<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>
三、最终效果
获取数据列表
发送数据
数据库数据修改成功:
终于终于完成!恭喜!
文章出处登录后可见!