广告系统SpringBoot增删改查及分页查询

本文所用到的技术点

  • HTML/CSS:用于构建用户界面。
  • JavaScript/jQuery:用于处理前端逻辑和异步数据交换。
  • Ajax:用于在不刷新页面的情况下与服务器进行数据交换。
  • Spring MVC:用于处理后端请求和响应。
  • 文件上传:处理用户上传的文件,并保存到服务器。
  • 会话管理:使用 HTTP 会话来存储用户信息。

1.登陆界面(login.html)

简单的网页表单和后端处理逻辑的组合,用于实现用户登录并上传头像的功能

前端部分 (HTML + JavaScript+jQuery)

  1. HTML 表单
    • 包含三个输入字段:姓名、密码和一个文件上传控件。
    • 一个按钮用于触发登录和图片上传的操作。
  1. JavaScript 脚本
    • 使用 jQuery 库来处理表单提交。
    • 当用户点击“登录并上传图片”按钮时,脚本会检查是否选择了文件。
    • 如果选择了文件,它会创建一个 FormData 对象,将文件和其他表单数据附加到这个对象中。
    • 使用 $.ajax 方法发送一个 POST 请求到后端的 login URL。
    • 如果后端响应成功(response.code == 200),则显示用户信息并重定向到另一个页面(advInfo.html)。
    • 如果登录失败或发生错误,会显示相应的错误消息。
 <script type="text/javascript">
        $(function(){
            $(document).ready(function() {
                $("#sub").click(function (){
                    // 检查是否有文件被选择
                    var fileInput = $('#image')[0];
                    if (fileInput.files.length === 0) {
                        alert('请选择一个图片文件!');
                        return;
                    }
                    // 创建FormData对象
                    var formData = new FormData();
                    formData.append('uploadFile', fileInput.files[0]);
                    formData.append('name', $('#name').val());
                    formData.append('pass', $('#pass').val());

                    $.ajax({
                        url: 'login', // 后端处理登录的URL
                        type: 'post',
                        data:formData,
                        processData: false,  // 告诉jQuery不要处理发送的数据
                        contentType: false,  // 告诉jQuery不要设置内容类型
                        success: function(response) {
                            if(response.code==200){
                                alert(response.code)
                                alert(""+response.user.name)
                                alert(""+response.user.url)
                                // 处理成功响应
                                location.href="advInfo.html"
                            }else {
                                $("#msg").html(result.message);
                            }
                        },
                        error: function() {
                            alert("登陆失败")
                        }
                    });
                });
            });
        });

    </script>


<form id="loginForm" >
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required><br>
    <label for="pass">密码:</label>
    <input type="password" id="pass" name="pass" required><br>
    <label for="image">上传图片:</label>
    文件1<input type="file" id="image" name="uploadFile"><br/>
    <button type="button" id="sub">登录并上传图片</button>
</form>
<div id="msg"></div>

后端部分 (Java Spring MVC)

  1. @RequestMapping 注解
    • 定义了一个处理 /login 请求的方法。
  1. 参数接收
    • 通过 @RequestParam 注解接收前端传来的姓名、密码和上传的文件。
  1. 文件处理
    • 检查上传的文件是否为空。
    • 如果不为空,获取文件的原始文件名,并在服务器上创建一个新文件。
    • 使用 file.transferTo(serverFile) 方法将文件保存到服务器。
  1. 用户处理
    • 创建一个 User 对象,并调用 advService.login(user) 方法进行用户验证。
    • 如果用户验证成功,并且文件上传成功,更新用户的 URL 并存储用户信息到会话中。
  1. 响应构建
    • 根据操作结果构建响应,包括用户信息、状态码和消息。
    • 如果文件上传成功,返回状态码 200 和成功消息。
    • 如果未选择图片,返回状态码 500 和错误消息。
 @RequestMapping("login")
    public Map<String, Object> login(@RequestParam("name") String name, @RequestParam("pass") String pass, @RequestParam("uploadFile") MultipartFile file,
                                     HttpServletRequest request) throws IOException {
        Map<String, Object> map = new HashMap<>();
        String realPath = request.getSession().getServletContext().getRealPath("");
        HttpSession session = request.getSession();
        System.out.println("=========="+file);
        User user = new User(name, pass, "");
        User user1 = advService.login(user);
        if (!file.isEmpty()) {
            // 获取原始文件名
            String originalFilename = file.getOriginalFilename();
            // 创建保存文件的目标路径
            File serverFile = new File(realPath + originalFilename);
            // 保存文件
            file.transferTo(serverFile);
            user1.setName(name);
            user1.setPass(pass);
            user1.setUrl(file.getOriginalFilename());
            advService.updateUrl(user1);
            map.put("user", user1);
            map.put("code", 200);
            map.put("msg", "图片上传成功");
            // 将用户信息存储在会话中
            session.setAttribute("user", user1);
        } else {
            map.put("user", user);
            map.put("code", 500);
            map.put("msg", "未选择图片");
        }
        return map;
    }

