后端搭建配合html、Ajax显示商品信息页—Idea项目搭建（二）

最新推荐文章于 2024-04-23 15:34:53 发布

白耳骑士

最新推荐文章于 2024-04-23 15:34:53 发布

阅读量1.3k

点赞数 2

分类专栏： SSM实战—从零开始到建站文章标签： intellij-idea spring java ajax

本文链接：https://blog.csdn.net/javatuto/article/details/123283726

版权

SSM实战—从零开始到建站专栏收录该内容

4 篇文章 0 订阅

订阅专栏

htm环境：
idea2020
tomcat 9.0
MySQL8.0.25
maven 3.5.0

先实现一个简单的商品显示页面，将数据库的商品信息通过ssm框架显示到前端页面中，并舍弃了jsp，采用html+Ajax实现。

1. 首先搭建环境，用maven，在我上一篇博客
2. 编写数据库，我实验的是只有商品名称、价格等，就不放出来了，感兴趣的可以自己建一个

3.需要用java来读取数据库的信息，那么我们需要4层，分别是controller层，dao层、实体类，service层，具体包名如下图
在这里插入图片描述

    4.实体类（entity）

此处为普通的Java类，不过对应的属性要为私有（private），然后是与数据表中的字段一一对应

//实体类
package com.ssm.entity;
public class ProductInfo {
    private int id;
    private String code;
    private String name;
    private int tid;
    private String pic;
    private int num;
    private int price;
    private String intro;
    private double priceFrom;
    private double priceTo;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
  //省略其他setting/getting

    @Override
    public String toString() {
        return "ProductInfo{" +
                "id=" + id +
                ", code='" + code + '\'' +
                ", name='" + name + '\'' +
                ", tid=" + tid +
                ", pic='" + pic + '\'' +
                ", num=" + num +
                ", price=" + price +
                ", intro='" + intro + '\'' +
                ", priceFrom=" + priceFrom +
                ", priceTo=" + priceTo +
                '}';
    }
}

    5.mapper（也就是dao层）

用于访问数据库中的信息，需要有接口与xml配置文件，且注意，此处xml文件和接口的名字要相同，不然无法映射，最好也在同一个包中；
①xml文件用于获取数据库信息，里面写的是sql语句
②mapper接口对应xml文件，用于调用
在这里插入图片描述

package com.ssm.mapper;
import com.ssm.entity.ProductInfo;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
//用该注解声明为bean，dao层用@Mapper注解，别用其他
public interface ProductMapper {
    List<ProductInfo> findProductList();
}

<?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.ssm.mapper.ProductMapper">
    <!--    映射到mapper包中的接口去-->
    <select id="findProductList" resultType="com.ssm.entity.ProductInfo">
-- resultType属性指向mapper接口所在，id与mapper接口方法名相同
        select * from product_info LIMIT 0,9
    </select>
</mapper>

    6.service层（即业务逻辑层）

主要放接口与对应的实现类
在这里插入图片描述

//service层接口
package com.ssm.service;
import com.ssm.entity.ProductInfo;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public interface ProductService {
    List<ProductInfo> findProductList();
}

//接口实现类
package com.ssm.service.impl;
import com.ssm.entity.ProductInfo;
import com.ssm.mapper.ProductMapper;
import com.ssm.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.List;
public class ProductServiceImpl implements ProductService {
    @Autowired
    ProductMapper productMapper;
    @Override
    public List<ProductInfo> findProductList() {
        return productMapper.findProductList();
    }
}

①接口中声明使用的方法，与mapper接口的方法名一致
②实现类实现接口方法，调用mapper接口中的的方法，实现写入sql语句读取数据表数据
③获取的数据被存入实体类中，多个数据又被存入list集合中

    7.controller层（控制器类层）

提供url映射，当url提供特定字段时，前端控制器会拦截，并交给控制器类处理
①此处需要将控制类声明为bean，然后在配置文件中启动自动扫描注解
②拦截后，将实现具体的读取数据，并返回，供后面的ajax调用

package com.ssm.controller;

import com.ssm.entity.ProductInfo;
import com.ssm.service.ProductService;
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 java.util.List;

@Controller
@RequestMapping("/product")
public class ProductController {
    @Autowired
    ProductService productService;
//    @ResponseBody的作用其实是将java对象转为json格式的数据。
    @RequestMapping("/list")
    @ResponseBody
    public List<ProductInfo> list(){
        List<ProductInfo> findProductList = productService.findProductList();
        return findProductList;
    }
}

8.表示层（html+ajax）

写出简单的html文件，引用jQuery文件，编写ajax获取数据，并输出给前端页面，该处用了jsp页面提供跳转，到html，所以运行时先到jsp页面，再自动跳转到html页面

<%--
  jsp页面，跳转至html页面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="1;url=http://localhost:8080/jmarket/front/productlist.html"><!--定时转到其他页面 -->
    <title>Title</title>
</head>
<body>
你好世界！
</body>
</html>

<!--    html文件（名为productlist）-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商城首页</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css" />
    <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
