vue脚手架安装 axios 安装 配置 轮播图「终于解决」 -金沙1005

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

cmd 

npm install –save axios

//引入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 } */)

是否还在为ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！

为防止网络爬虫，请关注公众号回复”口令”

激活idea 激活clion

datagrip dataspell

dotcover dotmemory

dottrace goland

phpstorm pycharm

resharper reshac

rider rubymine

webstorm 全家桶

解锁下载

【正版授权，激活自己账号】： 

【官方授权 正版激活】： 

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

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

3.在项目目录下执行安装命令 moudel里按: npm i axios vue-axios
axios金沙1005官网: 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调用的封装的请求
{/* 调用封装的get请求 */ }
// 导入
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),
            //跳转到金沙1005首页
            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)
    }