Springboot+ajax+mybatis实现简易网页

发表于

Springboot+ajax+mybatis实现简易网页

趁着周末又浅浅复习了一下结对编程用到的技术，重新制作了一个简单的demo练手，分享一下自己的理解~

Springboot框架

上学期，我在接触springboot框架之前没有接触过spring框架和Javaweb等知识，所以刚刚上手的时候还是非常的困惑不理解的。经过了一个学期断断续续的学习，加上假期（四舍五入也算）自己完成的博客，对springboot的结构和编写时的流程有了一些自己的理解：

img

img

  1. pojo层（entity层）：用于定义数据库对象对应的属性，是存放实体类的文件夹，例如：user类等。可以使用lombok来自动生成构造方法和getter setter
1
2
3
4
5
6
7
8
9
10
11
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
}
  1. mapper层（dao层）：是持久层，用于与数据库进行数据交互，mybatis就是一种应用广泛的持久层框架。在mapper层中，先设计接口，然后通过配置文件或者注解来实现crud操作。由于玩不明白配置文件，所以俺就选择了使用@Select注解（菜）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import com.example.mybatis1008.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface UserMapper {

    @Select("select * from user")
    List<User> queryAll();

    @Select("update user set password = #{password} where username = #{username}")
    void changePassword(String username, String password);
}
  1. service层：是业务逻辑层，完成功能的设计。也是先设计接口，再创建要实现的类。在service层中，我们可以调用mapper层中的接口来进行业务逻辑应用的处理。service的impl是对service接口进行实现，把mapper和service进行整合的文件。封装Service层的业务逻辑有利于业务逻辑的独立性和重复利用性。

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//UserService
public interface UserService {
    public List<User> queryAll();
    public void changePassword(String username,String password);
}
//UserServiceImpl
import com.example.mybatis1008.mapper.UserMapper;                         
import com.example.mybatis1008.pojo.User;                                 
import org.springframework.beans.factory.annotation.Autowired;            
import org.springframework.stereotype.Service;                            

import java.util.List;                                                    

@Service                                                                  
public class UserServiceImpl implements UserService{                      
    @Autowired                                                              
    UserMapper userMapper;                                                  
    @Override                                                               
    public List<User> queryAll(){                                           
        return userMapper.queryAll();                                         
    }                                                                       

    @Override                                                               
    public void changePassword(String username,String password) {           
        userMapper.changePassword(username,password);                         
        System.out.println("修改成功");                                           
    }                                                                       
}
  1. controller层：是控制层，调用service层中实现的功能来实现业务，控制请求和响应，进行前后端交互
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import com.example.mybatis1008.service.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
public class UserController {
    @Autowired UserServiceImpl userService;
    @RequestMapping("get")
    public void get(HttpServletResponse response, HttpServletRequest request) throws IOException {
        System.out.println(userService.queryAll());
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(String.valueOf(userService.queryAll()));
    }

    @RequestMapping("changePassword")
    public void changePassword(HttpServletRequest request,HttpServletResponse response) throws IOException{
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username+" "+password);
        userService.changePassword(username,password);
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(String.valueOf(userService.queryAll()));
    }
}

借用一张网图来清晰明了的总结一下结构~

img

mybatis

mybatis使用之前需要对项目进行一些配置，首先就是在maven中引入mybatis（具体maven文件在最后给出~），然后还需要在resources文件夹下新建一个mybatis-config.xml文件，其中的具体内容在mybatis的官网上可以找到，这里也给大家列出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.cj.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql://localhost:3306/exam?useSSL=false&amp;allowPublicKeyRetrieval=true&amp;serverTimezone=UTC"/>
                <property name="username" value="root"/>
                <property name="password" value="1234"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
<!--        这里是引入mapper的配置文件，由于我直接用了select接口，所以这个就没有用上-->
<!--        <mapper resource="/mapper/UserMapper.xml"/>-->
    </mappers>
</configuration>

这样我的mybatis就可以使用了（希望你滴也可以，这东西挺玄学的，第一次配的时候搞了半天），我采用的是直接在持久层使用@Select注解来写sql语句（见mapper层），自我感觉也挺方便清晰的，不过主流方案好像是在对应的配置文件中写，可能维护的时候更方便吧。

在使用时，直接创建mapper对象进行方法调用，即可实现其所对应的sql语句。

ajax

我更习惯用jQuery封装好的ajax，写法更简洁一点，原生的ajax区别也不算大。详见jQuery的ajax的简单应用

简单展示

  • 初始状态

img

  • 点击获取，获取现有的用户信息

img

  • 填写用户名和密码，点击修改，修改信息

img

界面没有做什么美化，项目结构也很简单，但麻雀虽小五脏俱全，使用这些技术就可以实现一个小小的web项目了。(本文源码下载)

由于缺少研究，作者目前只是简单知道一些注解的作用，对于xml文件的编写并不是很熟悉，很多地方暂时也不是很清楚。但是作者认为，不理解的时候也不需深究，熟练的使用对理解原理有着重要作用。当能做到熟练使用时，也许我们对自己未知的知识会产生一些新的理解。

希望本文能帮助大家对web项目的开发有一些新的认识！

最后附上maven配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>Mybatis1008</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>Mybatis1008</name>
    <description>Mybatis1008</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

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

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

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.1</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.xmlunit</groupId>
            <artifactId>xmlunit-core</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.activation</groupId>
            <artifactId>activation</artifactId>
            <version>1.1.1</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Springboot+ajax+mybatis实现简易网页

