<body>
<div id="app">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
el-table-column>
<el-table-column
prop="major"
label="专业">
el-table-column>
el-table>
<p>{{msg}}p>
div>
body>
<script>
new Vue({
el:"#app",
data:{
msg:'',
tableData:[]
},
mounted(){
this.getAllStudent();
},
methods:{
getAllStudent:function(){
var that =this;
axios.get('http://localhost:8080/stu/getAllStudent')
.then(function(res){
that.tableData=res.data;
})
.catch(function(err){
that.msg=err;
})
}
}
})
</script>
前端添加代码：
主要按钮
后端代码导入jar包坐标：
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-devtoolsartifactId>
<scope>runtimescope>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-configuration-processorartifactId>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.projectlombokgroupId>
<artifactId>lombokartifactId>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-testartifactId>
<scope>testscope>
dependency>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
<version>8.0.25version>
dependency>
<dependency>
<groupId>org.mybatis.spring.bootgroupId>
<artifactId>mybatis-spring-boot-starterartifactId>
<version>2.0.0version>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>druidartifactId>
<version>1.0.9version>
dependency>
dependencies>
编写配置文件：
SpringBoot与Mybatis案例 前端查询代码：<body>
<div id="app">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
el-table-column>
<el-table-column
prop="major"
label="专业">
el-table-column>
el-table>
<p>{{msg}}p>
div>
body>
<script>
new Vue({
el:"#app",
data:{
msg:'',
tableData:[]
},
mounted(){
this.getAllStudent();
},
methods:{
getAllStudent:function(){
var that =this;
axios.get('http://localhost:8080/stu/getAllStudent')
.then(function(res){
that.tableData=res.data;
})
.catch(function(err){
that.msg=err;
})
}
}
})
</script>
前端添加代码：
主要按钮
后端代码导入jar包坐标：
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-devtoolsartifactId>
<scope>runtimescope>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-configuration-processorartifactId>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.projectlombokgroupId>
<artifactId>lombokartifactId>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-testartifactId>
<scope>testscope>
dependency>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
<version>8.0.25version>
dependency>
<dependency>
<groupId>org.mybatis.spring.bootgroupId>
<artifactId>mybatis-spring-boot-starterartifactId>
<version>2.0.0version>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>druidartifactId>
<version>1.0.9version>
dependency>
dependencies>
编写配置文件：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kaP2SdfL-1651074736625)(C:\Users\下午的光\AppData\Roaming\Typora\typora-user-images\image-20220427233806479.png)]
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/lession?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.initialSize=20
spring.datasource.minIdle=10
spring.datasource.maxActive=100
mybatis.mapper-locations=classpath:mapper/*.xml
编写mapper：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JvgKWWL5-1651074736626)(C:\Users\下午的光\AppData\Roaming\Typora\typora-user-images\image-20220427233906641.png)]
写sql语句方式一：@Mapper
public interface StudentMapper {
@Select("select *from student;") //这里可以写简单的sql语句。
public List<Student> listAll();
@Insert("INSERT INTO student(NAME,age,major) VALUES(#{name},#{age},#{major});")
public int insertStudent(Student student);
}
StudentController代码：
@RestController
public class StudentController {
@Autowired
StudentMapper studentMapper;//因为springboot不一定可以给你注入成功，所以会爆红。
@GetMapping("/stu/getAllStudent")
@CrossOrigin(origins = "*")
public List<Student> getAllStudent(){
return studentMapper.listAll();
}
@PostMapping("/stu/add")
@CrossOrigin(origins = "*")
public String add(@RequestBody Student student){
studentMapper.insertStudent(student);
return "OK";
}
}
解决上面爆红问题：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tAkRRTOX-1651074736627)(C:\Users\下午的光\AppData\Roaming\Typora\typora-user-images\image-20220427234220149.png)]
@MapperScan(basePackages = {"com.demo.mapper"}) //扫描包中的mapper注解
@SpringBootApplication
public class Experiment3Application {
public static void main(String[] args) {
SpringApplication.run(Experiment3Application.class, args);
}
}
DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.demo.mapper.StudentMapper">
<select id="listAll" resultType="com.demo.data.Student">
SELECT *from student;
select>
<insert id="insertStudent" parameterType="com.demo.data.Student">
INSERT INTO student(NAME,age,major) VALUES(#{name},#{age},#{major});
insert>
mapper>
源文件：后端→experiment3 以及 前端→experimentFour
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/lession?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.initialSize=20
spring.datasource.minIdle=10
spring.datasource.maxActive=100
mybatis.mapper-locations=classpath:mapper/*.xml
编写mapper：
写sql语句方式一：@Mapper
public interface StudentMapper {
@Select("select *from student;") //这里可以写简单的sql语句。
public List<Student> listAll();
@Insert("INSERT INTO student(NAME,age,major) VALUES(#{name},#{age},#{major});")
public int insertStudent(Student student);
}
StudentController代码：
@RestController
public class StudentController {
@Autowired
StudentMapper studentMapper;//因为springboot不一定可以给你注入成功，所以会爆红。
@GetMapping("/stu/getAllStudent")
@CrossOrigin(origins = "*")
public List<Student> getAllStudent(){
return studentMapper.listAll();
}
@PostMapping("/stu/add")
@CrossOrigin(origins = "*")
public String add(@RequestBody Student student){
studentMapper.insertStudent(student);
return "OK";
}
}
解决上面爆红问题：
@MapperScan(basePackages = {"com.demo.mapper"}) //扫描包中的mapper注解
@SpringBootApplication
public class Experiment3Application {
public static void main(String[] args) {
SpringApplication.run(Experiment3Application.class, args);
}
}
DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.demo.mapper.StudentMapper">
<select id="listAll" resultType="com.demo.data.Student">
SELECT *from student;
select>
<insert id="insertStudent" parameterType="com.demo.data.Student">
INSERT INTO student(NAME,age,major) VALUES(#{name},#{age},#{major});
insert>
mapper>
源文件：后端→experiment3 以及 前端→experimentFour
nt">
SELECT *from student;
INSERT INTO student(NAME,age,major) VALUES(#{name},#{age},#{major});
源文件：后端→experiment3 以及 前端→experimentFour
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）