本文介绍了如何实现网上商城项目中添加和更新商品类别的功能。我们使用SSH框架来开发此项目。在本文中，您将学习如何创建商品类别的实体类、DAO层、Service层和Action层，以及如何在网页中使用JavaScript和JQuery实现实时验证和提交表单。

SSH框架网上商城项目第9战之添加和更新商品类别功能实现

本文介绍了如何实现网上商城项目中添加和更新商品类别的功能。我们使用SSH框架来开发此项目。在本文中，您将学习如何创建商品类别的实体类、DAO层、Service层和Action层，以及如何在网页中使用JavaScript和JQuery实现实时验证和提交表单。

创建商品类别的实体类

为了在数据库中存储商品类别数据，我们需要创建一个类来表示商品类别。创建实体类是SSH框架中的第一步。在本例中，我们创建一个名为“Category”的实体类，具有以下属性：

public class Category {
    private int id;
    private String name;
    private String description;
    // 省略 getter 和 setter 方法
}

创建商品类别的DAO层

接下来，我们需要创建DAO层。DAO层是与数据库进行交互的层。它封装了所有的数据库访问逻辑，如保存、更新、查询和删除。在本例中，我们创建一个名为“CategoryDAO”的接口，它继承了Hibernate的基本接口，并拥有如下方法：

public interface CategoryDAO extends BaseDAO<Category>{

    List<Category> queryAll();
}

然后我们创建其对应的实现，即“CategoryDAOImpl”类：

@Repository("categoryDAO")
public class CategoryDAOImpl extends BaseDAOImpl<Category> implements CategoryDAO {

    @Override
    public List<Category> queryAll() {
        String hql = "FROM Category";
        return (List<Category>) this.getHibernateTemplate().find(hql);
    }
}

创建商品类别的Service层

接下来我们需要创建Service层，这一层负责实现业务逻辑。在本例中，我们创建一个名为“CategoryService”的接口，并在其中定义逻辑：

public interface CategoryService extends BaseService<Category>{

    List<Category> queryAll();
}

实现该接口的类为“CategoryServiceImpl”：

@Service("categoryService")
@Transactional
public class CategoryServiceImpl extends BaseServiceImpl<Category> implements CategoryService {

    @Autowired
    private CategoryDAO categoryDAO;

    @Override
    public List<Category> queryAll() {
        return categoryDAO.queryAll();
    }
}

创建商品类别的Action层

Action层是前端访问后端的接口。它处理所有的请求和响应。在本例中，我们创建了一个名为“CategoryAction”的类。该类处理收到的请求并向前端响应结果。

@Controller
@RequestMapping("/category")
public class CategoryAction extends BaseAction<Category> {

    @Autowired
    private CategoryService categoryService;

    @RequestMapping("/list")
    public String list(Model model) {
        List<Category> categoryList = categoryService.queryAll();
        model.addAttribute("categoryList", categoryList);
        return "category/list.jsp";
    }
}

添加商品类别的功能实现

我们可以添加一个新的商品类别，步骤如下：

在前端页面中添加一个表单，在该表单的“action”属性中提供一个URL路径，该路径与后台的Action层中的方法相对应。
在后台的Action层中创建一个方法来处理该请求，并将表单数据传递给Service层进行处理。

@RequestMapping("/add")
public String add(HttpServletRequest request, HttpServletResponse response, Model model) {
    String name = (String) request.getParameter("name");
    String description = (String) request.getParameter("description");
    Category category = new Category();
    category.setName(name);
    category.setDescription(description);
    categoryService.save(category);
    return "redirect:/category/list";
}

在前端页面中使用JavaScript和JQuery实现实时验证表单，并在提交表单前显示验证结果。

$(document).ready(function() {

    $('#addCategoryForm').submit(function(event) {

        // 阻止表单提交
        event.preventDefault();

        // 验证表单
        var isValid = true;
        var $name = $('#name');
        var $description = $('#description');

        // 验证名称
        if ($name.val().trim() == '') {
            $name.parent().addClass('has-error');
            $name.next().text('名称不能为空').show();
            isValid = false;
        }

        // 验证描述
        if ($description.val().trim() == '') {
            $description.parent().addClass('has-error');
            $description.next().text('描述不能为空').show();
            isValid = false;
        }

        // 如果表单合法，提交表单
        if (isValid) {
            this.submit();
        }
    });

    // 失去焦点时验证
    $('#name').blur(function() {
        var $name = $(this);
        if ($name.val().trim() == '') {
            $name.parent().addClass('has-error');
            $name.next().text('名称不能为空').show();
        } else {
            $name.parent().removeClass('has-error');
            $name.next().hide();
        }
    });

    $('#description').blur(function() {
        var $description = $(this);
        if ($description.val().trim() == '') {
            $description.parent().addClass('has-error');
            $description.next().text('描述不能为空').show();
        } else {
            $description.parent().removeClass('has-error');
            $description.next().hide();
        }
    });
});

更新商品类别的功能实现

同样的，我们可以更新一个商品类别，步骤如下：

在前端页面中显示表格并为每一行的编辑按钮提供一个URL路径，该路径与后台的Action层中的方法相对应。
在后台的Action层中创建一个方法来处理该请求，并将表单数据传递给Service层进行处理。

@RequestMapping("/edit/{id}")
public String edit(@PathVariable int id, Model model) {
    Category category = categoryService.findById(id);
    model.addAttribute("category", category);
    return "category/edit.jsp";
}

在前端页面中使用JavaScript和JQuery实现实时验证表单，并在提交表单前显示验证结果。

$(document).ready(function() {

    $('#editCategoryForm').submit(function(event) {

        // 阻止表单提交
        event.preventDefault();

        // 验证表单
        var isValid = true;
        var $name = $('#name');
        var $description = $('#description');

        // 验证名称
        if ($name.val().trim() == '') {
            $name.parent().addClass('has-error');
            $name.next().text('名称不能为空').show();
            isValid = false;
        }

        // 验证描述
        if ($description.val().trim() == '') {
            $description.parent().addClass('has-error');
            $description.next().text('描述不能为空').show();
            isValid = false;
        }

        // 如果表单合法，提交表单
        if (isValid) {
            this.submit();
        }
    });

    // 失去焦点时验证
    $('#name').blur(function() {
        var $name = $(this);
        if ($name.val().trim() == '') {
            $name.parent().addClass('has-error');
            $name.next().text('名称不能为空').show();
        } else {
            $name.parent().removeClass('has-error');
            $name.next().hide();
        }
    });

    $('#description').blur(function() {
        var $description = $(this);
        if ($description.val().trim() == '') {
            $description.parent().addClass('has-error');
            $description.next().text('描述不能为空').show();
        } else {
            $description.parent().removeClass('has-error');
            $description.next().hide();
        }
    });
});