SSH框架网上商城项目第6战之基于DataGrid的数据显示

SSH框架网上商城项目第6战之基于DataGrid的数据显示攻略

1. 前言

DataGrid是EasyUI中极常用的组件之一，提供了方便、美观、易用的表格展示方式，因此在实际Web开发中也具有广泛的应用。

本文将向大家介绍如何基于SSH框架实现基于DataGrid的数据显示。

1. 准备工作

在开始之前，需要准备以下内容：

• Eclipse IDE
• JDK 1.8
• Tomcat 9服务器

• MySQL数据库

• 实现步骤

（1）新建maven项目并创建相关目录
首先，我们需要在Eclipse中新建一个Maven项目，并创建相关目录。

（2）导入项目所需要的依赖
在pom.xml文件中，添加以下三个依赖项：

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.3.10</version>
</dependency>

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-orm</artifactId>
    <version>5.3.10</version>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.26</version>
</dependency>

（3）创建数据库连接
在src/main/resources目录下，创建名为jdbc.properties的文件，添加以下代码：

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/db_name?useSSL=false
jdbc.username=root
jdbc.password=123456

（其中，db_name为你所使用的数据库名称；root为数据库用户名；123456为数据库用户密码）

（4）创建表
在MySQL数据库中创建一个名为goods_info的表，表结构如下：

 CREATE TABLE `goods_info` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `name` varchar(255) DEFAULT NULL,
   `price` double DEFAULT NULL,
   `stock` int(11) DEFAULT NULL,
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

（5）编写model类

在项目中创建com.example.shop.entity包，在该包下创建Goods实体类，代码如下：

package com.example.shop.entity;

public class Goods {

    private int id;
    private String name;
    private double price;
    private int stock;

    // getter和setter方法省略
}

（6）编写DAO层接口和SQL语句

在项目中创建com.example.shop.dao包，在该包下创建GoodsDao接口，定义以下方法：

package com.example.shop.dao;

import java.util.List;

import com.example.shop.entity.Goods;

public interface GoodsDao {

    public List<Goods> listAllGoods();
}

并在src/main/resources/mappings目录下创建GoodsDao.xml文件，编写SQL语句：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.shop.dao.GoodsDao">

    <resultMap id="goodsMap" type="com.example.shop.entity.Goods">
        <id property="id" column="id" />
        <result property="name" column="name" />
        <result property="price" column="price" />
        <result property="stock" column="stock" />
    </resultMap>

    <select id="listAllGoods" resultMap="goodsMap">
        select * from goods_info
    </select>

</mapper>

（7）编写Service层接口和实现类
在项目中创建com.example.shop.service包，在该包下创建GoodsService接口，定义以下方法：

package com.example.shop.service;

import java.util.List;

import com.example.shop.entity.Goods;

public interface GoodsService {

    public List<Goods> listAllGoods();
}

并在src/main/java/com/example/shop/service/impl包下创建GoodsServiceImpl实现类，实现GoodsService接口方法：

package com.example.shop.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.example.shop.dao.GoodsDao;
import com.example.shop.entity.Goods;
import com.example.shop.service.GoodsService;

@Service
@Transactional
public class GoodsServiceImpl implements GoodsService {

    @Autowired
    private GoodsDao goodsDao;

    @Override
    public List<Goods> listAllGoods() {
        return goodsDao.listAllGoods();
    }
}

（8）编写Controller层类
在项目中创建com.example.shop.controller包，在该包下创建GoodsController类，代码如下：

package com.example.shop.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.shop.entity.Goods;
import com.example.shop.service.GoodsService;

@Controller
@RequestMapping("/goods")
public class GoodsController {

    @Autowired
    private GoodsService goodsService;

    @RequestMapping("/list")
    @ResponseBody
    public List<Goods> listAll() {
        return goodsService.listAllGoods();
    }
}

（9）创建jsp页面
在WebContent目录下，创建WEB-INF/views目录，创建名为list.jsp的jsp页面，代码如下：

<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" title="商品列表" class="easyui-datagrid" style="width:100%">
        <thead>
            <tr>
                <th field="id" width="50" sortable="true">编号</th>
                <th field="name" width="50" sortable="true">名称</th>
                <th field="price" width="50" sortable="true">价格</th>
                <th field="stock" width="50" sortable="true">库存</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $(function(){
            $('#dg').datagrid({
                url:'${pageContext.request.contextPath}/goods/list',
                columns:[[
                    {field:'id',title:'编号',width:50},
                    {field:'name',title:'名称',width:50},
                    {field:'price',title:'价格',width:50},
                    {field:'stock',title:'库存',width:50},
                ]],
                pagination:true,
                rownumbers:true,
                singleSelect:true,
                striped:true
            });
        });
    </script>
</body>
</html>

1. 示例说明

下面以两个示例说明本文的实现方法：

（1）在MySQL数据库中插入一些数据
在MySQL数据库中插入以下数据：

insert into goods_info(name,price,stock) values('iPhone X',7999.00,10);
insert into goods_info(name,price,stock) values('MacBook Pro',14999.00,5);
insert into goods_info(name,price,stock) values('iPad Pro',7099.00,8);

（2）访问jsp页面
在Tomcat服务器中启动项目，并访问以下URL：

http://localhost:8080/shop/list.jsp

可以看到在页面中正确显示了从MySQL数据库中读取的商品信息。

1. 总结

本文介绍了基于SSH框架实现基于DataGrid的数据显示的具体步骤，包括了Maven项目搭建、数据库连接配置、Dao层、Service层、Controller层的编写，并提供了具体的示例说明。