2.登陆成功页面展示

2. 前端JavaScript与jQuery的实现

2.1 页面初始化与广告信息加载

  • 功能:页面加载完成后,自动调用loadAdvInfo函数加载第一页的广告信息。
  • 方法:使用jQuery的AJAX方法请求后端接口,获取数据并动态生成表格行。

2.2 分页控制

  • 功能:实现广告信息的分页显示和导航。
  • 方法:根据从后端获取的总页数动态生成页码按钮,允许用户通过点击页码按钮跳转到对应页面。

2.3 搜索与重置

  • 功能:提供搜索和重置功能,用户可以根据广告标题和分类进行搜索,或重置搜索条件。
  • 方法:通过按钮点击事件触发搜索或重置操作,重新加载广告信息。

2.4 编辑与删除操作

  • 功能:在广告信息列表中提供编辑和删除按钮。
  • 方法:为每个按钮绑定事件处理函数,点击时执行相应的操作。
 <script type="text/javascript">
        $(function () {
            let currentPage = 1;
            let totalPages;
            loadAdvInfo(currentPage);
            function loadAdvInfo(pageIndex) {
                console.log("loadAdvInfo运行,页码:" + pageIndex)
            var categoryName=$("#category").val();
                var title=$("#title").val();
                $.ajax({
                    url: "advInfo.action",
                    type: "get",
                    data: {
                        categoryName:categoryName,
                        title:title,
                        pageIndex: pageIndex,
                        pageCount: 5// 假设每页5条数据
                    },
                    success: function (data) {
                        $('#userInfo').text(data.user.name);
                        var elementById = document.getElementById("im");
                        elementById.setAttribute('src',data.user.url);
                        var myTbody = document.getElementById("myTbody");
                        myTbody.innerHTML = "";
                        for (var i = 0; i < data.advInfoList.length; i++) {
                            var advjson = data.advInfoList[i];
                            addRow(advjson);
                        }
                        totalPages = data.totalPages; // 更新总页数
                        updatePagination();
                    },
                    error: function () {
                        alert("加载失败")
                    },
                    dataType: "json"
                });
            }
            function updatePagination() {
                var prevButton = document.getElementById('prevPage');
                var nextButton = document.getElementById('nextPage');
                var pageInfo = document.getElementById('pageInfo');

                // 设置上一页按钮状态
                if (currentPage > 1) {
                    prevButton.disabled = false; // 确保按钮可用
                    prevButton.onclick = function () { // 设置点击事件
                        currentPage--; // 当前页码减一
                        loadAdvInfo(currentPage); // 加载上一页的数据
                    };
                } else {
                    prevButton.disabled = true; // 如果已经是第一页,禁用按钮
                }

                // 设置下一页按钮状态
                if (currentPage < totalPages) {
                    nextButton.disabled = false; // 确保按钮可用
                    nextButton.onclick = function () { // 设置点击事件
                        currentPage++; // 当前页码加一
                        loadAdvInfo(currentPage); // 加载下一页的数据
                    };
                } else {
                    nextButton.disabled = true; // 如果已经是最后一页,禁用按钮
                }
                // 更新页面信息
                pageInfo.innerText = "当前页: " + currentPage + " / 总页数: " + totalPages;

                // 清除现有的页数链接
                var pagesDiv = document.getElementById('pages');
                pagesDiv.innerHTML = '';

                // 生成新的页数链接
                for (var i = 1; i <= totalPages; i++) {
                    var pageLink = document.createElement('button');
                    pageLink.innerText = i;
                    pageLink.className = 'page-link';
                    if (i === currentPage) {
                        pageLink.disabled = true; // 当前页码的按钮应被禁用
                    }
                    pageLink.onclick = function () {
                        currentPage = parseInt(this.innerText);
                        loadAdvInfo(currentPage);
                    };
                    pagesDiv.appendChild(pageLink);
                }
            }


            // 绑定搜索按钮事件
            $("#search").click(function () {
                currentPage = 1; // 重置为第一页
                loadAdvInfo(currentPage);
            });

            // 返回首页事件
      $("#selectAll").click(function (){
          // 清空select元素的值
          document.getElementById('category').selectedIndex = 0; // 设置为第一个选项,通常是"请选择"
          // 清空input元素的值
          document.getElementById('title').value = '';
          currentPage = 1; // 重置为第一页
          loadAdvInfo(currentPage);
      });
            function addRow(advjson) {
                var myTbody = document.getElementById("myTbody");
                var row = document.createElement("tr");
                var td5 = document.createElement("td");
                td5.innerText = advjson.advId;
                var td1 = document.createElement("td");
                td1.innerText = advjson.advTitle;
                var td2 = document.createElement("td");
                td2.innerText = advjson.clickCount;
                var td3 = document.createElement("td");
                td3.innerText = advjson.expiredTime;
                var td4 = document.createElement("td");
                td4.innerText = advjson.advCategory.categoryName;

                var td6 = document.createElement("td");
                var updatebtn = document.createElement("input");
                updatebtn.type = "button";
                updatebtn.value = "修改";
                updatebtn.id = advjson.advId;
                updatebtn.onclick = editRow;

                var td7 = document.createElement("td");
                var deletebtn = document.createElement("input");
                deletebtn.type = "button";
                deletebtn.value = "删除";
                deletebtn.id = advjson.advId;
                deletebtn.onclick = delRow;
               /* deletebtn.onclick = function (){if(confirm("确认删除吗?")){
                    delRow();
                }};*/

                td6.appendChild(updatebtn);
                td6.appendChild(deletebtn);

                row.appendChild(td5);
                row.appendChild(td1);
                row.appendChild(td2);
                row.appendChild(td3);
                row.appendChild(td4);
                row.appendChild(td6);
                row.appendChild(td7);
                myTbody.appendChild(row);
            }

            function editRow() {
                //将id在本地存储   this:当前按钮对象
                localStorage.setItem("advId", this.id);
                //打开修改页面
                window.location.href = "update.html";
            }

            function delRow() {
                localStorage.setItem("advId", this.id);
                var advId = localStorage.getItem("advId");
                if(confirm("确认删除吗?")){
                    $(function () {
                        $.ajax({
                            url: "delAdvInfo.action",
                            type: "post",
                            data: {advId: advId},
                            success: function (data) {
                                location.href = "advInfo.html";
                                if (response.code == 200) {
                                    alert("删除成功: " + response.message);
                                    location.href = "advInfo.html";
                                } else {
                                    alert("删除失败:" + response.message);
                                }
                            },
                            error: function () {
                                alert("请求失败");
                            }
                        })
                    })
                }

            }
        });
    </script>
