尚硅谷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聲明的變量有嚴格局部作用域
<script>
// var 聲明的變量往往會越獄
// let 聲明的變量有嚴格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a); //1
console.log(b); //ReferenceError: b is not defined
</script>
（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 = `<div>
<span>hello world<span>
/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
}
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
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實例丁的數據或函數
插值閃爍：使用{{}}在網速較慢時會出現問題，在數據爲加載完成時，頁面會顯示出原始的‘{{}}’，加載完畢後才顯示正確數據，我們稱爲插值閃爍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}} {{1+1}} {{hello()}} <br/>
<!-- <span v-html="msg"></span>
<br/>
<spn v-text="msg"></spn> -->
<!-- <a href="{{link}}">gogogo</a> -->
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "<h1>Hello</h1>",
link: "http://www.baidu.com"
},
methods: {
hello() {
return "world"
}
}
})
</script>
</body>
</html>
（3）v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 給html標籤的屬性綁定 -->
<div id="app">
<a v-bind:href="link">gogogo</a>
<!-- class, style (class名：加上？) -->
<span v-bind:class="{active:isActive,'text-danger':hasError}"
v-bind:style="{color: color1,fontSize:size}">你好</span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
link: "http://www.baidu.com",
isActive:true,
hasError:true,
color1:'red',
size:'90px'
}
});
</script>
</body>
</html>
（4）v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表單項，自定義組件-->
<div id="app">
精通的語言：
<input type="checkbox" v-model="language" value="Java">java<br/>
<input type="checkbox" v-model="language" value="PHP">PHP<br/>
<input type="checkbox" v-model="language" value="Python">Python<br/>
選中了{{language.join(",")}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
language: []
}
})
</script>
</body>
</html>
（5）v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 事件中直接寫js片段 -->
<button v-on:click="num++">點贊</button>
<!-- 事件指定一個回調函數，必須是Vue實例中定義的函數 -->
<button @click="cancle">取消</button>
<!-- -->
<h1>有{{num}}個贊</h1>
<!-- 事件修飾符 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
大div
<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
小div <br/>
<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>>
</div>
</div>
<!-- 按鍵修飾符 -->
<input type="text" v-model="num" v-on:keyup.up="num+2" @keyup.down="num-1" @click.ctrl="num=10"><br/>
提示：
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
num: 1
},
methods: {
cancle() {
this.num--
},
hello() {
alert("點擊了")
}
},
})
</script>
</body>
</html>
（6）v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users":key="user.name">
<!-- 1、顯示user信息： v-for="item in items" -->
當前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==> {{user.age}} <br/>
<!-- 2、獲取數組下標：v-for="(item, index) in items" -->
<!-- 3、遍歷對象：
v-for="value in object"
v-for="（value, key) in object"
v-for="(value, key, index) in object"
-->
對象信息：
<span v-for="(v,k,i) in user">{{k}} == {{v}} == {{i}}; </span></span>
<!-- 4、遍歷的時候都加上：key來區分不同數據，提供vue渲染效果 -->
</li>
</ul>
<ul>
<li v-for="(num, index) in nums" :key="index">{{num}}</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
users: [{name: '柳巖', gender: '女', age: 21},
{name: '張三', gender: '男', age: 18},
{name: '范冰冰', gender: '女', age: 24},
{name: '劉亦菲', gender: '女', age: 18},
{name: '古扎麗娜', gender: '女', age: 25}],
nums:[1,2,3,4]
}
})
</script>
</body>
</html>
（7）v-if和v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
v-if：顧名思義，當前得到結果爲true時，所在的元素纔會被渲染
v-show：當得到結構爲true時，所在的元素纔會被顯示
-->
<div id="app">
<button v-on:click="show = !show">點我呀</button>
<!-- 1、使用v-if顯示 -->
<h1 v-if="show">if=看到我...</h1>
<!-- 2、使用v-show顯示 -->
<h1 v-show="show">show=看到我</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</body>
</html>
（8）v-else和v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="random=Math.random()">點我呀</button>
<span>{{random}}</span>
<h1 v-if="random>=0.75">
看到我啦？！ >=0.75
</h1>
<h1 v-else-if="random>=0.5">
看到我啦？！ >=0.5
</h1>
<h1 v-else-if="random>=0.2">
看到我啦？！ >=0.2
</h1>
<h1 v-else>
看到我啦？！ >0.2
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: { random: 1}
})
</script>
</body>
</html>
（9）計算屬性和偵聽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 某些結構是基於之前數據實時計算出來的，我們可以利用計算屬性來完成 -->
<ul>
<li>西遊記：價格：{{xyjPrice}}，數量：<input type="number" v-model="xyjNum"> </li>
<li>水滸傳：價格：{{shzPrice}}，數量：<input type="number" v-model="shzNum"> </li>
<li>總價：{{totalPrice()}}</li>
{{msg}}
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
xyjPrice: 99.98,
shzPrice: 98.80,
xyjNum: 1,
shzNum: 1,
msg: ""
},
methods: {
totalPrice() {
return this.xyjNum*this.xyjPrice+this.shzNum*this.shzPrice;
}
},
watch: {
xyjNum: function(newValue, oldValue) {
if(newValue >= 3) {
this.msg = "庫存超出限制";
this.xyjNum = 3;
} else {
this.msg = "";
}
}
}
})
</script>
</body>
</html>
（10）過濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 過濾器常用來處理文本格式化的操作：過濾器可以用在兩個地方：雙花括號插值和v-bind表達式 -->
<div id="app">
<ul>
<li v-for="user in userList">
{{user.id}} ==> {{user.name}} ==> {{user.gender==1?"男":"女"}} ==>
{{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.filter("gFilter", function (val) {
if (val == 1) {
return "男~~";
} else {
return "女~~";
}
})
let vm = new Vue({
el: "#app",
data: {
userList: [
{ id: 1, name: "jacky", gender: 1 },
{ id: 2, name: "peter", gender: 0 }
]
},
filters: {
////filters定義局部過濾器，只可以在當前vue實例中使用
genderFilter(val) {
if (val == 1) {
return "男";
} else {
return "女";
}
}
}
})
</script>
</body>
</html>
（11）組件化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="count++">我被點擊了 {{count}} 次</button>
<counter></counter>
<button-counter></button-counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//1.全局聲明註冊一個組件
Vue.component("counter", {
template: `<button v-on:click="count++">我被點擊了 {{count}} 次</button>`,
data() {
return {
count: 1
}
}
});
//2、局部聲明一個組件
const buttonCounter = {
template: `<button v-on:click="count++">我被點擊了 {{count}} 次</button>`,
data() {
return {
count: 1
}
}
};
new Vue({
el: "#app",
data: {
count: 1
},
components: {
'button-counter':buttonCounter
}
})
</script>
</body>
</html>
（12）生命週期鉤子函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span id="num">{{num}}</span>
<button @click="num++">贊！</button>
<h2>{{name}}, 有{{num}}個人點贊</h2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "張三",
num: 100
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {
console.log("=============beforeCreate===============");
console.log("數據模型未加載："+ this.name, this.num);
console.log("方法未加載："+ this.show());
console.log("html模板未加載：" + document.getElementById("num"));
},
created: function() {
console.log("=============created===============");
console.log("數據模型已加載："+this.name, this.num);
console.log("方法已加載："+this.show());
console.log("html模板已加載："+document.getElementById("num"));
console.log("html模板未渲染："+document.getElementById("num").innerText);
},
beforeMount() {
console.log("=============beforeMount===============");
console.log("html模板未渲染："+document.getElementById("num").innerText);
},
mounted() {
console.log("=============mounted===============");
console.log("html模板已渲染："+document.getElementById("num").innerText);
},
beforeUpdate() {
console.log("=============beforeUpdate===============");
console.log("數據模型已更新："+this.num);
console.log("html模板未更新："+document.getElementById("num"));
},
updated() {
console.log("=============updated===============");
console.log("數據模型已更新："+this.num);
console.log("html模板已更新："+document.getElementById("num"));
}
})
</script>
</body>
</html>
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": [
"<template>",
"<div></div>",
"</template>",
"",
"<script>",
"export default {",
"//import 引入的組件需要注入到對象中才能使用",
"components:{},",
"props:{},",
"data(){",
"//這裏存數據",
"return{};",
"},",
"//計算屬性",
"computed: {",
"",
"},",
"//監控data中數據變化",
"watch: {",
"",
"},",
"//方法",
"methods: {",
"",
"},",
"//聲明週期 - 創建完成（可以訪問當前this實例）",
"created() {",
"",
"},",
"//生命週期 - 掛載完成（可以訪問DOM元素）",
"mounted() {",
"",
"},",
"beforeCreate() {},//生命週期 - 創建之前",
"beforeMount() {},//生命週期 - 掛載之前",
"beforeUpdate() {},//聲明週期 - 更新之前",
"updated() {},//生命週期 - 更新之後",
"beforeDestroy() {},//生命週期 - 銷燬之前",
"destroyed() {},//生命週期 - 銷燬之後",
"activated() {},//緩存keep-alive",
"};",
"</script>",
"",
"<style>",
"</style>",
],
"description": "生成vue模板"
}
}
至此，前端基本知識學習已完成。