前端入门之VUE--ajax、vuex、router，最后的前端总结

前言

• VUE是前端用的最多的框架；
• 这篇文章是本人大一上学习前端的笔记；
• 欢迎点赞 + 收藏 + 关注，本人将会持续更新。
• 本人不是学前端的，这个是大一的时候上学的和做的笔记，那个时候学的也蒙，故这里对前端做一个总结：

• 前端入门一之HTML知识讲解
• 前端入门一之CSS知识详解
• 前端入门一之JS最基础、最基础语法
• 前端入门一之JS对象、字符串对象、数组对象、Data()对象等
• 前端入门一之DOM、获取元素、DOM核心、事件高级、操作元素、事件基础、节点操作
• 前端入门一之BOM、window对象常见事件、定时器、JS执行机制、location对象、navigatior对象、history对象
• 前端入门一之ES6–面向对象、够着函数和原型、继承、ES5新增方法、函数进阶、严格模式、高阶函数、闭包
• 前端入门一之ES6–递归、浅拷贝与深拷贝、正则表达式、es6、解构赋值、箭头函数、剩余参数、String、Set
• 前端入门之VUE–基础与核心
• 前端入门之VUE–vue组件化编程
• 前端入门之VUE–vue脚手架编程

文章目录

• • • 4、Vue中的Ajax
    • • • 4.1、Vue脚手架配置代理
      • 4.2、vue-resource
      • 4.3、slot插槽
    • 5.Vuex插件
    • • 5.1、理解vuex
      • • 5.1.1、Vuex是什么
        • 5.1.2、什么时候用vue
      • 5.2搭载Vuex环境
      • • 5.2.1、使用Vuex编写
      • 5.3、getters配置项
      • 5.4、四种方法
      • 5.5、模块化 + 命名空间
    • 6.Vue Router路由管理器
    • • 6.1、相关理解
      • 6.2、基本路由
      • 6.3、注意事项
      • 6.4、多级路由
      • 6.5、query()
      • 6.6、命名路由
      • 6.7、路由的params参数
      • 6.8、props配置
      • 6.9、路由跳转replace()

4、Vue中的Ajax

4.1、Vue脚手架配置代理

下载axios库：npm install axios

vue脚手架配置代理服务器：

• 方法一：在vue.config.js中添加如下配置

  devServer: {proxy: "http://localhost:5000"
  }
  

  说明：

  1. 优点：配置简单，请求资源时直接发给前端即可
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

• 方法二：

  devServer: {proxy: {'/api1': { // 匹配所有以 '/api1'开头的请求路径target: 'http://localhost:5000',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api1': ''}},'/api2': { // 匹配所有以 '/api2'开头的请求路径target: 'http://localhost:5001',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api2': ''}}}
  }// changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
  // changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
  

  优点：可以配置多个代理，且可以灵活的控制请求是否走代理

  缺点：配置略微繁琐，请求资源时必须加前缀

4.2、vue-resource

下载 vue-resource库：npm i vue-resource

总结：

vue项目常用的两个Ajax库：

1. axios：通用的Ajax请求库，官方推荐，效率高
2. vue-resource：vue插件库，vue 1.x使用广泛，官方已不维护

4.3、slot插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信方式

分类：默认插槽、具名插槽、作用域插槽

使用方法：

1. 默认插槽

   父组件中：<Category><div>html结构1</div></Category>
   子组件中：<template><div><slot>插槽默认内容</slot></div></template>
   

2. 具名插槽

   父组件中：<Category><template slot="center"><div>html 1</div></template><template v-solt:footer><div>html 2</div></template></Category>
   子组件中：<template><solt name="center">默认卡槽内容</solt><solt name="footer">卡槽默认内容</solt></template>
   

3. 作用域插槽

   父组件中：
   
   
   
   

   • 
     
   • {{g}}
   • 
     
   
   
   

   	<Category><template slot-scope="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>
   

   子组件中：
   
   

   
   
   
   
   

       <script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}</script>
   

5.Vuex插件

5.1、理解vuex

5.1.1、Vuex是什么

1. 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

5.1.2、什么时候用vue

1. 多个组件依赖同一个状态
2. 来自不同组件的行为需要变更同一状态

5.2搭载Vuex环境

1. 下载Vuex：npm i vuex

2. 创建src/store/index.js：

   //引入Vue核心库
   import Vue from ‘vue’
   //引入Vuex
   import Vuex from ‘vuex’
   //应用Vuex插件
   Vue.use(Vuex)

   //准备action对象响应组件中用户的动作、处理业务逻辑
   const active ={}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}

   //创建并暴露store
   export default new Vuex.Store({
   actions,
   mutations,
   state
   })

