2020.10.19陈悦玲

axios(ajax+node.js+mysql)

1.什么是axious

  1. axios是一个基于promise的HTTP库,它可以用在浏览器端和node中,axios主要用于创建请求,在浏览器中创建XMLHTTPRequest请求(xhr代替),在node中就是用来创建普通的HTTP请求

  2. 浏览器中创建xhr请求的4种方案

    1. 原生创建xhr,非常麻烦
    2. jQuery 的封装函数中,会有ajax的封装方法,jq总不是只有ajax,还包含大量的dom操作和动画操作,但是我们的vue只是使用ajax,别的都不用。(有点大材小用)
    3. Vue-Resource(已被废弃)
    4. 使用第三方工具axios,axios本身与vue没有任何关系,是属于第三方的一个插件。

    注意:任何的ajax方法都要重新封装(以后工作中)

  3. axios是在cli(脚手架)中使用

    学习阶段直接在HTML页面中引入axios的js文件,或者使用本地文件

    提示:在全局添加axios对象,包含发送http

  4. 调用axios,发送异步请求

    1. get请求

      axios.get("url",{

      ​ params:{

      ​ //get方式下,随url发送的参数

      ​ 参数1:参数值1,

      ​ 参数2:参数值2,

      ​ …

      ​ }

      }).then(result=>{

      ​ //result.data中才是服务器端返回的数据

      })

    2. 搭建本地服务器:

      1. 创建空项目 vueServe

      2. 初始化项目 npm init -y; 或者写 npm init; 初始化完成后,会在当前目录下,生成一个package.json文件,用来保存我们要下载的插件和模块

      3. 使用express搭建本地服务器

        1. express是第三方的模块(框架),所以需要下载(npm install express –save)–save:是将我们下载的第三方模块保存到pakeage.json文件中,下载完成后express的模块就在node_moudles的文件中
      4. 使用express搭建本地服务器

        1. 在当前的文件下创建app.js文件

        2. 在app.js中引入express模块

        3. const express = require("express");

        4. 使用express的API去创建服务器

        5. var app = new express();

        6. 为服务器绑定监听的端口(port)

        7. app.listen(8080,()=>{

          ​ console.log("serve is running")

          })

        8. 启动服务器(黑窗口中输入)

        9. node app.js

        10. 或者输入 第三方启动方式:(nodemon)

        11. 添加访问路径

        12. app.get("/",(req,res)=>{

          ​ res.send("返回页面数据")

          })

        13. 创建文件 router,保存路由器

        14. 在当前的文件夹下,创建router.js文件

        15. 引入express模块

          const express = require("express")

        16. 创建空的路由器对象

          var router = express.Router();

        17. 添加路由

          router.get("/list",function(req,res){

          ​ res.send("我是list")

          })

        18. 导出路由

          module.exports = router;

        19. 在app.js中引入使用router路由器

        20. const routerlist = require("./router/router.js")

        21. app.use("/router",routerlist)

        22. 网页中的地址栏输入:localhost:8080/router/list 访问

        23. 操作数据库

        24. node中有第三方模块 mysql 模块(操作数据库)

        25. 下载mysql模块

          1. npm install mysql –save
        26. 创建pool文件夹,在当前文件夹下创建pool.js文件

        27. 在pool.js中引入mysql模块

          1. const mysql = require(mysql)
        28. 创建连接池

          1. var pool = mysql.createPool({

            host:"127.0.0.1", // 服务器ip地址

            prot:"3306", // 端口号

            user:"root", // 用户名

            password:"", // 密码

            database:"cyl", // 数据库名称

            connectionLimit:20, // 设置最大连接数,不写也可以 默认是15

            })

        29. 导出连接池

          1. module.exports = pool
        30. 然后再路由器中操作数据库

          pool.query("select * from empname where sex=?",[1],(req1,res1)=>{

          ​ // console.log(res1)

          ​ // res.send(res1)

          ​ res.write(JSON.stringify(res1));

          ​ res.end();

          })

        31. axios post 请求

          1. 语法:axios.post("url","参数1=值1&参数2=值2&…").then(result=>{

            ​ result.data

            })

            注意:get 和 post 方法传参时,配置的属性名不一样,get请求传参用的是params:{} 对象;而我们的 post 请求传参,必须是字符串

        32. 服务器端获取 get 请求的参数 req.query

          服务器端获取post请求的参数 不能使用req.query

          1. 下载body-parser中间件:npm install body-parser –save;

            导入body-parser :const bodyParser = require("body-parser")

            使用我们的中间件 : app.use(bodyParser.urlencoded({

            ​ extend:false

            }))

            注意:body-parser中间件一定要在路由调用之前

            提示:extend为false是不使用qs模块格式化

            解决问题:qs模块

            1. 引入qs模块
            2. 使用qs.stringify 会将对象转为 querystring 语法
            3. axios.post("url",Qs.stringify({参数1:值1,参数2:值2,….}))

            注意:获得响应主体的数据,数据不是直接返回的,而是包裹在一个对象的data属性中返回,无论post/get请求,获得的响应都是一个全新的对象。传统的响应包裹数据,包含在该对象的res.data属性中,所以,res.data才能获得响应的结果

标签

评论

this is is footer