前端ES6基本语法，以及前端项目模板vue-admin-template和后端进行对接(跨域问题的解决)
let声明变量
//代码块
{var a = 1let b = 2 //let定义的声明有作用范围，只能在代码块中使用
}//F12输出
console.log(a)
console.log(b) //报错 b is not definedvar m = 1
var m = 2 //var可以声明多次
let n = 3 //报错，因为let只能声明一次通过vscode工具安装的live server插件进行运行
const声明常量
const PI = "3.1415926"
PI = 3 //报错 常量声明之后不允许改变const MY_AGE //报错，因为常量声明必需初始化解构复制
- 对赋值运算符的扩展
- 针对数组或者对象继续模式匹配，然后对其中的变量进行赋值
//对象解构
let user = {name:'Helen',age:18}//传统方式取值
let name1 = user.name
let age1 = user.age
console.log(name1,age1)//ES6方式取值
let{name,age} = user //结构的变量，必须是user的属性
cosole.log(name,age)
模板字符串
- 用反引号 ` 加强版字符串，可以在字符串中加入变量和表达式
let name = "jordan"
let age = 27//定义方法
function f1(){return "have fun"
}
let info = `My Name is ${name},I am ${age + 1} years old next year,${f1()}`console.log(info)
定义方法简写
//传统定义对象，属性和方法
const person1 = {sayHi:function(){console.log("Hi")}
}
person1.sayHi();//ES6
const person2 = {sayHi(){console.log("Hi");}
}
person2.sayHi()
对象拓展运算符
- …用于取出参数对象所有可遍历属性，然后拷贝到当前对象
let person1 = {name:"jordan",age:23}
let someone = {...person1}
console.log(someone);
箭头函数
- 函数书写方式：参数 => 函数体
//传统
var f1 = function(a){return a
}
console.log(f1(1))//ES6简化
var f11 = (a) => a
模块化开发
ES5模块化
①、创建目录，然后对目录进行初始化
②、初始化之后，常见如下：
01.js
//定义成员
const sum = function(a,b){return parseInt(a) + parseInt(b)
}const subtract = function(a,b){return parseInt(a) - parseInt(b)
}//默认是私有的，可以通过设置决定哪些方法可以被js调用
module.exports = {sum,subtract
}02.js
//引入01.js文件
const = require('./01.js')const v1 = m.sum(1,2)
const v2 = m.subtract(3,1)console.log(v1)
console.log(v2)
ES6模块化
- 无法在Node.js中执行，需要用Babel编辑成ES5后在执行
001.js
export function add(){console.log("add...")
}
export function update(){console.log("update....")
}
//简化版
export default{list(){console.log("list...")},save(){console.log("save...")}
}
002.js
//引入
import {add,update} from "./001.js"add()
update()
//简化版
import user from "./1.js"
user.list()
user.save()
-
终端输入命令，安装Babel转码器
-
配置.babelrc
-
安装转码器
-
转码
-
运行程序
搭建项目的前端环境
①、下载
②、将压缩包解压到工作目录，安装依赖
将前端项目和后端项目进行对接
跨域问题
第一种方案：
在每个Controller添加注解@CrossOrigin