在src/main.js中创建 vm 时传入store配置项：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'Vue.config.productionTip = falseVue.use(Vuex)new Vue({el:"#app",render: h => h(App),store
})

5.2.1、使用Vuex编写

src/components/Count.vue:

<template><div><h1>当前求和为：{{$store.state.sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name: 'Count',data() {return {n: 1,}},methods: {increment() {this.$store.commit('ADD',this.n)},decrement() {this.$store.commit('SUBTRACT',this.n)},increamOdd() {this.$store.dispatch('addOdd',this.n)},incrementWait()  {this.$store.dispatch('addWait',this.n)}}}
</script>

src/store/index.js:

//引入vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)//准备一个action对象
const active = {addOdd(context,value) {console.log("actions中的addOdd被调用了")if(context.state.sum%2){context.commit('ADD',value)}},addWait(context,value) {console.log("actions中addWait被调用了")setTimeout(() => {context.commit('ADD',value)},500)}
},
//准备mutations对象——修改state中的数据
const mutations = {ADD(state,value) {state.sum += value},SUBTRACT(state,value) {state.sum -= value
}
},
//准备state对象——保存具体的数据
const state = {sum: 0
}//创建并且暴露store
export default new Vuex.Store({actions,mutations,state
})

总结：

Vuex的基本使用：

1.初始化数据state，配置actions、mutations，操作文件store.js

//引入Vue核心库
import vue from 'vue'
//引入VUex
import vuex from 'vuex'
//引入Vuex
Vue.use(Vuex)const action = {//响应式添加动作jia(context,value) {context.commit('JIA',value)},
}const mutations = {//执行加jia(state,value) {state.sum += value}
}const state = {sum:0
}//创建并暴露store
export default Vuex.store({actions,mutations,state,
})

• 组件中读取vuex中的数据：$store.state.sum
• 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

5.3、getters配置项

总结：

getters配置项的使用：

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

2. 在store.js中追加getters配置

   …
   const getters = {
   bigSum(state){
   return state.sum * 10
   }
   }

   //创建并暴露store
   export default new Vuex.Store({
   …
   getters
   })

3.组件中读取数据：$store.getters.bigSum

5.4、四种方法

1. mapState方法：用于帮助我们映射state中的数据

   computed: {//借助mapState生成计算属性：sum、school、subject（对象写法）...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成计算属性：sum、school、subject（数组写法）...mapState(['sum','school','subject']),
   },
   

2. mapGetters方法：用于帮助我们映射getters中的数据

   computed: {//借助mapGetters生成计算属性：bigSum（对象写法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性：bigSum（数组写法）...mapGetters(['bigSum'])
   },
   

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

   methods:{//靠mapActions生成：incrementOdd、incrementWait（对象形式）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成：incrementOdd、incrementWait（数组形式）...mapActions(['jiaOdd','jiaWait'])
   }
   

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   methods:{//靠mapActions生成：increment、decrement（对象形式）...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成：JIA、JIAN（对象形式）...mapMutations(['JIA','JIAN']),
   }
   

5.5、模块化 + 命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确

2. 修改store.js：

   const countAbout = {namespace: true,  //开启命名空间state: {x:1},mutation: {...},actions: {...},getters: {bigSum(state) {return state.sum * 10}}
   }const personAbout = {namespace: true,state: {...},mutations: {...},actions: {...}
   }const store = new Vuex.store({modules: {countAbout,personAboutx
   }
   })
   

3. 开启命名空间，组件中读取state数据

   //1.直接读取
   this.$store.personAbout.list
   //2.借助mapState读取
   ...mapState('countAbout',['sum','school','subject']),
   

4. 开启命名空间后，组件中读取getters数据:

   //1.自己直接读取
   this.$store.getter['personAbout/firstPersonName']
   //2.借助mapgetters读取
   ...mapGetters('sountAbount',['bigSum'])
   

5. 开启命名空间后，组件中调用dispatch：

   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   

6. 开启命名空间后，组件中调用commit：

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
   

6.Vue Router路由管理器

6.1、相关理解

• vue 的一个插件库，专门用来实现SPA 应用
  • 整个页面只有一个完整的页面
  • 点击页面的导航链接不会刷新页面，只会局部更新

6.2、基本路由

1. 安装vue-router,命令:npm i vue-router

2. 应用插件Vue.use(VueRouter)

3. 编写router配置项：

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'//创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
   })//暴露router
   export default router
   