</head>
<body>

<div id="userInfo"></div>
<div id="user-img">
    <img src="image_path.jpg" id="im" alt="用户头像">
</div>
<h2>广告信息查询</h2>
<form  method="post" id="sreachForm">
    <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" id="title" name="title">
    <p><input type="button" id="search" value="检索"/></p>
    <p><input type="button" id="selectAll" value="返回首页"/></p>
</form>

<table id="myTable">

    <thead>
    <tr>
        <th>编号</th>
        <th>广告标题</th>
        <th>点击数量</th>
        <th>过期时间</th>
        <th>广告分类</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="myTbody">
    </tbody>


</table>
<div>
    <button id="prevPage">上一页</button>
    <span id="pageInfo"></span>
    <div id="pages"></div>
    <button id="nextPage">下一页</button>
</div>
<br>
<!--显示是否删除成功的提示信息-->
<p id="str"></p>
<a href="advadd.html">新增广告</a>

2. 后端Spring框架的处理

2.1 删除广告信息

  • 功能:通过delAdvInfo.action接口,用户可以删除指定的广告信息。
  • 方法:接收广告ID,调用服务层方法delAdvMation进行删除操作。
  • 响应:根据操作结果返回状态码和消息,成功则返回200和"delYes",失败则返回500和"delNo"。

