• 看一遍学会Vue结合axios使用mockjs


    网上搜了一下也没有比较全的代码,下面总结后介绍一下

    mockjs作用:在后端接口未开发完成情况下,前端自己模拟接口返回的数据

    步骤:

    1.下载mockjs与axios

    npm i mockjs

    npm i axios

    2.在vue文件src下新建mock文件夹与内部mock.js 文件

     mock.js 文件内部:

    • 引入mockjs
    • 设置延时请求时间
    •  配置请求拦截
    1. // 引入mockjs
    2. import Mock from "mockjs";
    3. //延时200-600毫秒请求到数据
    4. Mock.setup({
    5. timeout: "200-600",
    6. });
    7. // 配置请求拦截
    8. Mock.mock('/mock/tableDataOne', {
    9. data: {
    10. mtime: "@datetime", // 随机生成日期时间
    11. "score|1-800": 800, // 随机生成1-800的数字
    12. "rank|1-100": 100, // 随机生成1-100的数字
    13. "stars|1-5": 5, // 随机生成1-5的数字
    14. nickname: "@cname", // 随机生成中文名字
    15. },
    16. });

    3.main.js文件中引入mock.js文件

    import './mock/mock.js'

    4.src下新建api文件夹与reques.js封装axios请求

    1. //这里建议给axios统一设置了基地址,大家根据需求配置请求响应拦截即可
    2. import axios from 'axios'
    3. const require = axios.create({
    4. baseURL:'/mock'
    5. })
    6. export default require

     5.在.vue文案中引入request并发送请求(这里在mouted中做了简单的测试使用)

    第2步我们在mock.js文件中mock了一个路径,采用的是:

    Mock.mock( rurl, template )

    记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

    这意味着当mockjs匹配到‘/mock/tableDataOne’这个路径时,就会返回对象中的数据

    1. async mounted() {
    2. // 发请求获取mock数据
    3. const tableDataOne = await request({
    4. url: "/tableDataOne",
    5. method: "get",
    6. });
    7. console.log(tableDataOne, "tableDataOne");
    8. },

    控制台打印结果:

     总结:mockjs可以拦截到匹配 rurl路径 的 Ajax 请求,这里的url可以是固定的路径地址,也可以使用正则表达式进行匹配,同时Mock.mock方法有不同的参数,上面只列举了一种参数,具体大家可以参考mockjs官网:Mock.mock() · nuysoft/Mock Wiki · GitHub

    扩展:

    第2步mock.js文件中添加mock模拟代码

    1. Mock.mock(/\/mock\/mode1/, (option) => {
    2. console.log(option, "option"); // { "url": "/mock/mode1/get?name=123", "type": "GET", "body": null }
    3. return Mock.mock({
    4. msg: "successful",
    5. outData: {
    6. name: "@cname", // 随机生成中文名字
    7. },
    8. });
    9. });

    第5步在.vue文件的mounted中使用封装的request发送一个新的请求

    1. const mode1 = await request({
    2. url: "/mode1",
    3. method: "get",
    4. params: {
    5. name: 123,
    6. },
    7. });
    8. console.log(mode1, "mode1");

    控制台打印结果:

     

     

  • 相关阅读:
    如何实现自动化测试?
    nxp电源管理芯片:电源管理芯片的制造与采样规格
    lotus 检索数据 filecoin.tools
    Redis常用命令
    探索 C++20 的新领域:深入理解 static关键字和核心语言特性测试宏
    Unity WebView 中文输入支持
    Cenots7 离线安装部署PostgreSQL
    【论文阅读】DiffusionDet: Diffusion Model for Object Detection
    数据分析与Excel(一)
    (SpringBoot)第七章:SpringBoot日志文件
  • 原文地址:https://blog.csdn.net/SunFlower914/article/details/127108932