Vue封装请求数据(get)

1.首先在main.js文件下挂载全局axios

//数据请求
import Axios from 'axios';
// 给Vue原型挂载$axios属性
Vue.prototype.$axios = Axios;
Axios.defaults.baseURL = 'http://tx.com:99/';//服务器的地址

2.然后在src下创建utils文件夹，utils下创建三个文件（cookie.js、request.js、utils.js）;

cookie.js

//获取cookie、
export function getCookie (name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg))
   return (arr[2]);
  else
   return null;
 }

 //设置cookie,增加到vue实例方便全局调用
 export function setCookie (c_name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
 };

 //删除cookie
 export function delCookie (name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null)
   document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
 };

request.js

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})
export default service

utils.js

export default{
  getUrlKey: function (name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
  }
}

3.在src下创建一个api的文件夹（用于存放数据请求接口）如：创建一个towen.js的文件

import request from '@/utils/request'
//要文左右滑动图
export function GetNewsByList(){
  return request({
    url:'/exclusvg/v1',
    method:'get'
  })
};
//置顶详情内容(根据id请求数据)
export function GetNewsByFind(id){
  return request({
    url:'GetNewsByFind/v1',
    method:'get',
    params:{id}  //传出去的参数
  })
};
//置顶详情内容
export function GetNewsByFind(id){
  return request({
    url:'GetNewsByFind/v1',
    method:'get',
    params:{id}  //传出去的参数
  })
};

3.响应数据的页面

<template>
<!-- 左右滑动 -->
    <div class="article-gallery">
      <div class="track">
        <ul>
          <li v-for="(item,index) in trackList" :key="index">
			//获取点击的id值
            <a @click="handeUrl(item,index)">
              <div class="jsx-arb">
                <img :src="item.img" />
              </div>
              <div class="jsx-cen">
                <div class="jsx-acc">{{item.content}}</div>
              </div>
              <div class="jsx-info-time">
                <span>{{item.create_time | relTime}}</span>
                <span>{{item.name}}</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
</template>

<script>
//引入封装文件 要文左右滑动数据,要文轮播图
import { GetNewsByList } from '@/api/towen'
export default {
  name:'TowenExclusive',
   data() {
      return {
        trackList:[]
      }
   },
    methods:{
      GetNewsItems(){
        //左右滑动
        GetNewsByList().then(res=>{
          this.trackList = res.data
        })
      },
	  //根据点击获取的id传值到跳转的页面"Textlist"
      handeUrl(item,index){
        //跳转页面
        this.$router.push({
            name:'Textlist',
            params:{
              id:item.id
            }
        })
      }
    },
    created(){
      this.GetNewsItems();
    }
}

这是点击跳转到的页面，需要根据上一个页面传递过来的id值请求相对应的数据

<script>
import { GetNewsByFind } from '@/api/towen'
export default {
  name:'Thearticle',
   data() {
      return {
        Textlistcon:{},
      }
   },
   methods:{
     //根据id获取响应数据
    GetNewsItems(id){
      GetNewsByFind(id).then(res=>{ 
        // console.log(res)
        this.Textlistcon = res.data
      })
    }
   },
	//获取到上一个页面传递来的id值
   created() {
     console.log("数据id:"+this.$route.params.id)
      let { id } = this.$route.params;
      this.GetNewsItems(id);
   }
}

TP5的数据接口

//置顶页详情数据
   public function GetNewsByFind(){
       header("Access-Control-Allow-Origin: *");
       $data = input("param."); //获取前端发送来的值
       $res = db('details')->where('id',$data['id'])->find();
       return json($res);
   }