vue脚手架安装 axios 安装 配置 轮播图

1. 安装配置 axios 。 直接vscode安装

cmd 

npm install --save axios

2配置 main.js

//引入axios模块
import axios from 'axios'
//默认基础路径
axios.defaults.baseURL = 'http://localhost:3000'
//原型添加axios
Vue.prototype.axios = axios




//第二中添加方式

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)



****************************** 轮播图

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

1.安装脚手架软件: npm i -g @vue/cli

2.vue create 包  自己起名
名固定选项
选手动模式: Manually select features

3.在项目目录下执行安装命令 moudel里按: npm i axios vue-axios
Axios官网: http://www.axios-js.com/

4.Vue2和swiper的相关教程:
https:/ / github.com/surmon-china/vue-awesome-swiper
在项目目录下执行安装命令:
模块的安装命令: npm i swiper@5.x vue-awesome-swiper

axios 请求拦截器

//引入axios
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

axios.defaults.baseURL = 'http://xuezi.fries.host/mfresh/data/'
//请求拦截器
axios.interceptors.request.use(config => {
    // console.log('congih', config)
    //必须在最后return congfig
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})
Vue.use(VueAxios, axios)

methods: {
    getHandle() {
        //axios.get 发起get请求
        //参数一 表示请求地址
        //参数二 表示配置信息
        // params表示传递到服务器端的数据，以url参数形式拼接在请求地址后面
        // { page: 1, per: 3}
        // headers表示请求头
        axios.get('uel', {
            params: {
                page: 3,
                per: 2
            },
            headers: {}
        }).then(res => console.log(res))
    }
    postHandle() {
        //post骑牛传递三个参数
        //请求地址
        //传递的数据，在请求体中传递
        //axios默认发送的数据是json格式的
        //配置信息
        //herders
        //content—type：'appLication/json' 默认  所以默认发送的数据是json格式的
        axios.post("url", {
            username: 'xioaming',
            password: '1111'
        },
            {
                // '可选参数可以不写'
                params: {//表示url拼接的 http：//
                    a: 123,
                    b: "haha"
                }

            }
        )
            .then(res => { console.log(res) })
            .catch(err => console.log(err))
    }
    // axios.put()
    // axios.delete()

},

//request.js 文件
import axios from "axios";

const axios = axios.create({
  baseURL: 'http://xuezi.fries.host/mfresh/data/',  //会在发送请求的时候拼接在url之前
  timeout: 5000
})

export function get (url, params) {
  return axios.get(url, {
    params
  })
}

export function get (url, data) {
  return axios.post(url, data)
}

export function del (url) {
  return axios.delete(url)
}

export function put (url, data) {
  return axios.delete(url, data)
}

// 在home.vue调用的封装的请求

{/* <button @click="getByMinHandle">调用封装的get请求</button> */ }

// 导入
import { get } from "../utils/request"


methods: {
  getByMinHandle(){
    get('url', {}).then(res => console.log(res))
  }
},

 nprogress 进度条使用    npm install --save   nprogress

  methods: {
    login() {
      console.log(this.uname, this.upwd);
      //   const {uname,upwd}=this
      const url = "http://www.codeboy.com:9999/data/user/login.php";
      const params = `uname=${this.uname}&upwd=${this.upwd}`;
      //正确11 123 123
      this.axios.post(url, params).then((res) => {
        console.log(res);
        //登录页面的操作，要影响到 头部栏 组件--全局状态共享
        if (res.data.code == 200) {
          //成功：更新用户名到vuex里
          this.$store.commit("updataUname", this.uname),
            //跳转到首页
            this.$router.push("/");
        } else {
          alert("登录失败！");
        }
      });
    },
  },
};

  methods: {
    getData() {
      const url = "product/details.php?lid=" + this.lid;
      console.log("url:", url);
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
  },

    //获取所有菜单
    async getMenuList () {
      const { data: res } = await this.axios.get('cart_detail_select.php?uid=10')
      if(res.meta.status!==200)return this.$message.error(res.meta.msg)
      this.menulist = res.products
      console.log(this.menulist)

    }