Spring MVC 实战：构建一个简单的广告管理系统

小涛砸

已于 2024-09-07 12:51:34 修改

阅读量1k

点赞数 14

文章标签： spring mvc java

于 2024-09-07 12:51:19 首次发布

本文链接：https://blog.csdn.net/A0123abc_/article/details/141994065

版权

一、在本文中，我们将通过一个实际的例子来了解如何使用 Spring MVC 架构来构建一个简单的广告管理系统。这个系统包括以下几个功能模块：

广告信息的增删改查（CRUD）
广告分类的管理
广告搜索功能
项目结构图

二、DAO层解析

在DAO层，我们定义了一个接口AdvDaoProxy，用注解方式用于操作数据库中的广告信息。以下是关键方法及其功能：

package com.fs.dao;

import com.fs.pojo.AdvCategory;
import com.fs.pojo.AdvInfo;
import org.apache.ibatis.annotations.*;
import org.springframework.stereotype.Repository;

import java.time.chrono.AbstractChronology;
import java.util.List;

/**
 * @Version:1.0
 * @Description: TODO(一句话描述该类的功能)
 * @Date: 2024/8/31 10:37
 * @Author: tao
 */
@Repository
public interface AdvDaoProxy {
    @Select("select * from advinfo")
    @Results(value = {
            @Result(id = true, column = "advId", property = "advId"),
            @Result(id = true, column = "advTitle", property = "advTitle"),
            @Result(id = true, column = "advContent", property = "advContent"),
            @Result(id = true, column = "clickCount", property = "clickCount"),
            @Result(id = true, column = "expiredTime", property = "expiredTime"),
            @Result(id = true, column = "categoryId", property = "categoryId"),
            @Result(id = true, column = "remark", property = "remark"),
            @Result(id = true, column = "categoryId", property = "advCategory",
                    one = @One(select = "com.fs.dao.AdvDaoProxy.getAdvCategoryById"))
    }, id = "adInfoMap")
    List<AdvInfo> queryALL();

    //    查询单个页面
    @Select("select * from advinfo where advId=#{advId}")
    @ResultMap("adInfoMap")
    AdvInfo queryAdvOne(@Param("advId") int advId);

    //  将AdvCategory传AdvInfo.advCategory
    @Select("select * from advcategory where categoryId=#{categoryId}")
    AdvCategory getAdvCategoryById(int categoryId);

    //新增信息
    @Insert("insert into advinfo(categoryId,advTitle,expiredTime,advContent,remark) values(#{categoryId},#{advTitle},#{expiredTime},#{advContent},#{remark})")
    int addAdvInfo(AdvInfo advInfo);

    //修改广告
    @Update("update advinfo set  advTitle=#{advTitle},expiredTime=#{expiredTime},categoryId=#{categoryId},remark=#{remark} " +
            "where advId=#{advId}")
    int updateAdvInfo(AdvInfo advInfo);

    //  通过name查categoryId
    @Select("select categoryId from advcategory  where categoryName=#{name}")
    Integer queryIdByName(@Param("name") String name);

    //    删除该广告
    @Delete("delete from advinfo where advId=#{advId}")
    int delAdvMation(int advId);

    //    查询所有商品分类
    @Select("select categoryName from advcategory")
    List<String> queryAllName();

    //    通过id查名字
    @Select("select categoryName from advcategory where categoryId=#{categoryId}")
    String queryNameByid(@Param("categoryId") int categoryId);


//    实现搜索功能：通过categoryName,title查询categoryId
    @Select("select categoryId from advcategory  where categoryName=#{name} ")
    Integer queryIdByNaTle(@Param("name") String name);

//    categoryId,来搜索具体广告信息
    @Select("select * from advinfo where categoryId=#{categoryId} and advTitle like #{title}")
    @ResultMap("adInfoMap")
    List<AdvInfo> queryAdvByCaId(@Param("categoryId") int categoryId,@Param("title") String title);

}

三、Controller 层

Controller 层是 Spring MVC 的核心部分，它负责处理 HTTP 请求并将它们转发到相应的业务逻辑层进行处理。在我们的项目中，我们只有一个控制器类 AdvHandler，它包含了所有与广告管理相关的路由和处理方法。

@Controller
@RequestMapping("/adv")
public class AdvHandler {

    // 注入服务层的依赖
    @Autowired
    private AdvService advService;

