Vue——组件的网络请求、组件的Scss、单向数据流、组件的注意点

爱喝牛奶~

已于 2022-09-07 15:14:49 修改

阅读量546

点赞数 1

文章标签： webpack 前端 vue 网络 scss

于 2022-09-07 07:55:50 首次发布

本文链接：https://blog.csdn.net/qq_52301431/article/details/126717960

版权

一、组件的网络请求

配置的过程:

1.在组件的原型链上配置axios工具,并配置公共网址

main.js文件中:

import axios from "axios"

Vue.prototype.$axios=axios

Vue.prototype.$axios.defaults.baseURL="http://ip:8080/api"

2.配置8080服务的代理

vue.config.js文件:

3.组件中使用:

this.$axios("/ajax1")

整个运行的流程: $axios是原型上的那个工具就会基于它的baseURL请求"/ajax1" 因此就会请求 baseURL+"/ajax1"

然后baseURL又是8080服务器中代理配置过的它发现网址中包含了代理的关键字网址就会去代理请求 target网址

1）网络代理配置

Vue的脚手架webpack搭建的服务器监听的：8080

egg提供的服务器主要提供数据监听的端口：7001

用户运行：http://192.168.1.11:8080

==>加载了8080服务器提供的打包后的页面

AJAX请求：http://192.168.1.11:8001/AJAX1

APP.vue

<template>
	<div>
		<Nav1></Nav1>
		<!-- mounted执行完之后，才运行这里的标签，就会取到undefine.title,就会报错，解决方法是data返回一个空的对象 -->
		<div>
			{{obj.title}}----{{obj.info}}
		</div>
	</div>
</template>
<script>
	import Nav1 from "@/componnets/Nav1.vue"
	// import axios from "axios"//去node_modules中找到的axios文件夹中
	export default {
		data() {
			return {
				obj:{}
			}
		},
		components:{
			Nav1
		},
		async mounted() {
			// let res=await axios("http://192.168.101.109:7001/ajax1")
			let res=await axios("http://192.168.101.109:8080/xiangmu/ajax1")
			// let res=await axios("/xiangmu/ajax1")
			//==>实际请求的是:http://192.168.101.109:8080/xiangmu/ajax1
			//==>希望8080服务器帮我们代理 请求:http://192.168.101.109:7001/ajax1
			console.log(res.data)
			this.obj=res.data
		}
	}
</script>
<style>
</style>

Nav1.vue

<template>
	<div class="nav1">
		<button>按钮</button>
		<button>按钮</button>
	</div>
</template>
<script>
	export default {
		mounted() {
		}
	}
</script>
<style scoped="scoped">
	.nav1{
		background-color: aliceblue;
		min-height: 40px;
	}
	.nav1 button{
		min-height: 40px;
	}
</style>

1、设置跨域在config.default.js里面

config.cors={origin:"*"}

2、代理服务器：

vue.config.js

const {
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	lintOnSave: false, //关闭eslint的严格模式检测,
	devServer: {
		port: 8080, //默认vue脚手架配置就8080
		//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
		// proxy: {
		// 	'/api': 'http://localhost:7001',
		// },
		proxy: {
			'/xiangmu': {
				target: 'http://192.168.101.109:7001',
				secure: true, //如果代理的target是https接口,需要配置它 
				pathRewrite: {
					'^/xiangmu': '/'   //就是将xiangmu替换为 /
				}, 
				//请求时重写pathname: 
				//项目组件中请求的是http://192.168.101.109:8080/xiangmu/ajax1
				//8080服务器就会帮我们代理请求 http://192.168.101.109:7001/ajax1
				
				//项目组件中请求的是http://192.168.101.109:8080/test/ajax1 那么proxy就检测不到 就不会做代理
			},
			
		},
	}
})

2）网络公共路径

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from "axios"
//组件的原型属性
Vue.prototype.age=23 
//以后上线了就只用改这一行代码
axios.defaults.baseURL="http://192.168.101.109:8080/xiangmu"
//配置公共url  如果这个axios去请求 "ajax1"  它实际的网址是http://192.168.101.109:8080/xiangmu/ajax1
Vue.prototype.$axios=axios
//把它放在了axios，就不用import引入了  就可以直接在APP.vue里面使用this.$axios
var vm=new Vue({
  render: h => h(App),
}).$mount('#app')
console.log(vm)

APP..vue

<template>
	<div>
		<Nav1></Nav1>
		<div>
		</div>
	</div>
</template>
<script>
	import Nav1 from "@/componnets/Nav1.vue"
	export default {
		data() {
			return {
				obj:{}
			}
		},
		components:{
			Nav1
		},
	   async mounted() {
		// console.log(this.age)
		 // let res=await this.$axios("http://192.168.101.109:8080/xiangmu/ajax1")
		 let res=await this.$axios("ajax1")//==>基于baseurl:"http://192.168.101.109:8080/xiangmu/ajax1"
		 console.log(res,6666)
		}
	}
</script>
<style>
</style>

vue.config.js ==>配置8080服务的代理

