axios

src/api/admin.js

@@ -0,0 +1 @@
+// 这里面写管理员特有的接口

src/api/base.js

@@ -0,0 +1,46 @@
+import axios from 'axios'
+axios.defaults.baseURL = 'https://kaoshi-shangpin.theluyuan.com';
+// 这个改的axios 全局的
+
+
+
+// 拦截器
+//  全局都要用的时候
+// 返回数据的处理
+// 判断一下登录状态 状态码 未登录 就必须跳转首页或者登录页
+// 处理一下返回数据
+// 处理请求数据 
+// 进行加载时提示
+
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+    // 在发送请求之前做些什么
+    console.log(config, "拦截器")
+    // config.baseURL = "https://www.baidu.com"
+    return config;
+}, function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+});
+
+
+// 响应拦截
+axios.interceptors.response.use(function (response) {
+    // 对响应数据做点什么
+    console.log(response, "响应拦截")
+    // 判断一下是不是有权限
+    // if(response.data.code == 0){
+    //   router.push("/login")
+    // }
+    // if(response.data.msg == "用户无权限"){
+    //   router.push("/login")
+    // }
+    response.data.code = 1;
+    return response.data;
+}, function (error) {
+    console.log("请求失败")
+    // 对响应错误做点什么
+    return Promise.reject(error);
+});
+
+export default axios;

src/api/index.js

@@ -0,0 +1,21 @@
+import axios from './base.js'
+
+export async function getlist(){
+    let res = await axios.get("/findshop");
+    return res;
+}
+
+export async function submit(data){
+    let res = await axios.post("/addshop",data);
+    return res;
+}
+export default {
+    a:1,
+    b:2,
+    getlist:1323
+}
+
+// 只有export 的导出 在外面只能用{ 里面导出时候的名字 } 拿到
+// import mingzi from "" 只能拿到export default导出的东西
+
+// 只要用import {变量名} 导入的 一定是拿的export 里面的

src/main.js

@@ -3,11 +3,37 @@ import App from './App.vue' // 自己的文件需要写路径
 import router from "./router/index.js"
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import axios from "axios"
+// import axios from "axios"
 Vue.config.productionTip = false  // 阻止生产提示
 Vue.use(ElementUI);
 // Vue.use(axios) axios 不支持use引入
-Vue.prototype.axios = axios // 基于原型链安装 为Vue添加方法
+
+
+
+
+
+
+
+// 这个是创建一个新的axios 实例 他的baseURL是 传入的
+// const instance = axios.create({
+//   baseURL: 'https://kaoshi-shangpin.theluyuan.com'
+// });
+// // instance 这是通过crate创建的一个新的axios实例
+// console.log(instance)
+
+
+
+// axios.defaults.headers.common['aaa'] = "3222";
+// axios.defaults.headers.get['bbb'] = "3222";
+// axios.defaults.headers.post['ccc'] = 'zheshipost';
+
+// 头 headers 请求头 common 所有的请求添加  post 只有post才添加 get 只有get加
+
+// 消息内容 
+// 消息内容 上级id openid
+
+//全局能添加 baseURL headers
+// Vue.prototype.axios = axios // 基于原型链安装 为Vue添加方法
 Vue.prototype.globaldata = {}
 // vuex
 new Vue({

src/views/axios.vue

@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import { getlist,submit } from "../api/index.js";
 export default {
   data() {
     return {
@@ -83,13 +84,22 @@ export default {
     };
   },
   mounted() {
-    this.axios({
-      url: "https://kaoshi-shangpin.theluyuan.com/findshop",
-      method: "GET",
-    }).then((res) => {
-      console.log(res.data);
-      // this.globaldata.list = res.data
-    });
+    // 已经配置了baseURL 
+    // 全局的 baseurl https://kaoshi-shangpin.theluyuan.com
+    // baseURL  + url
+    // https://kaoshi-shangpin.theluyuan.com/findshop
+    // this.axios({
+    //   url: "/findshop",
+    //   method: "GET",
+    //   data:{a:1}
+    // }).then((res) => {
+    //   console.log(res);
+    //   // this.globaldata.list = res.data
+    // });
+    console.log(getlist)
+    getlist().then((res)=>{
+      console.log(res)
+    })
   },
   methods: {
     onSubmit() {
@@ -98,20 +108,33 @@ export default {
         if (!a) {
           return;
         } else {
+          submit(this.form).then((res)=>{
+            console.log(res,"post成功")
+          })
           //提交表单
-          this.axios({
-            url: "https://kaoshi-shangpin.theluyuan.com/addshop",
-            data: this.form,
-            method: "POST",
-          }).then((res) => {
-            console.log(res.data);
-          });
+          // 这个位置this
+          // this.axios({
+          //   url: "/addshop",
+          //   data: this.form,
+          //   method: "POST",
+          // }).then((res) => {
+          //   console.log(res.data);
+          // }).catch((rej)=>{
+          //   console.log("失败",rej)
+          // })
+
+
         }
         console.log(a, b);
       });
       console.log(this.form);
     },
   },
+  watch:{
+    form(){
+      
+    }
+  }
 };
 </script>
 <!-- 一定加 scoped -->