前端vue框架后台管理工作总结01

前端vue框架后台管理工作总结01

这是大前天晚上加班回来总结的，昨天又周六，这周六就开始五一小长假，（霸占我们的双休，还是长假？？），给大家分享一下，以后每天晚上有时间都会给大家分享日常工作内容和总结，这也是为应届生或者培训出来的小伙伴做好垫脚石

# 2021-04-23
1.组件的使用
	1.1 每个子组件中，需要些name属性
	1.2 在父组件中使用子组件，需要先引入在注册，最后挂载到页面中
	1.3 在父组件中，可以给子组件传参数，子组件通过props对象验证的方式接收
2. 在获取到后端数据准备使用的时候
	必须要清楚要使用的数据的类型，比如传来的字符串，而你需要使用的是数字类型，需要转化
	要明白后端传过来的每一条数据的作用
	将你需要的数据固定放入一个容器中(可以数对象、数组)，可能需要在页面中的组件中使用，使用的时候，注意需要使用v-bind属性
3. 模块化
	3.1 页面的模块化
		有个主页面文件和多个局部页面的文件
		局部页面中的内容可以在主页面中多次调用，比如组件的多次调用
		数据需要放在主页面的文件中操作
	3.2 数据的模块化
		数据的请求和保存，都是在父组件中操作
		父组件调用子组件，子组件需要的数据，通过v-bind传递给子组件，子组件通过props对象验证的方式接收
	3.3 交互的模块化
		子组件的交互内容写在子组件中，需要的数据通过父组件传递
4. 封装的axios请求

5. debugger的使用
	
6. vscode的全局搜索

对axios的封装，在真实项目中，通常都是要放在vue的原型中

const httpServer = {
	get(url, param={}) {
		return new Promise((resolve,reject)=>{
			axios.get(url,{params: param})
				.then(res=>{
					resolve(res)
				})
				.catch(res=>{
					reject(res)
				}
			)
		})
	}
	post(url,param={},config = {emulateJSON: true},queryString) {
		return new Promise ((resolve,reject)=>{
			if(config.emulateJSON){
				axios.post(
					url,
					Qs.stringify(param,{arrayFormat: 'brackets'}),
					{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
				).then(res=>{
					resolve(res)
				}).catch(res=>{
					reject(res)
				})
			} else {
				...
			}
		})
	}
}

上面的是昨天的，顺便在分享一下刚刚总结的内容

# 2021-04-25
1.父组件请求数据 - v-bind传递给子组件 - props子组件接收数据 - 子组件调用数据 - 返回参数 - $emit传给父组件 - 父组件自定义事件接收参数 - 通过参数请求其他数据 - v-bind传递给子组件
2.后端接口请求的数据的类型需要看清楚
3.数据获取到但还没赋值，页面就已经渲染完成，此时页面是没有数据的
	3.1 通过v-if,等到数据存在了，在展示内容
	3.2 通过watch监听数据
		watch: {
			if (!data) return false
			this.handle() # 调用方法
		}
4.debugger的使用很关键，可以迅速查看到方法中所有变量的值是否正以及是否符合数据类型所需
5.还是模块化开发，组件和组件之间共用一个数据，要将数据放在父组件中
6.要弄清楚组件中的和后端传来的属性作用，以及属性值的数据类型，只有清楚了才知道如何去运用
7.构建页面时，不确定的样式和不确定的值，一定要和测试问清楚
8.和后端联调，必须要相互明白这么做的作用和实现方法，确认参数和字段的类型，确认自己传参类型是否正确
9.当数据没在页面中渲染，首先要查看NetWork，有响应就要去检查是否调用错误，拼写错误，调用的方法和方式错误，就是那些使用数据的方式错误的因素。如果没有响应，先要查看参数和参数类型是否正确，然后要看请求的接口地址是否有问题，然后检查对请求头的要求是不是json格式的，还是application/x-www-urlencoded
10.在main.js中将封装的axios请求添加到全局的vue的原型中
	import axios from 'axios'
	vue.prototype.$axios = axios
	使用的时候，就可以：
		getData(){
			this.$axios()
		}

这个也不是常用到的，但多多少少需要记住的基础知识