电商项目——初识电商——第一章——上篇 电商项目——分布式基础概念和电商项目微服务架构图，划分图的详解——第二章——上篇 电商项目——电商项目的虚拟机环境搭建_VirtualBox，Vagrant——第三章——上篇 电商项目——Linux虚拟机中安装docker,mysql,redis_VirtualBox——第四章——上篇 电商项目——电商项目的环境搭建_开发工具&环境搭建——第五章——上篇 电商项目——快速开发人人开源搭建后台管理系统&代码生成器逆向工程搭建——第六章——上篇 电商项目——分布式组件（SpringCloud Alibaba，SpringCloud）——第七章——上篇 电商项目——前端基础——第八章——上篇 电商项目——商品服务-API-三级分类——第九章——上篇 电商项目——商品服务-API-品牌管理——第十章——上篇 电商项目——商品服务-API-属性分组——第十一章——上篇 电商项目——商品服务-API-品牌管理——第十二章——上篇 电商项目——商品服务-API-平台属性——第十三章——上篇 电商项目——商品服务-API-新增商品——第十四章——上篇 电商项目——商品服务-API-商品管理——第十五章——上篇 电商项目——商品服务-API-仓库管理——第十六章——上篇

文章目录

1：前后端技术栈类比2：WebStorm的使用3：ES63.1 ES6新特性-let&const3.2 ES6新特性-结构&字符串3.3 ES6新特性-箭头函数3.4 ES6新特性-对象优化3.5 map，reduce3.6 promise异步编排3.7 模块化 4：Node.js5：Vue6：Babel7：Webpack

前面的学习给大家讲解了微服务最基本的Nacos，OpenFeign，GateWay，在我们进行正式开发前，我们对前端来进行简单的概述

如果大家觉得我下面的文章写得好，请大家给我一个赞，奢求大伙们的一个关注，有什么不足我们评论区见

1：前后端技术栈类比

2：WebStorm的使用

作为前端开发，我为何疯狂推荐WebStorm？

3：ES6

ECMASeript6.0 (以下简称ES6. ECMASeript 是一一种由Ecma国际前身为欧洲计算机制造商协会，英文名称是European Computer Marnufacturers Asociation)通过ECMA-262标准化的脚本程序设计语言)是JavaSeript语言的下一代标准，已经在2015年6月正式发布了，并且从ECMAScrlpt6开始，开始采用年号来做版本。即ECMAScript 2015.就是ECMAScript6.它的目标，是使得JavaSrpt 语言可以用来编写复杂的大型应用程序，成为企业级开发语言中每年一个新版本。所以，ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现

3.1 ES6新特性-let&const

我们以后会经常使用let来声明一个变量，还有一个const常量（声明之后不允许改变，一旦声明必须初始化，否则报错）

<script> const a=3 a=4 //Uncaught TypeError: Assignment to constant variable. at let&const.html:36 </script> <script> //var声明的变量往往会越域 //let声明的变量有严格的局部作用域 { var a=1 let b=2 } console.log(a) console.log(b) //Uncaught ReferenceError: b is not defined at let&const.html:19 </script> <script> //var可以声明多次,let只可以声明一次 var a=1 var a=3 let b=2 let b=4 console.log(a) console.log(b) //Uncaught SyntaxError: Identifier 'b' has already been declared </script> <script> //var会变量提升 //let不会变量提升 console.log(a) var a=1 console.log(b) let b=2 //let&const.html:33 Uncaught ReferenceError: b is not defined at let&const.html:33 </script>

3.2 ES6新特性-结构&字符串

<script> //数组解构 let arr=[1,2,3]; let d=arr[0]; let b=arr[1]; let c=arr[2]; let [d,b,c]=arr; console.log(d,b,c); </script> <script> //数组解构 let arr=[1,2,3]; let d=arr[0]; let b=arr[1]; let c=arr[2]; let [d,b,c]=arr; console.log(d,b,c); </script> <script> //字符串扩展 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 </script> <script> //字符串模板 let ss='<div><a>11</a></div>' console.log(ss)//<div><a>11</a></div> </script> <script> const person={ name: "jack", age: 21, language: ['java','js','css'], } //字符串插入变量和表达式.变量名写在${},${}中可以放入js表达式 function fun(){ return "这是一个函数" } const {name,age,language}=person let info='我是${name},今年${age},我想说${fun()}' console.log(info) </script>

3.3 ES6新特性-箭头函数

<script> //不定参数 function fun(...values){ console.log(values.length) } fun(5) fun(5,5,6) //简单的箭头函数 function fun(a,b){ return a+b; } var sum=(a,b) => a+b console.log(sum(11,11)) //复制箭头函数 const person={ name: "jack", age: 21, language: ['java','js','css'], } function hello (person) { console.log(person.name) } let hellos=(obj) => console.log(obj.name) hellos(person)//jack </script>

3.4 ES6新特性-对象优化

<script> let person={ name: "zlj", eat: function(food){ console.log("我吃了"+food) }, eat1: food => console.log("我吃了"+food), eat3(food){ console.log("我吃了"+food) } } person.eat("香蕉") person.eat1("苹果") person.eat3("肥肠") </script> //对象优化.html:12 我吃了香蕉 //对象优化.html:14 我吃了苹果 ///对象优化.html:16 我吃了肥肠 <script> //拷贝对象 let p1={ name: "zlj", age: 19 } let someone={...p1} console.log(someone) //{name: "zlj", age: 19} </script> <script> //对象合并 let name={name: "zlj"} let age={age: 19} let someone={...name,...age} console.log(someone) //{name: "zlj", age: 19} </script>

