听说你还不会java（springboot）+mysql写接口给前端在通过uni—app渲染到页面，手把手教你入门吧

LiYan18j

已于 2024-04-29 20:27:54 修改

阅读量670

点赞数 18

于 2024-04-29 14:04:41 首次发布

本文链接：https://blog.csdn.net/LiYan18j/article/details/138308497

版权

所需软件

1.idea（用于编写java）

2.phpstudy_pro（小皮是用于在本地模拟一个mysql）

3.Navicat Premium（可视化数据库，用过的都说好）

4.HBuilderX（uni—app）

一.创建mysql数据库

写接口一定需要数据库来支撑呀

1.打开小皮，下载mysql数据库

2.点击设置查看端口这个可以自定义，我选择3308端口

3.启动mysql服务

4.创建数据库，这里的密码和用户名一定要记住！！！

二.连接mysql，创建数据库

1.打开Navicat Premium下面我就用NP当做简称了，打开连接选择Mysql，

2.输入在小皮设置的端口号，用户和密码，测试连接

3.创建表格

这个时候你的本地数据库就好啦，右键创建数据库我就叫host了（这个要记住，要考的）

，在host里面创建一个表格我叫做user，我随便写了一些数据，大家可以照着写

三.编写java（spring boot），连接Mysql

1.安装maven，springBoot，java8，jdk1.8

Server URL最好改为国内镜像不然太慢了，当然默认也可以

2.下载依赖

这些都是依赖spring web， Mysql Driver， MyBatis Framework， Lombok

在搜索框搜索这些依赖下载

3.开始写代码

前要：java对大小写敏感，‘’ “”这两个是不一样的，不要当js写

想把这些spring boot帮我们写的文件删掉，不然后面报错

更改application.properties文件为上述代码

注释：

localhost:3308/host

host是你的表单名字，

3308mysql端口，

localhost本地，服务器可以更改为公网IP

//默认端口是8080，可以更改，也可以默认
server.port=8003
//localhost:3308/host中的host是你的表单名字，3308mysql端口，localhost本地，服务器可以更改为公网IP
spring.datasource.url=jdbc:mysql://localhost:3308/host?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=UTC
//root是名字
spring.datasourcs.username=root
//密码
spring.datasource.password=buzhidao
//固定格式
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

这个时候我们会发现启动不了，启动是灰色的，我们需要把springboot添加到启动里面

springboot启动成功了

4.创建一个entity的文件夹用于存放javabeen

在entity的文件夹创建一个User

@Data
//Data自动生成javabean不需要再写无参构造和有参构造set和get,@Data是lombok依赖
public class User {
    private Integer id;
    private String name;
    private String address;
    private Integer age;
    private String sex;
    private String phone;

}

5.5.创建一个mapper文件夹用于写接口

在mapper文件夹创建一个接口UserMapper，用于查询列表

@Select直接写是会报错，需要先list数据交给findAll();再@Select

public interface UserMapper {
    //@select里面写的的mysql查询语句
    @Select("SELECT * FROM `user`")
    List<User> findAll();
}

(对了，要把mybatis依赖配置一下)

6.创建一个controller文件夹用于http输出，并且自定url，输出到页面上面

在controller文件夹创建一个UserController

@RestController
//@RestController用于渲染列表使用
@RequestMapping("/user")
//@RequestMapping("/user")用于http访问接口路径
public class UserController {

    @Resource
    //@Resource用于引入接口
    UserMapper userMapper;
    @GetMapping("/all")
    //@GetMapping("all")用于访问url地址自定义子目录
    public List<User> getUser(){
        return userMapper.findAll();
    }

}

因为@GetMapping自定义url所以访问地址是localhost:8003/user/all

我们本地mysql就已经出来了

四.使用uniapp，访问接口渲染列表

1.创建前端

2.写代码

<script>
	export default {
		data() {
			return {
                //创建一个数组用于存储接口传来的数据用于渲染
				arr_list:[]
			}
		},
		onLoad() {
                //初始化执行nb函数
                this.nb()
		},
		methods: {
				nb(){
					const that=this
					uni.request({
                        //输入本地url地址
						url:"http://localhost:8003/user/all",
						method:"GET",
						success: function(res)  {
							that.arr_list=res.data
						}
					})
				}
		}
	}
</script>

<template>
	<view>

		<view v-for="(item,index) in arr_list" :key="index" >
			<view>{{item.id}}</view>
			<view>{{item.name}}</view>
			<view>{{item.address}}</view>
			<view>{{item.age}}</view>
			<view>{{item.sex}}</view>
			<view>{{item.phone}}</view>
		</view>
	</view>
</template>