vue axios(Promise)异步请求库 vue跟django解决跨域问题 AJAX django跟vue项目交互 分页操作

axiosVSAJAX

axios网络异步请求库:

安装:

npm install axios -S  安装到生产环境

npm install axios -- save 项目内安装

使用axios:

先引入
// import { ajax } from '@/utils/ajax'
// import axios from 'axios'

export default {
  name: 'Home',
  components: {
    // banner图
    Banner,
    // 热门推荐景点
    Hot,
    Fine,
    Footer
  },
  created () {
    // axios.get('要获取的网页连接').then(resp =>{
    // 获取的数据再这里拿到返回结果 resp
    // }).catch(err => {
    // 错误数据处理位置 err
    // })
  }
}

请求响应拦截:

实例:

import axios from 'axios'

export const ajax = axios.create({
  headers: {
    source: 'h5',
    icode: 'acbd',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  withCredentials: true //默认携带上次的cookie
})
ajax.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log('请求拦截到了')
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

ajax.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  console.log('响应拦截到了')
  return response
}, function (error) {
  // 对响应错误做点什么
  if (error.response) {
    if (error.response.status === 401) {
      window.alert('未登录，即将跳转到登录页面')
    } else if (error.response.status === 500) {
      window.alert('服务器正忙，请稍后重试')
    }
  }
  return Promise.reject(error)
})

引用再Home.vue使用 自定义请求头:

//@代表src目录
 import { ajax } from '@/utils/ajax'
export default {
  name: 'Home',
  components: {

  },
  created () {
     ajax.get('要获取的网页连接').then(resp =>{
    // 获取的数据再这里拿到返回结果 resp
    // }).catch(err => {
    // 错误数据处理位置 err
    // })
  }
}

默认携带上次的cookie:

ajax.js文件下:
export const ajax = axios.create({
  headers: {
    source: 'h5',
    icode: 'acbd',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  withCredentials: true //默认携带上次的cookie
})

添加loading动画:

统一错误处理:

ajax.js文件
ajax.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log('请求拦截到了')
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

ajax.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  console.log('响应拦截到了')
  return response
}, function (error) {
  // 对响应错误做点什么
  if (error.response) {
    if (error.response.status === 401) {
      window.alert('未登录，即将跳转到登录页面')
    } else if (error.response.status === 500) {
      window.alert('服务器正忙，请稍后重试')
    }
  }
  return Promise.reject(error)
})

跨域问题解决:

跨域影响:

错误实例:

跨域 问题解决:

只能访问不能修改

vue.js解决跨域问题:

// Node.js里面的模块
module.exports = {
  // http://localhost:8080/api/test
  // =>
  // http://localhost:8000/test

  devServer: {
    proxy: {
      '/api': {
        // target: 'http://localhost:8000',
        target: 'http://django.t.mukewang.com',
        changeOrigin: true,
        pathRewrite: { 
          // '^/api': ''   //需要rewrite重写的URL
        },
        '/test': {
          // target: 'http://localhost:8000',
          target: 'http://localhost:9527',
          changeOrigin: true,
          pathRewrite: { 
            '^/test': ''   //需要rewrite重写的URL
          }
        }
      }
    }
  }
}

修改后需要重启服务才回生效

使用跨域规则:

django解决跨域问题:

安装配置使用:

vue跟django交互:

使用测试工具:Postman 查看接口请求返回结果是否正确

接口联调:

django:写一个接口:发送的数据

def slider_list(request):
    """ 轮播图接口
    {
        "meta": {},
        "objects": []
    }
    """
    data = {
        'meta': {

        },
        'objects': []
    }
    #查找数据库获取数据
    queryset = Slider.objects.filter(is_valid=True)
    for item in queryset:
        data['objects'].append({
            'id': item.id,
            'img_url': item.img.url,
            'target_url': item.target_url,
            'name': item.name,
            'page_mark': item.page_mark
        })
    # return HttpResponse(data)
    return http.JsonResponse(data)

上面接口直接调用会出现跨域问题需要解决:

配置好可以获取全路径:

获取数据以分页展示:

from django import http
from django.db.models import Q
from django.shortcuts import render
from django.views.generic import ListView

from sight.models import Sight


class SightlistView(ListView):
    """ 详细列表数据获取  使用分页"""
    # 每页5条数据
    paginate_by = 5

    def get_queryset(self):
        """重写查询方法"""
        query = Q(is_valid=True)
        # 要查的类型
        content = self.request.GET.get('content', 11)
        content = content + 10
        if content:
            query = query & Q(content=True)
         # 列表搜索
        queryset = Sight.objects.filter(query)
        return queryset

    def render_to_response(self, context, **response_kwargs):
        page_obj = context['page_obj'] 
        data = {
            'meta': {
                'total_count': page_obj.paginator.count,  多少数据
                'page_count': page_obj.paginator.num_pages, 第几页
                'current_count': page_obj.paginator.number  总共多少页
            },
            'objects': []
        }
        for item in page_obj.object_list:
            data['objects'].append({
                'id': item.id,
                'name': item.name,
                'desc': item.desc,
                'main_img': item.main_img.url,
                'price': item.price,
                'surplus': item.surplus,
                'content': item.content
            })

        return http.JsonResponse(data)
        return http.JsonResponse({'a': 1})

def render_to_response(self, context, **response_kwargs):

context 里面有: