目录
一、序言
二、后端搭建
本文主要讲述一个微信小程序前后端项目搭建的过程,主要内容包括小程序(前端)搭建和后端搭建,其中会描述可能遇到的问题以及解决措施,文章将会分为几个部分进行讲述,这章将讲述后端(Springboot项目)搭建的内容;本项目的前端运用的框架是uni-app,后端运用的框架是Springboot,如各位需求满足,可继续往下看;
关于前后端分离的好处,个人认为是可以增加代码可维护性,降低了许多后期维护成本,更容易发现问题,解决问题;其次项目可以分工给团队,减少开发难度。对于新手或者想要独立完成一个总体项目的同志是个不错的练习。
1、开发工具
下载网址:下载 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 :: Download MySQL Installerhttps://dev.mysql.com/downloads/installer/https://dev.mysql.com/downloads/installer/
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,然后创建以下子文件夹,再创建一个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}
注意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
});
}
})
},
全部代码:
名称:{{title}}
运行效果:
获取数据列表
发送数据
数据库数据修改成功: