#数据库内容:
CREATE TABLE studet(
NAME VARCHAR(30) NOT NULL,
age INT NOT NULL,
hobby VARCHAR(50),
edu INT,
intime DATE
)
插入一些数据:
#前端页面:
期望效果:
编写html文件:(涉ajax)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试从数据库导入资料到表格</title>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<table style="font-size: 15px;" cellspacing="0" border="1px">
<h3 style="padding-left: 80px;">京淘电商平台</h3>
<button>新增</button>
</tr>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>学历</th>
<th>入学时间</th>
<th>操作</th>
</tr>
<tr v-for="o in msg" align="center">
<td>{{o.name}}</td>
<td>{{o.age}}</td>
<td><span style="color: #DC143C;">{{o.hobby}}</span>
</td>
<td v-if="o.edu==3">本科</td>
<td v-else-if="o.edu==2">硕士及以上</td>
<td v-else="o.edu==1">其他</td>
<td>{{o.intime.substring(0,9)}}</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
msg:""
},
mounted:function(){
axios({
method:"get",
url:"http://localhost:8080/stu/get"
}).then(
res=>{
this.msg=res.data;
})
}
})
</script>
</html>
#idea代码:
- 创建SpringBoot工程:打开file–>New–>Project 创建一个项目;选择Spring Initialize,点击next;修改group+artifact 坐标,命名,修改jdk版本8;勾上Web下面的Spring Web;
- pom.xml文件修改,添加mybatis依赖,添加lombok依赖
<dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.4</version> </dependency> <!--jdbc依赖包--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.48</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency>
- main文件中,类的分布
- 添加yml文件:application.yml 格式很重要
spring: datasource: driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql:///mybatisdb?useUnicode=true&characterEncoding=utf8&useSSL=false username: root password: root #SpringBoot整合Mybatis配置 mybatis: mapper-locations: classpath:/*.xml #开启驼峰映射 configuration: map-underscore-to-camel-case: true
- pojo类,java基础类的信息 属性要跟数据库中表的字段一致,ORM映射
package cn.tedu.pojo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import lombok.experimental.Accessors; import org.springframework.format.annotation.DateTimeFormat; import org.springframework.stereotype.Component; import java.util.Date; @Component @Data @NoArgsConstructor @AllArgsConstructor @Accessors(chain = true) public class Student { private String name; private Integer age; private String hobby; private Integer edu; @DateTimeFormat(pattern = "yyyy-MM-dd") private Date intime; }
- DAO层的接口:
package cn.tedu.dao; import cn.tedu.pojo.Student; import java.util.List; public interface StuMapper { List<Student> getAll(); }
- Service层有接口和实现类,涉及到DI,注解的使用
package cn.tedu.service; import cn.tedu.pojo.Student; import java.util.List; public interface StuService { List<Student> getAll(); }
package cn.tedu.service; import cn.tedu.dao.StuMapper; import cn.tedu.pojo.Student; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class StuServiceImpl implements StuService { @Autowired private StuMapper stuMapper; @Override public List<Student> getAll() { return stuMapper.getAll(); } }
- Controller层:涉及到跨源资源共享 注解使用@CrossOrigin
import cn.tedu.pojo.Student; import cn.tedu.service.StuService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController @RequestMapping("stu") @CrossOrigin public class StuController { @Autowired private StuService stu; @RequestMapping("get") public List<Student> getAll(){ return stu.getAll(); } }
- 主启动类: 位置要跟其它层处于同包中
package cn.tedu; import org.apache.ibatis.annotations.Mapper; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication @MapperScan("cn.tedu.dao") public class SsmApplication { public static void main(String[] args) { SpringApplication.run(SsmApplication.class, args); } }
- mapper.xml配置,名字要跟DAO层的接口同名
<?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="cn.tedu.dao.StuMapper"> <select id="getAll" resultType="cn.tedu.pojo.Student"> select * from student </select> </mapper>
- 可以尝试启动程序啦~~~
- 数据库中表内容成功插入新建的表格中