文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

黑马程序员最新版JavaWeb综合案例(前后端完整版)

2023-08-16 13:51

关注

JavaWeb 综合案例

学习视频链接: 黑马程序员最新版JavaWeb基础教程,Java web从入门到企业实战完整版
完整代码链接: https://github.com/HaiLei-Fly/JavaWeb-brand

1、功能介绍

案例功能:

2、工程准备

2.1 所需环境

MySQL 8.0.22
JDK 11.0.10
MAVEN 3.6.0
Navicat 16
IDEA 2021.3.3
pom.xml文件如下

    4.0.0    org.example    brand-case    1.0-SNAPSHOT    war            11        11                        javax.servlet        javax.servlet-api        3.1.0        provided                    javax.servlet.jsp        jsp-api         2.2        provided                    jstl        jstl        1.2                taglibs        standard        1.1.2                org.mybatis        mybatis        3.5.5                    mysql        mysql-connector-java        8.0.22                                com.alibaba            fastjson            1.2.62                                                    org.apache.tomcat.maven                tomcat7-maven-plugin                2.2                         

2.2 工程结构

Maven Web开发中的项目结构如下:

在这里插入图片描述
Java目录结构如下:

在这里插入图片描述
resources和webapp目录结构如下:

在这里插入图片描述

3、数据库

3.1 建立连接

Navicat 与本地MySQL数据库建立连接

在这里插入图片描述
输入MySQL数据库密码,连接成功

在这里插入图片描述
新建数据库db1

在这里插入图片描述

3.2 建表程序

创建品牌表sql语句

-- 删除tb_brand表drop table if exists tb_brand;-- 创建tb_brand表create table tb_brand(    -- id 主键    id           int primary key auto_increment,    -- 品牌名称    brand_name   varchar(20),    -- 企业名称    company_name varchar(20),    -- 排序字段    ordered      int,    -- 描述信息    description  varchar(100),    -- 状态:0:禁用  1:启用    status       int);-- 添加数据insert into tb_brand (brand_name, company_name, ordered, description, status)values        ('华为', '华为技术有限公司', 100, '万物互联', 1),       ('小米', '小米科技有限公司', 50, 'are you ok', 1),       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),       ('小米', '小米科技有限公司', 50, 'are you ok', 1),       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),       ('华为', '华为技术有限公司', 100, '万物互联', 1),       ('小米', '小米科技有限公司', 50, 'are you ok', 1),       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),       ('华为', '华为技术有限公司', 100, '万物互联', 1),       ('小米', '小米科技有限公司', 50, 'are you ok', 1),       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),       ('小米', '小米科技有限公司', 50, 'are you ok', 1),       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),       ('华为', '华为技术有限公司', 100, '万物互联', 1),       ('小米', '小米科技有限公司', 50, 'are you ok', 1),       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),       ('华为', '华为技术有限公司', 100, '万物互联', 1),       ('小米', '小米科技有限公司', 50, 'are you ok', 1),       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),       ('小米', '小米科技有限公司', 50, 'are you ok', 1),       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),       ('华为', '华为技术有限公司', 100, '万物互联', 1),       ('小米', '小米科技有限公司', 50, 'are you ok', 1),       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1)        ;

在这里插入图片描述
创建用户表sql语句

-- 删除tb_brand表drop table if exists tb_user;-- 创建tb_brand表create table tb_user(    -- id 主键    id           int primary key auto_increment,    -- 用户名称    username   varchar(20),    -- 用户密码    password varchar(20));-- 添加数据insert into tb_user (username, password)values        ('ming', '1234567890'),       ('wang', '1234567890') ;

在这里插入图片描述
连接数据库配置文件,在resources目录下创建 mybatis-config.xml

                                                                                                                                                                   

4、用户登录功能

整体流程:

4.1 后端实现

dao方法实现:

在java目录下的 com.hailei.mapper.UserMapper 接口中定义抽象方法,并使用 @Select 注解编写 sql 语句

    @Select("select * from tb_user where username = #{username} and password = #{password}")    User select(@Param("username") String username,@Param("password")  String password);

service方法实现:

在java目录下的 com.hailei.service 下再创建 impl 包;impl 表示是放 service 层接口的实现类的包。 在该包下创建名为 UserServiceImpl

