Springboot+ajax+mybatis implements simple web pages

Taking advantage of the weekend, I briefly reviewed the techniques used in pair programming, recreated a simple demo to practice, and shared my understanding~

Spring boot framework

Last semester, I had no knowledge of the spring framework and Javaweb before I came into contact with the springboot framework, so I was still very confused when I first started. After a semester of intermittent study, plus holidays (~~rounding is also considered~~), I have some understanding of the structure of springboot and the process of writing:

pojo layer (entity layer): used to define the attributes corresponding to database objects, and is a folder for storing entity classes, such as user classes, etc. You can use lombok to automatically generate constructors and getter setters

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
}

Mapper layer (dao layer): It is the persistence layer for data interaction with the database. Mybatis is a widely used persistence layer framework. In the mapper layer, the interface is designed first, and then crud operations are implemented through configuration files or annotations. Since I didn't understand the configuration file, I chose to use the @Select annotation (dish)

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);
}

Service layer: It is the business logic layer, which completes the function design. It is also to design the interface first, and then create the class to be implemented. In the service layer, we can call the interface in the mapper layer to process the business logic application. The impl of service is a file that implements the service interface and integrates mapper and service. Encapsulating the business logic of the Service layer is conducive to the independence and reusability of business logic.

//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("修改成功");                                           
    }                                                                       
}

Controller layer: It is the control layer, which calls the functions implemented in the service layer to realize the business, control the request and response, and perform front-end and back-end interaction

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()));
    }
}

Borrow a network diagram to clearly summarize the structure~

my shoe

Before using mybatis, you need to configure the project. First, introduce mybatis in maven (the specific maven file is given at the end~), and then you need to create a new mybatis-config.xml file under the resources folder. The specific content is in It can be found on the official website , and it is also listed here

<?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的简单应用

简单展示

初始状态

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

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

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

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

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

最后附上maven配置

<?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>