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 congfigconfig.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}=thisconst url = "http://www.codeboy.com:9999/data/user/login.php";const params = `uname=${this.uname}&upwd=${this.upwd}`;//正确11 123 123this.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.productsconsole.log(this.menulist)}

vue脚手架安装 axios 安装配置轮播图相关推荐

vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...
【Vue】实现滑动和闪现轮播图（转）
实现的功能: 闪现轮播图与滑动轮播图: 点击 < 和 > 箭头切换轮播图页面: 点击右下部小圆点切换对应的轮播图: 切换tab页离开轮播图界面后会清空计时器,再进入时重启计时器开始播放: ...
记录下如何用vue实现PC端网易云轮播图效果
记录下自己写仿网易云音乐手写的轮播图,效果如图简单来说,这个轮播图原理是用css定位把所有图片叠再一起,显示前3张图片,第2张图片层里设置层级为最高,1,3俩张图片层级比2层级低,比其他图片高就行. ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
一.需求问题在之前的项目开发中,使用了swiper插件.由于是vue项目,对于swiper的轮播图我们使用了v-show命令,进行动态隐藏与显示.只有当点击进行一些操作以后,swiper的轮播图才会 ...
闲云旅游项目开发-（第一篇：使用Element-ui实现主页轮播图）
业务需求: 初始化布局页头页脚公共组件首页轮播图一初始化默认全局布局 nuxtjs 提供了一个公共组件 layouts/default.vue,相当于以前的 app.vue .该布局组件默认作 ...
在html中使用swiper插件实现轮播图效果
最近在对公司官网改版2.0,之前的没有后台都是静态页面那么官网逃不开的肯定是轮播图啦~ 当然我一开始是自己写的,发现写到一半很麻烦,首先从最后一张像环路一样到第一张:其次不仅是点击,还要触摸滑动,这 ...
组件封装 - 轮播图组件
轮播图组件封装, 我们主要分为三大步来完成: 1. 基本布局 2. 渲染结构 3. 逻辑封装我们这里封装的轮播图组件和 Element UI 所封装的走马灯组件有所不同 Element UI 是直接 ...
spring boot+bootstrap实现动态轮播图实战
1.bootstrap轮播图最近开发了个网站需要用到轮播图,正好前端用的是Bootstrap,这里就实战一下. 水平一般能力有限,仅供参考. 前提条件: bootstrap4.5 jquery 3张 ...

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

vue脚手架安装 axios 安装配置轮播图相关推荐

最新文章

热门文章

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

vue脚手架安装 axios 安装 配置 轮播图相关推荐

最新文章

热门文章

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

vue脚手架安装 axios 安装配置轮播图相关推荐