const {
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	lintOnSave: false, //关闭eslint的严格模式检测,
	devServer: {
		port: 8080, //默认vue脚手架配置就8080
		//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
		// proxy: {
		// 	'/api': 'http://localhost:7001',
		// },
		proxy: {
			'/xiangmu': {
				target: 'http://192.168.101.109:7001',
				secure: true, //如果代理的target是https接口,需要配置它 
				pathRewrite: {
					'^/xiangmu': '/'
				}, 
				//请求时重写pathname: 
				//项目组件中请求的是http://192.168.101.109:8080/xiangmu/ajax1
				//8080服务器就会帮我们代理请求 http://192.168.101.109:7001/ajax1
				
				//项目组件中请求的是http://192.168.101.109:8080/test/ajax1 那么proxy就检测不到 就不会做代理
			},
			'/sina': {
				target: 'http://某个公司的网址',
				secure: true, //如果代理的target是https接口,需要配置它 
				pathRewrite: {
					'^/sina': '/aaa'
				}, 
			},
		},
	}
})

Nav1.vue

<template>
	<div class="nav1">
		<button>按钮</button>
	</div>
</template>
<script>
	export default {
		mounted() {
			 console.log(this.age,111111111,this)
		}
	}
</script>
<style scoped="scoped">
	.nav1{
		background-color: aliceblue;
		min-height: 40px;
	}
	.nav1 button{
		min-height: 40px;
	}
</style>

二、组件的Scss

方法一：自己创建一个scss文件，然后通过插件编译为css文件，然后在main.js中引入

==> 此方法一般不使用，因为这样引进来的scss是全局的

方法二：在style里面写，并且有作用域

配置：小黑窗==>vue create init （选择帮我们配置sass的加载器）

选更多选项，选择css Pre-processors==>2.0==>选sass==>lint on save ，然后就一直敲回车

APP.vue : ==><style lang="scss"> </style>

<template>
  <div id="app">
    <div class="box">
      <h1>6666</h1>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
};
</script>
<style lang="scss">
.box {
  width: 200px;
  height: 200px;
  background-color: hotpink;
  h1 {
    color: red;
  }
  &:hover h1 {
    color: bisque;
  }
}
</style>

三、单向数据流

父组件改了，可以改子组件，如果子组件改了，父组件是不会改的，因为数据是往下流的

==> 单向数据流：数据自向上，由底层流向顶层，但是不能反向

APP.vue

<template>
	<div id="app">
		<!-- 父组件 -->
		<p>app-----{{msg}}</p>
		<button @click="change2">app组件修改msg</button>
		<!-- 子组件 -->
		<Box v-bind:title="msg"></Box>
	</div>
</template>
<script>
	import Box from "./Box.vue"
	export default {
		data() {
			return {
				msg: "app的数据"
			}
		},
		components: {
			Box
		},
		methods:{
			change2(){
				this.msg="app修改了this的msg数据"
			}
		}
	}
</script>
<style scoped="scoped" lang="scss">
	.box {
		width: 200px;
		height: 200px;
		background-color: hotpink;
		h1 {
			color: red;
		}

		&:hover h1 {
			color: bisque;
		}
	}
	#app{
		background-color: honeydew;
		height: 400px;
	}
</style>

Box.vue

<template>
	<div class="box">
		<p>{{arr[0]}}</p>
		<button @click="change1">change</button>
	</div>
</template>
<script>
	export default {
		data() {
			console.log(66666661)
			return {arr:[100,200,300]}
		},
		// data:{arr:[100,200,300]},
		methods:{
			change1(){
				this.title="把this的title改了"
				this.$set(this.arr,0,80)
			}
		},
		filters:{},
		watch:{},
		directives:{},
		computed:{},
		mounted() {
			
		}
	}
</script>
<style scoped="scoped">
	.box{
		background-color: darkcyan;
		margin: 10px;
		min-height: 200px;
	}
</style>

四、组件的注意点

1、组件的认识：

组件时可以复用的，把组件当作一种标签使用，用一次，它内部的代码聚会完整的执行一次，就像时一个函数一样，使用组件就相当于在调用函数，实参就相当于组件的属性传值

开发的时候，数据尽量不要放在data中，数据驱动页面，要这个数据未来有可能发生变化，才放在data中。

2、项目的资源打包问题

项目中的本地资源打包时，webpack打包时遇到了import或者时标签内部直接写路径时，都会启用file-loader等去加载资源，如果把图片等本地资源的路径写在data中，然后页面使用，因为webpack不会读取data所以不会打包资源

把图片路径、网址写在data里面，webpack不会打包

项目中的资源一般不用本地路径，应该托管起来

引入文件的资源：import

3、波浪线

1、v-for下面有红色的波浪线

v-for不写key会有警告，即红色波浪线，可以不管它，不会影响项目

==> 绑定key，如果数据中没有id，就绑for循环的下标index==>：key="index"就可以了

2、div等标签下面有波浪线，小黑窗报错了

==>将webpack中配置的vue.config.js里面的eslint严格模式关了==>lintOnSave:false

3、在编辑器内部还有波浪线

==>就把vscode的插件禁用，安装其它的插件（记得重启编辑器，退出）

爱喝牛奶~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue——组件的网络请求、组件的Scss、单向数据流、组件的注意点

1、v-for下面有红色的波浪线v-for不写key会有警告，即红色波浪线，可以不管它，不会影响项目==> 绑定key，如果数据中没有id，就绑for循环的下标index==>：key="index"就可以了2、div等标签下面有波浪线，小黑窗报错了==>将webpack中配置的vue.config.js里面的eslint严格模式关了==>lintOnSave:false3、在编辑器内部还有波浪线==>就把vscode的插件禁用，安装其它的插件（记得重启编辑器，退出）
复制链接

扫一扫