public class UserServiceImpl implements UserService {    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();        public User login(String username, String password){        //2. 获取SqlSession        SqlSession sqlSession = factory.openSession();        //3. 获取UserMapper        UserMapper mapper = sqlSession.getMapper(UserMapper.class);        //4. 调用方法        User user = mapper.select(username, password);        //释放资源        sqlSession.close();        return  user;    }}

在java目录下的 com.hailei.service 包下创建 UserService 接口,在该接口中定义登录的抽象方法

    User login(String username, String password);}

servlet方法实现:

在java目录下的 com.hailei.web.servlet 包下定义名为 LoginServlet 的登录的 servlet

@WebServlet("/loginServlet")public class LoginServlet extends HttpServlet {    private UserService service = new UserServiceImpl();    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1. 获取用户名和密码        String username = request.getParameter("username");        String password = request.getParameter("password");        //获取复选框数据        String remember = request.getParameter("remember");        //2. 调用service查询        User user = service.login(username, password);        //3. 判断        if(user != null){            //登录成功,跳转到查询所有的BrandServlet            //判断用户是否勾选记住我            if("1".equals(remember)){                //勾选了,发送Cookie                //1. 创建Cookie对象                Cookie c_username = new Cookie("username",username);                Cookie c_password = new Cookie("password",password);                // 设置Cookie的存活时间                c_username.setMaxAge( 60 * 60 * 24 * 7);                c_password.setMaxAge( 60 * 60 * 24 * 7);                //2. 发送                response.addCookie(c_username);                response.addCookie(c_password);            }            //将登陆成功后的user对象,存储到session            HttpSession session = request.getSession();            session.setAttribute("user",user);            String contextPath = request.getContextPath();            response.sendRedirect(contextPath+"/brand.html");        }else {            // 登录失败,            // 存储错误信息到request            request.setAttribute("login_msg","用户名或密码错误");            // 跳转到https://blog.csdn.net/qq_42078934/article/details/login.jsp            request.getRequestDispatcher("/https://blog.csdn.net/qq_42078934/article/details/login.jsp").forward(request,response);        }    }    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        this.doGet(request, response);    }}

在java目录下的 com.hailei.web.filter 包下定义名为 LoginFilter 的过滤器

@WebFilter("    @Select("select * from tb_user where username = #{username}")    User selectByUsername(String username);        @Insert("insert into tb_user values(null,#{username},#{password})")    void add(User user);

service方法实现:

在java目录下的 com.hailei.service 下再创建 impl 包;impl 表示是放 service 层接口的实现类的包。 在该包下创建名为 UserServiceImpl

    public boolean register(User user){        //2. 获取SqlSession        SqlSession sqlSession = factory.openSession();        //3. 获取UserMapper        UserMapper mapper = sqlSession.getMapper(UserMapper.class);        //4. 判断用户名是否存在        User u = mapper.selectByUsername(user.getUsername());        if(u == null){            // 用户名不存在,注册            mapper.add(user);            sqlSession.commit();        }        sqlSession.close();        return u == null;    }

在java目录下的 com.hailei.service 包下创建 UserService 接口,在该接口中定义注册的抽象方法

        boolean register(User user);}

servlet方法实现:

在java目录下的 com.hailei.web.servlet 包下定义名为 LoginServlet 的登录的 servlet

@WebServlet("/registerServlet")public class RegisterServlet extends HttpServlet {    private UserService service = new UserServiceImpl();    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {       //1. 获取用户名和密码数据        String username = request.getParameter("username");        String password = request.getParameter("password");        User user = new User();        user.setUsername(username);        user.setPassword(password);        // 获取用户输入的验证码        String checkCode = request.getParameter("checkCode");        // 程序生成的验证码,从Session获取        HttpSession session = request.getSession();        String checkCodeGen = (String) session.getAttribute("checkCodeGen");        // 比对        if(!checkCodeGen.equalsIgnoreCase(checkCode)){            request.setAttribute("register_msg","验证码错误");            request.getRequestDispatcher("/https://blog.csdn.net/qq_42078934/article/details/register.jsp").forward(request,response);            // 不允许注册            return;        }        //2. 调用service 注册        boolean flag = service.register(user);        //3. 判断注册成功与否        if(flag){            //注册功能,跳转登陆页面            request.setAttribute("register_msg","注册成功,请登录");            request.getRequestDispatcher("/https://blog.csdn.net/qq_42078934/article/details/login.jsp").forward(request,response);        }else {            //注册失败,跳转到注册页面            request.setAttribute("register_msg","用户名已存在");            request.getRequestDispatcher("/https://blog.csdn.net/qq_42078934/article/details/register.jsp").forward(request,response);        }    }    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        this.doGet(request, response);    }}

在java目录下的 com.hailei.web.servlet 包下定义名为 CheckCodeServlet 的验证码生成的 servlet

@WebServlet("/checkCodeServlet")public class CheckCodeServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // 生成验证码        ServletOutputStream os = response.getOutputStream();        String checkCode = CheckCodeUtil.outputVerifyImage(100, 50, os, 4);        // 存入Session        HttpSession session = request.getSession();        session.setAttribute("checkCodeGen",checkCode);    }    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        this.doGet(request, response);    }}

5.2 前端实现

<%@ page contentType="text/html;charset=UTF-8" language="java" %>        欢迎注册    
已有帐号? 登录
用户名
${register_msg}
密码
验证码 看不清?

功能展示:

在这里插入图片描述

6、查询所有功能

整体流程:

6.1 后端实现

dao方法实现:

在java目录下的 com.hailei.mapper.BrandMapper 接口中定义抽象方法,并使用 @Select 注解编写 sql 语句

        @Select("select * from tb_brand")    @ResultMap("brandResultMap")    List selectAll();

由于表中有些字段名和实体类中的属性名没有对应,所以需要在 resources目录下的com/hailei/mapper/BrandMapper.xml 映射配置文件中定义结果映射 ,使用resultMap 标签。映射配置文件内容如下:

                          

service方法实现:

在java目录下的 com.hailei.service 下再创建 impl 包;impl 表示是放 service 层接口的实现类的包。 在该包下创建名为 BrandServiceImpl

public class BrandServiceImpl implements BrandService {    //1. 创建SqlSessionFactory 工厂对象    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();        @Override    public List selectAll() {        //2. 获取SqlSession对象        SqlSession sqlSession = factory.openSession();        //3. 获取BrandMapper        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);        //4. 调用方法        List brands = mapper.selectAll();        //5. 释放资源        sqlSession.close();        return brands;    }}

在java目录下的 com.hailei.service 包下创建 BrandService 接口,在该接口中定义查询所有的抽象方法

public interface BrandService {        List selectAll();}

servlet方法实现:

在java目录下的 com.hailei.web.servlet 包下定义一个通用的 servlet 类,在定义其他的 servlet 是不需要继承 HttpServlet,而继承定义的 BaseServlet,在 BaseServlet 中调用具体 servlet(如BrandServlet)中的对应方法。从而方便管理和编写web层的 servlet

public class BaseServlet extends HttpServlet {    //根据请求的最后一段路径来进行方法分发    @Override    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        //1. 获取请求路径        String uri = req.getRequestURI(); // /brand-case/brand/selectAll        //2. 获取最后一段路径,方法名        int index = uri.lastIndexOf('/');        String methodName = uri.substring(index + 1); //  /selectAll?        //2. 执行方法        //2.1 获取BrandServlet /UserServlet 字节码对象 Class        Class cls = this.getClass();        //2.2 获取方法 Method对象        try {            Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);            //2.3 执行方法            method.invoke(this,req,resp);        } catch (NoSuchMethodException e) {            e.printStackTrace();        } catch (IllegalAccessException e) {            e.printStackTrace();        } catch (InvocationTargetException e) {            e.printStackTrace();        }    }}

在java目录下的 com.hailei.web.servlet 包下定义名为 BrandServlet 的查询所有的 servlet。该 servlet 逻辑如下:

@WebServlet("/brand    @Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")    void add(Brand brand);

service方法实现:

BrandService 接口中定义 add() 添加数据的业务逻辑方法

        void add(Brand brand);

BrandServiceImpl 类中重写 add() 方法,并进行业务逻辑实现

@Override    public void add(Brand brand) {        //2. 获取SqlSession对象        SqlSession sqlSession = factory.openSession();        //3. 获取BrandMapper        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);        //4. 调用方法        mapper.add(brand);        sqlSession.commit();//提交事务        //5. 释放资源        sqlSession.close();    }

servlet方法实现:

在java目录下的 com.hailei.web.servlet 包下的名为 BrandServlet 中新增品牌的 servlet。该 servlet 逻辑如下:

servlet 代码实现如下:

    public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1. 接收品牌数据        BufferedReader br = request.getReader();        String params = br.readLine();//json字符串        //转为Brand对象        Brand brand = JSON.parseObject(params, Brand.class);        //2. 调用service添加        brandService.add(brand);        //3. 响应成功的标识        response.getWriter().write("success");    }

7.2 前端实现

添加数据功能的逻辑代码写在 addBrand() 函数中。在此方法中需要发送异步请求并将表单中输入的数据作为参数进行传递。在 then 函数中的匿名函数是成功后的回调函数,而 resp.data 就可以获取到响应回来的数据,如果值是 success 表示数据添加成功。成功后关闭新增对话框窗口,重新查询数据,并弹出消息提示添加成功

        批量删除        新增                                                                                                                                                                                                                                                        提交                取消                        
// 添加数据            addBrand() {                var _this = this;                // 发送ajax请求,添加数据                axios({                    method:"post",                    url:"http://localhost:8080/brand-case/brand/add",                    data:_this.brand                }).then(function (resp) {                    if(resp.data == "success"){                        //添加成功                        //关闭窗口                        _this.dialogVisible = false;                        // 重新查询数据                        _this.selectAll();                        // 弹出消息提示                        _this.$message({message: '恭喜你,添加成功',type: 'success'                        });                    }                })            },

功能展示:

在这里插入图片描述

8、修改品牌功能

整体流程:

8.1 后端实现

dao方法实现:

在java目录下的 com.hailei.mapper.BrandMapper 接口中定义抽象方法,并使用 @Select 注解编写 sql 语句

        @Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description = #{description},status = #{status} where id = #{id}")    void updateById(Brand brand);

service方法实现:

BrandService 接口中定义 updateById() 修改数据的业务逻辑方法

    void updateById(Brand brand); 

BrandServiceImpl 类中重写 updateById() 方法,并进行业务逻辑实现

@Override    public void updateById(Brand brand) {        //2. 获取SqlSession对象        SqlSession sqlSession = factory.openSession();        //3. 获取BrandMapper        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);        //4. 调用方法        mapper.updateById(brand);        sqlSession.commit();//提交事务        //5. 释放资源        sqlSession.close();    }

servlet方法实现:

在java目录下的 com.hailei.web.servlet 包下的名为 BrandServlet 中修改品牌的 servlet。该 servlet 逻辑如下:

servlet 代码实现如下:

       public void updateById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1. 接收数据        BufferedReader br = request.getReader();        String params = br.readLine();//json字符串        //转为 int        Brand brand = JSON.parseObject(params, Brand.class);        //2. 调用service添加        brandService.updateById(brand);        //3. 响应成功的标识        response.getWriter().write("success");    }

8.2 前端实现

修改品牌功能updateById(index, row)获取id数据,逻辑代码写在edit()函数中,在此方法中需要发送异步请求并将表单中输入的数据作为参数进行传递。在 then 函数中的匿名函数是成功后的回调函数,而 resp.data 就可以获取到响应回来的数据,如果值是 success 表示数据添加成功。成功后关闭修改对话框窗口,重新查询数据,并弹出消息提示修改数据成功

                            
  updateById(index, row) {                this.brand.id = row.id;                this.centerVisible = true;            },            //修改数据的部分内容            edit() {                var _this = this;                //发送ajax异步请求,添加数据                axios({                    method: "post",                    url: "http://localhost:8080/brand-case/brand/updateById",                    data: _this.brand                }).then(function (resp) {                    if (resp.data == "success") {                        //关闭窗口                        _this.centerVisible = false;                        //查询一次                        _this.selectAll();                        _this.$message({message: '恭喜你,修改数据成功',type: 'success'                        });                    } else {                        _this.$message.error('修改数据失败');                    }                })            },

功能展示:

在这里插入图片描述

9、删除品牌功能

整体流程:

9.1 后端实现

dao方法实现:

在java目录下的 com.hailei.mapper.BrandMapper 接口中定义抽象方法,并使用 @Select 注解编写 sql 语句

        @Delete("delete from tb_brand where id=#{id}")    void deleteById(int id);

service方法实现:

BrandService 接口中定义 deleteById() 删除品牌的业务逻辑方法

        void deleteById(int id);

BrandServiceImpl 类中重写 deleteById() 方法,并进行业务逻辑实现

    @Override    public void deleteById(int id) {        //2. 获取SqlSession对象        SqlSession sqlSession = factory.openSession();        //3. 获取BrandMapper        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);        //4. 调用方法        mapper.deleteById(id);        sqlSession.commit();//提交事务        //5. 释放资源        sqlSession.close();    }

servlet方法实现:

在java目录下的 com.hailei.web.servlet 包下的名为 BrandServlet 中删除品牌的 servlet。该 servlet 逻辑如下:

servlet 代码实现如下:

        public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1. 接收数据        BufferedReader br = request.getReader();        String params = br.readLine();//json字符串        //转为 int        int id = JSON.parseObject(params,int.class);        //2. 调用service添加        brandService.deleteById(id);        //3. 响应成功的标识        response.getWriter().write("success");    }

9.2 前端实现

删除品牌功能deleteById(index, row)获取id数据,在此方法中需要发送异步请求并将id数据作为参数进行传递。在 then 函数中的匿名函数是成功后的回调函数,而 resp.data 就可以获取到响应回来的数据,如果值是 success 表示数据删除成功。删除成功后,重新查询数据,并弹出消息提示删除数据成功

// 删除            deleteById(index, row){                // 弹出确认提示框                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {                    confirmButtonText: '确定',                    cancelButtonText: '取消',                    type: 'warning'                }).then(() => {                    //用户点击确认按钮                    //2. 发送AJAX请求                    var _this = this;                    // 发送ajax请求,添加数据                    axios({                        method:"post",                        url:"http://localhost:8080/brand-case/brand/deleteById",                        data:row.id                    }).then(function (resp) {                        if(resp.data == "success"){//删除成功// 重新查询数据_this.selectAll();// 弹出消息提示_this.$message({    message: '恭喜你,删除成功',    type: 'success'});                        }                    })                }).catch(() => {                    //用户点击取消按钮                    this.$message({                        type: 'info',                        message: '已取消删除'                    });                });            },

功能展示:

在这里插入图片描述

10、批量删除功能

整体流程:

10.1 后端实现

dao方法实现:

在java目录下的 com.hailei.mapper.BrandMapper 接口中定义抽象方法,要用到动态 sql ,属于复杂的sql操作,使用映射配置文件

    void deleteByIds(@Param("ids") int[] ids);

在resources目录下的 com.hailei.mapper.Mapper 中的 BrandMapper.xml 映射配置文件中添加 statement

            delete from tb_brand where id in                    #{id}            

service方法实现:

BrandService 接口中定义 deleteByIds() 批量删除的业务逻辑方法

        void deleteByIds( int[] ids);

BrandServiceImpl 类中重写 deleteByIds() 方法,并进行业务逻辑实现

    @Override    public void deleteByIds(int[] ids) {        //2. 获取SqlSession对象        SqlSession sqlSession = factory.openSession();        //3. 获取BrandMapper        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);        //4. 调用方法        mapper.deleteByIds(ids);        sqlSession.commit();//提交事务        //5. 释放资源        sqlSession.close();    }

servlet方法实现:

在java目录下的 com.hailei.web.servlet 包下的名为 BrandServlet 中批量删除的 servlet。该 servlet 逻辑如下:

servlet 代码实现如下:

        public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1. 接收数据  [1,2,3]        BufferedReader br = request.getReader();        String params = br.readLine();//json字符串        //转为 int[]        int[] ids = JSON.parseObject(params, int[].class);        //2. 调用service添加        brandService.deleteByIds(ids);        //3. 响应成功的标识        response.getWriter().write("success");    }

10.2 前端实现

批量删除功能deleteByIds(),此方法中需要发送异步请求并将id数组数据作为参数进行传递。在 then 函数中的匿名函数是成功后的回调函数,而 resp.data 就可以获取到响应回来的数据,如果值是 success 表示数据删除成功。删除成功后,重新查询数据,并弹出消息提示删除数据成功

            // 批量删除            deleteByIds(){                // 弹出确认提示框                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {                    confirmButtonText: '确定',                    cancelButtonText: '取消',                    type: 'warning'                }).then(() => {                    //用户点击确认按钮                    //1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可                    for (let i = 0; i < this.multipleSelection.length; i++) {                        let selectionElement = this.multipleSelection[i];                        this.selectedIds[i] = selectionElement.id;                    }                    //2. 发送AJAX请求                    var _this = this;                    // 发送ajax请求,添加数据                    axios({                        method:"post",                        url:"http://localhost:8080/brand-case/brand/deleteByIds",                        data:_this.selectedIds                    }).then(function (resp) {                        if(resp.data == "success"){//删除成功// 重新查询数据_this.selectAll();// 弹出消息提示_this.$message({    message: '恭喜你,删除成功',    type: 'success'});                        }                    })                }).catch(() => {                    //用户点击取消按钮                    this.$message({                        type: 'info',                        message: '已取消删除'                    });                });            }        },

功能展示:

在这里插入图片描述

11、分页查询功能

整体流程:

11.1 后端实现

在pojo包下创建 PageBean 类,为了做到通过会将其定义成泛型类,代码如下:

package com.hailei.pojo;import java.util.List;//分页查询的JavaBeanpublic class PageBean {    // 总记录数    private int totalCount;    // 当前页数据    private List rows;    public int getTotalCount() {        return totalCount;    }    public void setTotalCount(int totalCount) {        this.totalCount = totalCount;    }    public List getRows() {        return rows;    }    public void setRows(List rows) {        this.rows = rows;    }}

dao方法实现:

BrandMapper 接口中定义 selectByPage() 方法进行分页查询,代码如下:

        @Select("select * from tb_brand limit #{begin} , #{size}")    @ResultMap("brandResultMap")    List selectByPage(@Param("begin") int begin,@Param("size") int size);

BrandMapper 接口中定义 selectTotalCount() 方法进行统计记录数,代码如下:

    @Select("select count(*) from tb_brand ")    int selectTotalCount();

service方法实现:

BrandService 接口中定义 selectByPage() 分页查询数据的业务逻辑方法

    PageBean  selectByPageAndCondition(int currentPage,int pageSize,Brand brand);

BrandServiceImpl 类中重写 selectByPage() 方法,并进行业务逻辑实现

    @Override    public PageBean selectByPage(int currentPage, int pageSize) {        //2. 获取SqlSession对象        SqlSession sqlSession = factory.openSession();        //3. 获取BrandMapper        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);        //4. 计算开始索引        int begin = (currentPage - 1) * pageSize;        // 计算查询条目数        int size = pageSize;        //5. 查询当前页数据        List rows = mapper.selectByPage(begin, size);        //6. 查询总记录数        int totalCount = mapper.selectTotalCount();        //7. 封装PageBean对象        PageBean pageBean = new PageBean<>();        pageBean.setRows(rows);        pageBean.setTotalCount(totalCount);        //8. 释放资源        sqlSession.close();        return pageBean;    }

servlet方法实现:

BrandServlet 类中定义 selectByPage() 方法,该方法的逻辑如下:

servlet 中 selectByPage() 方法代码实现如下:

    public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1. 接收 当前页码 和 每页展示条数    url?currentPage=1&pageSize=5        String _currentPage = request.getParameter("currentPage");        String _pageSize = request.getParameter("pageSize");        int currentPage = Integer.parseInt(_currentPage);        int pageSize = Integer.parseInt(_pageSize);        //2. 调用service查询        PageBean pageBean = brandService.selectByPage(currentPage, pageSize);        //2. 转为JSON        String jsonString = JSON.toJSONString(pageBean);        //3. 写数据        response.setContentType("text/json;charset=utf-8");        response.getWriter().write(jsonString);    }

11.2 前端实现

// 查询分页数据            selectAll(){                axios({                    method:"post",                    url:"http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,                    data:this.brand                }).then(resp =>{                    //设置表格数据                    this.tableData = resp.data.rows; // {rows:[],totalCount:100}                    //设置总记录数                    this.totalCount = resp.data.totalCount;                })            },            tableRowClassName({row, rowIndex}) {                if (rowIndex === 1) {                    return 'warning-row';                } else if (rowIndex === 3) {                    return 'success-row';                }                return '';            },            // 复选框选中后执行的方法            handleSelectionChange(val) {                this.multipleSelection = val;            },            // 查询方法            onSubmit() {                this.selectAll();            },

功能展示:

在这里插入图片描述

12 条件查询功能

整体流程:

12.1 后端实现

dao方法实现:

BrandMapper 接口中定义 selectByPageAndCondition() 方法 和 selectTotalCountByCondition 方法,用来进行条件分页查询功能,方法如下:

        List selectByPageAndCondition(@Param("begin") int begin,@Param("size") int size,@Param("brand") Brand brand);        int selectTotalCountByCondition(Brand brand);

参数:

复杂的查询语句,需要使用动态sql;所以在映射配置文件中写 sql 语句。brand_name 字段和 company_name 字段需要进行模糊查询,使用 % 占位符。映射配置文件中 statement 如下:

    select count(*)    from tb_brand                        and  brand_name like #{brandName}                            and  company_name like #{companyName}                            and  status = #{status}            

service方法实现:

BrandService 接口中定义 selectByPageAndCondition() 分页查询数据的业务逻辑方法

 PageBean  selectByPageAndCondition(int currentPage,int pageSize,Brand brand);

BrandServiceImpl 类中重写 selectByPageAndCondition() 方法,并进行业务逻辑实现

    @Override    public PageBean selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {        //2. 获取SqlSession对象        SqlSession sqlSession = factory.openSession();        //3. 获取BrandMapper        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);        //4. 计算开始索引        int begin = (currentPage - 1) * pageSize;        // 计算查询条目数        int size = pageSize;        // 处理brand条件,模糊表达式        String brandName = brand.getBrandName();        if (brandName != null && brandName.length() > 0) {            brand.setBrandName("%" + brandName + "%");        }        String companyName = brand.getCompanyName();        if (companyName != null && companyName.length() > 0) {            brand.setCompanyName("%" + companyName + "%");        }        //5. 查询当前页数据        List rows = mapper.selectByPageAndCondition(begin, size, brand);        //6. 查询总记录数        int totalCount = mapper.selectTotalCountByCondition(brand);        //7. 封装PageBean对象        PageBean pageBean = new PageBean<>();        pageBean.setRows(rows);        pageBean.setTotalCount(totalCount);        //8. 释放资源        sqlSession.close();        return pageBean;    }

servlet方法实现:

BrandServlet 类中定义 selectByPageAndCondition() 方法。而该方法的逻辑如下:

servlet 中 selectByPageAndCondition() 方法代码实现如下:

        public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1. 接收 当前页码 和 每页展示条数    url?currentPage=1&pageSize=5        String _currentPage = request.getParameter("currentPage");        String _pageSize = request.getParameter("pageSize");        int currentPage = Integer.parseInt(_currentPage);        int pageSize = Integer.parseInt(_pageSize);        // 获取查询条件对象        BufferedReader br = request.getReader();        String params = br.readLine();//json字符串        //转为 Brand        Brand brand = JSON.parseObject(params, Brand.class);        //2. 调用service查询        PageBean pageBean = brandService.selectByPageAndCondition(currentPage,pageSize,brand);        //2. 转为JSON        String jsonString = JSON.toJSONString(pageBean);        //3. 写数据        response.setContentType("text/json;charset=utf-8");        response.getWriter().write(jsonString);    }

12.2 前端实现

                                                                                                                                                         查询            

功能展示:

在这里插入图片描述
希望本文对大家有帮助,上文若有不妥之处,欢迎指正

分享决定高度,学习拉开差距

来源地址:https://blog.csdn.net/qq_42078934/article/details/125436314

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-数据库
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