    // 处理广告列表页面的请求
    @RequestMapping("/list")
    public String list(Model model) {
        List<AdvInfo> advInfos = advService.listAll();
        model.addAttribute("advInfos", advInfos);
        return "adv/list";
    }

    // 处理添加新广告的请求
    @RequestMapping("/add")
    public String add(@ModelAttribute("adv") AdvInfo advInfo) {
        advService.save(advInfo);
        return "redirect:/adv/list";
    }

    // 处理编辑广告的请求
    @RequestMapping("/edit/{id}")
    public String edit(@PathVariable("id") Long id, Model model) {
        AdvInfo advInfo = advService.findById(id);
        model.addAttribute("adv", advInfo);
        return "adv/edit";
    }

    // 处理更新广告的请求
    @RequestMapping("/update")
    public String update(@ModelAttribute("adv") AdvInfo advInfo) {
        advService.update(advInfo);
        return "redirect:/adv/list";
    }

    // 处理删除广告的请求
    @RequestMapping("/delete/{id}")
    public String delete(@PathVariable("id") Long id) {
        advService.delete(id);
        return "redirect:/adv/list";
    }

    // 处理搜索广告的请求
    @RequestMapping("/search")
    public String search(@RequestParam("keyword") String keyword, Model model) {
        List<AdvInfo> advInfos = advService.search(keyword);
        model.addAttribute("advInfos", advInfos);
        return "adv/list";
    }
}

四、在解析提供的JSP页面代码时，我们将关注HTML表单、JSP脚本以及JavaScript代码，以了解它们如何协同工作以实现广告管理系统的功能。以下是代码的详细解析：

四、新增广告表单

表单设计：

- <form>标签定义了一个POST请求的表单，其action属性指向addAdvInfo.action，用于处理新增广告的请求。
- <label>标签为输入字段提供了文本描述，并通过for属性与相应的输入元素ID关联。
- <input>标签用于创建文本输入字段，如广告标题和过期时间，并通过required属性确保这些字段必须填写。
- <select>标签用于创建下拉菜单，允许用户选择广告分类。
- <textarea>标签用于创建多行文本输入框，用于输入广告内容和备注。
- <input type="submit">按钮用于提交表单数据。


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>新增广告信息</title>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #f8e9c8; /* 淡黄色背景 */
            font-family: Arial, sans-serif;
        }

        form {
            background-color: #fff4d1; /* 更浅的黄色背景 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 20px auto;
        }

        label {
            color: #d35400; /* 深橙色标签 */
            font-weight: bold;
        }

        input[type="text"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 20px;
            border: 1px solid #e67e22; /* 橙色边框 */
            border-radius: 4px;
        }

        input[type="submit"] {
            background-color: #e67e22; /* 橙色按钮 */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #d35400; /* 深橙色按钮悬停效果 */
        }
    </style>

</head>
<body>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<h2>新增广告信息</h2>
<form action="addAdvInfo.action" method="post" >
    <label for="title">广告标题:</label><br>
    <input type="text" id="title" name="advTitle" required><br>

    <label for="expireTime">过期时间:</label><br>
    <input type="date" id="expireTime" name="expiredTime" required><br>

    <label for="category">广告分类:</label><br>
    <select id="category" name="categoryName">
        <option value="用户未选择">请选择</option>
        <option value="电子产品">电子产品</option>
        <option value="汽车">汽车</option>
        <option value="房地产">房地产</option>
    </select>
    <br>

    <label for="content">广告内容:</label><br>
    <textarea id="content" name="advContent" rows="4" cols="50" required></textarea><br>

    <label for="remark">备注:</label><br>
    <textarea id="remark" name="remark" rows="2" cols="50"></textarea><br>

    <input type="submit" id="sub" value="新增广告">
</form>
</body>
</html>

五、广告信息首页

1.广告信息查询表单

表单设计：

- 类似于新增广告表单，查询表单也使用<form>标签，并通过action属性指向search.action，用于执行广告搜索。
- <select>和<input>标签组合用于创建搜索条件，用户可以输入广告标题并选择广告分类。
- <button>标签用于触发搜索操作。

2.广告信息表格

表格显示：

- <table>标签用于创建表格，<tr>、<th>和<td>标签用于定义表格的行、表头和单元格。
- <% %>是JSP脚本标记，用于在HTML中嵌入Java代码。
- 通过JSP脚本，从服务器端获取广告列表，并动态生成表格内容。
- <fmt:formatDate>标签用于格式化日期字段。
- 表格中包含操作链接，如修改和删除，以及JavaScript代码用于确认删除操作。

