SSM入门案例：从数据库中导入信息到前端页面

最新推荐文章于 2022-08-07 11:05:29 发布

xiaobai_267

最新推荐文章于 2022-08-07 11:05:29 发布

阅读量1.7k

点赞数

分类专栏：入门学习案例文章标签： ssm java spring

本文链接：https://blog.csdn.net/xiaobai_267/article/details/119841948

版权

入门学习案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

#数据库内容：

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>

可以尝试启动程序啦~~~
数据库中表内容成功插入新建的表格中

xiaobai_267

关注

0
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
SSM入门案例：从数据库中导入信息到前端页面

#数据库内容：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"> <.
复制链接

扫一扫

专栏目录