前端发送请求，利用数据库查询并将查询结果显示在前端页面

最新推荐文章于 2024-05-28 17:33:08 发布

我站在楼上看风景

最新推荐文章于 2024-05-28 17:33:08 发布

阅读量4.7k

点赞数 7

文章标签：前端数据库 javascript

本文链接：https://blog.csdn.net/qq_58705070/article/details/126455839

版权

这几天写javaweb的作品写的是在是头疼，搞了好久都没有搞明白利用数据库实现前端的增删改查是怎么搞出来的，后来经高人指点一二，终于是有了思路

主要思路

拿学生查询自己的信息来举例，可以分成一下几步来进行

在session中存储自己的登录信息，这个信息必须是唯一的，像学生就是存储学号
在后端获取session中存储的信息，我存的就是学号，根据学号查询学生的信息
连接数据库，开始查询，并将查询的结果返回一个结果集，这个结果集不能直接用，需要存到对象数组中
所以下一步就是将结果集存进对象数组中，这里推荐使用泛型
将这个数组发送到前端
利用js完成剩下的页面渲染

了解了基本思路之后，还有一点需要说一下，就是是axios，真的非常好用。

那么什么是axios呢？

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。
使用的时候直接引入这个行代码：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

现在开始写代码：

登录过程：

在前端提交数据之后再后端判断登录的是时候加上

String userid = request.getParameter("userid");
String password = request.getParameter("pswd");//这两句代码是后端获取前端表单的值
session.setAttribute("user", userid);

第一个参数：存储时候的名称
第二个参数：从前端获取的登录信息，等会根据这个来查询数据库

发送请求查询信息

先给触发查询事件的盒子添加一个点击事件

<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
       <div class="card-body">
              <a class="sel" onclick="sel()">查询信息</a>
       </div>
</div>
<div class="mian">
这是要添加内容的盒子
</div>

<script>
    let mian = document.getElementsByClassName("mian")[0];
    function sel() {
        axios({
            method: "post",
            url: "http://localhost:8080/student/GetStudent"
        }).then(function (resp) {
            let a = resp.data;
            console.log(a)
            mian.innerHTML = `<table class="table table-hover">
            <tbody>
              <tr>
                <td>姓名：</td>
                <td>` + a[0].name + `</td>
              </tr>
              <tr>
                <td>学号：</td>
                <td>` + a[0].number + `</td>
              </tr>
              <tr>
                <td>性别：</td>
                <td>` + a[0].sex + `</td>
              </tr>
              <tr>
                <td>学院：</td>
                <td>` + a[0].college + `</td>
              </tr>
              <tr>
                <td>班级：</td>
                <td>` + a[0].classNum + `</td>
              </tr>
              <tr>
                <td>专业：</td>
                <td>` + a[0].magor + `</td>
              </tr>
              <tr>
                <td>出生日期：</td>
                <td>` + a[0].birthday + `</td>
              </tr>
              <tr>
                <td>入学时间：</td>
                <td>` + a[0].admissionTime + `</td>
              </tr>
              <tr>
                <td>电话号码：</td>
                <td>` + a[0].phone+ `</td>
              </tr>
            </tbody>
          </table>`
        })
    }
</script>

其中axios后面紧跟的括号中的代码就是向后端发送请求
method：定义了请求方式，是get请求还是post请求
url：是请求路径，这里写的是要使用的servlet的路径
（至于then(function (resp)之后的代码等下再做解释。）
这样请求就发送到后端了。

后端接受请求查询数据

请求发送过去之后，后端利用相应的servlet开始处理请求

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        HttpSession session = request.getSession();//获取session
        String ud = String.valueOf(session.getAttribute("user"));//拿到session中存储的登录信息

        List<Student> list = new StudentList().Find1(ud);//这里是取得查询到的对象数组，是自己定义的一个方法，这里是用到了一个泛型
        request.setAttribute("stuInfor", list);
        System.out.println(request.getAttribute("stuInfor"));//这是我自己写的测试代码
        response.setContentType("text/json;charset=utf-8");
        String jsonString = JSON.toJSONString(list);
        response.getWriter().write(jsonString);//这三行是axios数据传回前端用的
        System.out.println(jsonString);

    }

要注意的是String jsonString = JSON.toJSONString(list)：括号中是你要传递的数据
第三行代码得到数组对象的操作就是书写jdbc的几大步骤，当然mybatis更简单。
写到这一步时数据已经发送到前端了

现在就可以来讲一下前面没有将的then(function (resp)之后的代码的意思
这就是用来接收数据的，resp.data就是接受到的数据，现在就是用js 的方法将数据显示在页面上

有人说，用el表达式更简单，但是scrip中不能写el表达式，所以要把要添加的内容都老老实实的在引号中写出来，当然，如果不用axios的话，在body中就可以使用el表达式了，不用axios的时候每次请求都会重新刷新一次页面，比较影响性能。不过在实际写代码的过程还得看个人喜好。