3.divIfo.jsp

<%@ page import="com.fs.pojo.AdvInfo" %>
<%@ page import="java.util.List" %>
<%@ page import="java.net.URLEncoder" %><%--
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<%@ page isELIgnored="false" %>

<html>
<head>
    <title>广告信息查询页面</title>
    <head>
        <title>广告信息查询页面</title>
        <style>
            body {
                font-family: 'Arial', sans-serif;
                background-color: #f5f5dc;
                color: #333;
            }

            table {
                width: 100%;
                border-collapse: collapse;
                background-color: #fff;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }

            th {
                background-color: #f0ad4e; /* 暖色调的橙色 */
                color: white;
            }

            tr:nth-child(even) {
                background-color: #f9f9f9; /* 浅灰色，为表格行添加条纹效果 */
            }

            tr:hover {
                background-color: #e8e8e8; /* 鼠标悬停时的背景色 */
            }

            label, input, select, button {
                margin: 5px;
            }

            button {
                background-color: #d9534f; /* 暖色调的按钮背景色 */
                color: white;
                border: none;
                padding: 10px 20px;
                text-transform: uppercase;
                cursor: pointer;
            }

            button:hover {
                background-color: #c9302c; /* 按钮悬停效果 */
            }

            a {
                color: #daa520; /* 暖色调的链接颜色 */
                text-decoration: none;
            }

            a:hover {
                text-decoration: underline;
            }

            #deleteLink {
                color: #d9534f; /* 删除链接颜色 */
            }

            #deleteLink:hover {
                text-decoration: underline;
            }
        </style>
    </head>
</head>
<body>
<h2>广告信息查询</h2>
<form action="search.action" method="post">
    <label>广告分类:</label>
    <select id="category" name="categoryName">
        <option value="用户未选择">请选择</option>
        <option value="电子产品">电子产品</option>
        <option value="汽车">汽车</option>
        <option value="房地产">房地产</option>
    </select><br>
    <label>广告标题:</label>
    <input type="text" name="title">
    <button type="submit">检索</button>
</form>
<table>
    <tr>
        <th>编号</th>
        <th>广告标题</th>
        <th>点击数量</th>
        <th>过期时间</th>
        <th>广告分类</th>
        <th>操作</th>
    </tr>
   <%
        List<AdvInfo> advList = (List<AdvInfo>) request.getAttribute("advList");
        if (advList != null) {
            for (AdvInfo adv : advList) {
    %>
    <tr bgcolor="#f5f5dc">
        <td><%=adv.getAdvId()%></td>
        <td><%=adv.getAdvTitle()%></td>
        <td><%=adv.getClickCount()%></td>
        <td><input type="text" name="expiredTime" value="<fmt:formatDate value="<%=adv.getExpiredTime()%>" pattern="yyyy-MM-dd HH:mm:ss"/>" /></td>
        <td><%=adv.getAdvCategory().getCategoryName()%></td>
        <td>
            <a href="showUpdateAdv.action?id=<%=adv.getAdvId()%>">修改</a>
            <a href="javascript:void(0);" id="deleteLink" onclick="confirmDelete()">删除</a>

            <script>
                function confirmDelete() {
                    var result = confirm("确定要删除这条广告吗？");
                    if (result) {
                        window.location.href = "delAdvInfo.action?id=<%=adv.getAdvId()%>";
                    }
                }
            </script>
        </td>
    </tr>
    <%
            }
        }
    %>
</table>
<br>
<a href="advadd.jsp">新增广告</a>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var deleteLink = document.getElementById('deleteLink');
        deleteLink.addEventListener('click', function() {
            var result = confirm("您确定要删除这条广告吗？");
            if (result) {
                window.location.href = 'delAdvInfo.action?id=' + adv.getAdvId();
            }
        });
    });
</script>
</body>
</html>

六、更新广告信息表单

表单设计：

