vue使用在线mock平台用axios请求示例 不用自己安装mockjs

VIP文章 已于 2022-02-17 21:05:02 修改
阅读量623 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-02-16 15:16:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/achukou/article/details/122964200
版权

通常我们mock数据都会安装mockjs：yarn add mockjs
但是需要配置很多东西，还要拦截请求等等，对新手不友好，即使是老手也觉得麻烦。

推荐大家使用useMock 在线Mock助手，项目API数据模拟，声称比内部环境更贴心

  1. 支持团队协作
  2. 灵活解耦
  3. 不局域
  4. 可反复调试
  5. 自动生成文档

 官网：https://www.usemock.com/

Vue请求示例：

你需要先在useMock平台添加你自己的项目和接口，然后就会得到接口文档，复制API链接请求就可以获取到在线mock设置的数据了。

以二维码解码接口mock为例：

在线示例Vue：useMock vue axios

示例图：


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  achukou
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vue 使用axios 数据请求第三方插件的使用教程详解

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了vue 使用axios 数据请求第三方插件的使用 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
推荐一个在线接口Mock工具 useMock

				
			

			

				

					achukou的博客
				

				

					02-16
					
					1807
					
				

			

		

		

			
				
useMock上手十分简单易用，而且带统计接口功能，方便发现热点接口优化，可以团队协作和自动生成文档也是相当给力的

			
		

	



                


  
              

                


	

		

			

				
					
测试开发【Mock平台】17开发：Antd高级模板组件ProComponents

					
最新发布

				
			

			

				

					测试开发转型之旅上的小学生
				

				

					02-27
					
					1092
					
				

			

		

		

			
				
【Mock平台】为系列测试开发教程，从0到1编码带你一步步使用Spring Boot 和 Antd React框架完成搭建一个测试工具平台，希望作为一个实战项目对各位的测试开发学习之路有帮助，关注公众号发送“mock”获取github项目源码地址，大奇一个专注测试技术干货原创与分享的家伙。升级好最新前端框架后，让我们回到Mock服务前后端的配置服务开发中，最开始我们已经学会了Antd pro的中后台框架的创建，以及使用Ant Design组件进行布局式开发前端页面。

			
		

	





	

		

			

				
					
使用 mock 模拟登录接口数据

				
			

			

				

					weixin_44159454的博客
				

				

					08-26
					
					3323
					
				

			

		

		

			
				
mock.js模拟登录接口
第一步：打开apipost，通过mock服务来进行编写登录接口

选择为mock环境

第二步：编写自己的登录接口
apipost支持_req.body对象，当 post 请求以 x-www-form-urlencoded 或者application/json 方式提交时，我们可以拿到请求的参数对象。
通过_req.body对象，可以通过if语句等JavaScript的语法，判断_req.body对象的值进行接口编写，比如：登录接口的判断，账号密码正确、账号密码错误，账号不存在等

			
		

	



		

			
		



	

		

			

				
					
utittest和pytest中mock的使用详细介绍

				
			

			

				

					okcross0的博客
				

				

					04-12
					
					1251
					
				

			

		

		

			
				
Mock是Python中一个用于支持单元测试的库，它的主要功能是使用mock对象替代掉指定的Python对象，以达到模拟对象的行为。

			
		

	





	

		

			

				
					
项目中使用Mock数据的几种方式

				
			

			

				

					qq_31207499的博客
				

				

					10-16
					
					5233
					
				

			

		

		

			
				
项目中使用Mock数据的几种方式


	需求背景：在前后端分离的大环境下，前端需要获取后端接口的数据去渲染页面，这种情况下当后端开发进度落后的时候，前端的开发也受到阻碍。因此，前端需要静态的模拟数据来进行调试。
	
	
	mock数据(模拟数据)产生方式：   
	
   手动创建。但是这种方式问题也比较明显，特别是当数据内容较为复杂的时候或者是数据量较多的时候，创造mock数据都...

			
		

	





	

		

			

				
					
Mock的基本使用以及使用场景

				
			

			

				

					qq_65089414的博客
				

				

					03-16
					
					4977
					
				

			

		

		

			
				
最主要的原因是在开发中，前后端开发的进度并不一定是同步的，如果前端开发的小伙伴想要后端接口数据进行测试，刚好后端还没有这个接口数据，那么这个时候前端的小伙伴就可以使用mock模拟接口数据。最近在写一个vue的demo，但是又没有后端的接口，在写首页三级分类列表的时候，并没有把三级分类列表写成静态的，而是使用mock模拟了假的接口，然后通过axios发送GET请求获取到了这个模拟的数据并渲染到页面上。(3)在定义这个接口规则的时候引入自己设计的json格式的接口数据。（2）使用vuex管理请求到的接口数据。

			
		

	





	

		

			

				
					
