文章目录

  • 概要
  • 整体架构流程
  • 技术名词解释
  • 技术细节
  • 小结


概要

Axios 是什么?

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

  • 从浏览器创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 yarn:

$ yarn add axios

使用 jsDelivr CDN:

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

使用 unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

导包

我这里使用的vue中的cdn：

axios 请求中返回的值怎么return出去 axios请求方法_database

 axios可以请求的方法：

  • get：获取数据，请求指定的信息，返回实体对象
  • post：向指定资源提交数据（例如表单提交或文件上传）
  • put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
  • patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
  • delete：请求服务器删除指定的数据

整体架构流程

要写一个前端页面和一个后端页面。完成前后端分离

前端：

1.get请求
new Vue({
    el:"#app",
    data:{
        deptList:[]
    },
    methods:{
        showDept(){
            axios.get('http://localhost:8080/deptC').then((resp)=>{
                console.log(resp,resp.data)
                this.deptList=resp.data
            })
        }
    }
})
后端：
1.创建servlet
package com.hp.controller;

import com.hp.pojo.Dept;
import com.hp.service.IDeptService;
import com.hp.service.impl.DeptServiceImpl;
import com.hp.utils.JsonUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

//每一个类，继承HttpServlet，该类就是一个servlet，每一个servlet都有一个访问路径
@WebServlet("/deptC")
public class DeptC extends HttpServlet {
    //引入service层
    private IDeptService deptService=new DeptServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("测试访问deget...");
        List<Dept> list = deptService.list();
        System.out.println(list);
        //数据转化成json格式，再响应给浏览器
        JsonUtil.transJson(list,resp);
    }
}
2.在web中新建一个.html的文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/vue/vue.min.js"></script>
    <script src="/vue/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="showDept">点击显示数据</button>
    <table border="1" cellpadding="20" cellspacing="0">
        <tr>
            <th>序号</th>
            <th>部门名称</th>
            <th>部门位置</th>
            <th>部门领导</th>
        </tr>
        <tr v-for="dept in deptList">
            <td>{{dept.did}}</td>
            <td>{{dept.dname}}</td>
            <td>{{dept.dlocation}}</td>
            <td>{{dept.leader}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            deptList:[]
        },
        methods:{
            showDept(){
                axios.get('http://localhost:8080/deptC').then((resp)=>{
                    console.log(resp,resp.data)
                    this.deptList=resp.data
                })
            }
        }
    })
</script>
</html>

技术名词解释

1.什么是Ajax

说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。

Ajax(Asynchronous JavaScript and XML)：

  • 异步网络请求。
  • Ajax能够让页面无刷新的请求数据。

实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：

  • 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
  • jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架

技术细节

上述代码servlet中的核心API

List<Dept> list = deptService.list();

完整代码如下：

//查询多行多列
    public static <T> List<T> list(String sql,Class<T> c,Object ...params) {
        //创建一个集合，存放所有对象
        List<T> tList = new ArrayList<>();
        try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/salary?characterEncoding=utf-8", "root", "root");
            PreparedStatement preState = conn.prepareStatement(sql);
            for (int i = 0; i < params.length; i++) {
                preState.setObject(i+1,params[i]);
            }
            //statement执行sql，返回结果集
            ResultSet rs = preState.executeQuery();
            //结果集rs得到结果集元数据
            ResultSetMetaData md = rs.getMetaData();
            //获取结果集的总列数
            int columnCount = md.getColumnCount();
            //解析rs(循环打印)
            while (rs.next()) {//读取结果集的光标向下移动，光标默认在哪一行，列名所在的那一行
                //根据每一行的数据，封装成一个实体对象
                T t = c.newInstance();
                //1.取出某一行的每一列数据，封装到对象t的属性中
                for (int i = 1; i <= columnCount; i++) {
                    //通过列的序号，获取每一列的值
                    Object value = rs.getObject(i);
                    if (value!=null){
                        //通过列的序号，获取每一列的列名
                        String columnName = md.getColumnName(i);
                        //因为列名和实体类t中的属性名一致，为每一个属性构造一个反射中的set方法
                        Field f = c.getDeclaredField(columnName);
                        //赋予私有属性的赋值权限
                        f.setAccessible(true);
                        //使用反射，把value给到对象t的属性中
                        f.set(t,value);//理解为：把value赋值给对象t的columnName属性，相当于set方法
                    }
                }
                //把对象存入集合中
                tList.add(t);
            }
            //关闭资源
            preState.close();
            conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return tList;
    }

代码功能：

上述代码可以查询到表里的所有数据，之前的深入解析prepareStatement方法文章中提到过，如何查询一个表中的多行多列数据，今天也是把之前的内容进行了补充，添加了新的知识点axios在vue中很常用，是连接前后端的重要步骤，上次的小作业是通过增删改查在前端的实际应用，后续功能还需要补全，可以对表中的数据进行修改，添加，达到前端修改数据，后端的数据库数据同样更新。有兴趣的小伙伴可以尝试着自己写一下，很有挑战性。

小结

这节课我们学习了Axios的基本用法，我这里只运用到了get请求，实际过程中会有不同的用法，在上述的实例中我们也能看到Axios的具体特性有自动转换JSON数据和响应数据，以及在浏览器中创建 XMLHttpRequests，帮助我们建立前后端之间的联系。明天我会讲解如何在后台响应图片数据，前端传递参数，后端接收参数。还有vue的自动加载函数，帮助我们完成美女后宫的建造，做到真正的后宫佳丽三千。