day04-功能实现03

家居网购项目实现03

8.功能07-后台管理 显示家居

8.1需求分析/图解

image-20221217170317222 image-20221217170426758
  1. 给后台管理提供独立登录页面,管理员登录地址不对外公开
  2. 管理员登录成功后,显示管理菜单页面
  3. 管理员点击家居管理,显示所有家居信息

8.2思路分析

ps:实现管理员登录功能,方案一是将管理员视为member,添加到member表中,为了区别管理员和用户的权限,添加一个字段即可;方案二是重新创建一张admin表,单独存储admin信息。

这里采用方案二。

8.3代码实现

8.3.1admin表和furn表

admin表:

-- 创建admin表
CREATE TABLE `admin`(
`id` INT PRIMARY KEY AUTO_INCREMENT,
`username` VARCHAR(32) NOT NULL UNIQUE,
`password` VARCHAR(32) NOT NULL,
`email` VARCHAR(64) 
)CHARSET utf8 ENGINE INNODB;

-- 插入测试数据
INSERT INTO admin (`username`,`password`,`email`)
VALUES('admin',MD5('admin'),'admin@qq.com');

SELECT * FROM admin;

furn表:

-- 设计家居表furn
-- 根据 需求-文档-界面 设计字段
-- 注意:id int(11), 11为显示的宽度,配合零填充(zerofill)
-- 		int(2), 2表示的也是显示宽度
-- 也就是说, int(11)和int(2)存储的范围是一样的,两者存放的数据范围只和int相关
-- 例如,67890使用int(11)来存储,显示为 00000067890
-- 	    67890使用int(2)来存储,显示为 67890
-- 也就是说,当存储的数据位数不够时,使用0来填充剩下的宽度(零填充)
CREATE TABLE `furn`(
`id` INT UNSIGNED PRIMARY KEY AUTO_INCREMENT, #id-使用无符号
`name` VARCHAR(64) NOT NULL, #家居名
`maker` VARCHAR(64) NOT NULL, #制造商
`price` DECIMAL(11,2) NOT NULL, #价格 建议用DECIMAL定点数
`sales` INT UNSIGNED NOT NULL, #销量
`stock` INT UNSIGNED NOT NULL, #库存
`img_path` VARCHAR(256) NOT NULL #存放图片的路径即可,不建议直接存放图片到数据库中
)CHARSET utf8 ENGINE INNODB;

-- 增加测试数据
INSERT INTO furn(`id`,`name`,`maker`,`price`,`sales`,`stock`,`img_path`) 
VALUES(NULL,'北欧风格小桌子','熊猫家居',180,666,7,'assets/images/product-image/6.jpg');
 
INSERT INTO furn(`id`,`name`,`maker`,`price`,`sales`,`stock`,`img_path`) 
VALUES(NULL,'简约风格小椅子','熊猫家居',180,666,7,'assets/images/product-image/4.jpg');
 
INSERT INTO furn(`id`,`name`,`maker`,`price`,`sales`,`stock`,`img_path`) 
VALUES(NULL,'典雅风格小台灯','蚂蚁家居',180,666,7,'assets/images/product-image/14.jpg');
 
INSERT INTO furn(`id`,`name`,`maker`,`price`,`sales`,`stock`,`img_path`) 
VALUES(NULL,'温馨风格盆景架','蚂蚁家居',180,666,7,'assets/images/product-image/16.jpg');

SELECT * FROM `furn`;
image-20221217203226606

8.3.2管理员登录功能

管理员登录功能实现参考:功能04-会员登录

详细代码请看 https://github.com/liyuelian/furniture_mall.git

  1. entity层增加Admin实体,进行admin表映射。

  2. dao层增加AdminDAO接口,,由AdminDAOImpl实现该接口方法,同时AdminDAOImpl继承BasicDAO,用于查询数据库中有无对应Admin用户返回对应信息

  3. utils包创建AdminDAOImplTest类并测试

  4. Service层创建AdminService接口,AdminServiceImpl实现该接口

  5. utils包中创建AdminServiceImplTest类并测试

  6. web层创建AdminServlet并配置,该Servlet对接前端页面。根据功能06-web层Servlet减肥中的方法,AdminServlet直接继承BasicServlet,只需要在AdminServlet编写业务代码即可,不需要实现doPost方法。doPost由抽象父类BasicServlet使用反射+动态绑定回调

    AdminServlet:

    package com.li.furns.web;
    
    import com.li.furns.entity.Admin;
    import com.li.furns.service.AdminService;
    import com.li.furns.service.impl.AdminServiceImpl;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /**
     * @author 李
     * @version 1.0
     */
    public class AdminServlet extends BasicServlet {
        private AdminService adminService = new AdminServiceImpl();
    
        public void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //获取用户输入的账号密码
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            //构建一个Admin对象
            Admin admin = new Admin(null, username, password, null);
            if (adminService.login(admin) == null) {
                //登录失败,返回管理员登录页面并提示错误信息
                request.setAttribute("errInfo", "登录失败,账号信息有误");
                request.getRequestDispatcher("/views/manage/manage_login.jsp")
                        .forward(request, response);
            } else {
                //登录成功,跳转到manage_menu.jsp
                request.getRequestDispatcher("/views/manage/manage_menu.jsp")
                        .forward(request, response);
            }
        }
    }
    
  7. 修改前端页面manage_login.jsp(登录表单提交注意添加隐藏域)

