P4 前端基础知识

前端基础知识

var	let
声明的变量往往会越域	有严格的局部作用域
可以声明多次	只能声明一次
会变量提升（未定义时，显示undefined）	不会存在变量提升（报错）

数组解构： let [a,b,c]=arr

对象解构： const {name,age}=person 或 name:abc 属性：命名

字符串插入变量和表达式，变量名写在 ${} 中， ${} 中可以放入js表达式，如 ${age+10}

箭头函数：里面可以传过来对象，直接结构出name；this不能使用，而用 对象.属性

拷贝对象（深拷贝）：let someone={...p}

合并对象： let person2={...age,...name}

map( )：接收一个函数，将原数组中的所有元素经过这个函数处理后放入新数组返回

arr=arr.map(item->return item*2)

reduce()：为数组中的每一个元素依次执行回调函数。不包括数组中被删除或者从未被复制的元素。

arr.reduce(callback, [initialValue])

previousValue：上一次调用返回的值，或者是提供的初始值 initialValue

currentValue：数组中当前被处理的元素

index：当前元素在数组中的索引

array：调用reduce的数组

[2, 40, -10, 6]求和，其中100可以作为初始值

arr.reduce((a,b)=>{
	log("上一次结果"+a);
	log("当前处理"+b);
	return a+b;
	},100)

promise异步编排

$.ajax{
	url:"mock/user.json",
	success(data){},
	error(error){}
}

promise可以封装异步操作，resolve表示操作成功，reject表示操作失败，obj 表示上一步返回的数据

let p=new Promise((resolve,reject)=>{   
		.then((obj=>{}))
		.catch(err=>{})
})

综合

get("mock/user.json")
	.then(data=>{
		log("用户查询成功：",data)
		return get('mock/user_course_${data.id}.json') 这里用飘号，表示动态
	})
	.then(data=>{
		log("课程查询成功："data)
		return get('mock/user_score_${data.id}.json')
	})
	.then(data=>{log("课程成绩查询成功")})
	.catch(err=>{log(err)};)

模块化：

export命令规定模块的对外接口，import导入其他模块提供的功能

export不仅可以导出对象，一切js变量都可以导出。比如基本类型变量，函数，数组，对象 export {util,name}

npm init -y 初始化项目，引入 package.json

npm install vue@2 有了 node_modules

插值表达式 {{}} 方法/变量都ok，只要有返回值

双向绑定 v-model 比如，表单项是否选中

vue2 snippets 语法提示事件，浏览器增加扩展 vue.js

单向绑定 v-bind:href="link"即 :href="link"

短杠非法，font-size不行，要用 fontSize驼峰 或者 ‘font-size’

事件修饰符 @click.stop 父级冒泡，只点一次

按键修饰符

v-on:keyup.B="submit" 即 @keyup.B
组合按键 @keyup.atl.6
<li v-for="(user,index) in users" :key="user.name">
  {{user.name}}===>{{user.gender}}===>{{user.age}}

遍历的时候都加上 :key来区分不同数据，提高vue渲染效率

要求当得到结果时，所在元素才会被显示，用v-if或者v-show。结果不符合时，前者标签不见，后者样式为none，但是标签存在。

computed动态计算

侦听，值改变自动改变

过滤器 filters:{函数} {{user.gender | genderFilter}} | 表示管道

模块化开发

npm install webpack -g
npm install -g @vue/cli-init 全局安装脚手架
vue init webpack appname 用脚手架使用webpack模板来初始化一个项目

package.json中有script build打包项目 run dev运行项目

main.js中

new Vue({			创建实例
		el:"#app",  挂载index.html元素
		router:router,
		component:{App},   使用组件
		template:'<App/>'
})

@/compents 其中@表示src的根目录

vscode生成vue模板 :首选项-用户代码片段-vue回车粘贴

alt +shift + f 代码整理

侧边栏进行导航时，el-menu-item 进入其他组件 router=true <router-view/> index="/table"

在前端static-config-index.js中baseurl，改为先给网关发请求 localhost:/88

为了静态资源，验证码等可以正确出现，再从fast中引入common，进行服务中心注册

发现报错，导入gson依赖

网关配置中，进行路径重写

id:admin_route  注意：后面加一个空格
uri:lb//:renren-fast  后面跟服务名
predicates:			断言
	-Path=/api/**	只要以api开头，符合要求
filters:
	-RewritePath=/api/<?<segment>.x>,/renren-fast/$\{segment}

网关统一配置跨域

协议，端口，域名ip每一个都要一样，否则跨域

OPTIONS预检请求

在网关项目新建config GulimallConfiguration文件，导入的包是reactive下的

@Configuration
@Bean 加入到容器中
public CorsWebFilter corsWebFilter(){
	UrlBasedCorsConfigurationSource source = ;
	CorsConfiguration corsConfiguration =;
	corsConfiguration.addAllowedHeader("*")  请求头
	corsConfiguration.addAllowedOrigin("*")	 请求来源
	corsConfiguration.addAllowedMethod("*")  请求方法
	corsConfiguration.addAllowCredentials(true) 是否允许携带cookie
	source.registerCorsConfiguration("/**, corsConfiguration")
	return new CorsWebFilter(source)
}

发现报错，把fast项目中的config配置跨域信息注释掉

集中式版本控制比分布式少了本地仓库选项

JDK常用版本 1.8；17；20 mysql常用版本 5.7；8.0