vue项目中mock数据get请求参数接收问题以及常规post参数写法

1.1前端vue组件内写法

this.$axios({
method:"get",
url:"/news/index",
data:{
product_type:‘product‘
}
}).then((res)=>{
//请求成功返回的数据
console.log(res);
this.newsListShow = res.data.data.datalist;
this.product_type=res.data.data.product_type;
})

1.2.mock.js写法

Mock.mock("/api/news/index", "get", (options) =>{
// 最佳实践,将请求和参数都打印出来,以便调试A
let item=JSON.parse(options.body)
let articles = [];
for (let i = 0; i < 100; i++) {
   let newArticleObject = {
     title: Random.csentence(5, 30), // Random.csentence( min, max )
    thumbnail_pic_s: Random.dataImage(‘300x250‘, ‘mock的图片‘), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
    author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
    date: Random.date() + ‘ ‘ + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
 }
articles.push(newArticleObject)
}
return {
   result: 0,
  data: {
  datalist: articles,
  product_type:item.product_type
}
}
});

2.1前端post写法

this.$axios.post(‘/news/login‘,{"username":"kangkang","password":‘xmyfsj0821‘}).then(res => {
  console.log(res);
  this.username = res.data.data.username;
});

2.2 mock.js写法

const loginData = function (req) {
   const {username} = JSON.parse(req.body)
  if(username==‘xmyfsj‘){
    return {
         result: 200,
        data: {
           uid:Random.id(),
           type: 1,
           username:username,
           expire_in: "63666",
           token: Random.guid(),
           logintime: Random.now()
        }
   }
}else{
return {
    result: 0,
   data: {
     uid:Random.id(),
     type: 1,
     username:username,
     expire_in: "63666",
     token: Random.guid(),
     logintime: Random.now()
      }
    }
  }
}

Mock.mock(‘/api/news/login‘, ‘post‘, loginData);

原文地址:https://www.cnblogs.com/xmyfsj/p/12109155.html

时间: 2024-10-07 08:58:41

vue项目中mock数据get请求参数接收问题以及常规post参数写法的相关文章

在vue项目中mock数据

第一步:安装: 在命令行中执行: npm install mockjs; 第二步:定义index.js文件 我们新建一个mock文件夹,此文件夹中建一个index.js文件:在index.js中输入以下内容: import Mock from 'mockjs' //引入mockjs,npm已安装import { Random } from 'mockjs' // 引入random对象,随机生成数据的对象,(与占位符@一样)Mock.setup({ timeout:1000 //设置请求延时时间}

vue项目中遇到的那些事。

前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper 做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事. 假如你正准

在vue项目中的axios使用配置记录

默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withC

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客.国际化应该都不陌生,就是一个网站.应用可以实现语言的切换. 在这就不谈原理,只说说如何实现中英文的切换.做技术的总得先把 demo 做出来嘛. 二.demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化

转:如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美

Vue项目中遇到的一些问题总结

一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 changeOrigin:true, pathRewrite:{ '^/api':'' //这里理解为用api代替target中的地址 } } } 配置完后,请求依然报错,大致是https证书的问题 [HPM] Error occured while trying to proxy request /xxx/

Vue-Router路由Vue-CLI脚手架和模块化开发 之 在单文件组件项目中定义数据、方法和组件之间的相互引用

定义数据 根据上一篇博文配置项目的结构的基础上继续进行优化: 在app.vue中的导出模块/组件部分设置其属性: export default{//导出模块/组件 data(){ return{ name:'perfect', count:0 } }, 在一个template标签中进行调用: <template> <div> <h2> 欢迎来到perfect*的博客园!!!</h2> <h3>{{name}}</h3> </te

Vuex的this.$store.commit和在Vue项目中引用公共方法

2018年11月22日 20:50:29 Funfction_Zero 阅读数 3230 1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上.像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.l