2.2 显示编辑广告信息

  • 功能:通过showUpdateAdv.action接口,系统提供编辑广告的界面,并加载广告的详细信息。
  • 方法:根据广告ID查询广告信息,并获取所有广告分类的名称。
  • 响应:将广告信息和分类名称打包返回给前端。

2.3 更新广告信息

  • 功能:通过updateAdvInfo.action接口,用户可以更新广告信息。
  • 方法:接收更新后的广告信息对象,更新数据库中的记录。
  • 响应:根据更新操作的结果返回相应的状态码和消息。

2.4 广告信息查询

  • 功能:通过advInfo.action接口,用户可以根据分类和标题搜索广告信息,并进行分页显示。
  • 方法:根据用户输入的条件查询广告信息,并处理分页逻辑。
  • 响应:返回当前页的广告信息列表、用户信息以及分页信息。

@RestController
@ResponseBody
public class AdvController {
    @Resource
    private AdvService advService;

    @RequestMapping("delAdvInfo.action")
    @ResponseBody
    public Map<String, Object> delAdvInfo(@RequestParam("advId") int advId) throws Exception {
        Map<String, Object> result = new HashMap<>();
        System.out.println(advId);
        int i = advService.delAdvMation(advId);
        if (i > 0) {
            result.put("message", "delYes");
            result.put("code", 200);
        } else {
            result.put("message", "delNo");
            result.put("code", 500);
        }
        return result;
    }

    @RequestMapping("advInfo.action")
    public Map<String, Object> method15(Condition condition, String categoryName, HttpServletRequest request) throws Exception {
        System.out.println("当前页码"+condition.getPageIndex());
      int  offset=(condition.getPageIndex()-1)*condition.getPageCount();
        condition.setOffset(offset);
        Map<String, Object> map = new HashMap<>();
        User user = (User) request.getSession().getAttribute("user");
        System.out.println(user);
        System.out.println("456+++++++++" + user);
        map.put("user", user);
        if (condition.getTitle() != "" && categoryName != "用户未选择") {
            int i = advService.queryIdByName(categoryName);
            condition.setCategoryId(i);
            PageResult<AdvInfo> byAdvAll = advService.findPagenated(condition);
            List<AdvInfo> advInfoList = byAdvAll.getData();
            //一个map就等同与一个json对象
            map.put("advInfoList", advInfoList); // 存储广告列表
            map.put("currentPage", byAdvAll.getCurrentPage());
            map.put("totalPages", byAdvAll.getTotalPages());
            map.put("totalItems", byAdvAll.getTotalItems());
        } else {
            PageResult<AdvInfo> byAdvAll = advService.findByAdvAll(condition);
            List<AdvInfo> advInfoList = byAdvAll.getData();
            //一个map就等同与一个json对象
            map.put("advInfoList", advInfoList); // 存储广告列表
            map.put("currentPage", byAdvAll.getCurrentPage());
            map.put("totalPages", byAdvAll.getTotalPages());
            map.put("totalItems", byAdvAll.getTotalItems());
        }
        return map;
    }


}

3.修改页面

这段代码展示了一个广告信息管理系统中的编辑广告信息功能。它包括前端的JavaScript代码和后端的Spring框架控制器方法。以下是对这些代码的详细功能、方法和技术描述:

前端JavaScript代码

功能
  • 在页面加载完成后,从本地存储中获取广告ID,并使用该ID从服务器获取广告的详细信息。
  • 将获取的广告信息填充到表单中,以便用户可以编辑。
  • 提供一个表单,让用户可以修改广告信息,并通过AJAX请求将修改后的信息发送到服务器。
方法和技术
  • 使用jQuery的$(document).ready方法确保DOM完全加载后再执行脚本。
  • 使用localStorage获取保存的广告ID。
  • 使用AJAX的$.ajax方法从后端获取广告信息,并在成功获取后使用回调函数填充表单。
  • 使用$.each遍历从服务器获取的广告分类列表,动态生成下拉菜单选项。
  • 为提交按钮绑定点击事件,当点击时,阻止默认的表单提交行为,并通过AJAX发送修改后的广告信息。
  • 使用JSON.stringify将JavaScript对象转换为JSON字符串,以便作为AJAX请求的数据发送。
  • 在AJAX请求成功后,根据返回的代码判断操作是否成功,并给出相应的提示。

 <script>
        $(document).ready(function () {
            let advId = localStorage.getItem("advId");
            $.ajax({
                url: "showUpdateAdv.action",
                type: "get",
                data: {id: advId},
                success: function (data) {
                    console.log("" + data);
                    $("#advId").val(data.advInfo.advId);
                    $("#advTitle").val(data.advInfo.advTitle);
                    $("#expiredTime").val(data.advInfo.expiredTime);
                    $("#advContent").val(data.advInfo.advContent);
                    $("#remark").val(data.advInfo.remark);
                    let names = data.names;
                    let selectedName = data.advInfo.advCategory.categoryName;
                    // 填充分类下拉菜单
                    var categorySelect = $("#categoryName");
                    $.each(names, function (index, name) {
                        var selected = (name === selectedName) ? "selected" : "";
                        categorySelect.append('<option value="' + name + '" ' + selected + '>' + name + '</option>');
                    });

                },
                error: function () {
                    console.log("数据显示出错");
                }
            });


            // 处理表单提交
            $("#sub").click(function () {
                var advId = $('#advId').val();
                var advTitle = $('#advTitle').val();
                var expiredTime = $('#expiredTime').val();
                var categoryName = $('#categoryName').val();
                var advContent = $('#advContent').val();
                var remark = $('#remark').val();
                let information = {
                    advId: advId,
                    advTitle: advTitle,
                    expiredTime: expiredTime,
                    advContent: advContent,
                    remark: remark,
                    advCategory: {
                        categoryName: categoryName
                    }
                };

                alert("" + JSON.stringify(information))
                $.ajax({
                    type: "post",
                    url: "updateAdvInfo.action", // 你的服务器端URL
                    contentType: "application/json",
                    data: JSON.stringify(information),


                    success: function (data) {
                        alert(data.code);
                        if (data.code == 200) {
                            location.href = "advInfo.html";
                        } else {
                            console.log("" + data.message)
                        }
                    },
                    error: function (xhr, status, error) {
                        alert("更新失败:" + error);
                    },
                    dataType: "json"
                });
            });
        });
    </script>
</head>
<body>
<form action="updateAdvInfo.action" method="post">
    <input type="hidden" id="advId" name="advId"/>
    <p>广告标题: <input type="text" id="advTitle" name="advTitle"/></p>
    <p>过期时间: <input type="text" id="expiredTime" name="expiredTime"/></p>
    <p>广告内容: <input type="text" id="advContent" name="advContent"/></p>
    <p>广告分类:
        <select id="categoryName" name="categoryName">
            <option value="用户未选择">请选择</option>
            <option value="电子产品">电子产品</option>
            <option value="汽车">汽车</option>
            <option value="房地产">房地产</option>
        </select>
    </p>
    <p>备注: <input type="text" id="remark" name="remark"/></p>
    <p><input type="button" id="sub" value="修改广告"/></p>
</form>
</body>
</html>

后端Spring框架控制器