use mockjs

				
			

			

				

					花开富贵的博客
				

				

					10-22
					
					501
					
				

			

		

		

			
				
react and mockjs1.使用2.语法2.1.基础2.1.1.字符串2.1.2.数字(整数型和浮点型)2.1.3.布尔2.1.4.对象2.1.5.数组2.2.占位符2.2.1.基础2.2.1.1.数字(整数型和浮点型)2.2.1.2.布尔2.2.1.3.字符2.2.1.4.字符串2.2.1.5.日期2.2.1.6.数组2.2.2.高级2.2.2.1.图片2.2.2.1.颜色2.2.2.1.文本2.2.2.1.姓名2.2.2.1.网址2.2.2.1.区域2.2.2.1.工具2.2.2.1.身份证2.

			
		

	





	

		

			

				
					
模拟实现axios发送请求

				
			

			

				

					qq_55269092的博客
				

				

					02-27
					
					776
					
				

			

		

		

			
				
模拟实现axios发送请求


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

			
		

	





	

		

			

				
					
使用jQuery请求useMock数据示例

				
			

			

				

					achukou的博客
				

				

					01-22
					
					320
					
				

			

		

		

			
				
useMock在线mock平台提供mockjs语法的接口数据模拟服务,支持团队协作、灵活解耦、不局域、反复调试、生成文档，比内部环境更贴心

			
		

	





	

		

			

				
					
推荐几个免费的HTTP接口Mock网站和工具

				
			

			

				

					
				

				

					01-05
					
					4261
					
				

			

		

		

			
				
JSONPlaceholder是一个提供免费的在线RESTAPI的网站，我们在开发时可以使用它提供的url地址测试下网络请求以及请求参数。当我们程序需要获取一些假数据、假图片或者mock数据接口时可以使用它。其返回的数据为JSON格式，且同时支持HTTP和HTTPS这两种请求类型，支持跨域，如 CORS 和 JSONP，支持GET、POST、PUT、PATCH、DELETE几个请求方法。

			
		

	





	

		

			

				
					
vue项目使用axios发送请求让ajax请求头部携带cookie的方法

				
			

			

				

					10-17
				

			

		

		

			
				
今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
Vue使用axios出现options请求方法

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了Vue使用axios出现options请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	





	

		

			

				
					
使用axios请求时,发送formData请求的示例

				
			

			

				

					10-16
				

			

		

		

			
				
今天小编就为大家分享一篇使用axios请求时,发送formData请求的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
解决在Vue中使用axios POST请求变成OPTIONS的问题

				
			

			

				

					10-14
				

			

		

		

			
				
主要介绍了解决在Vue中使用axios POST请求变成OPTIONS的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
Mock的使用

				
			

			

				

					weixin_54227075的博客
				

				

					07-02
					
					2259
					
				

			

		

		

			
				
Mock 常用于单元测试，用来模拟测试代码所依赖的外部类。因为我们所编写的代码往往存在大量复杂的外部依赖，或者依赖于特定的环境才能正常运行。这时我们可以选择使用 Mock 来构造这些外部依赖，使它们产生符合我们期待的行为（例如返回特定的值），但不需要真正地去构造外部依赖。需要注意的是，Mock 出来的对象并不会真实执行。...

			
		

	





	

		

			

				
					
在vue项目中mock的使用

				
			

			

				

					_陌默
				

				

					09-22
					
					4659
					
				

			

		

		

			
				
1. mock的作用
模拟后台接口，提供页面需要的数据。
2. mock的语法规范
使用例子：
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(

			
		

	





	

		

			

				
					
使用Mock模拟后端(Vue集成Mock)

				
			

			

				

					Major_S的博客
				

				

					03-22
					
					892
					
				

			

		

		

			
				
使用Mock模拟后端使用Mock模拟后端使用Mock模拟后端



			
		

	





	

		

			

				
					
简单好用的在线接口 MOCK 平台

				
			

			

				

					King Saj
				

				

					04-27
					
					634
					
				

			

		

		

			
				
挺好用的一个线上工具。

			
		

	





	

		

			

				
					
使用vue,mock,axios等实现商城详情页，包括接口

				
			

			

				

					05-29
				

			

		

		

			
				
好的，我会尽力回答你的问题。 ...以上就是使用vue、mock和axios实现商城详情页的基本流程。当然，这只是一个简单的示例，实际开发中还需要处理一些异常情况、添加loading等。希望能对你有所帮助。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值