趁着周末又浅浅复习了一下结对编程用到的技术，重新制作了一个简单的demo练手，分享一下自己的理解~

Springboot框架

上学期，我在接触springboot框架之前没有接触过spring框架和Javaweb等知识，所以刚刚上手的时候还是非常的困惑不理解的。经过了一个学期断断续续的学习，加上假期（四舍五入也算）自己完成的博客，对springboot的结构和编写时的流程有了一些自己的理解：

img

img

  1. pojo层（entity层）：用于定义数据库对象对应的属性，是存放实体类的文件夹，例如：user类等。可以使用lombok来自动生成构造方法和getter setter
1
2
3
4
5
6
7
8
9
10
11
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
}
  1. mapper层（dao层）：是持久层，用于与数据库进行数据交互，mybatis就是一种应用广泛的持久层框架。在mapper层中，先设计接口，然后通过配置文件或者注解来实现crud操作。由于玩不明白配置文件，所以俺就选择了使用@Select注解（菜）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import com.example.mybatis1008.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface UserMapper {

    @Select("select * from user")
    List<User> queryAll();

    @Select("update user set password = #{password} where username = #{username}")
    void changePassword(String username, String password);
}
  1. service层：是业务逻辑层，完成功能的设计。也是先设计接口，再创建要实现的类。在service层中，我们可以调用mapper层中的接口来进行业务逻辑应用的处理。service的impl是对service接口进行实现，把mapper和service进行整合的文件。封装Service层的业务逻辑有利于业务逻辑的独立性和重复利用性。

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//UserService
public interface UserService {
    public List<User> queryAll();
    public void changePassword(String username,String password);
}
//UserServiceImpl
import com.example.mybatis1008.mapper.UserMapper;                         
import com.example.mybatis1008.pojo.User;                                 
import org.springframework.beans.factory.annotation.Autowired;            
import org.springframework.stereotype.Service;                            

import java.util.List;                                                    

@Service                                                                  
public class UserServiceImpl implements UserService{                      
    @Autowired                                                              
    UserMapper userMapper;                                                  
    @Override                                                               
    public List<User> queryAll(){                                           
        return userMapper.queryAll();                                         
    }                                                                       

    @Override                                                               
    public void changePassword(String username,String password) {           
        userMapper.changePassword(username,password);                         
        System.out.println("修改成功");                                           
    }                                                                       
}
  1. controller层：是控制层，调用service层中实现的功能来实现业务，控制请求和响应，进行前后端交互
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import com.example.mybatis1008.service.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
public class UserController {
    @Autowired UserServiceImpl userService;
    @RequestMapping("get")
    public void get(HttpServletResponse response, HttpServletRequest request) throws IOException {
        System.out.println(userService.queryAll());
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(String.valueOf(userService.queryAll()));
    }

    @RequestMapping("changePassword")
    public void changePassword(HttpServletRequest request,HttpServletResponse response) throws IOException{
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username+" "+password);
        userService.changePassword(username,password);
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(String.valueOf(userService.queryAll()));
    }
}

借用一张网图来清晰明了的总结一下结构~

img

mybatis

mybatis使用之前需要对项目进行一些配置，首先就是在maven中引入mybatis（具体maven文件在最后给出~），然后还需要在resources文件夹下新建一个mybatis-config.xml文件，其中的具体内容在mybatis的官网上可以找到，这里也给大家列出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.cj.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql://localhost:3306/exam?useSSL=false&amp;allowPublicKeyRetrieval=true&amp;serverTimezone=UTC"/>
                <property name="username" value="root"/>
                <property name="password" value="1234"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
<!--        这里是引入mapper的配置文件，由于我直接用了select接口，所以这个就没有用上-->
<!--        <mapper resource="/mapper/UserMapper.xml"/>-->
    </mappers>
</configuration>

这样我的mybatis就可以使用了（希望你滴也可以，这东西挺玄学的，第一次配的时候搞了半天），我采用的是直接在持久层使用@Select注解来写sql语句（见mapper层），自我感觉也挺方便清晰的，不过主流方案好像是在对应的配置文件中写，可能维护的时候更方便吧。

在使用时，直接创建mapper对象进行方法调用，即可实现其所对应的sql语句。

ajax

我更习惯用jQuery封装好的ajax，写法更简洁一点，原生的ajax区别也不算大。详见jQuery的ajax的简单应用

简单展示

  • 初始状态

img

  • 点击获取，获取现有的用户信息

img

  • 填写用户名和密码，点击修改，修改信息

img

界面没有做什么美化，项目结构也很简单，但麻雀虽小五脏俱全，使用这些技术就可以实现一个小小的web项目了。(本文源码下载)

由于缺少研究，作者目前只是简单知道一些注解的作用，对于xml文件的编写并不是很熟悉，很多地方暂时也不是很清楚。但是作者认为，不理解的时候也不需深究，熟练的使用对理解原理有着重要作用。当能做到熟练使用时，也许我们对自己未知的知识会产生一些新的理解。

希望本文能帮助大家对web项目的开发有一些新的认识！

最后附上maven配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>Mybatis1008</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>Mybatis1008</name>
    <description>Mybatis1008</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

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

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

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.1</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.xmlunit</groupId>
            <artifactId>xmlunit-core</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.activation</groupId>
            <artifactId>activation</artifactId>
            <version>1.1.1</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>