Springboot框架

欢752

已于 2024-04-15 20:46:54 修改

阅读量404

点赞数 5

文章标签： bootstrap springboot

于 2024-04-15 20:41:07 首次发布

本文链接：https://blog.csdn.net/weixin_61902522/article/details/137793684

版权

SpringBoot实现页面商品管理（CURD）

整合完成CURD
所需的文件如下
在这里插入图片描述

页面渲染

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

导入Jar包，添加Maven依赖

<dependencies>
        <!--springboot-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--JPA-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!--thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>

自定义数据库语言

spring:
 datasource:
   driver-class-name: com.mysql.cj.jdbc.Driver
   url: jdbc:mysql:///ssm
   username: root
   password: root123456

 jpa:
   hibernate:
     ddl-auto: update
   show-sql: true

注意整体格式
导入Jar包：

    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>
</dependencies>

在这里插入图片描述

创建实体类

@Entity
@Table(name="t_user")
@Data //get、set、toString
@NoArgsConstructor//无参
@AllArgsConstructor//有参
public class User {
    /**
     * @Id:声明主键对应的属性
     * @GeneratedValue：主键的生成策略
     * GenerationType.IDENTITY:主键的自动增长
     */
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private  Integer id;
    private  String email;
    @Column(name = "last_name")
    private String lastName;
}

开启驼峰命名：@Column
在这里插入图片描述

数据访问层

package com.dlxy.mapper;

import com.dlxy.entity.User;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;

import javax.transaction.Transactional;
import java.util.List;

@Repository
public interface UserRepository extends JpaRepository<User,Integer> {
    @Query(value=" SELECT * FROM t_user WHERE last_name LIKE %?1%",nativeQuery=true)
    List<User> findPageByCondition(String lastName, Pageable pageable);

    @Query (value = "select  * from t_user where last_name=?1 and email=?2  ",nativeQuery =true)
    User login(String lastName,String  email);

    @Query(value="delete from t_user where id IN (?1)", nativeQuery=true)
    @Transactional
    @Modifying
    void deleteBatchByIds(String[] userIds);
}

服务层

package com.dlxy.service;

import com.dlxy.entity.User;

import java.util.List;

public interface IUserService {

    //分页查询所有用户信息
    List<User> findAllUserByPages(Integer pageNum,Integer pageSize,String lastName);


    //不分页拿到所有数据
    List<User> findAllUsers(String lastName);

   //用户添加/修改
    void addOrUpdateUser(User user);
  //修改
    User findUserById(Integer id);
    //删除
    void deleteUserById(Integer id);
    //登录
    User login(String lastname,String email);
//批量删除
    void deleteBatchUserByIds(String ids);
}

实现层

import com.dlxy.entity.User;
import com.dlxy.mapper.UserRepository;
import com.dlxy.service.IUserService;

import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
@Service
public class UserServiceImpl implements IUserService {

    @Resource
    private UserRepository userRepository;

    @Override
    public List<User> findAllUserByPages(Integer pageNum, Integer pageSize, String lastName) {
        //获取分页对象
        Pageable pageable = PageRequest.of(pageNum - 1, pageSize);
        if (lastName == null || "".equals(lastName.trim()))
            return userRepository.findAll(pageable).getContent();
        return userRepository.findPageByCondition(lastName.trim(), pageable);
    }

    @Override
    public List<User> findAllUsers(String lastName) {
        if (lastName == null || "".equals(lastName.trim()))
            return userRepository.findAll();
        return userRepository.findPageByCondition(lastName.trim(), null);

    }


    //添加-修改
    @Override
    public void addOrUpdateUser(User user) {
        /**
         * save(object obj)
         * 添加:obj对象中不包含id属性时
         * 修改:obj对象中包含id属性
         */
        userRepository.save(user);
    }

    @Override
    public User findUserById(Integer id) {
        return userRepository.getOne(id);
    }

    //删除
    @Override
    public void deleteUserById(Integer id) {
        userRepository.deleteById(id);
    }


// 登录
    @Override
    public User login(String lastName, String email) {
    return userRepository.login(lastName,email);
}
    // 批量删除用户
    @Override
    public void deleteBatchUserByIds(String ids) {
        String[] userIds=ids.split(",");
        userRepository.deleteBatchByIds(userIds);
    }
    }

使用thymleaf的属性

表单创建

在这里插入图片描述
删除