8.3.3显示家居功能

详细代码请看 https://github.com/liyuelian/furniture_mall.git

  1. entity层增加Furn实体

    这里如果Furn实体的属性名和对应表的字段不一致,可以通过给查询的字段起别名的方法解决

  2. dao层增加FurnDAO接口,由FurnDAOImpl实现该接口,同时继承BasicDAO,用于查询数据库furn表中的所有信息

  3. utils包创建FurnDAOImplTest类并测试

  4. service层添加FurnService接口,由FurnServiceImpl实现该接口

  5. utils包创建FurnServiceImplTest类并测试

  6. web层创建FurnServlet并配置(配置的url为/manage/furnServlet,目的是为了之后使用过滤器可以更好地限制访问权限),该Servlet对接前端页面。直接继承BasicServlet,只需要在Servlet中编写业务代码即可。

    package com.li.furns.web;
    
    import com.li.furns.entity.Furn;
    import com.li.furns.service.FurnService;
    import com.li.furns.service.impl.FurnServiceImpl;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.List;
    
    public class FurnServlet extends BasicServlet {
    
        private FurnService furnService = new FurnServiceImpl();
        
        protected void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            List<Furn> furns = furnService.queryFurns();
            //将furns集合放入到request域中
            req.setAttribute("furns", furns);
            //请求转发
            req.getRequestDispatcher("/views/manage/furn_manage.jsp")
                    .forward(req, resp);
        }
    }
    
  7. 在对接的前端页面furn_manage.jsp,使用jstl将接收到的家居集合显示出来

8.3.4整合管理员登录和显示家居功能

image-20221217222810650

上述两个功能的流程为,管理员登录后由AdminServlet请求转发到manage_menu.jsp页面,点击页面上的“家居管理”,FurnServlet请求转发到furn_manage.jsp页面,该页面显示所有家居信息。

8.4完成测试

image-20221217194751739 image-20221217224154740 image-20221217224313664

9.功能08-后台管理 添加家居

9.1需求分析/图解

image-20221218172056914 image-20221218172113078
  1. 管理员进入到家居管理页面
  2. 点击添加家居,进入到furn_add.jsp页面,在该页面中可以添加家居

9.2思路分析

9.3代码实现

9.3.1dao层

以下为部分代码,详细请看 https://github.com/liyuelian/furniture_mall.git

FurnDAO

public interface FurnDAO {
    //添加家居信息
    public int addFurn(Furn furn);
}

FurnDAOImpl

/**
 * 往furn表中添加家居信息
 *
 * @param furn 家居对象
 * @return 返回的值是受影响的行数,操作失败则返回-1
 */
@Override
public int addFurn(Furn furn) {
    String sql = "INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` , `img_path`)" +
            "VALUES(NULL , ?, ? , ? , ? , ? , ?);";
    return update(sql, furn.getName(), furn.getMaker(), furn.getPrice(),
            furn.getSales(), furn.getStock(), furn.getImgPath());
}

FurnDAOImplTest:

@Test
public void add() {
    Furn furn = new Furn(null, "北欧风格台灯", "小猫家居", new BigDecimal("200.00"), 333, 17, "assets/images/product-image/3.jpg");
    int add = furnDAO.addFurn(furn);
    if (add == -1) {
        System.out.println("添加数据失败");
    } else {
        System.out.println("添加数据成功");
    }
}
image-20221218180959889

9.3.2service层

部分代码

FurnService接口

/**
 * 添加Furn对象到数据库
 * @param furn furn对象
 * @return 返回修改表的行数,失败则返回-1
 */
public int addFurn(Furn furn);

FurnServiceImpl实现类

@Override
public int addFurn(Furn furn) {
    return furnDAO.add(furn);
}

FurnServiceImplTest测试类

@Test
public void add(){
    int add = furnService.addFurn(new Furn(null, "小台灯", "猫家居",
                            new BigDecimal("99.00"), 55, 24,
                            "assets/images/product-image/3.jpg"));
    if (add == -1) {
        System.out.println("添加失败");
    }else {
        System.out.println("添加成功");
    }
}
image-20221218183045600

9.3.3web层

FurnServlet添加add方法

/**
 * 处理添加家居的请求
 *
 * @param req
 * @param resp
 * @throws ServletException
 * @throws IOException
 */