3.5 map，reduce

语法:

arr.reduce(callback,[initialValue])

reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值(或者上一次回调函数的返回值)，当前元素值，当前索引，调用reduce 的数组。 callback ( 执行数组中每个值的函数，包含四个参数) 1、previousValue ( 上一次调用回调返回的值，或者是提供的初始值(initialalue) ) 2、currentValue (数组中当前被处理的元素) 3、index (当前元素在数组中的索引) 4、array (调用reduce 的数组)

initialValue (作为第 一次调用callback 的第一个参数。 )

<script> //map():接受一个函数,将原来这个数组中的所有元素处理以后返回 let arr=['1','2','3'] arr1=arr.map(item => item*2) console.log(arr1) //reduce()：维数组中的每一个元素依次执行回调函数（不包括已删除的） arr=arr.reduce((a,b) => { console.log("上一次处理后："+a) console.log("当前正在处理："+b) return a+b },1) console.log(arr) </script> (3) [2, 4, 6] map,reduce.html:18 上一次处理后：1 map,reduce.html:19 当前正在处理：1 map,reduce.html:18 上一次处理后：11 map,reduce.html:19 当前正在处理：2 map,reduce.html:18 上一次处理后：112 map,reduce.html:19 当前正在处理：3 map,reduce.html:22 1123

3.6 promise异步编排

在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的ajax请求a,b,d…，后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。

案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求: 1.查询用户，查询成功说明可以登录 2.查询用户成功，查询科目 3.根据科目的查询结果，获取去成绩

分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提供各科成绩的接口，为了渲染方便，最好响应json数据。在这里就不编写后台接口了，而是提供三个json文件，直接提供json数据，模拟后台接口： 我们以前使用的是ajax请求来完成，如下图 我们作如上的操作发现是非常复杂的嵌套程序，无限嵌套的方式总是让人感觉到非常凌乱，不工整，我们希望有一种操作来给他们从新编排一下，让我们感觉到操作的顺序性，逻辑性，es6就给我提供了promise功能，如下演示

<head> <meta charset="utf-8"> //要导入script <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <script > //1.promise可以封装异步操作 //resolve操作成功以后解析数据 //reject操作失败来拒绝 let p=new Promise((resolve,reject) => { //1.异步操作 $.ajax({ url: "/mock/user.json", //操作成功以后解析数据 sucess:function(data){ console.log("查询用户成功："+data) resolve(data) }, //操作失败来拒绝 failure:function(err){ console.log("查询用户失败："+err) reject(err) } }); }); p.then((obj) => { return new promise((resolve,reject) => { console.log("接受到前面传来的信息："+obj); $.ajax({ url: "mock/user_corse_${obj.id}.json", //操作成功以后解析数据 sucess:function(data){ console.log("查询用户课程成功："+data) resolve(data) }, //操作失败来拒绝 failure:function(err){ console.log("查询用户课程失败："+data) reject(err) } }) }) }).then((data) => { console.log("上一步的结果"+data) $.ajax({ url: "mock/user_score_${data.id}.json", //操作成功以后解析数据 sucess:function(data){ console.log("查询用户课程分数成功："+data) resolve(data) }, //操作失败来拒绝 failure:function(err){ console.log("查询用户课程分数失败："+data) reject(err) } }) }) </script>

我们对上面的方法进行改造，把ajax的请求封装成一个方法，并返回

<script> //对上面的方法进行封装 function get(url,data){ return new Promise((resolve,reject) => { $.ajax({ url: url, data: data, //操作成功以后解析数据 sucess:function(data){ console.log("查询用户课程分数成功："+data) resolve(data) }, //操作失败来拒绝 failure:function(err){ console.log("查询用户课程分数失败："+data) reject(err) } }) }) } get("mock/user.json") .then( (data) => { console.log("用户查询成功-----") return get("mock/user_corse_${data.id}",data) }) .then((data) => { console.log("用户课程查询成功------") return get("mock/user_score_${data.id}",data) }) .then((data)=>{ console.log("用户课程成绩查询成功-------") }) </script>

3.7 模块化

1)、什么是模块化 模块化就是把代码进行拆分，方便重复利用。类似java中的导包:要使用一一个包，必须先导包。而JS中没有包的概念，换来的是模块。 模块功能主要由两个命令构成: ‘export’ 和import’。

'export’命令用于规定模块的对外接口。

'import’命令用于导入其他模块提供的功能。

4：Node.js

Node.js 教程

5：Vue

Vue官方文档 Vue——邂逅Vue Vue——Vue的基础篇 Vue——Vue的组件化 Vue——slot_插槽的基本使用

前面就是vue的基本知识，接下来我们讲解怎么使用vue脚手架进行开发 使用Vue脚手架进行模块化开发的流程和初始化vue项目的目录详解&运行流程

6：Babel

Babel是一个JavaScript编译器，我们可以使用es的最新语法编程，而不用担心浏览器兼容问题，它会自动化转化为浏览器的兼容代码

7：Webpack

自动化项目构建工具，gulp也是同类产品 Webpack 入门教程