- 表单用于更新广告信息，包含隐藏字段来传递广告ID。
- 其他输入字段如广告标题、过期时间、广告内容等，其值通过JSP脚本从请求属性中动态设置。
- <select>下拉菜单的选项是通过遍历请求属性中的分类名称列表动态生成的，并且当前广告的分类会被设置为选中状态。
- <input type="submit">按钮用于提交更新请求。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.fs.pojo.AdvInfo" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>修改广告信息</title>
    <style>
        body {
            background-color: #f8e9c8; /* 淡黄色背景 */
            font-family: Arial, sans-serif;
        }

        form {
            background-color: #fff4d1; /* 更浅的黄色背景 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 20px auto;
        }

        label {
            color: #d35400; /* 深橙色标签 */
            font-weight: bold;
        }

        input[type="text"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 20px;
            border: 1px solid #e67e22; /* 橙色边框 */
            border-radius: 4px;
        }

        input[type="submit"] {
            background-color: #e67e22; /* 橙色按钮 */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #d35400; /* 深橙色按钮悬停效果 */
        }
    </style>
</head>
<body>

<form action="updateAdvInfo.action" method="post">
    <%AdvInfo advInfo= (AdvInfo)request.getAttribute("ADINFO");
    %>
    <input type="hidden" name="advId" value="<%=advInfo.getAdvId()%>"/>
    <p>广告标题: <input type="text" name="advTitle" value="<%=advInfo.getAdvTitle()%>" /></p>
    <p>过期时间: <input type="text" name="expiredTime" value="<fmt:formatDate value="<%=advInfo.getExpiredTime()%>" pattern="yyyy-MM-dd HH:mm:ss"/>" /></p>
 <p>广告内容: <input type="text" name="advContent" value="<%=advInfo.getAdvContent()%>" /></p>
    <p>广告分类:
        <select name="categoryName">
            <%
                List<String> names = (List<String>) request.getAttribute("NAME");
                for(String name : names) {
                    String selected = name.equals((String) request.getAttribute("SNAME")) ? "selected" : "";
            %>
            <option value="<%= name %>" <%= selected %>><%= name %></option>
            <%
                }
            %>
        </select>
    </p>
    <p>备注: <input type="text" name="remark" value="<%=advInfo.getRemark()%>" /></p>
    <p><input type="submit" value="修改广告" /></p>
</form>
</body>
</html>

七、效果图展示

八、技术点总结

表单处理：通过HTML表单和JSP脚本来收集和展示用户输入。
服务器端数据交互：使用JSP脚本与服务器端逻辑交互，动态生成页面内容。
数据验证：利用HTML5的required属性进行基本的数据验证。
日期格式化：通过<fmt:formatDate>标签对日期进行格式化。
JavaScript事件处理：使用JavaScript为删除操作添加了用户确认步骤。
这些技术点共同构成了一个用户友好的界面，使得广告管理系统的前端不仅易于使用，而且能够有效地与后端服务进行交互。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.fs.pojo.AdvInfo" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>修改广告信息</title>
    <style>
        body {
            background-color: #f8e9c8; /* 淡黄色背景 */
            font-family: Arial, sans-serif;
        }

        form {
            background-color: #fff4d1; /* 更浅的黄色背景 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 20px auto;
        }

        label {
            color: #d35400; /* 深橙色标签 */
            font-weight: bold;
        }

        input[type="text"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 20px;
            border: 1px solid #e67e22; /* 橙色边框 */
            border-radius: 4px;
        }

        input[type="submit"] {
            background-color: #e67e22; /* 橙色按钮 */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #d35400; /* 深橙色按钮悬停效果 */
        }
    </style>
</head>
<body>

<form action="updateAdvInfo.action" method="post">
    <%AdvInfo advInfo= (AdvInfo)request.getAttribute("ADINFO");
    %>
    <input type="hidden" name="advId" value="<%=advInfo.getAdvId()%>"/>
    <p>广告标题: <input type="text" name="advTitle" value="<%=advInfo.getAdvTitle()%>" /></p>
    <p>过期时间: <input type="text" name="expiredTime" value="<fmt:formatDate value="<%=advInfo.getExpiredTime()%>" pattern="yyyy-MM-dd HH:mm:ss"/>" /></p>
 <p>广告内容: <input type="text" name="advContent" value="<%=advInfo.getAdvContent()%>" /></p>
    <p>广告分类:
        <select name="categoryName">
            <%
                List<String> names = (List<String>) request.getAttribute("NAME");
                for(String name : names) {
                    String selected = name.equals((String) request.getAttribute("SNAME")) ? "selected" : "";
            %>
            <option value="<%= name %>" <%= selected %>><%= name %></option>
            <%
                }
            %>
        </select>
    </p>
    <p>备注: <input type="text" name="remark" value="<%=advInfo.getRemark()%>" /></p>
    <p><input type="submit" value="修改广告" /></p>
</form>
</body>
</html>