vue封装axios(二）

一 在根目录下创建api文件夹

二 创建request.js文件

const instance = axios.create({
    baseUrl : process.env.BASE_API,
    withCredentials: true
}) //创建基本实例


instance.interceptors.response.use(res => res.data)
export default function (type, url, data, options){
    if(type === "get"){
        return instance.get(url,{
            params:data
        })
    } else{
        if (options) {
            return instance.post(url, data)
        } else {
            return instance.post(url, data, options)
        }
    }
}// 请求响应拦截器

三 在文件夹下建立对应的文件比如index.js

export const Login = (data) => request("post", api, +'/login' + data)
import request from "./request"

// const api = "/api"
const api = ""

// 登陆
export const Login = (data) => request("post", api + "/login", data);

// 验证用户是否登陆
export const CheckLogin = () => request("get", api + "/checklogin");

// 注销
export const Cancellation = () => request("post", api + "/cancellation")

// 上传头像
export const ImageUpload = (data, options) => request("post", api + "/image/upload", data, options)

// 获取用户信息
export const FindFile = () => request("get", api + "/findfile")

// 修改用户信息
export const Modify = (data) => request("pose", api + "/modifyflie", data)

// 发表文章
export const PublishedArticle = (data) => request("post", api + "/article/published", data)

// 根据条件获取文章(data不传则获取所有)
export const GetArticle = (data) => request("get", api + "/article/get", data)

// 根据条件搜索文章
export const SearchArticle = (data) => request("post", api + "/article/search", data)

// 获取单页的文章
export const GetSinglePage = (data) => request("get", api + "/article/singlepage", data)

// 删除文章
export const DeleteArticle = (data) => request("post", api + "/article/delete", data)

// 发表评论
export const PostComment = (data) => request("post", api + "/comment/postcom", data)

// 发表评论
export const GetComment = (data) => request("get", api + "/comment/getcom", data)

// 发表子评论
export const PostChild = (data) => request("post", api + "/comment/postchild", data)

// 删除评论
export const DeleteComment = (data) => request("post", api + "/comment/deletcom", data)

// 存储未读评论
export const UnreadCom = (data) => request("post", api + "/unread/postlist", data)

// 获取所有未读评论
export const GetreadCom = (data) => request("get", api + "/unread/getlist", data)

// 删除已读评论
export const DeleteRead = (data) => request("post", api + "/unread/delete", data)


// 发布公告
export const ReleaseAnnount = (data) => request("post", api + "/annount/release", data)

// 获取公告
export const GetAnnount = (data) => request("get", api + "/annount/get", data)

// 删除公告
export const DeleteAnnount = (data) => request("post", api + "/annount/delete", data)

// 发布留言
export const PostMessage = (data) => request("post", api + "/message/post", data)

// 获取留言
export const GetMessage = (data) => request("get", api + "/message/get", data)

// 删除留言
export const DeleteMessage = (data) => request("post", api + "/message/delete", data)

// 回复留言
export const PushChild = (data) => request("post", api + "/message/child", data)

// 获取日志的访问密码
export const GetPermissins = (data) => request("get", api + "/log/getpermissins", data)

// 设置日志访问密码
export const SetPermissins = (data) => request("post", api + "/log/setpermissins", data)

// 发表日志
export const PostLog = (data) => request("post", api + "/log/post", data)

// 获取日志
export const GetLog = (data) => request("get", api + "/log/get", data)

// 删除日志
export const DeleteLog = (data) => request("post", api + "/log/delete", data)

//获取所有分类
export const GetCategory = (data) => request("get", api + "/category/get", data)

四 使用(调用)

app.vue

import {
  GetAnnount,
  CheckLogin,
  Cancellation,
  GetPermissins,
} from "./api/index"

 // 注销
    handleCancellation() {
      this.$confirm("您确定退出登录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Cancellation().then((res) => {  //这里直接调用Cancellation
            const { status, isLogin, msg } = res
            if (status) {
              this.$notify({
                title: "成功",
                message: msg,
                type: "success",
              })
              this.isLogin = isLogin
              this.$store.commit("upDateStaus", isLogin)
              this.$router.push("/home")
            }
          })
        })
        .catch(() => {})
    },

五，配置代理
在vue.config.js文件夹下

module.exports = {

      // 关于打包的设置
  publicPath: '/',//vue-cli3.3+新版本使用
  // baseURI: '/',//vue-cli3以下版本使用
  outputDir: 'dist',//构建输出目录
  assetsDir: 'assets',//静态资源目录(js,css,img,fonts)
  lintOnSave: false,//是否开启eslint保存检测,有效值: true || false || 'error'
     // 跨域
  devServer: {
    // open: true, //是否自动弹出浏览器页面
    // host: "localhost",
    port: '80',
    // https: false, //是否使用https协议
    // hotOnly: true, //是否开启热更新
    proxy: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api/v1': {
        target: 'http://39.97.xx.xx/',   //代理接口
        changeOrigin: true,
        // pathRewrite: {
        //   '^/api': ''    //代理的路径
        // }
      }
    }
  }
}