二次封装pymysql 二次封装系统

转载

mob64ca141139a2 2023-09-26 09:00:21

文章标签 二次封装pymysql vue.js javascript ios Vue 文章分类 MySQL 数据库

axios的二次封装

文章目录

前言
一、基本页面的创建
二、使用步骤

1.引入相关的包
2.编写文件
3.编写请求
4.解决跨域
5.测试使用

总结

前言

为什么需要二次封装

api 统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.

一、基本页面的创建

首先需要准备一个vue的项目

先打开需要创建项目的文件夹下方输入cmd打开窗口
在窗口输入vue create 项目的名称
选择使用vue2.x版本
等待创建，完成后进入文件夹内部在控制台输入npm run serve

二、使用步骤

1.引入相关的包

首先我们需要下载有关的包：

我们需要下载axios、element-ui(辅助)

npm i axios@0.18.1
npm i element-ui@2.13.2

2.编写文件

在src下创建文件夹utils，在文件夹内部创建文件request.js

编写代码如下（示例）：

import axios from 'axios'
import { Message } from 'element-ui'

const service = axios.create({
  baseURL: 'http://127.0.0.1:3030', 
  timeout: 5000 ,
  withCredentials: false // 表示跨域请求时是否需要使用凭证
})

// 请求拦截器
service.interceptors.request.use(
  config => {

    return config
  },
  error => {
    // do something with request error
    console.log(error) 
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(

  response => {
    return response.data
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

在api下新建index.js文件用于汇总各个部分的接口代码入下：

// 将模块统一暴露
import * as attr from './product/attr'

//对外暴露
export default {
     attr
}

在main.js入口文件就可以导入该文件，并且挂载到Vue的原型上方便调用，代码入下：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 引入api请求接口
import API from '@/api'

Vue.prototype.$API = API

new Vue({
  render: h => h(App),
}).$mount('#app')

此时我们的简单封装就做好了

3.编写请求

在src下创建文件夹api，用于储存各个部分的接口，在api文件夹下再创建文件product用于收集product

部分的接口，在该文件夹下创建attr.js文件，用于书写请求，示例代码入下:

// product管理模块的数据
import request from '@/utils/request'

// 获取分类列表
export function reqCateGoryList() {
  return request({
    url: '/info',
    method: 'get'
  })
}

4.解决跨域

在前端的开发中，为了避免一些数据的发起和请求的地址发生跨域的问题，我们需要配置代理来解决

跨域

我们需要找到vue.config.js文件，编写解决跨域的代码，文件的代码如下

module.exports = {
  lintOnSave: false, //关闭eslint检查
  devServer: {
    open: true,
    // 解决代理跨域问题
    proxy: {
      '/dev-api': {
        target: 'http://127.0.0.1:3030',
        pathRewrite: { '^/dev-api': '' },
        changeOrigin: true
      }
    }
  }
}

5.测试使用

简单编写App.vue的代码用于测试

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button @click="reqCateGory1List">测试</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      list1: ''
    }
  },
  methods: {
    async reqCateGory1List() {
      const res = await this.$API.attr.reqCateGoryList()
      if (res.code == 200) {
        this.list1 = res.data
        console.log(res.data)
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

此时的控制台就可以输出数据了