Vue开发实例(13)之axios和mockjs的安装与使用

Posted 编程界明世隐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue开发实例(13)之axios和mockjs的安装与使用相关的知识,希望对你有一定的参考价值。

作者简介

作者名:编程界明世隐
简介:CSDN博客专家,从事软件开发多年,精通Java、javascript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢迎您关注,期待与您一起学习、成长、起飞!

引言

Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手、带你飞!
即使你并非前端开发人员,对前端的开发流程进行一定的了解也是很有必要的,谁也不确定公司以后会不会让我做前端去,做些简单的实例既不需要花费很多时间,也可以提高自己的自信和成就感,所以跟着明哥走,没有错,来吧!

导航

✪  Vue开发实例目录总索引
上一篇【12】实现动态左侧菜单导航
下一篇【14】Vue状态管理store

概述

Axios 是一个基于 promise 的 HTTP 库,类似于我们常用的 ajax。
在开发过程中,特别是前后端分离的项目,比如前端用Axios、ajax请求后端数据,后端也许当前只给了接口文档,还没有数据的返回,导致前端无法进行测试、调试,现在可以使用mock.js拦截前端ajax请求,更加方便的构造你需要的数据,大大提高前端的开发效率。

安装

这里我们来安装axios和mockjs ,我们可以在项目的目录下打开终端输入命令,也可以在IDEA的项目终端下输入命令

安装axios

npm install axios --save

在main.js全局引入axios

import axios from ‘axios’;
Vue.prototype.$axios =axios;

安装mockjs

npm install mockjs --save-dev

在src下创建文件夹mock,并创建mock.js文件,输入以下测试内容:

//引入mockjs
import Mock from 'mockjs'
//使用mockjs模拟数据
Mock.mock('/test', 
    "res":0,
    "data":
        
            "datatime": "@datetime",//随机生成日期时间
            "weekday|1-7": 7,//随机生成1-7的数字
            "name": "@cname",//随机生成中文名字
        
);

在main.js引入此mock.js就可以进行全局拦截axios和ajax的请求了。

import ‘./mock/mock.js’;

get请求

在之前的Main1页面上编写代码

  1. 创建按钮
 <el-button @click="getTest">get数据</el-button>
  1. 创建axios请求方法
export default 
        name: "Main1",
        methods:
            getTest()
                this.$axios.get("/test").then(res=>
                    console.log(res.data)
                )
            
        

    

this.$axios.get(“/test”)中this.$axios.get 表示使用get请求,“/test” 访问路径,刚好与之前mock.js定义的想吻合;
res 就是取得返回的数据集合,其中res.data就是我们定义好的返回数据。

  1. 点击按钮打印返回结果

post请求

  1. 添加post请求按钮
 <el-button @click="postTest">post测试1</el-button>
  1. 编写js post代码
postTest()
   this.$axios.post("/post/test1",id:1).then(res=>
        console.log(res.data)
    )

  1. 在mock.js中

其中第2个参数指定为 post,如果我们用get请求则会提示404,只能用post

Mock.mock('/post/test1','post',function(param)
    console.log('传入的参数为:',param.body)
    return 
        res:1,
        msg:"success"
    
);
  1. 测试

添加数据

  1. 按钮代码
<el-button @click="postAdd">add数据</el-button>
  1. 请求方法代码
postAdd()
    this.$axios.post("/post/add",id:1,name:'哈哈').then(res=>
        console.log(res.data)
    )

  1. mock模拟数据
Mock.mock('/post/add','post',function(param)
    let body = JSON.parse(param.body) // 获取请求参数
    let id = parseInt(body.id)
    let flag = true

    for (let item of userList) 
        if (item.id === id) flag = false // 判断id是否已经存在
    

    // 如果id不存在
    if (flag) 
        userList.push(
            
                name: body.name,
                id
            
        )
        return 
            userList,
            res: 0,
            msg: '添加成功'
        
     else
            return 
                userList,
                res: 1,
                msg: '添加失败'
            
        
);
  1. 测试

