SpringBoot入门

boy快快长大

已于 2023-07-16 23:13:35 修改

阅读量268

点赞数

分类专栏： Spring、SpringMvc、SpringBoot 文章标签： java spring boot ssm ajax jquery

于 2021-04-22 20:17:54 首次发布

本文链接：https://blog.csdn.net/Blue_Pepsi_Cola/article/details/115975275

版权

Spring、SpringMvc、SpringBoot 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

1.SpringBoot 概述
- 创建Springboot项目
2.SpringBoot项目访问静态资源
3.SpringBoot项目访问控制器
4.SpringBoot下使用SSM实现注册
5.注册业务的实现
6.AJAX
- 什么是Ajax
7.JSON
- json格式和java对象的转换
- JS代码中使用JSON格式
8.SpringBoot收发Ajax请求
9.使用JQuery发送ajax请求到控制器
10.使用Ajax完成注册
附录

1.SpringBoot 概述

本项目源码地址：源码
Boot:开机,启动

SpringBoot框架可以简单的理解为是一个“增强版的SpringMVC框架，极大程度的简化了各种配置，默认就已经集成了绝大部分常用的依赖”。

SpringBoot的核心思想:“约定大于配置”

创建Springboot项目

方法一:访问SpringBoot官方网站

http://start.spring.io

输入信息后生成下载maven项目,导入到IDE工具中即可创建SpringBoot项目

方法二 :直接利用Idea提供的方式

创建起来相对简单,等待所有资源下载完成即可
首先在idea中新建项目
在这里插入图片描述

然后next,等待idea下载环境

整体项目结构
在这里插入图片描述

2.SpringBoot项目访问静态资源

所谓静态资源就指html,css,js,图片等

SpringBoot中约定src/main/resources/static文件夹为存放静态资源的文件夹

SpringBoot项目默认欢迎页为index.html

创建index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Spring Boot 静态页面</h1>
<p>Hello World!!!</p>
</body>
</html>

现在要通过服务器访问到这个页面的话

需要启动服务,而这个服务是SpringBoot内置的tomcat

启动方法就是运行SpringBoot自带的main方法

浏览器输入网址

http://localhost:8080访问我们编写的index.html即表示成功

可以在application.properties文件中修改tomcat的端口号

server.port=8888

需要注意http协议规定了一个特殊的端口号:80

当浏览器访问没有编写端口号时,自动访问80端口

但是向mac(苹果电脑系统)Linux等系统开发80端口有特殊权限,windows没有

3.SpringBoot项目访问控制器

我们创建SpringBoot项目的时候实际上已经引入了SpringMvc的依赖

并且省略了单独使用SpringMvc的一系列配置

默认的处理路径为"/*",也就是说我们编写控制器的路径不必再以.do结尾了!!!

我们创建的SpringMvcConfig就是我们启动项目用的main方法的类

也不必要在配置@ComponentScan,SpringBoot默认扫描创建项目时自动生成的包下所有内容

步骤1:

创建一个cn.tedu.demo.controller包

包中创建控制器类DemoController

@RestController
public class DemoController {

    @GetMapping("/hello")
    public String hello(){
        return "Hello SpringBoot!";
    }
}