功能
  • showUpdateAdv方法:根据广告ID查询广告的详细信息,包括广告分类的名称列表。
  • updateAdvInfo方法:接收修改后的广告信息,更新数据库中的记录,并返回操作结果。
方法和技术
  • 使用@RestController@ResponseBody注解定义REST风格的控制器和方法。
  • 使用@Resource注解注入AdvService服务,用于数据库操作。
  • showUpdateAdv方法:
    • 接收请求参数id,表示要编辑的广告ID。
    • 调用advService.queryAdvOne(id)查询广告信息。
    • 调用advService.queryAllName()获取所有广告分类的名称列表。
    • 将广告信息和分类名称列表打包成Map对象返回给前端。
  • updateAdvInfo方法:
    • 使用@RequestBody注解接收前端发送的JSON格式的广告信息。
    • 根据广告分类名称查询对应的ID,并设置到广告信息对象中。
    • 调用advService.updateAdvInfo(advInfo)更新数据库中的广告信息。
    • 根据更新操作的结果,返回包含状态码和消息的Map对象。

 @RequestMapping("showUpdateAdv.action")
    public Map<String, Object> showUpdateAdv(@RequestParam("id") int id) throws Exception {
        AdvInfo advInfo = advService.queryAdvOne(id);
        HashMap<String, Object> map = new HashMap<>();
        map.put("advInfo", advInfo);
        List<String> strings = advService.queryAllName();
        map.put("names", strings);
        return map;
    }


    @RequestMapping("updateAdvInfo.action")
    public Map<String, Object> updateAdv(@RequestBody AdvInfo advInfo) throws Exception {
        HashMap<String, Object> map = new HashMap<>();
        String categoryName = advInfo.getAdvCategory().getCategoryName();
        System.out.println("sagdjk:" + categoryName);
        int id = advService.queryIdByName(categoryName);
        advInfo.getAdvCategory().setCategoryId(id);
        advInfo.setCategoryId(id);
        System.out.println("============" + advInfo);
        int i = advService.updateAdvInfo(advInfo);

        if (i > 0) {
            map.put("code", 200);
            map.put("message", "success");
        } else {
            map.put("code", 300);
            map.put("message", "fail");
        }
        return map;
    }

4.添加页面

这段代码展示了一个广告信息管理系统中的新增广告信息功能。它包括前端的JavaScript代码和后端的Spring框架控制器方法。以下是对这些代码的详细功能、方法和技术描述:

前端JavaScript代码

功能
  • 在页面加载完成后,为“新增广告”按钮绑定点击事件。
  • 当点击按钮时,收集表单中的数据,包括广告标题、过期时间、广告分类、广告内容和备注。
  • 将收集到的数据封装成一个JavaScript对象,然后转换为JSON字符串。
  • 使用AJAX请求将JSON数据发送到服务器的addAdvInfo.action接口。
  • 根据服务器的响应,判断操作是否成功,并进行相应的页面跳转或错误提示。
方法和技术
  • 使用jQuery的$(function() {...})方法确保DOM完全加载后再执行脚本。
  • 使用$("#elementId").val()方法获取表单元素的值。
  • 创建一个JavaScript对象information来存储表单数据,并设置一个嵌套对象advCategory来存储广告分类信息。
  • 使用JSON.stringify(information)将JavaScript对象转换为JSON字符串。
  • 使用$.ajax方法发送AJAX请求,其中包含请求的URL、请求类型、内容类型、数据和成功回调函数。
  • 在成功回调函数中,根据返回的响应判断操作结果,并执行页面跳转或显示错误提示。

<script type="text/javascript">
    $(function (){
        $("#sub").click(function (){
            var advTitle = $("#title").val();
            var expiredTime = $("#expireTime").val();
            var categoryName = $("#category").val();
            var advContent = $("#content").val();
            var remark = $("#remark").val();
            var information={advTitle:advTitle,expiredTime:expiredTime,advContent:advContent,
                remark:remark, advCategory: {
                    categoryName: categoryName
            }};
            $.ajax({
                url: "addAdvInfo.action", // 服务器端处理脚本的路径
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(information),
                success: function(response) {
                    if (response === "yes") {
                       location.href="advInfo.html"
                    } else {
                        alert("操作失败:" + response);
                    }
                }

            });
        });

    });