批量删除

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-1.8.3.min.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script>
        //页面加载函数
        $(function(){
            //1.点击删除按钮发送请求
             $(".del_user").bind("click",function () {
                let lastName = $(this).parent().prev().prev().html();
                return confirm("确定删除"+lastName+"吗？");
            });
             //2.选中/取消选中
             $(".check_all").bind("click",function(){
                 //2.1 获取表头行复选框的勾选状态
                 let flag=$(this).prop("checked");
                 //2.2 将所有的数据行的勾选状态设置为表头行的勾选状态
                 $(".check_data").prop("checked",flag);
             });
             //3.批量删除
            $(".del_all").bind("click",function(){
                // 3.1 获取选中的数据行的复选框
                let $arr = $(".check_data:checked");
                if ($arr.length == 0) {
                    alert("至少删除一项");
                    return;//后续代码不再执行
                }
                let userIds = [];
                //3.2 遍历所有的选中的数据行复选框，获取id存入到数组中（userIds）
                $arr.each(function() {
                    let id = $(this).val();
                    userIds.push(id);
                });
                //alert(userIds);
                location.href = "/user/deleteBatchById/" + userIds;
            });
            });
    </script>
</head>
<body>
<form class="form-inline" role="form" method="post" th:action="@{/user/findAllUser}">
    <div class="form-group">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="name"
               th:name="lastName" placeholder="请输入名称" th:value="${lastName}">
    </div>
    <button type="submit" class="btn btn-default">搜索</button>
    <button type="button" class="btn btn-success" onclick="location.href='/user/toAddUser'">添加用户</button>
    <button type="button" class="btn btn-danger del_all">批量删除</button>
</form>

<table class="table table-striped">
    <thead>
    <tr>
        <th>
            <input type="checkbox" class="check_all">
        </th>
        <th>ID</th>
        <th>LastName</th>
        <th>Email</th>
        <th>Operation</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="u :${userList}">
        <td>
            <input type="checkbox" class="check_data" th:value="${u.id}">
        </td>
        <td th:text="${uStat.count}"></td>
        <td th:text="${u.lastName}"></td>
        <td th:text="${u.email}"></td>
        <td>
            <a th:href="@{/user/preUpdateUser/}+${u.id}" >修改</a>
            |
            <a class="del_user" th:href="@{/user/deleteUserById/}+${u.id}" >
<!--                onclick="return confirm('确定删除')">-->
                删除</a>
        </td>
    </tr>
    </tbody>
</table>
<div align="center">
    <ul class="pagination">
        <li th:if="${pageNum > 1}"><a th:href="@{/user/findAllUser(pageNum=${pageNum - 1},lastName=${lastName})}">&laquo;</a></li>
         <li th:if="${pageNum<=1}" ><a href="#">&laquo;</a></li>
        <li th:if="${totalPages>=1}" th:each="k :${#numbers.sequence(1,totalPages)}" th:class="${pageNum == k ? 'active':''}">
            <a th:href="@{/user/findAllUser(pageNum = ${k},lastName=${lastName})}" th:text="${k}"></a>
        </li>
        <li th:if="${pageNum <  totalPages}"><a th:href="@{/user/findAllUser(pageNum=${pageNum + 1},lastName=${lastName})}">&raquo;</a></li>
        <li th:if="${pageNum >= totalPages}"><a href="#">&raquo;</a></li>
    </ul>
</div>
</body>
</html>

添加-表单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加员工</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-1.8.3.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
</head>
<body>

<form class="form-horizontal" role="form" method="post" th:action="@{/user/addOrUpdateUser}">
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">名字</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="lastname"
                   placeholder="请输入姓名" name="lastName" required>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">邮箱</label>
        <div class="col-sm-8">
            <input type="email" class="form-control" id="email"
                   placeholder="请输入邮箱" name="email" required>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">添加</button>
            <button type="reset" class="btn btn-default">重置</button>
        </div>
    </div>
</form>

</body>
</html>

修改-表单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<meta charset="UTF-8">
<title>修改员工信息</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
<script th:src="@{/js/jquery-1.8.3.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<body>
<form class="form-horizontal" role="form"  method="post" th:action="@{/user/addOrUpdateUser}">
    <!--    <div class="form-group">-->
    <!--        <label for="id" class="col-sm-2 control-label">ID</label>-->
    <!--        <div class="col-sm-10">-->
    <!--            <input type="id" class="form-control" id="id"-->
    <!--                   placeholder="请输入修改后ID" th:name="id" required >-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">名字</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="lastname"
                   placeholder="请输入修改后姓名" th:name="lastName" required th:value="${user.lastName}">
            <input type="hidden" name="id" th:value="${user.id}">

        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">邮箱</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email"
                   placeholder="请输入修改后邮箱" th:name="email" required th:value="${user.email}">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-6 col-sm-6">
            <button type="submit" class="btn btn-default">修改</button>
            <button type="reset" class="btn btn-default">重置</button>
        </div>
    </div>
</form>

