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

m0_748251722024-12-27 16:44

前言

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

Vue.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',  //注意此处一定不要写 ： /news
        	component: 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
相关推荐
刺客-Andy3 分钟前
React 第十九节 useLayoutEffect 用途使用技巧注意事项详解
前端·javascript·react.js·typescript·前端框架
谢道韫6668 分钟前
今日总结 2024-12-27
开发语言·前端·javascript
嘤嘤怪呆呆狗18 分钟前
【插件】vscode Todo Tree 简介和使用方法
前端·ide·vue.js·vscode·编辑器
ᥬ 小月亮31 分钟前
Js前端模块化规范及其产品
开发语言·前端·javascript
码小瑞1 小时前
某些iphone手机录音获取流stream延迟问题 以及 录音一次第二次不录音问题
前端·javascript·vue.js
weixin_1891 小时前
‌Vite和Webpack区别 及 优劣势
前端·webpack·vue·vite
半吊子伯爵1 小时前
开发过程优化·自定义鼠标右键菜单
前端·javascript·自定义鼠标右键菜单
xcLeigh1 小时前
HTML5实现好看的喜庆圣诞节网站源码
前端·html·html5
Tirzano1 小时前
vue3 ts 简单动态表单 和表格
前端·javascript·vue.js
杰~JIE1 小时前
前端工程化概述（初版）
前端·自动化·工程化·前端工程化·sop
热门推荐
01新手学习VR全景需要知道的几个问题02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间06HCIA-datacom数通题库和录播视频资料07docker安装启动问题解决排查08【一文读懂】NTN（非地面网络）技术介绍09支付宝短视频平台创作分成激励项目10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）