</script>
<h2>新增广告信息</h2>
<form >
    <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="button" id="sub" value="新增广告">
</form>
</body>

后端Spring框架控制器

功能
  • addAdvNation方法:接收前端发送的广告信息,将其添加到数据库中,并返回操作结果。
方法和技术
  • 使用@RequestMapping注解定义处理新增广告信息请求的路径。
  • 使用@ResponseBody注解表示方法的返回值将作为HTTP响应的正文返回。
  • 使用@RequestBody注解接收前端发送的JSON格式的广告信息,并将其自动转换为AdvInfo对象。
  • 使用HttpServletResponse设置响应的内容类型为"application/json"。
  • 调用advService.queryIdByName方法根据广告分类名称查询对应的ID,并设置到广告信息对象中。
  • 调用advService.addAdvInfo方法将广告信息添加到数据库中。
  • 根据添加操作的结果返回字符串"yes"或"no",表示操作成功或失败。

    @RequestMapping("addAdvInfo.action")
    @ResponseBody
    public String addAdvNation(@RequestBody AdvInfo advInfo, HttpServletResponse response) throws Exception {
        response.setContentType("application/json");
        System.out.println("===============" + advInfo);
        int id = advService.queryIdByName(advInfo.getAdvCategory().getCategoryName());
        advInfo.setCategoryId(id);
        int i = advService.addAdvInfo(advInfo);
        if (i > 0) {
            return "yes";
        } else {
            return "no";
        }
    }

5.总结

在本广告信息管理系统中,我们实现了一个全面的功能集,包括用户登录、广告信息的增删改查以及分页显示,涵盖了前端和后端的多个关键技术点。以下是对整个系统的详细总结:

技术栈

  • HTML/CSS:用于构建用户界面,提供基本的页面结构和样式。
  • JavaScript/jQuery:处理前端逻辑,包括事件处理、数据收集和异步数据交换。
  • Ajax:实现与服务器的异步数据交换,无需刷新页面即可更新数据。
  • Spring MVC:后端框架,处理HTTP请求、业务逻辑和数据库操作。
  • 文件上传:处理用户上传的文件,如头像图片,并保存到服务器。
  • 会话管理:使用HTTP会话来存储和管理用户信息。

前端实现

  • 表单处理:使用HTML表单收集用户输入,如广告标题、过期时间、内容、分类和备注。
  • Ajax请求:通过jQuery的$.ajax方法发送POST请求,实现与后端的数据交互。
  • FormData对象:用于构建一组键值对,表示表单字段和它们的值,特别用于文件上传。
  • JSON数据处理:将JavaScript对象转换为JSON格式,以便作为HTTP请求的载荷发送。
  • 用户交互:通过弹窗和页面跳转提供用户反馈,如操作成功或失败的提示。

后端实现

  • 请求映射:使用@RequestMapping注解定义路由,将HTTP请求映射到特定的处理方法。
  • 参数接收:通过@RequestParam@RequestBody注解接收前端传递的参数和JSON数据。
  • 业务逻辑:调用服务层方法执行具体的业务操作,如用户验证、文件处理和数据库操作。
  • 响应构建:根据操作结果构建响应对象,包括状态码、消息和数据,返回给前端。
  • 异常处理:处理可能的异常情况,如文件上传失败或数据库操作错误,并返回相应的错误信息。

功能描述

  • 用户登录:用户可以通过填写姓名、密码和上传头像来登录系统。系统会验证用户信息并处理文件上传。
  • 广告信息管理:用户可以添加、查询、编辑和删除广告信息。系统提供了分页显示功能,使用户能够浏览大量数据。
  • 数据验证:系统在前端和后端都进行了数据验证,确保数据的完整性和准确性。
  • 安全性:通过会话管理和适当的错误处理,系统确保了用户数据的安全和操作的可靠性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值