快速入门------SpringBoot整合MVC(2)

       在上一篇SpringBoot入门学习(1)中我们简单实现了用户数据的查询并且在浏览器页面显示json数据,那么这篇我们将介绍SpringBoot整合MVC的一个小案例。


一.简单介绍和项目准备

       springmvc属于web层的开发技术,它是一个轻量级web框架。详细概念请自行查找,文章重点放在了小案例中。

       首先是项目的创建,和之前的方式一样,不同的是要新增加两个依赖。如果你创建时没有选则依赖,可以自行手动添加依赖,添加方法在下面。

快速入门------SpringBoot整合MVC(2)_第1张图片

快速入门------SpringBoot整合MVC(2)_第2张图片

没有选择时添加依赖方法如下图:

        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.projectlombok
            lombok
            true
        

快速入门------SpringBoot整合MVC(2)_第3张图片

注意依赖添加的位置,要添加在中。

二.案例实现

       项目结构和第一个案例是一样的,如下图:

快速入门------SpringBoot整合MVC(2)_第4张图片

创建完成后开始编写实体类:

import lombok.Data;

@Data
public class User {

        private String id;
        private String name;
        private String phone;
}

导入lombok依赖后就可以使用@Data注解来代替set,get等方法,减少了代码量。

本次案例要实现的是user数据在浏览器展示,并且可以添加user,根据id删除user,所以在service接口中的方法定义如下:

import java.util.List;

public interface UserService {
    List getAllUser();     //查询所以用户
    User getUserById(String id); //通过id查询用户
    void addUser(User user);     //添加用户
    void deleteUser(String id ); //删除用户
}

       定义完接口就需要实现方法,本次案例还是自行模拟数据,运用list存储users。采用构造函数初始化数据。查询所有直接返回list即可实现。id查询则需要传参,遍历存放users的list然后比对传入的id来显示user。添加user需要传入一个user对象,然后调用add()方法添加到list即可。删除user与根据id查询user的思路差不多,遍历存放users的list然后比对传入的id来找到user,最后调用remove()来删除list中的user。

     具体代码如下:

@Service
public class UserServiceImpl implements UserService {

    private final List userList = new ArrayList<>();

    public UserServiceImpl() {

        User user1 = new User();
        user1.setId("01");
        user1.setName("猪八戒");
        user1.setPhone("123");
        User user2 = new User();
        user2.setId("02");
        user2.setName("孙悟空");
        user2.setPhone("123");
        userList.add(user1);
        userList.add(user2);
    }

    @Override
    public List getAllUser() {

        return userList;
    }

    @Override
    public User getUserById(String id) {
        //Service层的方法根据id遍历列表
        for (User user : userList) {
            if (user.getId().equals(id)) {
                return user;
            }
        }
        return null; // 如果未找到匹配的用户,返回null
    }

    @Override
    public void addUser(User user) {
        //Service层的方法,获取User对象添加进userList
        userList.add(user);
    }

    @Override
    public void deleteUser(String id) {
        userList.removeIf(user -> user.getId().equals(id));
    }
}

       接下来就是controller层的实现,这里需要介绍两个对象------Model和ModelAndView。

       Model其实就是MVC中的M,也就是模型的意思,Model只能用来传输数据。

       ModelAndView是MVC中的MV,是模型和视图,它不仅可以传递数据,而且还可以用来寻址,能够转向我们要跳转的页面。

       在查询所有user中我们可以使用ModelAndView来进行数据封装和页面展示,如下图:

快速入门------SpringBoot整合MVC(2)_第5张图片

然后就要准备前端,既然设置了视图名称为“AllUser”那么html页面名称就是“AllUser.html”

快速入门------SpringBoot整合MVC(2)_第6张图片

注意:templates为web模板存放的位置。

代码如下:




    
    
    
    User List


用户列表

ID Name Phone

这里的${Users}就是前面封装的Users,通过遍历来将数据全部取出并且展示在表格中。

运行结果如下:

快速入门------SpringBoot整合MVC(2)_第7张图片

在根据id查询user中我们将使用Model来实现。

快速入门------SpringBoot整合MVC(2)_第8张图片

@PathVariable注解作用就是映射 URL 绑定的占位符,如上图写法,我们浏览器访问时需要输入http://localhost:8080/user/(此处为用户id),如果不加注解,则为http://localhost:8080/user?id=(此处为用户id)

代码最后return返回的为userDetail.html页面,因为controller层并没有添加@ResponseBody

x响应为json数据。所以我们的数据要在userDetail.html页面展示。




    
    
    
    User Details


用户信息

ID Name Phone

User为Model封装的数据

运行结果为:

快速入门------SpringBoot整合MVC(2)_第9张图片

添加用户我们需要的是一个表单,填写完数据后按照表单规定的地址提交进行访问后台从而实现添加用户。

@ModelAttribute 注解主要是将请求参数绑定到 Model 对象上

快速入门------SpringBoot整合MVC(2)_第10张图片

get方法是为了进入userAdd前端页面,填写完数据点击提交后就会调用post请求来添加数据,然后将页面重定向到添加页面。前端userAdd.html页面如下:




    
    
    Add User


添加用户




其中的User就是前面使用@ModelAttribute封装的数据。点击提交后会跳转到action设置的地址,方法为post。

运行结果如下:

快速入门------SpringBoot整合MVC(2)_第11张图片

快速入门------SpringBoot整合MVC(2)_第12张图片

最后的删除用户和添加用户思路基本一样:

快速入门------SpringBoot整合MVC(2)_第13张图片




    
    
    Add User


删除用户


运行结果如下:

快速入门------SpringBoot整合MVC(2)_第14张图片

快速入门------SpringBoot整合MVC(2)_第15张图片

三.结束

       本次小案例简单实现了对user的各种操作,帮助快速入门springboot集成mvc。

controller层代码如下:

import com.example.springbootmvc.service.Impl.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import java.util.*;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserServiceImpl userService;

    @RequestMapping("/all")
    public ModelAndView getAllUser(){
        ModelAndView model = new ModelAndView();
        List users=userService.getAllUser();
        model.setViewName("AllUser");
        model.addObject("Users",users);
        return model;
    }


    @GetMapping("/{id}")
    public String getById(@PathVariable String id, Model model){
        User user= userService.getUserById(id);
        model.addAttribute("User",user);

        return "userDetail";
    }

    //拦截/user/add ,跳转userAdd.html
    @GetMapping("/add")
    public String userAdd(){
        return "userAdd.html";
    }


    @PostMapping("/add")
    public String addUser(@ModelAttribute User user){
        userService.addUser(user);
        return "redirect:add";
    }

    @GetMapping("/delete")
    public String deleteuser(){
        return "userdelete";
    }
    @PostMapping("/delete")
    public String deleteUser(String id){
        userService.deleteUser(id);
        return "redirect:all";
    }


}

你可能感兴趣的:(入门SpringBoot,spring,boot,后端,java,mvc)