vue进阶二之 Axios与路由的初步了解

Posted 一只猪的思考

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue进阶二之 Axios与路由的初步了解相关的知识,希望对你有一定的参考价值。

一、Vue中的表单

1.v-model修饰符中的新功能
<template>
  <div id="app">
    <div style="width:50%" class="container">
      <div>
        <h3>Regist</h3>
        <h5>Email</h5>
        <input type="text" class="form-control" v-model.trim="mail"/><br/> 
        {{ mail }}
        <h5>Password</h5>
        <input type="password" class="form-control" v-model.lazy="password"/><br/> 
        {{ password }}
        <h5>Gender</h5>
        <input type="radio" name="gender" v-model="gender" value="female"/><input type="radio" name="gender" v-model="gender" alue="male"/><br/>
        <h5>Hobby</h5>
        <input type="checkbox" name="hobby" v-model="hobby" value="music">音乐
        <input type="checkbox" name="hobby" v-model="hobby" value="movie">电影
        <input type="checkbox" name="hobby" v-model="hobby" value="sport">运动 
        {{ hobby }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mail: "xxx@126.com",
      password: "",
      gender: "",
      hobby: []
    }
  },
  methods: {
    changeName: function (name) {
      this.name = name
    }
  }
}
<script>

lazy:失去焦点时才会绑定内容
trim: 绑定的内容自动去除开头和结尾的所有的空格,字符串内部的空格不去除。

二、http请求–ajax

1. 什么是 Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下:

  • 从浏览器中创建XMLHttpRequests
  • node.js 创建http请求
  • 支持Promise API拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御 XSRF(跨站请求伪造)
    GitHub:https://github.com/axios/axios
2.为什么要使用 Axios

由于 Vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守SoC(关注度分离原则),所以 Vue.js 并不包含 AJAX的通信功能,为了解决通信问题,作者单独开发了一个名为vue-resource的插件,不过在进入2.0版本以 后停止了对该插件的维护并推荐了 Axios 框架

3.Axios的使用
  • 1)安装vue axios
npm install --save axios vue-axios
  • 2)在main.js中引入 在项目中使用axios模块
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
  • 3)发送ajax请求
this.axios({
method:'get', 
url:'http://bit.ly/2mTM3nY', 
data:{}
})
.then(function (response) {
console.log(response.data) });
  • 4)服务端解决跨域问题
<mvc:cors>
<mvc:mapping path="/**"
allowed-origins="*"
allowed-methods="POST, GET, OPTIONS, DELETE, PUT,PATCH" allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
allow-credentials="true" />
</mvc:cors>

在spring-mvc.xml中加入上述这一段。其中,allowed-origins指的是允许的访问源的域名,"*"表示任何人都可以访 问,也可以指明具体的域名

  • 5)解决axios无法传递data中的参数问题
    原因:默认情况下发送axios时请求头中的内容类型为:
Content-Type:application/json;charset=UTF-8

而实际服务端需要的是:

Content-Type:application/x-www-form-urlencoded

因此,使用axios的qs内置库中的方法进行内容类型的转换。

import Qs from 'qs'

this.axios({
	method:'post', 
	url:'http://localhost:8081/regist', 
	transformRequest: [function (data) {
		return Qs.stringify(data) }],
	data:{ 
		email:this.email
	} 
})
.then(function (response) {	
	 alert(response.data.message)
});

三、路由

路由是第三方模块提供

1.安装路由模块
npm install vue-router -s
2.设计路由界面

创建components文件夹,文件夹内分别创建user、Home组件

  • user.vue
<template>
  <div>user</div>
</template>
  • Home.vue
<template>
  <div>Home</div>
</template>
3.创建静态路由表

在src下创建routes.js

import Home from '@/components/Home.vue' 
import User from '@/components/user/user.vue'
export const routes = [ 
{path:'/',component:Home}, 
{path:'/user',component:User}
]
4.引入路由模块并使用

在main.js中引入路由模块并使用

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' 
//1.引入路由模块 
import {routes} from './routes' 
//2.引入静态路由表
Vue.use(VueRouter); 
//3.使用路由模块
//4.创建一个VueRouter模块的实例 
const router = new VueRouter({
	routes:routes
});
new Vue({
el: '#app', 
router,
//5.把router实例放入到vue实例中 
render: h => h(App)
})

5.路由初体验
  • App.vue
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
        <h1>Routing</h1>
<router-view></router-view> 
</div>
    </div>
  </div>
</template>

改变url,发现中的内容发生改变

  • http://localhost:8080/#/ 显示home
  • http://localhost:8080/#/user 显示user

向router实例中添加mode属性:

  • 值"hash": url带# 适用于调试模式
  • 值"history" url不带#
6.链接路由的实现

创建Header.vue

<template>
<ul class="nav nav-pills">
<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
<router-link to="/user" tag="li" active-class="active"><a>User</a></router-link> 
</ul>
</template>
修改App.vue
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<h1>Routing</h1>
<Home></Home>
<router-view></router-view> 
</div>
    </div>
  </div>
</template>
<script>
import Home from '@/components/Header.vue' 
export default{
components:{
"Home":Home
}
}
</script>
7.参数的传递

Header.vue传入参数

<template>
<ul class="nav nav-pills">
<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
<router-link to="/user/10" tag="li" active-class="active"><a>User</a></router-link> 
</ul>
</template>

路由表:router.js

export const routes = [ 
{path:'/',component:Home}, 
{path:'/user/:id',component:User}
]

修改user.vue

<template>
  <div>
  <div>user</div>
  <p>userId:{{id}}</p>
  </div>
</template>
<script>
export default{
data(){
	return { 
	id:this.$route.params.id
	} 
}
}
</script>
8.程序式路由的实现

在user.vue中加入回到首⻚按钮

<template>
  <div>
    <div>user</div>
    <p>userId:{{ id }}</p>
    <button type="button" @click="goHome" class="btn btn-default btn-block">回到首⻚</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id
    }
  },
  methods: {
    goHome() {
      this.$router.push({path: '/'})
    }
  }
}
</script>

以上是关于vue进阶二之 Axios与路由的初步了解的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

vue+axios完美实现前端路由拦截

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置