springboot+mybatis+thymeleaf增删改查及前后端交互

从今天开始写博客。
把自己今后完成的一个个小小小小小项目写出来记录思路以及在过程中遇到的问题还有学习到的新知识点。

springboot+mybatis+thymeleaf增删改查及前后端交互

学完了springboot框架就想开始独立写出来东西，看到网上说先写crud小项目，之前有几个crud的html，直接拿来用了，细节再修改。之后还会在这个基础上添加学过的知识点的。

准备工作

目录结构

pom.xml文件 都是在创建springboot项目的时候勾选的 无需后续导入依赖包

创建mysql表

编写配置文件application.yml

spring:
  thymeleaf:
    prefix: classpath:/templates/
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://192.168.0.103:3306/user
    driver-class-name: com.mysql.cj.jdbc.Driver
    initialization-mode: always
    type: com.alibaba.druid.pool.DruidDataSource

导入html文件

编写实体类 User【get和set方法就不贴出来了】

public class User {
    private Integer id;
    private String name;
    private String gender;
    private Integer age;
    private String address;
    private String qq;
    private String email;
    }

功能实现

编写mapper层实现CRUD语句的Usermapper

@Mapper
public interface UserMapper {
    
    @Select("select * from user")
    public List<User> getAllUser();

    @Select("select * from user where id=#{id}")
    public User getUserById(Integer id);

    @Delete("delete from user where id=#{id}")
    public int delUserById(Integer id);

    @Update("update user set gender=#{gender},age=#{age},address=#{address},qq=#{qq},email=#{email} where name=#{name}")
    public int UpdateUser(User user);

    @Options(useGeneratedKeys = true,keyProperty = "id")//是指定主键生成的并且主键是id
    @Insert("insert into user(name,gender,age,address,qq,email) values (#{name},#{gender},#{age},#{address},#{qq},#{email})")
    public int InsertUser(User user);

}

编写service层的UserService

@Service
public class UserService {
    @Autowired
    UserMapper userMapper;

    public List<User> userList(){
        return userMapper.getAllUser();
    }

    public int insert(User user){
        return userMapper.InsertUser(user);
    }

    public int delete(Integer id){
        return userMapper.delUserById(id);
    }

    public int update(User user){
        return userMapper.UpdateUser(user);
    }

    public User getById(Integer id){
        return userMapper.getUserById(id);
    }
}

编写controller层的UserController

@Controller
public class UserController {


    @Autowired
    UserService userService;

    @RequestMapping("/index")
    public String index(){
        return "index";
    }

    /*查询用户列表*/
    @RequestMapping("/list")
    public String userList(Model model){
        model.addAttribute("users",userService.userList());
        return "list";
    }

    /*删除用户*/
    @RequestMapping("/del")
    public String deleteUser(Integer id){
        userService.delete(id);
        return "redirect:/list";
    }

    /*添加用户页面*/
    @RequestMapping("/add")
    public String addUser(ModelMap map){
        map.addAttribute("user",new User());
        return "add";
    }

    /*更新用户页面*/
    @RequestMapping("/update")
    public String updateUser(ModelMap map){
        map.addAttribute("user",new User());
        return "update";
    }

    /*添加完用户后重定向到list页面*/
    @RequestMapping("/saveI")
    public String saveI(@ModelAttribute User user){

        userService.insert(user);
        return "redirect:/list";
    }

    /*更新完用户后重定向到list页面*/
    @RequestMapping("/saveU")
    public String saveU(@ModelAttribute User user){
        userService.update(user);
        return "redirect:/list";
    }

修改list.html

使用th：each循环把查询到的用户列表展示出来

修改删除添加按钮都加上在controller层写的映射地址以及跳转地址

修改add.html文件 即选择添加联系人后跳转的页面

修改update.html文件，即选择修改后跳转的页面

运行

经多次实验，所有功能均可使用（好像也没有几个功能

总结

这个最重要了，写博客的初衷也是梳理一些做本次项目的流程思路，因为在写的时候并没有这么顺畅，从昨天晚上有了想法开始做了一点后今天除了去上课其他时间都在做，每一步都失败了很多很多次，在把这个大致流程和内容写完后，我也发现了一个问题：
最后的数据库的id为什么把我之前删掉的数据id都跳过了！！！！是从7开始的，我都没有注意到这点。明天早上处理！

本次项目踩得坑：

1.昨天数据库怎么都连接不上，改了很多地方都不行，一直显示连接失败，含恨睡觉，早上又折腾了很久，终于发现，是配置文件yml放错了位置！放到了templates文件中了！！再也不会犯这个错误了。

2.在添加联系人时候一开始要么说不能进行POST请求或者说GET请求，因为我在一开始映射那里使用的是@PostMapping/@GetMapping。后来改成了@RequestMapping，OK解决了问题～下次记得直接就用@RequestMapping注解好了！

3.在更新sql语句那里一开始是选定条件where id，可是在后来的操作类中就没用到这个条件，导致在我修改成功的时候发现把所有的信息都修改了…于是我用name属性作为选定条件了，解决了这个问题。

4.在删除sql语句传入的参数是id，我在controller层里写的发现根本就没有用到id这个条件，当然结果也是点击删除按钮直接重定向到了list页面，并没有做删除操作。经过一番百度，我在controller里传入了id参数解决了这个问题（嗯嗯这一点是很基础的传入参数我都没有考虑到，以后一定会多考虑这点，以及继续多刷Java基础题。

本次项目还需要强化的地方
1.再多熟悉thymeleaf的属性，有些还需要百度，需要在实战中多多使用多多记住用过的。

2.参数传入传出一定不能忘记了。

3.crud的操作还需要多加熟悉和使用，明天会再过一遍的。

emmm还有很多想到在写（看别人的博客都很专业严谨，不知道我这样写的像流水账合适不合适…

本次项目继续要修复的问题或添加的功能
1.数据库删除了一条数据后id应该也相应抹除掉，插入的下一条数据不能跳过上条删掉的数据。

2完成login页面的编写，要先登录后才可以查看crud这个数据库。添加学习过得cache啦还有记住我功能，等等等想到再加上，反正要把这个登录页面后面的功能写的丰富一些，尽可能的多用到我学习到的知识点。明天开始丰富login页面做完之后再写接下来要添加的功能。

第一篇博客拜拜啦！！！