SpringBoot设置路径为/*表示所有请求都进入SpringMvc处理

所以拦截器现在既可以拦截动态请求,也可以拦截静态资源

SpringBoot中内部已经将所有必要编码都设置为utf-8不需要在处理

4.SpringBoot下使用SSM实现注册

要使用Mybatis需要先添加依赖

<dependency>
  <groupId>org.mybatis.spring.boot</groupId>
  <artifactId>mybatis-spring-boot-starter</artifactId>
  <version>2.1.2</version>
</dependency>

<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <scope>runtime</scope>
</dependency>

要想连接数据库,还需要连接池的配置信息

application.properties文件中添加如下代码

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/tedu_ums?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true
spring.datasource.username=root
spring.datasource.password=123456

下面来测试一下数据源的可用性

测试方法和之前有所不同

@SpringBootTest
class DemoApplicationTests {
    @Autowired
    private DataSource dataSource;
    @Test
    void contextLoads() throws SQLException {
        System.out.println(dataSource.getConnection());
    }
}

在SpringBoot项目中配置Mapper

需要在启动SpringBoot的类中添加@MapperScan注解

@SpringBootApplication
@MapperScan("cn.tedu.demo.mapper")
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

为了完成新增页面,我们要创建User的实体类

public class User implements Serializable {

    private Integer id;
    private String username;
    private String password;
    private Integer age;
    private String phone;
    private String email;
    
    //省略构造\set\get\toString
    
}

在mapper包中新建接口UserMapper并编写新增的方法

public interface UserMapper {

    @Insert("insert into t_user(username,password,age,phone,email)" +
            "values(#{username},#{password},#{age},#{phone},#{email})")
    @Options(useGeneratedKeys = true,keyProperty = "id")
    Integer addUser(User user);


}

测试代码

    //@Autowired(required = false)
    @Resource
    private UserMapper mapper;
    @Test
    void addNewUser(){
        User u=new User(null,"zhaoyun",
                "666",25,"13015155115",
                "yunyun@163.com");
        int num=mapper.addUser(u);
        System.out.println(num);
    }

如果想在控制台日志中显示sql语句

application.properties文件中编写

logging.level.cn.tedu.demo.mapper=TRACE

SpringBoot项目也一定支持Mybatis编写xml来映射sql语句

首先在接口中新建一个方法(这里以上次课中的动态修改为例)

Integer updateUserInfo(User user);

在resources文件夹下创建一个mappers文件夹

在这个文件夹下创建(复制)UserMapper.xml

代码如下

<?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">
<!-- namespace 属性执行映射到 UserMapper接口 -->
<mapper namespace="cn.tedu.demo.mapper.UserMapper">

    <update id="updateUserInfo" parameterType="cn.tedu.demo.entity.User">
        UPDATE t_user
        <!-- set标签会生成set关键字,还会自动去掉动态if部分产生的最后一个, -->
        <set>
            <!-- 当某个属性不为空时,表示要修改这个属性的值 -->
            <if test="username != null">
                username=#{username},
            </if>
            <if test="password !=null">
                password=#{password},
            </if>
            <if test="age != null">
                age=#{age},
            </if>
            <if test="phone != null">
                phone=#{phone},
            </if>
            <if test="email != null">
                email=#{email}
            </if>
        </set>
        WHERE id=#{id}
    </update>
</mapper>

最后需要在application.properties文件中指定mapper的xml文件的位置

mybatis.mapper-locations=classpath:mappers/*.xml

测试代码

    @Test
    void testUpdate(){
        User u=new User();
        u.setId(18);
        u.setUsername("张翼德");
        int num=mapper.updateUserInfo(u);
        System.out.println(num);
    }

5.注册业务的实现

步骤1:创建一个注册页面reg.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
  <h1>注册</h1>
  <form method="post" action="handle_reg">
    <div>
      <label>用户</label>
      <input type="text" name="username">
    </div>
    <div>
      <label>密码</label>
      <input type="password" name="password">
    </div>
    <div>
      <label>年龄</label>
      <input type="number" name="age">
    </div>
    <div>
      <label>电话</label>
      <input type="tel" name="phone">
    </div>
    <div>
      <label>电邮</label>
      <input type="email" name="email">
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>
</body>
</html>

步骤2:

新建UserController类

处理注册业务,代码如下

@RestController
public class UserController {

    //  这里仅仅为了测试功能,暂时允许直接调用mapper
    @Autowired(required = false)
    private UserMapper userMapper;

    @PostMapping("handle_reg")
    public String handleReg(User user){
        try{
            userMapper.addUser(user);
            return "注册成功!";
        }catch(Exception e){
            e.printStackTrace();
            return e.getMessage();
        }

    }
}

6.AJAX

什么是Ajax

Asynchronous JavaScript and XML（异步JavaScript和XML）

是js代码

是使用js代码对服务器发送请求并接收响应的技术

我们之前学习的发送请求的方式都是由浏览器url的变化而发生的

发送请求和页面跳转同时发生,我们称之为"同步请求"

Ajax技术特征如下

1.使用js代码发送请求,页面不跳转我们称之为"异步请求"(异步通信)

2.当我们的请求得到了响应,还是使用js代码,一般是将结果显示在当前页面上

我们称之为"局部刷新"

ajax的好处有

1.不刷新页面整体,只刷新需要的部分流量小

2.局部刷新的流量小,速度一定快

3.页面功能不中断,用户体验好

在这里插入图片描述

7.JSON

JavaScript Object Notation，JavaScript对象表示法

是js代码中可以保存对象的数据类型

下面有我们定义的json格式对象的示例
在这里插入图片描述

每个json格式对象都被一对{}括住
一个json格式对象可以包含多个属性与值的对应关系
属性使用"“引起来,值根据类型决定是否需要”"
属性和值之间用:分割
每对属性与值用,分割
上图中表示值可以是数字\字符串\数组\json类型

有了json格式,我们就可以让java和js通信了

json格式和java对象的转换

实际上这个转换只是一个测试,实际开发中转换的过程都被SpringMvc封装了

编写一个java实体类,代码如下

public class JsonResult {

    private Integer state;
    private String message;
    //{state:500,message:"服务器内部错误"}

	//省略构造setget toString

}

编写一个测试类,目的是了解java对象转换成json格式的可能性

不需要记住!!!

 @Test
    public void testJson() throws JsonProcessingException {
        JsonResult result=new JsonResult(
                500,"服务器内部错误!");
        //Jackson 提供的API能够将java对象转换为json格式的字符串
        ObjectMapper mapper=new ObjectMapper();
        //执行转换
        String json=mapper.writerWithDefaultPrettyPrinter()
                .writeValueAsString(result);
        System.out.println(json);
    }

运行输出结果

{
  "state" : 500,
  "message" : "服务器内部错误!"
}

JS代码中使用JSON格式

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>html中使用json</h1>
<script type="text/javascript">
    let json={
        "username":"root",
        "password":"1234",
        "age":28,
        "phone":"13800133800",
        "email":"root@163.com",
        "skills":["Java","Html","Css"],
        "department":{
            "id":1,
            "name":"java"
        }
    }
    console.log(json.username);
    console.log(json.skills);
    for(let i=0;i<json.skills.length;i++){
        console.log(json.skills[i]);
    }
    console.log(json.department);
    console.log(json.department.id);
    console.log(json.department.name);
</script>

</body>
</html>

8.SpringBoot收发Ajax请求

SpringBoot下对Ajax提供了非常好的支持

SpringMvc内部封装了Json格式的转换

我们在控制器中只需要返回java对象,SpringMvc就会将它自动转换成json格式

在DemoController中编写代码如下

@RestController
public class DemoController {

	//.......
	
	
    @GetMapping("/ajax")
    public JsonResult ajax(){
        return new JsonResult(500,"服务器内部错误");
    }
}

启动服务,访问localhost/ajax

9.使用JQuery发送ajax请求到控制器

新建一个页面发送ajax请求代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" 
            src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<h1>Ajax实现异步请求发送</h1>
<input id="btn" type="button" value="ajax">
<script type="text/javascript">
    $("#btn").click(function(){
        //使用JQuery发送ajax请求
        $.ajax({
            type:"get",//本次请求以get方式发送
            url:"ajax",//本次请求的路径
            dataType:"json",//声明这次返回接收到的返回值类型
            success:function(res){//当本次请求成功时运行的方法
                //res就是我们从控制器获得得json格式返回值
                console.log(res.state);
                console.log(res.message);
            }
        });
    })
</script>
</body>
</html>

10.使用Ajax完成注册

首先改写控制器方法

支持返回json格式

@PostMapping("/handle_reg")
    public JsonResult handleReg(User user){
        try{
            int num=userMapper.addUser(user);
            if(num==1){
                return  new JsonResult(1,"注册成功");
            }else{
                return  new JsonResult(0,"注册失败");
            }
        }catch (Exception e){
            e.printStackTrace();
            return new JsonResult(0,"注册失败");
        }
    }

然后修改reg.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript"
            src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<h1>注册</h1>
<div id="message">显示注册信息</div>
<form method="post" action="handle_reg" id="reg_form">
    <div>
        <label>用户</label>
        <input type="text" name="username">
    </div>
    <div>
        <label>密码</label>
        <input type="password" name="password">
    </div>
    <div>
        <label>年龄</label>
        <input type="number" name="age">
    </div>
    <div>
        <label>电话</label>
        <input type="tel" name="phone">
    </div>
    <div>
        <label>电邮</label>
        <input type="email" name="email">
    </div>
    <div>
        <input id="reg_btn" type="submit" value="提交">
    </div>
</form>
<script type="text/javascript">
    $("#reg_btn").click(function(){
        $.ajax({
            type:"post",
            url:"handle_reg",
            data:$("#reg_form").serialize(),//要发送给控制器的数据
                //$("#reg_form").serialize()表示将指定表单的数据发送给控制器
            dataType:"json",
            success:function(result){
                //直接将获得得信息显示在html中的div里
                $("#message").text(result.message);
            }
        });
       return false;//阻止表单提交的操作
    });
</script>
</body>
</html>

实现执行注册之前先检查用户名是否可用的功能

要想实现这个功能首先要数据库中编写一个方法

按用户名查询出用户,再根据查询的结果判断用户名是否可用

UserMapper接口中编写

 //按用户名查询用户
    @Select("select * from t_user where username=#{username}")
    User getUserByUsername(String username);

修改控制器中注册用户的方法

@PostMapping("/handle_reg")
    public JsonResult handleReg(User user){
        try{
            //先检查这个用户的用户名是否存在
            User u=userMapper.getUserByUsername(user.getUsername());
            //判断u是不是null,如果是null表示没有这个用户名,反之不能注册
            if(u!=null){
                return new JsonResult(-1,"用户名已被占用");
            }
            int num=userMapper.addUser(user);
            if(num==1){
                return  new JsonResult(1,"注册成功");
            }else{
                return  new JsonResult(0,"注册失败");
            }
        }catch (Exception e){
            e.printStackTrace();
            return new JsonResult(0,"注册失败");
        }
    }

附录

1.SpringBoot中文文档

boy快快长大

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringBoot入门

文章目录1.SpringBoot 概述创建Springboot项目2.SpringBoot项目访问静态资源SpringBoot项目访问控制器SpringBoot下使用SSM实现注册注册业务的实现AJAX什么是AjaxJSONjson格式和java对象的转换JS代码中使用JSON格式SpringBoot收发Ajax请求使用JQuery发送ajax请求到控制器使用Ajax完成注册项目峰会1.SpringBoot 概述Boot:开机,启动SpringBoot框架可以简单的理解为是一个“增强版的Sprin
复制链接

扫一扫