博客

Spring Boot快速搭建web项目，完成数据库的查询操作

  • Post author:
  • Post category:其他

Spring Boot 快速搭建web项目

  • 操作系统：win10
  • 开发工具：IDEA2017.3.4
  • 数据库: MySQL+Mybatis
  • 使用数据源: Druid

1.Create new project(Spring Initializr)

推荐使用 jdk1.8，我这里使用的是jdk9.0
在这里插入图片描述

2. next 确认输入的信息

在这里插入图片描述

3.next 勾选组件IDEA会自动生成pom文件中的依赖

  • Lombok是IDEA 的一个插件 使用其中的@Data注解可以自动生成实体类的 Get Set 以及ToString等方法（没有可以不勾选，自己手动生成方法）
  • Spring web Starter web的启动器
  • MySQLDriver MySQL mysql驱动组件
  • MyBatis mybatis的组件
    在这里插入图片描述

4.next 确认文件存放位置

在这里插入图片描述

5.finish IDEA会创建一个新工程

新文件的层级目录

在这里插入图片描述

6.导入Druid数据源和log4j的依赖坐标

右下角选自动导入就可以
在这里插入图片描述

//坐标在这里可以直接复制
<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.9</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.12</version>
        </dependency>

7.创建并配置application.yml文件

  • 注:根据个人喜好也可以使用application.properties
  • username和password请配置自己数据库的用户名和密码
  • driver-class-name 是上面配置的mysql驱动
  • url配置好数据库所在的ip地址 jdbc:mysql://localhost:3306/eesy_mybatis 以及数据库名称
  • ?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC这是数据库配置的参数，设置数据库的编码格式和时区。
  • type 数据源
spring:
  datasource:
    username: root
    password: root
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/eesy_mybatis?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    type: com.alibaba.druid.pool.DruidDataSource

8.配置数据源 在工程下创建Config->DruidConfig文件

  • 配置Druid数据源
@Configuration
public class DruidConfig {
    @ConfigurationProperties(prefix = "spring.datasource")
    @Bean
    public DataSource druid(){
        return new DruidDataSource();
    }
}

9.编写实体类 bean->User

  • @Data注解是Lombok提供的自动生成Get和Set以及ToSting方法的注解
  • 可以通过file->setting->Plugins->Browse repositories…搜索Lombok安装并重启IDEA。再在pom.xml文件中配置<dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency>即可使用
  • 也可以自己手动使用Alt+Insert 生成Get和Set方法
@Data
public class User {
    private Integer id;
    private String username;
    private Date birthday;
    private String sex;
    private String address;
}

10.编写Mapper->UserMapper接口

@Mapper
public interface UserMapper {
	//查询所有方法
    @Select("select * from user")
    public List<User> findAll();

}

11.编写Controller->UserController方法

@RestController
public class UserController {
	//注入UserMapper 这里DEA可能会提示报错不用理会就行
    @Autowired
    UserMapper userMapper;
	
    @GetMapping("/user")
    public List<User> findAll(){
        return userMapper.findAll();
    }
}

12.resources->static->index.html编写index.html向后台发送ajax请求

  • 需要创建resources->static->js并引入jquery-1.12.4.min.js文件
<head>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
            //查询所有
            var select_all = $("#select_btn");
            select_all.click(function () {
                $.ajax({
                        url: "/user",
                        type: "get",
                        success: function (result) {
                            var div = $("#div01");
                            for (var i = 0; i < result.length; i++) {
                                div.append("<p> 姓名:" + result[i].username + "</p>");
                                div.append("<p>生日：" + result[i].birthday + "</p>");
                                div.append("<p>性别：" + result[i].sex + "</p>");
                                div.append("<p>地址：" + result[i].address + "</p>");
                            }
                        }
                    }
                )
            });
         })
</script>
</head>
<h1>这是首页！</h1>
<button id="select_btn">点击查询所有</button>
<div id="div01"></div>

13.启动项目进行测试

  • 运行此main方法
    在这里插入图片描述
  • 下图表示启动成功
    在这里插入图片描述
  • 打开浏览器访问 http://localhost:8080/index.html 下图为页面效果
    在这里插入图片描述
  • 点击查询所有按钮 会向后台发送ajax请求 效果如下图
    在这里插入图片描述

14.end 至此完成了SpringBoot的查询所有user操作

版权声明：本文为weixin_42068254原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。