03-Ajax第三方模块

 下载并引入Axios

cnpm install axios 
//  前端框架 不需要--save等依赖安装或者全局

利用axios实现简单的增删改查

前端页面：

    <button class="get">查询数据</button>
    <button class="post">添加数据</button>
    <button class="put">修改数据</button>
    <button class="delete">删除数据</button>
    <script src="/js/axios.min.js"></script>
    <script>
        // // get方法返回值是一个promise对象
        // axios.get("/fruits").then(res =>{
        //     console.log(res.data)
        // })  //第一个参数 url路径  第二个值是一个对象 需要使用{}

        document.querySelector(".get").onclick = function(){
            axios.get("/fruits").then(res =>{
            console.log(res.data)})};
        document.querySelector(".post").onclick = function(){
            axios.post("/fruits",{
                fruit:"草莓"
            }).then(res =>{
            console.log(res.data)})};
        document.querySelector(".put").onclick = function(){
            axios.put("/fruits/1",{
                fruit:"蓝莓"
            }).then(res=>{
                console.log(res.data)
            })
        };
        document.querySelector(".delete").onclick = function(){
            axios.delete("/fruits/0").then(res=>{
                console.log(res.data)
            })
        };

后端页面：

const Koa = require("koa"); // 引入koa 构造函数
const router = require("koa-router")(); // 引入路由
const static =require("koa-static"); // 引入koa-static
const parser = require("koa-parser");// 引入解析post请求的模块
const views = require("koa-views"); // 引入 koa-views 
const nunjucks = require("nunjucks"); // 引入nunjucks
const app = new Koa(); // 创建应用
app.use(parser()); // 引入解析post请求的模块 
app.use(views(__dirname+ "/views",{
    map:{html:"nunjucks"}
}));
app.use(static(__dirname + "/public"));
app.use(router.routes());
app.listen(3000,()=>{
    console.log("response [200]")
});
router.get("/",async ctx =>{
    await ctx.render("sirui")
})
let dataList = ["香蕉","苹果","鸭梨"];
//get查看
router.get("/fruits", ctx => {
    ctx.body = dataList;
})
//post添加
router.post("/fruits", ctx => {
    let fruit = ctx.request.body.fruit;
    dataList.push(fruit);
    ctx.body = dataList;
})

//put修改
router.put("/fruits/:id", ctx => {
    let id = ctx.params.id;
    let fruit = ctx.request.body.fruit;
    dataList.splice(id,1,fruit);
    ctx.body = dataList;
})
//delete删除
router.delete("/fruits/:id", ctx => {
    let id = ctx.params.id;
    dataList.splice(id,1);
    ctx.body = dataList;
})

jQuery里的Ajax方法

        jQuery主要是用来操作DOM，其实jQuery也封装了Ajax方法，实例代码如下所示：

$.ajax({
    url:"/fruit",
    type:"get"
}).done( res => {
    console.log(res);
})