前端ES6基本语法，以及前端项目模板vue-admin-template和后端进行对接(跨域问题的解决)

let声明变量

//代码块
{
	var a = 1
	let b = 2 //let定义的声明有作用范围，只能在代码块中使用
}

//F12输出
console.log(a)
console.log(b) //报错  b is not defined


var 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