</body>
</html>

登录-表单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-1.8.3.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
</head>
<body>

<form class="form-horizontal" role="form" method="post" th:action="@{/user/login}">

    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">名字</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="lastname"
                   placeholder="请输入姓名" th:name="lastName" required>
        </div>
<!--        <p style="color: red" th:text="${login_error}" th:if="${not #strings.isEmpty(login_error)}"></p>-->
<!--        <span style="color: #ff0000" th:text="${login_error}"></span>-->
        <div class="col-sm-2">
            <span style="color: red" th:text="${login_error}"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">邮箱</label>
        <div class="col-sm-8">
            <input type="email" class="form-control" id="email"
                   placeholder="请输入邮箱" th:name="email" required>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
            <button type="reset" class="btn btn-default">注册</button>
        </div>
    </div>
</form>

</body>
</html>

登录前处理-表单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a th:href="@{/user/toLogin}">请登录</a >
</body>
</html>

SpringBoot框架所需要的包

添加启动类

package com.dlxy;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class MainApplication {

    public static void main(String[] args){## 标题
        SpringApplication.run(MainApplication.class,args);
    }
}

添加Controller层

package com.dlxy.controller;

import com.dlxy.entity.User;
import com.dlxy.service.IUserService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import java.util.List;

@Controller
@RequestMapping("/user")
public class UserController {
    @Resource
    private IUserService userService;

    @RequestMapping("/findAllUser")
    public String findAllUsers(ModelMap map, String lastName,
                               @RequestParam(defaultValue = "1") Integer pageNum,
                               @RequestParam(defaultValue = "3") Integer pageSize) {
        List<User> userList = userService.findAllUserByPages(pageNum, pageSize, lastName);
        //总条数
        //.size() 从集合中获取值
        Integer totalRows = userService.findAllUsers(lastName).size();
        //总页数
        Integer totalPages = totalRows % pageSize == 0 ? totalRows / pageSize : totalRows / pageSize + 1;
        map.addAttribute("userList", userList);
        map.addAttribute("totalPages", totalPages);
        map.addAttribute("pageNum", pageNum);
        map.addAttribute("lastName", lastName);
        return "user_list";
    }

    //添加-修改
    @RequestMapping("/toAddUser")
    public String toAddUser() {
        return "user_add";
    }

    @RequestMapping("/addOrUpdateUser")
    public String addOrUpdateUser(User user) {
        userService.addOrUpdateUser(user);
        return "redirect:/user/findAllUser";
    }

    @RequestMapping("/preUpdateUser/{id}")
/**
 *  @PathVariable("id"):从语求路径中获取指定名字的参数值
 */
    public String preUpdateUser(@PathVariable("id") Integer id,ModelMap map) {
            // 设置用户ID
            User user=userService.findUserById(id);
            map.addAttribute("user",user);
            return "user_update";
        }

    // 删除用户信息
    @RequestMapping("/deleteUserById/{id}")
    public String deleteUserById(@PathVariable("id") Integer id) {
        // 调用服务层删除用户方法
        userService.deleteUserById(id);
        // 重定向到用户列表页面
        return "redirect:/user/findAllUser";
    }

    @RequestMapping("/login")
    public  String login(String lastName, String  email, ModelMap map,HttpSession session){
        User user=userService.login(lastName, email);
        if (user !=null){
            //登录成功
            //将用户信息存储到HttpSess中
            session.setAttribute("user",user);
            return "redirect:/user/findAllUser";
        }else {
            //登录失败
            map.addAttribute("login_error","用户名/密码错误 ");
            return "login";
        }
    }

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

    @RequestMapping("/deleteBatchById/{ids}" )
    public  String deleteBatchById(@PathVariable("ids") String ids){
        userService.deleteBatchUserByIds(ids);
        return "redirect:/user/findAllUser";
    }
}

配置拦截器

package com.dlxy.interceptor;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class LoginConfigurer implements WebMvcConfigurer {

    public void addInterceptors(InterceptorRegistry registry){
        //1.配置拦截器类
        InterceptorRegistration registration = registry.addInterceptor(new LoginInterceptor());
        //2.配置拦截路径
        registration.addPathPatterns("/**");
        //3.配置放行路径
        registration.excludePathPatterns("/","/user/toLogin","index.html","/user/login", "*.css", "*.js");
    }
}

package com.dlxy.interceptor;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
//Alt +Insert
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //1.获取HttpSession
        HttpSession session = request.getSession();
        //2.从HttpSession中取出绑定对象
        Object obi = session.getAttribute("user");
        //3.判断
        if (obi == null) {
            response.sendRedirect("/user/toLogin");
            return false;
        }
        return true;
    }
}```