SpringMvc+Spring+MyBatis+Maven+Ajax+Json注解开发利用Maven的依赖导入不使用架包模式 (实操十一)

SpringMvc+Spring+MyBatis+Maven+Ajax+Json注解开发利用Maven的依赖导入不使用架包模式 (实操十)_星辰镜的博客-CSDN博客
上面的博客是环境配置和Mysql的操作
本文章的目标完成对数据库中表的数据查序

MySql查序语句:SELECT * FROM orders

分析表中的数据用java的方式如何存放

原始的三层架构没有写代码的情况没有写查询的功能代码的情况下

控制层
@Autowired定义:
@Autowired是一种注解，可以对成员变量、方法和构造函数进行标注，来完成自动装配的工作，@Autowired标注可以放在成员变量上，也可以放在成员变量的set方法上，也可以放在任意方法上表示，自动执行当前方法，如果方法有参数，会在IOC容器中自动寻找同类型参数为其传值
IOrderService service;
上面的作用相当于在控制层中注入Service层的数据

package Com.Orders.Controller;

/**
 * SpringMvc 控制层 部分代码省略
 */
@Controller
public class OrderController {
    @Autowired
    IOrderService service;


}

业务逻辑层

@Autowired定义:
@Autowired是一种注解，可以对成员变量、方法和构造函数进行标注，来完成自动装配的工作，@Autowired标注可以放在成员变量上，也可以放在成员变量的set方法上，也可以放在任意方法上表示，自动执行当前方法，如果方法有参数，会在IOC容器中自动寻找同类型参数为其传值
IOrderDao dao;
上面的作用相当于Service层中注入Dao层的数据

ackage Com.Orders.Service;

import java.util.List;
import java.util.Map;

/**
 * 业务逻辑层的接口
 */

public interface IOrderService {
}

package Com.Orders.Service;

/**
 * 业务逻辑层接口的实现类去实现接口未实现的方法
 */
@Service(value = "sService")
public class OrderServiceImp implements IOrderService {
    @Autowired
    IOrderDao dao;

}

数据访问层
对数据库的数据进行查序

package Com.Orders.Dao;

import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import java.util.List;
import java.util.Map;

/**
 * 数据反问层操作数据的增删改查
 */
public interface IOrderDao {
}

查询数据库的表中数据的代码

定义一个页面为首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页内容</title>
</head>
<body>
<div align="center">
        <h1>2022/9/19商品管理系统</h1>
    <a href="Service.html" style="font-size: 20px">点击这里进入查询页面的信息</a>
</div>
</body>
</html>

查询功能的数据跳到Service.html页面:
<a href="Service.html" style="font-size: 20px">点击这里进入查询页面的信息</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询页面信息</title>
    <style type="text/css">
        *{
            font-family: 楷体;
            font-size: 30px;
        }
        input{
            background-color: beige;
            color: red;
            border-radius: 12px;
        }
    </style>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div align="center">
    <h1>查询数据库中的信息页面</h1>
    <table>
        <tr>
            <th>订单编号</th>
            <th>用户名</th>
            <th>商品名称</th>
            <th>订单时间</th>
            <th>数量</th>
            <th>单价</th>
            <th>金额</th>
            <th>操作</th>
        </tr>
    </table>
</div>
</body>
</html>

当我们点击超链接的时候跳转到查序功能的页面

查询数据库中的信息页面结果

思考:以上面的两张图的跳转要用几行代码可以实现？

查询数据库表中的数据信息

在Service.html中定义Ajax请求

  <script>
        //Ajax请求访问
        $(function () {
            $.ajax({
                url: "list.do",
                type: "GET",
                data: "",
                success: function (json) {
                     parsTale(json);
                },
                error: function () {
                    alert("用户已经连接失败")
                },
                dataType: "json"
            })
        })
</script>

控制层

@RequestMapping("list.do")
    @ResponseBody
    public Object list() {
//因为查询的数据信息是多条记录 
//所以 在Java中用 List<Map<String, String>>
        List<Map<String, String>> list = service.getList();
       
    }

业务逻辑层

//Java存放的方式 方法名
List<Map<String, String>> getList();

 @Override
    public List<Map<String, String>> getList() {
//在业务实现类中调用Dao层的方法
        return dao.getList();
    }

数据访问层

    // @Select("SELECT * FROM orders") 数据库的Sql语句
     @Select("SELECT * FROM orders")
    List<Map<String, String>> getList();

查询书籍的信息结果返回到页面显示使用Json解析

 @RequestMapping("list.do")
    @ResponseBody
    public Object list() {
        List<Map<String, String>> list = service.getList();
        return list;
    }

在Service.html中解析数据

   //    定义方解析页面
        function parsTale(jsons) {
            for (var i = 0; i < jsons.length; i++) {
                $("table").append("<tr>" +
                    "<td>" + jsons[i].id + "</td>" +
                    "<td>" + jsons[i].name + "</td>" +
                    "<td>" + jsons[i].foondname + "</td>" +
                    "<td>" + jsons[i].ordertime + "</td>" +
                    "<td>" + jsons[i].count + "</td>" +
                    "<td>" + jsons[i].price + "</td>" +
                    "<td>" + jsons[i].amount + "</td>" +
                    "<td><input type='button' onclick='update(" + jsons[i].id + ")' value='修改按钮'>&nbsp;" +
                    "<input value='增加' type='button' onclick='add()'>&nbsp;" +
                    "<input value='删除' type='button'></td>" +
                    "</tr>")
            }

查询数据库中的信息页面结果

总结:为什么要使用框架:最重要的一点是方便

原文链接：https://blog.csdn.net/qq_56248592/article/details/126933252

SpringMvc+Spring+MyBatis+Maven+Ajax+Json注解开发 利用Maven的依赖导入不使用架包模式 (实操十)_星辰镜的博客-CSDN博客

上面的博客是环境配置和Mysql的操作

本文章的目标 完成对数据库中表的数据查序

MySql查序语句:SELECT * FROM orders

原始的三层架构没有写代码的情况没有写查询的功能代码的情况下

控制层

@Autowired定义:

上面的作用相当于在控制层中注入Service层的数据

业务逻辑层

@Autowired定义:

上面的作用相当于Service层中注入Dao层的数据

数据访问层

对数据库的数据进行查序

查询数据库的表中数据的代码

定义一个页面为首页

查询功能的数据跳到Service.html页面:

<a href="Service.html" style="font-size: 20px">点击这里进入查询页面的信息</a>

当我们点击超链接的时候跳转到查序功能的页面

思考:以上面的两张图的跳转要用几行代码可以实现？

查询数据库表中的数据信息

在Service.html中定义Ajax请求

控制层

业务逻辑层

数据访问层

查询书籍的信息结果返回到页面显示 使用Json解析

在Service.html中解析数据

总结:为什么要使用框架:最重要的一点是方便

SpringMvc+Spring+MyBatis+Maven+Ajax+Json注解开发利用Maven的依赖导入不使用架包模式 (实操十)_星辰镜的博客-CSDN博客

本文章的目标完成对数据库中表的数据查序

查询书籍的信息结果返回到页面显示使用Json解析