浅尝前后端交互的滋味—＞（黑马旅游网）

最新推荐文章于 2025-04-02 22:38:00 发布

原创最新推荐文章于 2025-04-02 22:38:00 发布 · 963 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#java #html #mysql

HTML与Mysql的交互专栏收录该内容

1 篇文章

订阅专栏

该项目包含旅游门户网和后台管理系统两部分，涉及分页功能实现、数据替换、内容修改等难点。在门户网中，实现了分页显示和数据替换功能；后台管理则支持数据修改操作。项目中大量使用了request和response进行数据传递，同时通过SQL语句处理数据，需要注意细节和错误调试。前后端交互主要采用request获取参数和response返回数据的方式。

项目介绍

旅游网共分为旅游门户网以及后台管理系统，功能模块如下：

1.旅游门户网

2.后台管理系统

3.MySQL结构

难点分析

旅游门户网

①分页功能时： 编写分页功能时。需要把数据库的所有内容调出，并且通过peagBean方法处理，在经过html的处理展示。

②替换数据时： 发送请求。传出数据，进行数据的替换。

后台管理

①数据修改：修改内容时，点击修改按钮，传出该行的数据，并跳转至修改的页面，并把数据回显在上面

总结

在此项目中，频繁使用request，response请求传数据，实现页面数据的展示，多次编写SQL语句，需认真仔细，该项目内容多稍不留神就会出错，需多使用DEBUG功能进行调试。

附：前后端交互的请求方式

 
一、接受html传来的参数——request
 //方式一.接受参数
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");
        String cidStr = request.getParameter("cid");

------------------------------------------------------------------------------

 //方式二.从session中获取登录用户
        Object user = request.getSession().getAttribute("user");
------------------------------------------------------------------------------
 //方式三.获取用户名和密码数据
        Map<String, String[]> map = request.getParameterMap();
        //2.封装User对象
        User user = new User();
        try {
            BeanUtils.populate(user, map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //3.调用Service查询
        // UserService service = new UserServiceImpl();
        User u = service.login(user);
------------------------------------------------------------------------------

二、返回html传来的数据——response

        //方式一.响应数据
        ObjectMapper mapper = new ObjectMapper();

        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(), info);
------------------------------------------------------------------------------
       //方式二.响应数据

          writeValue(user, response);

------------------------------------------------------------------------------
        
      //方式三.响应数据
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write(msg);