protected void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //获取家居信息
    String name = req.getParameter("name");
    String maker = req.getParameter("maker");
    String price = req.getParameter("price");
    String sales = req.getParameter("sales");
    String stock = req.getParameter("stock");
    //图片暂且使用默认值,后面再修改
    String defaultImg = "assets/images/product-image/default.jpg";

    //构建Furn对象
    Furn furn = new Furn(null, name, maker, new BigDecimal(price),
            new Integer(sales), new Integer(stock), defaultImg);
    int addRes = furnService.addFurn(furn);
    if (addRes != -1) {//插入成功,跳转到页面furn_manage.jsp
        //跳转之前,需要重新获取Furn列表,然后将furns集合放入到request域中,再请求转发
        //即需要重新走一下FurnServlet的list方法
        //req.getRequestDispatcher("/manage/furnServlet?action=list")
        // .forward(req, resp);

        //这里如果使用请求转发,当用户刷新页面时,会重新发出一次添加请求,造成数据重复提交
        //因此使用重定向
        //因为重定向实际是让浏览器重新发送请求,所以我们回送完整的url比较保险
        resp.sendRedirect(req.getContextPath() + "/manage/furnServlet?action=list");
    } else {
        resp.getWriter().write("添加失败");
    }
}

为了防止中文乱码,在其父类BasicServlet中设置编码为utf-8

修改前端页面接口

9.4完成测试

浏览器访问http://localhost:8080/furniture_mall/views/manage/furn_add.jsp,填写数据,提交表单

image-20221218195918979

显示如下:

image-20221218195958312

数据库显示

image-20221218200040564

9.5注意事项和细节

9.5.1改进1-中文乱码问题

直接在BasicServlet中设置http请求的字符格式

image-20221218200439718

9.5.2改进2-表单重复提交问题

  1. 上诉代码从实现效果上来看是没有问题的

  2. 但是如果用户刷新页面,就会发现又重新添加了一次家居

  3. 原因是当用户提交完请求时,浏览器会记录下最后一次请求的全部信息,当用户刷新页面,就会发起浏览器的上一次请求

    image-20221218201002465
  4. 解决方案:使用重定向即可,因为重定向的本质是两次请求,而且最后一次就是请求显示家居,而不是添加家居。(修改FurnServlet)

    image-20221218201945906

9.5.3改进3-后端数据校验

如果用户在添加家居信息时,输入错误的数据类型,比如在价格栏中填入英文,后台在构建Furn对象时就会出错。

image-20221218202320785

解决方案:

  1. 在furn_add.jsp页面增加js验证

    image-20221218210630623
  2. 防止用户直接通过浏览器地址栏提交,绕过前端js校验,后端仍要对获取到的数据进行校验。

    • 方案一:使用java的正则表达式验证数据格式,如果没有通过校验,就返回furn_add.jsp,并且在request域中提示错误信息,并在前端jsp页面中展示。

    • 方案二:将获取到的数据直接进行转换,如果出现异常,就不执行添加操作,直接返回furn_add.jsp,同样在request域给出错误提示,在前端jsp页面中展示。

      但是这样做需要一个一个数据去校验,非常麻烦。我们知道,如果获取到的数据格式不对,异常会在构建Furn对象时出现,因此我们可以直接在构建Furn对象的地方捕获异常。这样,无论是哪一个数据格式出现错误都会被捕获异常。

      image-20221218215141654

      这里跳转会清空用户的表单数据,后面使用ajax来提交

    • 方案三:后面学习SpringMVC时,会有一个专门用户数据校验的规则/框架 -->JSR303 Hibernate Validator拓展注解

9.5.4改进4-使用BeanUtils

在之前的代码中,我们都是先拿到数据,手动构建Javabean对象,那么有没有一种方法可以自动封装Javabean呢?

使用BeanUtils可以完成自动封装JavaBean。

  1. BeanUtils工具类可以一次性把所有请求的参数注入到JavaBean中。

  2. BeanUtils工具类经常用于把Map中的值注入到JavaBean中,或者是对象属性值的拷贝操作

  3. BeanUtils不是jdk的类,需要导入相关jar包才能使用:

    commons-beanutils-1.8.0.jar 和 commons-logging-1.1.1.jar

    image-20221218220804450

改进后的FurnServlet:

   /**
     * 处理添加家居的请求
     *
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //底层使用BeanUtils,完成自动封装JavaBean
        Furn furn = DataUtils.copyParamToBean(req.getParameterMap(), new Furn());

        int addRes = furnService.addFurn(furn);
        if (addRes != -1) {//插入成功,跳转到页面furn_manage.jsp
            //使用重定向    
            resp.sendRedirect(req.getContextPath() + "/manage/furnServlet?action=list");
        } else {
            resp.getWriter().write("添加失败");
        }
    }

utils包中增加工具类DataUtils

package com.li.furns.utils;

import org.apache.commons.beanutils.BeanUtils;

import java.lang.reflect.InvocationTargetException;
import java.util.Map;

/**
 * @author 李
 * @version 1.0
 */
public class DataUtils {
    public static <T> T copyParamToBean(Map value, T bean) {
        try {
            //将req.getParameterMap()的数据自动封装到furn对象中
            //底层使用反射将数据封装,前提是,表单提交的数据字段名称必须和Javabean的属性名一致
            BeanUtils.populate(bean, value);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return bean;
    }
}
posted @ 2022-12-17 22:59  一刀一个小西瓜  阅读(86)  评论(0编辑  收藏  举报