4. 实现切换（active-class可配置高亮度样式）

   <router-link active-class="active" to="/about">About</router-link>
   

5. 指定展示位：

src/router/index.js:

//该文件专门用于创建整个路由
import VueRouter from "vue-router"
//引入组件
import Home from ''
import About from ''//创建并且暴露一个路由
export default new VueRouter({routes: [{path: '/about'component: About},{path: '/home'component: Home}]
})

src/main.js:

import Vue from 'vue'
import App from  './App.vue'
import VueRouter from 'vue-router'
import router from './router'Vue.use(VueRouter)new Vue({el:'#root',render: h => h(App)router
})

src/App.vue:

<template><div><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我们使用a标签实现页面跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about"> 							About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>export default {name:'App',}
</script>

src/components/Home.vue:

<template><h2>我是Home组件的内容</h2>
</template><script>export default {name:'Home'}
</script>

src/components/About.vue:

<template><h2>我是About组件的内容</h2>
</template><script>export default {name:'About'}
</script>

6.3、注意事项

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

6.4、多级路由

• 配置路由规则，使用children配置项：

  routes: [{path: '/about',component: About,},{path: '/home'component: Home,children: [{path: 'news',  //注意此处一定不要写 ： /newscomponent: News},{path: 'message',component: Message}]}
  ]
  

• 跳转（要写完整的路径）：News

6.5、query()

1. 传递参数

   <!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link><!-- 跳转并携带query参数，to的对象写法 -->
   <router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}
   }">跳转</router-link>
   

2. 接受参数

   $route.query.id
   $route.query.title

src/router.index.js:

//引入路由
import VueRouter from "vue-router"
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建一个并且暴露一个路由器
export default VueRouter({routes: [{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{path:'detail',component:Detail}]}
]
})

src/pages/Detail.vue:

<template><ul><li>消息编号：{{$route.query.id}}</li><li>消息标题：{{$route.query.title}}</li></ul>
</template><script>export default {name:'Detail'}
</script>

6.6、命名路由

作用：简化路由的跳转

使用：

1. 给路由命名：

   {path: '/demo',component: Test,children: [{path: 'text',component: Text,children: [{name: 'hello'  //命名path: 'welcome',component: Hello}]}
   ]
   }
   

2. 简化跳转：

   跳转

   跳转

   <router-link
   :to=“{
   name:‘hello’,
   query:{
   id:666,
   title:‘你好’
   }
   }”

   跳转

6.7、路由的params参数

1. 配置路由，声明接收params参数

   {path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数component:Detail}]}]
   }
   

2. 传递参数

   <!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link><!-- 跳转并携带params参数，to的对象写法 -->
   <router-link :to="{name:'xiangqing',params:{id:666,title:'你好'}}"
   >跳转</router-link>
   

3. 接收参数

   $route.params.id
   $route.params.title

6.8、props配置

• 作用：让路由组件方便收到参数

  {name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:$route.query.id,title:$route.query.title}}
  }
  

  6.9、路由跳转replace()

  1. 作用：控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push方式
  3. 开启replace模式：<router-link replace …>News