2020.10.19陈悦玲
axios(ajax+node.js+mysql)
1.什么是axious
-
axios是一个基于promise的HTTP库，它可以用在浏览器端和node中，axios主要用于创建请求，在浏览器中创建XMLHTTPRequest请求（xhr代替），在node中就是用来创建普通的HTTP请求
-
浏览器中创建xhr请求的4种方案
- 原生创建xhr，非常麻烦
- jQuery 的封装函数中，会有ajax的封装方法，jq总不是只有ajax，还包含大量的dom操作和动画操作，但是我们的vue只是使用ajax，别的都不用。（有点大材小用）
- Vue-Resource（已被废弃）
- 使用第三方工具axios，axios本身与vue没有任何关系，是属于第三方的一个插件。
注意：任何的ajax方法都要重新封装（以后工作中）
-
axios是在cli（脚手架）中使用
学习阶段直接在HTML页面中引入axios的js文件，或者使用本地文件
提示：在全局添加axios对象，包含发送http
-
调用axios，发送异步请求
-
get请求
axios.get("url",{
params:{
//get方式下，随url发送的参数
参数1：参数值1，
参数2：参数值2，
...
}
}).then(result=>{
//result.data中才是服务器端返回的数据
})
-
搭建本地服务器：
-
创建空项目 vueServe
-
初始化项目 npm init -y; 或者写 npm init; 初始化完成后，会在当前目录下，生成一个package.json文件，用来保存我们要下载的插件和模块
-
使用express搭建本地服务器
- express是第三方的模块（框架），所以需要下载（npm install express --save）--save：是将我们下载的第三方模块保存到pakeage.json文件中，下载完成后express的模块就在node_moudles的文件中
-
使用express搭建本地服务器
-
在当前的文件下创建app.js文件
-
在app.js中引入express模块
-
const express = require("express");
-
使用express的API去创建服务器
-
var app = new express();
-
为服务器绑定监听的端口(port)
-
app.listen(8080,()=>{
console.log("serve is running")
})
-
启动服务器(黑窗口中输入)
-
node app.js
-
或者输入 第三方启动方式：(nodemon)
-
添加访问路径
-
app.get("/",(req,res)=>{
res.send("返回页面数据")
})
-
创建文件 router，保存路由器
-
在当前的文件夹下，创建router.js文件
-
引入express模块
const express = require("express")
-
创建空的路由器对象
var router = express.Router();
-
添加路由
router.get("/list",function(req,res){
res.send("我是list")
})
-
导出路由
module.exports = router;
-
在app.js中引入使用router路由器
-
const routerlist = require("./router/router.js")
-
app.use("/router",routerlist)
-
网页中的地址栏输入：localhost:8080/router/list 访问
-
操作数据库
-
node中有第三方模块 mysql 模块（操作数据库）
-
下载mysql模块
- npm install mysql --save
-
创建pool文件夹，在当前文件夹下创建pool.js文件
-
在pool.js中引入mysql模块
- const mysql = require(mysql)
-
创建连接池
-
var pool = mysql.createPool({
host:"127.0.0.1", // 服务器ip地址
prot:"3306", // 端口号
user:"root", // 用户名
password:"", // 密码
database:"cyl", // 数据库名称
connectionLimit:20, // 设置最大连接数，不写也可以 默认是15
})
-
-
导出连接池
- module.exports = pool
-
然后再路由器中操作数据库
pool.query("select * from empname where sex=?",[1],(req1,res1)=>{
// console.log(res1)
// res.send(res1)
res.write(JSON.stringify(res1));
res.end();
})
-
axios post 请求
-
语法：axios.post("url","参数1=值1&参数2=值2&...").then(result=>{
result.data
})
注意：get 和 post 方法传参时，配置的属性名不一样，get请求传参用的是params:{} 对象；而我们的 post 请求传参，必须是字符串
-
-
服务器端获取 get 请求的参数 req.query
服务器端获取post请求的参数 不能使用req.query
-
下载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模块
- 引入qs模块
- 使用qs.stringify 会将对象转为 querystring 语法
- axios.post("url",Qs.stringify({参数1：值1,参数2：值2，....}))
注意：获得响应主体的数据，数据不是直接返回的，而是包裹在一个对象的data属性中返回，无论post/get请求，获得的响应都是一个全新的对象。传统的响应包裹数据，包含在该对象的res.data属性中，所以，res.data才能获得响应的结果
- 引入qs模块
-
-
-
-
评论留言