id 1是存在的,所以添加失败

id改成4,这个id不存在,所以添加成功

修改

  1. 按钮代码
<el-button @click="postMod">mod数据</el-button>
  1. 请求代码
postMod()
    this.$axios.post("/post/mod",name:'哈哈',id:3).then(res=>
        console.log(res.data)
    )

  1. 模拟数据
Mock.mock('/post/mod','post',function(param)
    let body = JSON.parse(param.body) // 获取请求参数
    let id = parseInt(body.id)
    let flag = false,index=0;

    for (let i in userList) 
        if (userList[i].id === id) 
            flag = true // 判断id是否已经存在,存在返回true
            index = i//对应数组的下标
        
    

    // 如果id存在则修改
    if (flag) 
        userList[index] = body
        return 
            userList,
            res: 0,
            msg: '修改成功'
        
     else
        return 
            userList,
            res: 1,
            msg: '修改失败'
        
    
);
  1. 测试

id存在则操作成功

将id改成4,因id为4 不存在,则操作失败

删除数据

  1. 按钮代码
<el-button @click="postDel">del数据</el-button>
  1. 请求代码
postDel()
    this.$axios.post("/post/del",id:1).then(res=>
        console.log(res.data)
    )

  1. 模拟数据代码
Mock.mock('/post/del','post',function(param)
    let body = JSON.parse(param.body) // 获取请求参数
    let id = parseInt(body.id)
    let flag = false,index=0;

    for (let i in userList) 
        if (userList[i].id === id) 
            flag = true // 判断id是否已经存在,存在返回true
            index = i//对应数组的下标
        
    

    // 如果id存在则删除
    if (flag) 
        userList.splice(index,1);
        return 
            userList,
            res: 0,
            msg: '删除成功'
        
     else
        return 
            userList,
            res: 1,
            msg: '删除失败'
        
    
);
  1. 测试

id 1 删除成功

id 改为4,删除失败

查询

  1. 按钮代码

  2. 请求代码,分别是没有参数的查询全部,有id参数的根据id来查询

postQuery()
    this.$axios.post("/post/query",).then(res=>
        console.log(res.data)
    )

postQuery()
    this.$axios.post("/post/query",id:1).then(res=>
        console.log(res.data)
    )

  1. 模拟数据代码
Mock.mock('/post/query','post',function(param)
    let body = JSON.parse(param.body) // 获取请求参数
    let id = parseInt(body.id)

    if(!id)//如果id不存在,则直接返回全部
        return 
            userList,
            res: 0,
            msg: '查询成功'
        
    
    //id
    for (let item of userList) 
        if (item.id === id) 
            return 
                userList: [item],
                res: 0,
                msg: '查询成功'
            
        
    

    // 如果id不存在则返回失败
    return 
        userList:[],
        res: 1,
        msg: '查询失败'
    
);
  1. 测试

id为1 查询成功

id为4 查询失败

id没有,查询全部

小结

这节总结了“axios和mockjs的安装与使用”,希望能对大家有所帮助,请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】, 如果有兴趣跟小明哥一起学习Java和前端的,【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈!

导航

✪  Vue开发实例目录总索引
上一篇【12】实现动态左侧菜单导航
下一篇【14】Vue状态管理store

热门专栏推荐

【1】Java小游戏(俄罗斯方块、植物大战僵尸等)
【2】JavaWeb项目实战(图书管理、宿舍管理等)
【3】JavaScript精彩实例(飞机大战、验证码等)
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通

以上是关于Vue开发实例(13)之axios和mockjs的安装与使用的主要内容,如果未能解决你的问题,请参考以下文章

前后端分离之mockjs实战demo

Axios和Mockjs,玩起~~~

axios拦截器+mockjs

mockjs简介和应用

使用axios获取后端数据和使用mockjs

vite+mockjs+vite-plugin-mock 搭建mock环境