<div class="row" style="width:1210px;margin:0 auto;">
    <div class="col-md-12">
        <ol class="breadcrumb">
            <li><a href="index.htm">首页</a></li>
        </ol>
    </div>
    <div id="prodect_info1" class="col-md-2" style="text-align:center;height:200px;padding:10px 0px; display: none;">
        <a id="prodectId1" href="product_info.htm">
            <img id="commImg1" src="./statics/products/hao/small03.jpg" width="130" height="130"
                 style="display: inline-block;">
        </a>
        <p><a id="commId1" style="display: none;"></a></p>
        <p><a id="prodectName1" href="product_info.html" style='color:#666'>冬瓜</a></p>
        <p>
            ￥<font id="prodectPrice1" color="#E4393C" style="font-size:16px">&yen;299.00</font>
        </p>
    </div>

    <div id="prodect_info2" class="col-md-2" style="text-align:center;height:200px;padding:10px 0px; display: none;">
        <a id="prodectId2" href="product_info.htm">
            <img id="commImg2" src="./statics/products/hao/small03.jpg" width="130" height="130"
                 style="display: inline-block;">
        </a>
        <p><a id="commId2" style="display: none;"></a></p>
        <p><a id="prodectName2" href="product_info.htm" style='color:#666'>冬瓜</a></p>
        <p>
            ￥<font id="prodectPrice2" color="#E4393C" style="font-size:16px">&yen;299.00</font>
        </p>
    </div>

    <div id="prodect_info3" class="col-md-2" style="text-align:center;height:200px;padding:10px 0px; display: none;">
        <a id="prodectId3" href="product_info.htm">
            <img id="commImg3" src="./statics/products/hao/small03.jpg" width="130" height="130"
                 style="display: inline-block;">
        </a>
        <p><a id="commId3" style="display: none;"></a></p>
        <p><a id="prodectName3" href="product_info.html" style='color:#666'>冬瓜</a></p>
        <p>
            ￥<font id="prodectPrice3" color="#E4393C" style="font-size:16px">&yen;299.00</font>
        </p>
    </div>

    <div id="prodect_info4" class="col-md-2" style="text-align:center;height:200px;padding:10px 0px; display: none;">
        <a id="prodectId4" href="product_info.htm">
            <img id="commImg4" src="./statics/products/hao/small03.jpg" width="130" height="130"
                 style="display: inline-block;">
        </a>
        <p><a id="commId4" style="display: none;"></a></p>
        <p><a id="prodectName4" href="product_info.html" style='color:#666'>冬瓜</a></p>
        <p>
            ￥<font id="prodectPrice4" color="#E4393C" style="font-size:16px">&yen;299.00</font>
        </p>
    </div>

    <div id="prodect_info5" class="col-md-2" style="text-align:center;height:200px;padding:10px 0px; display: none;">
        <a id="prodectId5" href="product_info.htm">
            <img id="commImg5" src="./statics/products/hao/small03.jpg" width="130" height="130"
                 style="display: inline-block;">
        </a>
        <p><a id="commId5" style="display: none;"></a></p>
        <p><a id="prodectName5" href="product_info.html" style='color:#666'>冬瓜</a></p>
        <p>
            ￥<font id="prodectPrice5" color="#E4393C" style="font-size:16px">&yen;299.00</font>
        </p>
    </div>

</div>
</div>

<script>
    //根据商品类别获取商品列表
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/CrossBlue_Shop3/product/list",
        dataType: "json",
        async: false,
        timeout: 3000,
        success: function success(xmlhttp) {
            var length = xmlhttp.length
            for (var i = 1; i <= length; i++) {
                $("#prodect_info" + i).show()
                $("#prodectId" + i).text(xmlhttp[i - 1].id)
                // 令src属性的值（前端上面的）设置为xmlhttp[i - 1].image
                $("#prodectName" + i).text(xmlhttp[i - 1].name)
                $("#prodectPrice" + i).text(xmlhttp[i - 1].price)
            }
        },
        error: function (xmlhttp) {
            layer.msg('异常，请稍后重试！');
        }
    });
</script>
</body>
</html>

9.实现效果

因是简单的实现ssm整合和实践项目，所以图片为放置
在这里插入图片描述

文件包：
链接：https://pan.baidu.com/s/1GoY4HJht2hm4SlgnGqAnBQ
提取码：xy6s

白耳骑士

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
后端搭建配合html、Ajax显示商品信息页—Idea项目搭建（二）

htm环境：idea2020tomcat 9.0MySQL8.0.25maven 3.5.0先实现一个简单的商品显示页面，将数据库的商品信息通过ssm框架显示到前端页面中，并舍弃了jsp，采用html+Ajax实现。1. 首先搭建环境，用maven，在我上一篇博客2. 编写数据库，我实验的是只有商品名称、价格等，就不放出来了，感兴趣的可以自己建一个3.需要用java来读取数据库的信息，那么我们需要4层，分别是controller层，dao层、实体类，service层，具体包名如下图
复制链接

扫一扫