【Vue】Vue学习笔记——UI组件库和常用插件
文章目录
- 6. UI组件库和常用插件
- 6.1 Element-ui
- 6.2 Vue-router
- 6.2.1 基本用法
- 6.2.2 跳转
- 6.2.3 路由嵌套
- 6.2.4 路由参数传递
- 6.3 Axios
- 6.3.1 基本使用
- 6.3.2 json-server的安装及使用
- 6.3.3 跨域处理
- 6.3.4 Vue中Axios的封装
6. UI组件库和常用插件
6.1 Element-ui
vue的核心思想是组件和数据驱动,但是每一个组件都需要自己编写模板、样式、添加事件、数据等,这些工作是比较繁琐的,所以推出了Element-ui,提供丰富的PC端组件。
Element-ui的两种引入方式:
cdn:通过在线方式直接在页面上引入Element-ui的JS和CSS文件即可开始使用:
<!--引入样式--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!--引入组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
npm安装
推荐使用npm的方式安装,它能更好地和webpack打包工具配合使用
npm install element-ui -S
Vue项目中集成Element-ui的步骤如下:
在控制台输入命令进行安装;
查看配置文件package.json,是否有Element-ui组件的版本号;
在main.js文件中完整引入Element-ui组件库;
从Element官网复制示例代码到HelloWorld.vue,体验Element-ui组件;
在HelloWorld.vue中引入常用的操作按钮、下拉列表、Table表格等组件:
<template><div id="app"><h1>{{msg}}</h1><!--1.常用按钮--><el-button type="primary">主要按钮</el-button><el-button plain type="warning">警告按钮</el-button><!--2.下拉列表--><el-dropdown split-button size="small" trigger="click">个人中心<el-dropdown-menu><el-dropdown-item >退出系统</el-dropdown-item><el-dropdown-item divided>修改密码</el-dropdown-item><el-dropdown-item divided>联系管理员</el-dropdown-item></el-dropdown-menu></el-dropdown><br><!--3.Table 表格--><el-table :data="tableData" stripe><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="操作" align="center"><!--slot-scope:作用域插槽,可以获取表格数据scope:代表表格数据,可以通过scope.row来获取表格当前行数据,scope不是固定写法--><template slot-scope="scope"><el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button><el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table></div> </template> <script>export default {name: 'HelloWorld',//在Vue组件中data只能为函数,这是Vue的特性。必须有return返回数据,否则页面模板接收不到值。data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}]}},methods:{handleUpdate(row){alert(row.date);},handleDelete(row){alert(row.date);}} }</script> <style scoped></style>
效果如下:
6.2 Vue-router
Vue-router就是Web App的链接路径管理系统。
Vue-router是Vue官方的路由插件,它和Vue.js是深度集成的,适用于构建单页面应用。Vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用使用一些超链接实现页面的切换和跳转。在Vue-router单页面应用中,通过路径之间的切换,也就是组件的切换实现页面的切换和跳转。路由模块的本质就是建立起URL和页面之间的映射关系。这样有助于前后端分离,前端不依赖后端逻辑,只需后端提供数据接口。
不用a标签是因为用Vue做的应用都是单页应用(当项目准备打包时,运行命令npm run build就会生成dist文件夹,这里面只有一个静态资源和一个index.html页面),所以我们写的< a >< /a >标签不起作用,必须使用Vue-router进行管理。
6.2.1 基本用法
npm install --save vue-router //通过npm命令安装vue-router
在src目录下建立router/index.js文件,此文件专门用于管理路由核心文件,使用Vue.use()加载路由插件,如下:
//引入vue框架 import Vue from 'vue' //引入vue-router路由依赖 import Router from 'vue-router' //引入页面组件,命名为HelloWorld。@代表绝对路径 import HelloWorld from '@/components/HelloWorld' //Vue全局使用Router Vue.use(Router) //定义路由配置,注意export导出,只要导出了别的文件才能import导入 export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld}] })
在系统入口文件main.js中导入router,如下:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',router,components: { App },template: '<App/>' })
用router-view占位符定义路由出口,路由匹配到的组件内容将渲染到这里,具体在App.vue组件中的用法代码如下:
<template><div id="app"><!--路由占位符--><router-view></router-view></div> </template><script>export default {name: 'App' }</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; }</style>
Vue提供了一个属性mode:‘history’,可以去掉地址栏中的#。
设置mode为history会开启HTML5和History路由模式,通过"/“设置路径。如果不设置mode,就会使用”#"设置路径。
每个页面对应一个组件,也就是对应一个.vue文件。在components目录下创建Hi.vue文件,代码如下:
<template><div id="hi"><h1>Hi.vue组件</h1></div>
</template>
<script>export default{name:"Hi"}</script>
再回到index.js文件中完成路由的配置,完整代码如下:
import Hi from '../components/Hi.vue'{path:'/hi',name:'Hi',component:Hi}
启动服务,在浏览器中访问http://localhost:8080/hi和http://localhost:8080/就可以分别访问Hi.vue和HelloWorld.vue组件页面了。
ES6语法提示:
ES6新增了let和const命令声明变量,代替了var。它们的用法类似于var,但是所声明的变量只有在代码块内有效:代码如下:
{let a=123;var b=234;
}
console.log(a); //报错,a is not defined
console.log(b); //234
let和const的主要区别是,const声明的是一个只读常量,一旦声明,常量的值就不能改变。
6.2.2 跳转
在components目录下创建Home.vue(首页)和News.vue(新闻页)两个文件,代码如下:
Home.vue:
<template><div id="Home"><h1>我是首页:</h1><ul><!--路径要写完整路径:父路径+子路径--><span><router-link :to="{name: 'One', params:{username:'beixi'}}">子页面1</router-link></span><span><router-link to="/home/two/666/贝西奇谈" >子页面2</router-link></span><button @click="toThreePage">页面3</button></ul><!-- 子页面展示部分 --><router-view/></div>
</template><script>export default {name: "Home",methods: {toThreePage() {this.$router.push({name: 'three', params: {id: 1, name: 'beixi'}})}}}</script>
<style scoped>.router-link-active{color: red;}</style>
News.vue:
<template><div id="News"><h3>{{title}}</h3><ul class="ulnews"><li v-for="(data,index) in newslist" :key="index">{{data}}</li></ul></div>
</template><script>export default {name: "News",data(){return{title:'新闻栏目',newslist:['新闻1','新闻2','新闻3']}}}</script><style scoped>.ulnews li{display: block;}</style>
接着在index.js中完成路由配置:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '../components/Hi.vue'
import Home from '@/components/Home'
import News from '@/components/News'Vue.use(Router)export default new Router({mode:'history',routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path:'/hi',name:'Hi',component:Hi},{path: '/home',name: 'Home',component: Home},{path: '/news',name: 'News',component: News}]
})
这样就可以在地址栏输入不同的路径访问对应的页面,但页面上一般需要有导航链接,我们只要单击此链接就可以实现页面内容的变化。在components目录创建Nav.vue导航页面,代码如下:
<template><div id="box"><ul><li><router-link to="/home" active-class="router-link-active">首页</router-link></li><!--v-bind动态设置-->
<!-- <li><router-link v-bind:to="home">首页</router-link></li>--><!--同上-->
<!-- <li><router-link :to="{ path: 'home' }">首页</router-link></li>-->
<!-- <button @click="goHome">首页</button>--><li><router-link to="/news" >新闻</router-link></li></ul></div>
</template><script>export default {name: "nav",data(){return {home:'/home'}},methods: {goHome(){this.$router.push('/home');}}}</script>
<!--scoped该样式只能适用于当前组件元素-->
<style scoped>.router-link-active{color: red;}*{padding: 0;margin: 0;}ul{list-style: none;overflow: hidden;}#box{width: 600px;margin: 100px auto;}#box ul{padding: 0 100px;background-color: #2dc3e8;}#box ul li {display: block;width: 100px;height: 50px;background-color: #2dc3e8;color: #fff;float: left;line-height:50px;text-align: center;}#box ul li:hover{background-color: #00b3ee;}</style>
导航页面构建完成后,在实例App.vue组件中导入,这样我们在访问http://localhost:8080/路径时就会显示导航栏:
<template><div id="app"><Nav></Nav><router-view></router-view></div>
</template><script>import Nav from './components/Nav.vue'
export default {name: 'App',components:{Nav}
}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}</style>
下面介绍Vue.js通过路由跳转页面方式:
router-link标签跳转
使用内置的< router-link >标签跳转,它会被渲染成< a >标签,使用方式如下:
<template><div id="box"><ul><li><router-link to="/home" active-class="router-link-active">首页</router-link></li><li><router-link to="/news" >新闻</router-link></li></ul></div> </template>
< router-link >标签中属性介绍如下:
to
表示目标路由的链接。当被单击后,内部会立刻把to的值传到router.push(),所以这个值可以是一个字符串,也可以是描述目标位置的对象。也可以用v-bind动态设置连接路径:
<li><router-link to="/home" active-class="router-link-active">首页</router-link></li> <!--v-bind动态设置--> <li><router-link v-bind:to="home">首页</router-link></li> <!--同上--> <li><router-link :to="{ path: 'home' }">首页</router-link></li>
replace
使用replace属性导航后不会留下history记录,所以导航后不能用后退键返回上一个页面,如< router-link to="/home" replace >
tag
有时需要时< router-link >渲染成某种标签,例如< li >。我们可以使用tag属性指定标签,同时它可以监听单击,从而触发导航:
<router-link to="/foo" tag="li">foo</router-link>
渲染结果为< li >foo< /li >
active-class
当< router-link >对应的路由匹配成功时,会自动给当前元素设置一个名为router-link-active的class值。设置router-link-active的CSS样式,在单击导航栏时可以 使用该功能高亮显示当前页面对应的导航菜单项。
当我们访问http://localhost:8080/路径时,希望在页面上显示首页的内容,而不是HelloWorld.vue组件的内容。这时我们可以使用路由的重定向redirect属性。在路由配置文件中设置redirect参数即可:
{path: '/',redirect:'/home',name: 'HelloWorld',component: HelloWorld}
JS代码内部跳转
在实际项目中,很多时候通过在JS代码内部进行导航的跳转,使用方式如下:
this.$router.push('/xxx')
具体用法及步骤如下:
在页面中添加单击事件:
<button @click="getHome">首页 </button>
在 < script > 模块加入getHome方法,并用this.$router.push(’/’)导航到首页:
export default{name:"app",methods:{getHome(){this.$router.push('/home');}} }
其他常用方法:
//后退一步记录,等同于history.back() this.$router.go(-1) //在浏览器记录前进一步,等同于history.forward() this.$router.go(1)
6.2.3 路由嵌套
子路由也叫路由嵌套,一般应用会出现二级导航这种情况,这时就得使用路由嵌套这种写法,采用在children后跟路由数组来实现,数组的配置和其他配置路由基本相同,需要配置path和component,然后在相应部分添加< router-view/ >展现子页面信息,相当于嵌入iframe。
Home.vue代码如下:
<template><div id="Home"><h1>我是首页:</h1><ul><!--路径要写完整路径:父路径+子路径--><span><router-link to="/home/one">子页面1</router-link></span><span><router-link to="/home/two" >子页面2</router-link></span><button @click="toThreePage">页面3</button></ul><!-- 子页面展示部分 --><router-view/></div> </template><script>export default {name: "Home",methods: {toThreePage() {this.$router.push({name: 'three', params: {id: 1, name: 'beixi'}})}}}</script> <style scoped>.router-link-active{color: red;}</style>
One.vue代码如下:
<template><div id="one"><h3>{{msg}}</h3></div> </template><script>export default {name: "One",data(){return {msg:'这是第一个子页面'}}}</script><style scoped></style>
Two.vue代码如下:
<template><div id="two"><h3>{{msg}}</h3></div> </template><script>export default {name: "Two",data(){return {msg:'这是第二个子页面'}}}</script><style scoped></style>
index.js代码如下:
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Hi from '../components/Hi.vue' import Home from '@/components/Home' import News from '@/components/News' import One from '../pages/One.vue' import Two from '../pages/Two.vue'Vue.use(Router)export default new Router({mode:'history',routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path:'/hi',name:'Hi',component:Hi},{path: '/home',name: 'Home',component: Home,children:[ // 嵌套子路由{path:'one', // 子页面1name:'One',component:One},{path:'two', // 子页面2component:Two}]},{path: '/news',name: 'News',component: News}] })
页面显示效果如下:
子页面显示的位置在其父级页面中,所以一定在父级页面中添加 < router-view/>标签。
6.2.4 路由参数传递
路由传递参数有三种方式:
通过< router-link >的to传参
基本语法:
<router-link :to="{name,xxx,params:{key:value}}">valuestring</router-link>
在上面代码中to带冒号,值为对象形式的字符串。
- name:对应的是路由配置文件中所使用的name值,叫做路由名称。
- params:要传的参数,此参数以对象形式出现,在对象里可以传递多个值。
具体实例如下:
在src/components/Home.vue里面的导航中添加如下代码:
<router-link :to="{name:'One',params:{username:'beixi'}}">子页面1</router-link>
在src/router/index.js中添加如下代码:
{path:'one', //子页面1name:'One', //name属性不能少component:One }
在src/pages/One.vue里面接收参数,代码如下:
<h2>{{$route.params.username}} </h2>
效果如下:
在URL中传递参数
在路由中以冒号的形式传递,在src/router/index.js中添加如下代码:
{path:'two/:id/:name', //子页面2component:Two }
接收参数,在src/pages/Two.vue中添加如下代码:
<p>ID:{{$route.params.id}} </p> <p>名称:{{$route.params.name}} </p>
路由跳转,在src/components/Home.vue中添加如下代码:
<router-link to="/home/two/666/沈子怡">子页面2</router-link>
效果如下:
编程式导航params传递参数
在src/router/index.js中添加如下代码:
{path:'three/:id/:name', //子页面3name:'three',component:Three }
在src/pages/Three.vue页面添加如下代码:
<p>ID:{{$route.params.id}} </p> <p>名称:{{$route.params.name}} </p>
在src/components/Home.vue中添加如下代码:
<button @click="toThreePage">页面3</button>methods: {toThreePage() {this.$router.push({name: 'three', params: {id: 1, name: '林昊天'}})}
效果如下:
代码说明:动态路由使用params传递参数,在this.$route.push()方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。
路由中router和route的区别如下:
router是Vuerouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象是一个全局的对象,它包含了所有的路由并且也包含了许多关键的对象和属性,代码如下:
$router.push({path:'home'}); //切换路由,有history记录 $router.replace({path:'home'}); //替换路由,无history记录
route是一个跳转的路由对象,每一个路由都会有一个route对象,它是一个局部的对象,可以获取对应的name、path、params、query等。
$ route.path,$ route.params,$ route.name,$ route.query这几个属性很容易理解,主要用于接收路由传递的参数。
6.3 Axios
Axios是一个基于Promise的HTTP库,它是一个简洁、易用且高效的代码封装库,通俗地讲,它是当前比较流行的一种Ajax框架,可以使用它发起HTTP请求接口功能,它是基于Promise的,相比较Ajax的回调函数能更好地管理异步操作。
Axios的特点:
- 从浏览器中创建XMLHttpRequests
- 从Node.js创建HTTP请求
- 支持PromiseAPI
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
6.3.1 基本使用
使用npm安装Axios依赖:
npm install axios
如果要全局使用Axios就需要在main.js中设置,然后在组件中通过this调用,代码如下:
import axios from 'axios'
Vue.prototype.$axios=axios; //加载到原型上
Axios提供了很多请求方式,例如在组件中直接发起GET或POST请求:
//为给定ID的user创建get请求
this.$axios.get('/user?ID=12345').then(res=>{console.log('数据是:',res);})
//也可以把参数提取出来
this.$axios.get('/user',{params:{ID:12345}
}).then(res=>{//响应数据console.log('数据是',res);
}).catch((e)=>{//请求失败console.log('获取数据失败');
});//post请求
this.$axios.post('/user',{firstName:'lin',lastName:'haotian'
}).then(function(res){console.log(res);
}).catch(function(err){console.log(err);
});
分别写两个请求函数,利用Axios的all方法接收一个由每个请求函数组成的数组,可与一次性发出多个请求,如果全部请求成功,在axios.spread方法中接收一个回调函数,该函数的参数就是每个请求返回的结果,代码如下:
function getUserAccount(){return axios.get('/user/12345');
}
function getUserPerssions(){return axios.get('/user/12345/perssions');
}
this.$axios.all([getUserAccount(),getUserPerssions()])
.then(axios.spread(function(res1,res2){//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))
以上通过Axios直接发起对应请求其实是Axios为了方便起见给不同的请求提供别名方法,我们完全可以通过调用Axios的API,传递一个配置对象来发起请求。
发生POST请求,参数写在data属性中,代码如下:
axios({url:'http://rap2api.taobao.org/app/mock/121145/post',method:'post',data:{name:'沈子怡'}}).then(res=>{console.log('请求结果:',res);
});
发生GET请求,默认就是GET请求,直接在第一个参数处写路径,在第二个参数处写配置对象,参数通过params属性设置,代码如下:
axios('http://rap2api.taobao.org/app/mock/121145/get',{params:{name:'沈子怡'}}).then(res=>{console.log('请求结果:',res);
});
Axios为所有的请求提供了别名:
axios.request(config)
axios.get(url,[config])
axios.delete(url,[config])
axios.head(url,[config])
axios.options(url,[config])
axios.post(url,data,[config])
axios.put(url,data,[config])
axios.patch(url,data,[config])
在使用别名方法时,url,method,data这些属性都不必在配置中指定
6.3.2 json-server的安装及使用
json-server是一个Node模块,运行Express服务器,我们可以指定一个JSON文件作为API的数据源。简单理解为在本地创建数据接口,使用Axios访问数据,使用步骤如下:
- 在根目录下全局安装json-server:
npm install -g json-server
- 在任意盘符创建一个文件夹用于存放JSON数据文件,终端切换到该文件目录下,执行初始化命令(一直按回车键即可):
npm init
- 在初始化的项目中安装json-server,执行如下命令:
npm install json-server --save
此时我们在项目文件夹下就可看到一个package.json文件,然后在当前目录下新建一个db.json文件,在本文件下编写自己的JSON数据:
{"users":[{"name":"beixi","phone":"15536812236","email":"63364536@qq.com","id":"1","age":"18","companyId":1}],"cpmpanies":[{"id":1,"name":"Alibaba","description":"Alibaba is good"}] }
修改package.json数据,设置快捷启动json-server命令如下:
"scripts": {"json:server":"json-server --watch db.json"},
运行json-server,命令如下:
npm run json:server
接着利用Axios访问json-server服务器中的数据,对数据列表进行增删改查操作:
<template><div id="jsonDemo" v-cloak><div class="add">用户信息:<input type="text" v-model="name" ><input type="button" value="添加" @click=addItem()></div><div><table class="tb"><tr><th>编号</th><th>用户名称</th><th>操作</th></tr><tr v-for="(v,i) in list" :key="i"><td>{{i+1}}</td><td>{{v.name}}</td><td><a href="#" @click.prevent="deleItem2(v.id)">删除</a></td></tr><!-- v-if="条件表达式" --><tr v-if="list.length===0"><td colspan="4">没有数据</td></tr></table></div></div> </template><script>export default {name: "jsonDemo",data(){return{name:'',list: []}},created(){this.$axios.get("http://localhost:3000/users").then(res => {this.list = res.dataconsole.log(res)}).catch(error => {console.log(error);})},methods:{// 获取数据getData() {this.$axios.get('http://localhost:3000/users').then((res) => {const { status, data } = res;if (status === 200) {this.list = data;}}).catch((err) => {})},// 删除deleItem2(ID) {console.log(ID)if (confirm("确定要删除吗?")) {// this.list.splice(index, 1);this.$axios.delete('http://localhost:3000/users/' + ID).then((res) => {console.log(res);this.getData()})}},// 增加addItem() {this.$axios.post('http://localhost:3000/users', {name: this.name}).then((res) => {const { status } = res;if (status === 201) {this.getData()}})this.list.unshift({name: this.name,});this.name = "";}}}</script><style scoped>#app {width: 600px;margin: 10px auto;}.tb {border-collapse: collapse;width: 100%;}.tb th {background-color: #0094ff;color: white;}.tb td,.tb th {padding: 5px;border: 1px solid black;text-align: center;}.add {padding: 5px;border: 1px solid black;margin-bottom: 10px;}</style>
效果如下:
6.3.3 跨域处理
跨域是指浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制.
同源策略:是指协议\域名\端口都要相同,其中有一个不同便会产生跨域.
如我们调用百度音乐的接口,以此获取音乐数据列表,这必然会出现跨域的问题.百度音乐的接口完整地址:http://tingapi.ting.baidu.com/v1/restserver/ting? method=baidu.ting.billboard.billList&type=1&size=10&offset=0
在vue中使用本地代理的方式进行跨域处理.首先在配置文件config/index.js中设置代理,在proxyTable中添加如下代码:
proxyTable: {'/api': {target: 'http://tingapi.ting.baidu.com', //目标路径,别忘了加http和端口号changeOrigin: true, //是否跨域pathRewrite: {'^SymbolYCp/api': '' //重写路径}}},
在main.js中,配置访问的URL前缀,这样每次发出请求时都会在URL前自动添加/api的路径,代码如下:
axios.defaults.baseURL = '/api'
在src/compones/baidu.vue建立组件页面,发生URL请求,代码如下:
<template lang="html"><div class=""><h3>百度音乐</h3><ul><li v-for="(item,index) in music.song_list">{{ item.album_title}}</li></ul></div>
</template><script>export default {name:"baidu",data(){return{music:{song_list:[]},}},created(){// 网络请求var url = "/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0";this.$axios.get(url).then(res => {this.music = res.dataconsole.log(res)}).catch(error => {console.log(error);})},
}</script>
<style ></style>
在src/router/index.js中配置路由,代码如下:
{path: '/baidu',name: 'baidu',component: baidu}
*emmmmmmm…报500了,也不知道什么原因。所以下一章的实战项目也一样是500. *
6.3.4 Vue中Axios的封装
Axios的封装
在项目中新建api/index.js文件,用以封装配置Axios,代码如下:
let http=axios.create({baseURL='http://localhost:8080/',withCredentials:true,headers:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'},transformRequest:[function(data){let newData='';for(let k in data){if(data.hasOwnProperty(k)===true){newData+=encodeURIComponent(k)+'='+encodeURIComponent(data[k])+'&';}}return newData;}] }); function apiAxios(method,url,params,response){http({method:method,url:url,data:method==='POST'||method==='PUT'?params:null,params:method==='GET'||method==='DELETE'?params:null,}).then(function(res){response(res);}).catch(function(err){response(err);}) } export default{get:function(url,params,response){return apiAxios('GET',url,params,response)},post:function(url,params,response){return apiAxios('POST',url,params,response)},put:function(url,params,response){return apiAxios('PUT',url,params,response)},delete:function(url,params,response){return apiAxios('DELETE',url,params,response)} }
这里配置了PIST,PUT,GET,DELETE方法,并且自动将JSON格式数据转为URL拼接的方式。同时配置了跨域,如果不需要则将withCredentials设置为false。设置默认前缀地址为http://localhost:8080/,这样调用的时候只需写目标后缀路径。
注:PUT请求默认会发送两次请求,第一次预检查请求不含参数,所以后端不能对PUT请求地址做参数限制。
使用
首先在main.js中引入方法:
//main.js import Api from './api/index.js'; Vue.protoType.$api=Api;
然后在需要的地方调用即可:
this.$api.post('user/login.do(地址)',{"参数名":"参数值"},response=>{if(response.status>=200&&response.status<300){console.log(response.data); //请求成功,response为成功信息参数}else{console.log(response.message); //请求失败,response为失败信息}})
【Vue】Vue学习笔记——UI组件库和常用插件相关推荐
- iView 3.3.0 发布,基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
- vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
- iView 3.4.0 发布,基于 Vue.js 的企业级 UI 组件库
百度智能云 云生态狂欢季 热门云产品1折起>>> iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...
- iView:一套基于Vue的高质量UI组件库
基于Vue的UI组件库现在已经有很多了,尤其是移动端的.现在又多了一个 iView . 先睹为快 iView 主要服务于PC界面的中后台业务,是一套高质量的开源UI组件库,先上地址: github.c ...
- PrimeVue - 基于 Vue 3 的免费开源、定制性强的前端 UI 组件库
来自国外的一个优秀的前端 UI 组件库,基于 Vue 3 很有特色,值得研究学习和上手使用. PrimeVue 介绍 PrimeVue 是一套非常优秀的 Vue UI 组件库,支持 Vue 3 的 w ...
- 12 个不可错过的 Vue UI 组件库,请查收
1. Element UI Element UI 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.它是一个用于 Web 的 UI 组件库 ,除了 Vue 之外,它还具有Re ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
- ajax插件库,03.vue-ajax、vue UI 组件库
vue-ajax vue 项目中常用的 2 个 ajax 库 vue-resource: vue 插件, 非官方库, vue1.x 使用广泛 axios: 通用的 ajax 请求库, 官方推荐, vu ...
- 17款优秀的Vue UI组件库汇总
17款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
最新文章
- Python中的matplotlib xticks
- JPA HttpMessageNotWritableException: Could not write content: Infinite recursion (StackOverflowError
- 【收藏】sonar-scanner扫描代码出错 SonarQube svn: E170001
- 【CodeForces - 438D】The Child and Sequence(线段树区间取模操作)
- JEECG列表嵌套查询列表子查询+号功能
- Android 系统(82)---ART 和 Dalvik
- 华为一则面试题登上热搜;大众点评会员因点赞过多被处罚;Linux Kernel 5.12 发布|极客头条...
- 快速读取内存文件-内存映射文件的方法
- linux 下恢复文件权限设置,备份和恢复Linux文件权限的方法
- 设计一个扩展自抽象类geometricobject_设计模式4之模板方法模式
- Office Communications Server 和客户端使用的端口和协议
- 【应用时间序列分析】第一章 时间序列分析简介
- CTF——9款网站目录扫描工具推荐——附下载链接与相关字典
- 17-sendto函数和异步错误
- ILSVRC2016
- OTA更新利用CRC保证程序的完整性
- 阴阳师进不去怎么办?阴阳师海外打不开解决办法!
- 如何成为Android高手
- (转)使用Wireshark抓包软件提示The NPF driver isn’t running解决办法
- Navicat Premium 12 下载、安装、及注册机破解
热门文章
- 【附源码】计算机毕业设计SSM天润律师事务所管理系统
- 51单片机 通过 tb6600驱动 步进电机
- Python将Excel表格按内容拆分为多个表格
- 海康威视-测试-面经(一面+hr面)
- Material Design之CollapsingToolbarLayout使用
- Java实战之亲戚关系计算器(JavaFX版)(2)——功能介绍
- 台式计算机i7处理器,笔记本电脑顶级i7系列CPU,相当于台式电脑CPU的什么水平?...
- 各种排序算法比较(1):稳定性
- 揭秘“菲住布渴”中运用的黑科技:除了check in、坐电梯、开门...全部刷脸之外,还有什么?... 1
- Github: 单独删除某个文件的所有历史记录