尚硅谷2020微服务分布式电商项目《谷粒商城》(Alibaba+Vue)开发教程学习笔记（二）
尚硅谷2020微服务分布式电商项目《谷粒商城》(Alibaba+Vue)开发教程学习笔记（一）
https://blog.csdn.net/ok_wolf/article/details/105400748
一、前端技术栈类比
JavaScript es6,7,8 —— Java jdk9,10,11...
框架 JQuery、Vue、React —— 框架 Spring、SpringMVC
工具 webstorm、vscode —— 工具 idea、eclipse
项目构建 webpack、gulp —— 项目构建 maven、gradle
依赖管理 npm —— 依赖管理 maven
二、ES6
1、ES6简介
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）.是JavaScript语言的下一代标准，每年一个版本，企业级开发语言。
ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现。
2、ES6新特性学习
（1）var声明的变量往往会越狱，let声明的变量有严格局部作用域
（2）var可以声明多次，let只能声明一次
//var可以声明多次，let只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m) // 2
console.log(n) //Identifier 'n' has already been declared
（3）var会变量提升，let不存在变量提升
console.log(x); //undefined
var x = 10;
console.log(y) //ReferenceError: Cannot access 'y' before initialization
let y = 20;
（4）const声明常量（只读常量）
//const声明常量（只读常量）
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.
（5）数据结构
//数据结构
let arr = [1,2,3];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c] = arr;
console.log(a, b, c);
（6）对象结构
//对象结构
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
// const name = person.name;
// const age = person.age;
// const language = person.language;
const{name:abc, age, language} = person;
console.log(abc, age, language)
（7）字符串扩展
//字符串扩展
let str = "hello.vue";
console.log(str.startsWith("hello")); //true
console.log(str.endsWith(".vue")); //true
console.log(str.includes("e")); //true
console.log(str.includes("hello")); //true
（8）字符串模板
let ss = `
hello world
/div>`
console.log(ss);
//在字符串插入变量和表达式，变量名写在${}中，${}中科院放入JavaScript表达式
function func() {
return "这一个函数"
}
let name = "jack";
let age = 32;
let info = `我是${name}, 今年${age+10}了， 我想说: ${func()}`;
console.log(info);
（9）函数参数默认值
//在ES6之前，无法给一个函数参数设置默认值，只能采用变通的方法
function add(a, b) {
//判断是否为空，为空就给默认值
b = b || 1;
return a + b;
}
//传递一个参数
console.log(add(10));
//现在可以这么写，直接给参数写上默认值，没给就使用默认值
function add2(a, b = 1) {
return a + b;
}
console.log(add2(10));
//不定参数
function fun(...values) {
console.log(values.length);
}
fun(1,2) //2
fun(1, 2, 3, 4) //4
（10）箭头函数
//箭头函数
//以前声明一个方法
var print = function (obj) {
console.log(obj);
}
var print2 = obj => console.log(obj);
print2("hello");
var sum = function (a, b) {
c = a + b;
return a + c;
}
var sum2 = (a, b) => a + b;
console.log(sum2(11, 22));
var sum3 = (a, b) => {
c = a + b;
return a + c;
}
console.log(sum3(10, 20));
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
function hello(person) {
console.log("hello", + person.name);
}
var hello2 = (param) => console.log("hello, " + param.name);
hello2(person); //hello,jack
var hello3 = ({name}) => console.log("hello, " + name);
hello3(person); //hello,jack
（11）新增的API
//1.新增的API
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person)); // ["name", "age", "language"]
console.log(Object.values(person)); // ["jack", 21, Array(3)]
console.log(Object.entries(person)); //[Array(2), Array(2), Array(2)]
const target = {a: 1};
const source1 = {b: 2};
const source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target); //{a: 1, b: 2, c: 3}
（12）声明对象简写
//2.声明对象简写
const age = 23;
const name = "张三";
//传统
const person1 = {age: age, name: name};
console.log(person1); //{age: 23, name: "张三"}
//ES6：属性名和属性值变量名一样，可以省略
const person2 = {age, name};
console.log(person2); //{age: 23, name: "张三"}
(13)对象的函数属性简写
//3.对象的函数属性简写
let person3 = {
name: "jack",
//以前
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数版，这里拿不到this
eat1: food => console.log(this.name + "在吃" + food),
//箭头函数版，正确版
eat2: food => console.log(person3.name + "在吃" + food),
//简写版
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person3.eat("apple"); //jack在吃appple
person3.eat1("apple");//在吃appple
person3.eat2("apple");//jack在吃appple
person3.eat3("apple");//jack在吃appple
（14）对象扩展运算符
//4.对象扩展运算符
//拷贝对象（深拷贝）
let person4 = {name : "Amy", age: 15}
let somone = {...person4}
console.log(somone) //{name: "Amy", age: 15}
//合并对象
let age2 = {age2: 15}
let name2 = {name2: "Amy"}
let person5 = {name: "zhangsan"}
person5 = {...age2, ...name2}
console.log(person5) //{age2: 15, name2: "Amy"} //会覆盖之前的值
（15）map和reduce方法
//数组中新增了map和reduce方法
//map(): 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = ["1", "20", "-5", "3"];
// arr = arr.map((item) => {
// return item * 2;
// })
arr = arr.map(item => item*2)
console.log(arr); //[2, 40, -10, 6]
//reduce()为数组中的每一个元素一次执行回调函数，不包括数组中被删除或从未被赋值的元素
//[2, 40, -10, 6]
//arr.reduce(callback, [initialValue])
/*
1.initialValue(上一次调用回调返回的值，或者是提供的初始值（initialValue))
2.currentValue(数组中当前被处理的元素)
3.index(当前元素在数组的索引)
4.array(调用reduce的数组)
*/
let result = arr.reduce((a,b) => {
console.log("上一次处理后："+a);
console.log("当前正在处理："+b);
return a + b;
},100)
console.log(result);
/*上一次处理后：100
map和reduce.html:33 当前正在处理：2
map和reduce.html:32 上一次处理后：102
map和reduce.html:33 当前正在处理：40
map和reduce.html:32 上一次处理后：142
map和reduce.html:33 当前正在处理：-10
map和reduce.html:32 上一次处理后：132
map和reduce.html:33 当前正在处理：6
map和reduce.html:36 138
*/
（16）promise异步操作
新建mock文件夹，在下面创建三个文件，内容如下：
user.json
{
"id": 1,
"name": "zhangsan",
"password": "123456"
}
user_corse_1.json
{
"id": 10,
"name": "chinease"
}
corse_score_10.json
{
"id": 100,
"score": 90
}
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
get("mock/user.json")
.then((data) => {
console.log("用户查询成功：", data)
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("课程查询成功：", data)
return get(`mock/corse_score_${data.id}.json`);
})
.then((data) => {
console.log("课程成绩查询成功：", data)
})
.catch((err) => {
console.log("出现异常", err)
});
//结果：
//用户查询成功： {id: 1, name: "zhangsan", password: "123456"}
//课程查询成功： {id: 10, name: "chinease"}
//课程成绩查询成功： {id: 100, score: 90}
（17）模块化
新建js文件夹，创建三个文件内容如下：
hello.js
// export const util = {
// sum(a, b) {
// return a + b;
// }
// }
export default {
sum(a, b) {
return a + b;
}
}
//export {util}
//export不仅可以导出对象，一切js变量都可以导出，比如：基本类型变量，函数，数组，对象。
user.js
var name = "jack"
var age = 23
function add(a, b) {
return a + b;
}
export {name, age, add}
main.js
import util from "./hello.js"
import {name, add} from "./user.js"
util.sum(1, 2);
console.log(name)
add(1, 3);
3、Vue
（1）声明式渲染，插值表达式等
//1.声明式渲染
let vm = new Vue({
el: "#app", //绑定元素
data: { //封装数据
name: "张三",
num: 1
},
methods: { //封装方法
cancle() {
this.num--
}
}
});
//2.双向绑定,模型变化，试图变化，反之亦然
//3.事件处理
//v-xx: 指令
//1.创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
//2.指令来简化对data的一些操作
//3.声明方法来做更复杂的操作,methods里面可以封装方法
（2）插值表达式
格式：{{表达式}}
说明：
- 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
- 表达式必须有返回结果，例如1+1，没有结果的表达式不允许使用，如：let a = 1+1;
- 可以直接获取Vue实例丁的数据或函数
插值闪烁：使用{{}}在网速较慢时会出现问题，在数据为加载完成时，页面会显示出原始的‘{{}}’，加载完毕后才显示正确数据，我们称为插值闪烁。
Document
{{msg}} {{1+1}} {{hello()}}
（3）v-bind
Document
gogogo
你好
（4）v-model
Document
精通的语言：
java
PHP
Python
选中了{{language.join(",")}}
（5）v-on
Document
（6）v-for
Document
-
当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==> {{user.age}}
对象信息：
{{k}} == {{v}} == {{i}};
- {{num}}
（7）v-if和v-show
Document
if=看到我...
show=看到我
（8）v-else和v-else-if
Document
{{random}}
看到我啦？！ >=0.75
看到我啦？！ >=0.5
看到我啦？！ >=0.2
看到我啦？！ >0.2
（9）计算属性和侦听器
Document
- 西游记：价格：{{xyjPrice}}，数量：
- 水浒传：价格：{{shzPrice}}，数量：
- 总价：{{totalPrice()}}
{{msg}}
（10）过滤器
Document
-
{{user.id}} ==> {{user.name}} ==> {{user.gender==1?"男":"女"}} ==>
{{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
（11）组件化
Document
（12）生命周期钩子函数
Document
{{num}}
{{name}}, 有{{num}}个人点赞
4、vue模块化开发
vue官方文档：https://cn.vuejs.org/v2/guide/
（1）全局安装webpack，vue脚手架
npm install webpack -g
npm install -g @vue/cli-init
注意，安装之后，vue.cmd这个可执行文件在C:\Users\abc\AppData\Roaming\npm\node_modules\@vue\cli-init\node_modules\.bin，而不是C:\Users\abc\AppData\Roaming\npm目录，这有点奇怪，百度搜索了一下，也没找到合适的解决方法。不管了，切换到那个.bin目录下面执行vue.cmd是可以用的，OK，那就先这样用吧。或者把这路径加到path路径下面也可以全局使用vue命令了。
（2）创建vue项目vue-demo
vue init webpack vue-demo
基本上选择默认的配置，一路回车就可以了，创建完成之后，发现vue-demo下面还有一个vue-demo文件夹，切换到这个目录，执行npm run dev就可以访问http://localhost:8080/#/ 这个demo页面了。
5、Element
官方文档：https://element.eleme.cn/#/zh-CN
vue模板
{
"vue模板": {
"prefix": "vue",
"body": [
"",
"",
"",
"",
"",
"",
"",
],
"description": "生成vue模板"
}
}
至此，前端基本知识学习已完成。