当前位置: 代码迷 >> 综合 >> vue2.0 带参数 请求服务器数据 api:sellerid=123456
  详细解决方案

vue2.0 带参数 请求服务器数据 api:sellerid=123456

热度:99   发布时间:2023-12-02 06:11:41.0

https://segmentfault.com/a/1190000010124638 全面分析vue2.0饿了么,值得一看

能够获取url地址中 ? 后面的数据并且还带上问号

  window.location.search;

如:http://192.168.43.124:8080/api/seller?id=123456中?

 window.location.search

返回结果:

?id=123456

   data () {return {seller: {
   // 展示部分id:(()=>{ let queryParam =urlParse();// console.log(queryParam)return queryParam.id;})()} } }, 

url请求地址为 /api/seller?id=123456

带上参数id,此id就是 展示部分的id,

elink方法 ( () =>{} )() 返回id的 默认值

queryParam 是 js封装方法 ,import导入: import {urlParse} from “@/common/js/util”;

queryParam方法作用是:通过正则表达式匹配url地址中带的参数,并处理返回json格式数据

util.js文件中

/* * 解析url参数 * @example ?id=12345&a=b * @return Object {id:123456,a:b} */ export function urlParse(){
    let url = window.location.search;let obj={};//返回一个json对象,初始化let reg=/[?&][^?&]+=[^?&]+/g;  //正则表达式 [?&]:匹配以?或&开头的 [^?&]+ 匹配 非? 或 非& 开头的 +代表一个或多个字符 =:就是=等号字符,没有特殊意义 let arr =url.match(reg) //match() 正则表达式里面的方法 查询匹配项返回一个数组//arr=['?id=123456','&a=b']if (arr) {arr.forEach(item => {
   //item.substring(1)把arr=['?id=123456','&a=b']中的 ? 去掉let tempArr=item.substring(1).split('=');//.split('=') 把arr中等于号=做分割成数组let key=decodeURIComponent(tempArr[0]);let val=decodeURIComponent(tempArr[1]);  obj[key] = val;});}return obj;
}

重点在这里,向服务器端带参数请求数据

/api/seller?id='+this.seller.id

思路 点击商品列表,含有商品id,请求到详情页,在详情页中向服务器请求带参数id的数据

注意还要导入import axios from ‘axios’

 created () {this.getGoods() // 本地JSON},methods: {// 本地json获取商品数据getGoods () {axios.get('/api/seller?id='+this.seller.id).then((res) => {this.seller = res.data.data;// console.log(this.seller);})}},

Object.assign(target, source1, source2);

这是es6的语法,用于对象合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

var target = { a: 1, b: 1 };var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

另外需要注意的是Object.assign()方法 只会拷贝 源对象自身的并且可枚举的属性 到目标身上。

也就意味着继承属性和不可枚举属性是不能拷贝的,

而且拷贝 是对象的属性的引用 而不是对象本身。

重点这是json对象

let idObj={
   "id":this.seller.id}// 本地json获取商品数据getGoods () {axios.get('/api/seller?id='+this.seller.id).then((res) => {// this.seller = res.data.data;let idObj={
     "id":this.seller.id}this.seller=Object.assign({},idObj,res.data.data);//assign()es6语法,用于对象的合并// console.log(this.seller.id);})}
  相关解决方案