分布式电商项目搭建-基础篇之环境搭建

最新推荐文章于 2024-03-02 20:20:11 发布

划水也要划出样子

最新推荐文章于 2024-03-02 20:20:11 发布

阅读量1k

点赞数

分类专栏：学习搭建文章标签： java maven spring 分布式

本文链接：https://blog.csdn.net/qq_39994079/article/details/113698686

版权

学习同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

搭建

3 篇文章 0 订阅

订阅专栏

docker环境搭建

todo

docker 通用命令集

#查看容器进程
docker ps -a 
docker ps

#启动容器
docker start $容器id

#停止容器
docker stop $容器id

#停止所有的容器
docker stop $(docker ps -a -q)

#删除容器
docker rm -f $容器id

#删除所有的容器（只删除单个时把后面的变量改为image id即可）
docker rm $(docker ps -a -q)

#删除指定id的镜像
docker rmi <image id>

#想要删除untagged images，也就是那些id为的image的话可以用

docker rmi $(docker images | grep "^" | awk "{print $3}")

#设置创建好的容器 开机自动启动
docker update $容器id --restart=always

#讲自己配置好的容器重新生成自己的镜像 上传到Docker Hub 上
docker commit $容器id centersept0915/test:redistest
#登录docker hub 账号
docker login
#你的用户名
Username: centersept0915
#你的密码
Password: 
#讲生成好的镜像上传到hub 上
docker push centersept0915/test:redistest
#拉取镜像
docker　pull  centersept0915/test:redistest

docker 安装 mysql

docker run -p 3306:3306 --name mysql  -v /mydata/mysql/log:/var/log/mysql  -v /mydata/mysql/data:/var/lib/mysql  -v /mydata/mysql/conf:/etc/mysql  -e MYSQL_ROOT_PASSWORD=root  -d mysql:5.7

命令解释：todo

使用mysql客户端工具连接服务器

账户名：root 密码: root

docker 安装以及操作 redis

#创建redis 容器
docker run -p 6379:6379 --name redis -v /mydata/redis/data:/data -v /mydata/redis/conf/redis.conf:/etc/redis/redis.conf -d redis redis-server /etc/redis/redis.conf

#运行redis 客户端
docker exec -it redis redis-cli

可以下载redis的客户端（redis desktop manageer）

进行界面操作

Maven

重新编辑 maven 的 setting.xml ，添加一下配置到文件中

#配置阿里云镜像
<mirrors>
<mirror>
<id>nexus-aliyun</id>
    <mirror0f>central</mirror0f>mirror0f>
<name>Nexus aliyun</name>
<utl>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>
    </mirrors>

配置jdk1.8编译项目
<profiles>
<profile>
<id>jdk-1.8</id>
<activation>
<activeByDefault>true</activeByDefault>
<jdl>1.8</jdk>
</activation>
<properties>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1 8</maven.compiler.target>
<maven.compiler.compilerVersion> 1.8</maven.compiler.compilerVersion>
</properties>
</profile>
</profiles>

IDEA & VSCode

idea 配置（后端开发工具）

1.安装lombok插件

快速生成类的构造函数，get/set 方法等

2.安装mybatisx插件

快速定位mapper 文件

VSCode 配置（前端开发工具）

安装插件

1.Auto Close Tag

自动添加HTML/XML关闭标签

2.Auto Rename Tag

自动重命名成对的HTML/XML标签

3.Chinese (Simplified) Language Pack for Visual Studio Code插件

汉化插件

4.ESLint

检查ES 语法

5.HTML CSS Support

6.HTML Snippets

7.JavaScript (ES6) code snippets

ES 语法提示

8.Live Server

启动一个开发本地服务器与动态页面动态重新加载功能

9.open in browser

这允许您在默认浏览器或应用程序中打开当前文件。

10.Vetur

Vue 语法支持，Vue 工具

配置git-ssh

1.在电脑上安装git

todo

2.配置git的基本用户信息

#全局配置git的用户名
git config --global user.name "your name"
#全局配置git的邮箱
git config --global user.email "your email"

3.配置ssh免登录

在控制台生成个人 ssh 私钥和公钥

#生成私钥和公钥 连续三次回车确定
ssh-keygen -t rsa -C "your email"

执行完成之后，目录下会生成 id_rsa （私钥）和 id_rsa.pub（公钥）两个文件。

然后登录gitee(码云) 或者 github ，在设置中找到SSH KEY配置，将 id_rsa.pub 里的内容复制粘贴到里面去。

最后使用

#码云测试是否添加成功
ssh-T git@gitee.com 
#github测试是否添加成功
ssh-T git@github.com

idea 搭建后端服务项目环境

导入码云上的项目

复制仓库url，在idea新建选择 new > Project from Version Control … > git 粘贴在URL 中，选择相应的工作目录。

如果没有配置gitee账号，需要自行登录。

在项目上新建相应的微服务项目

商品服务（product）
仓储服务（ware）
订单服务（order）
优惠卷服务（coupon）
用户服务（member）

创建微服务模块

1.右键主项目 > New > Module… > Spring initializr 输入相关信息

2.每个服务统一包名和模块名称

com.组织名称.项目名称.模块名称…

3.选择微服务必要的maven 依赖

Spring Web

Spring Web Service

OpenFeign 用于微服务之间的互相调用

4.创建完成微服务模块，在父目录下新建一个 pom 文件，内容如下：

<modelVersion>4.0.0</modelVersion>
    <groupId>com.centersept.supermall</groupId>
    <artifactId>super-mall</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>super-mall</name>
    <description>baba-project</description>
    <packaging>pom</packaging>
    <modules>
        <module>super-mall-coupon</module>
        <module>super-mall-member</module>
        <module>super-mall-order</module>
        <module>super-mall-product</module>
        <module>super-mall-ware</module>
    </modules>

把编辑好的父Pom 文件，添加到 Idea maven 插件管理中，方便打包部署。

编辑.gitignore

编辑这个文件可以忽略提交这些文件，在这个文件中追加如下内容：

**/mvnw
**/mvnw.cmd
**/.mvn
**/target/
.idea
**/.gitignore

最后提交代码到码云，安装码云插件（gitee）。

数据库搭建配置

1.安装 Power Designer 建模软件

[]: http://forspeed.rbread01.cn/down/powerdesigner1029.zip

注：表不做外键关联，因为数据量太大，外键会浪费数据库的性能。

2.根据业务进行数据建模，然后生成相应的 sql 语句

3.点击菜单栏 Database > generate Database > Preview , 查看生成的 sql 语句

4.每个服务模块建立一个数据库，然后分别执行相应的业务sql，创建表结构。

搭建后台管理系统

人人开源项目

注：在 git 搜索人人开源，使用别人的构建好的脚手架，进行快速开发

renren-fast 和 renren-fast-vue 能快速构建，后台管理系统。

renren-generator 快速生成代码层

引入后台项目中

1.打开git bash ,执行，克隆项目到文件夹中

git clone https://gitee.com/renrenio/renren-fast.git 

git clone https://gitee.com/renrenio/renren-fast-vue.git

2.删除克隆的项目中的 .git 文件夹，然后 renren-fast 复制整个文件夹到你的项目中，然后更改父Pom 加上该模块，更改后的配置为：

 <modelVersion>4.0.0</modelVersion>
    <groupId>com.centersept.supermall</groupId>
    <artifactId>super-mall</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>super-mall</name>
    <description>baba-project</description>
    <packaging>pom</packaging>
    <modules>
        <module>super-mall-coupon</module>
        <module>super-mall-member</module>
        <module>super-mall-order</module>
        <module>super-mall-product</module>
        <module>renren-fast</module>
        <module></module>
    </modules>

3.创建相应的数据库和表，执行项目中db文件夹下的sql文件（根据数据库选择相应的语句），执行完成之后，可以更改项目配置文件夹中关于db数据源的配置，然后启动项目。

构建前端项目

1.安装 Node.js

todo

2.配置好node，打开前端项目下的终端，执行

# 安装包文件依赖
npm install 
# 启动前端项目
npm run dev

2.1 安装中出现了错误

1.node-gyp 这个包需要安装 python 作为依赖所以我们需要安装python，在管理员powershell 中执行以下语句：

Error: Can’t find Python executable “python”, you can set the PYTHON env variable.

方法一：

#安装windows-build-tools
npm install --global --production windows-build-tools
#安装node-gyp
npm install --global node-gyp

方法二：

使用管理员运行VSCode 再执行 npm install 命令

注：node-sass 安装报错

node-sass是一个项目依赖，在一个项目中在使用sass语法的时候，必须通过sass-loader来解析sass，从而使sass语法变成浏览器能够识别的CSS语法，而node-sass模块就是对sass-loader的支持模块，所以不安装node-sass，sass-loader就不能正常工作

要考虑到 node-sass 和 node.js 的版本兼容性

参考：https://www.npmjs.com/package/node-sass

3.成功之后，浏览器打开 localhost:8001，账号：admin 密码：admin 登录.（没验证码，一定是没有启动后端服务）

逆向工程搭建&使用

1.克隆项目下来

git clone https://gitee.com/renrenio/renren-generator.git

2.删除.git 配置，然后把文件复制到后台工程目录下，修改pom 文件，引入该项目。

3.修改逆向工程的application.yml 配置文件的数据源配置，修改为自己的

4.修改generator.properties 生成代码的基本配置，主要修改以下配置

mainPath=com.centersept.supermall
#包名
package=com.centersept.supermall
#需要生成的模块
moduleName=product
#作者
author=center_sept
#Email
email=253079439@qq.com
#表前缀（类名不会包含表前缀）
tablePrefix=pms_

5.直接启动逆向工程，使用浏览器直接输入localhost 访问自动生成代码系统。

5.1 进入菜单 renren-fast , 选择全部的表，点击生成代码来生成代码。

5.2 解压生成的文件，把解压的main文件夹，复制到你生成的模块下。

6.导入代码之后，存在报错，还需要生成一个公共的模块，把公共代码导入进去，其他服务依赖这个公共模块。

6.1 每个模块加入一下依赖

<dependency>
            <groupId>com.centersept.supermall</groupId>
            <artifactId>super-mall-common</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>

7.从renren-fast 模块，把utils 和 xss 里的类copy 到 common 模块

7.1 修改pom 的依赖

<!--    mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </dependency>
        <!--    lombok  -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpcore</artifactId>
            <version>4.4.12</version>
        </dependency>
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>
<!--        <dependency>-->
<!--            <groupId>org.apache.tomcat.embed</groupId>-->
<!--            <artifactId>tomcat-embed-core</artifactId>-->
<!--            <version>9.0.36</version>-->
<!--        </dependency>-->

8.修改逆向工程中的controller模板 Controller.java.vm, 注释掉shiro的注解

9.最后再次生成代码，复制粘贴到项目中。

配置&测试模块的CRUD

配置

1.配置数据源

1.1 common pom的依赖添加，导入数据库的驱动

 <!--        mysql 驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.17</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
<!--            一般tomcat 里自带的jar包 所以设置为provided 如果存在不需要引入-->
            <scope>provided</scope>
        </dependency>

1.2 生成application.yml 配置文件，将数据源配置进去

spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://192.168.72.130:3306/supermall_pms
    driver-class-name: com.mysql.jdbc.Driver

2.配置mybatis-plus

2.1 配置mybatisPlus ,在启动类加入注解，扫描mapper 接口，生成代理类，注入到spring 容器中，让spring 进行管理

@MapperScan("com.centersept.supermall.product.dao")

2.2 在配置文件追加一下内容

mybatis-plus:
  #mapper 的路径 ，classpath* 全路径扫描，即java的类路径下；classpath 即 resource 路径下
  mapper-locations: classpath:/mapper/**/*.xml
  #配置主键使用规则
  global-config:
    db-config:
      #主键自增
      id-type: auto

测试是否能crud

在 test 文件夹下的测试类，添加以下内容测试。

 @Autowired
    BrandService brandService;

    @Test
    void contextLoads() {
        BrandEntity brandEntity = new BrandEntity();
        brandEntity.setDescript("测试");
        brandEntity.setName("测试");
        boolean b = brandService.save(brandEntity);
        System.out.println(b);
        brandEntity.setBrandId(1L);
        brandEntity.setDescript("修改测试");
        b = brandService.updateById(brandEntity);
        System.out.println(b);
         List<BrandEntity> queryListDto = brandService.list(new QueryWrapper<BrandEntity>().eq("brand_id",1L));
        System.out.println(queryListDto.toString());
    }

逆向工程生成全部模块的业务代码

1.每个模块的pom 都加上common 模块的依赖

2.配置每个模块的数据库Url 为对应的库

3.每个模块的端口号都修改，从8000开始，+1000 递增，方便每个模块生成多个服务，直接在后面加1。

即订单模块定义8000 开始，再加一个订单服务则对用端口为8001。仓储模块则使用9000。

分布式组件

Spring-cloud-netflix

todo

Spring-cloud-alibaba 分布式框架解决方案

SpringCloud Alibaba-Nacos: 注册中心(服务发现/注册 )
SpringCloud Alibaba-Nacos配置中心(动态配置管理)
SpringCloud- Ribbon:负载均衡
SpringCloud- Feign:声明式HTTP客户端(调用远程服务)
SpringCloud Alibaba-Sentinel:服务容错(限流、降级、熔断)
SpringCloud- Gateway: API 网关(webflux 编程模式)
SpringCloud- Sleuth:调用链监控
SpringCloud Alibaba-Seata:原Fescar, 即分布式事务解决方案

引入分布式框架Spring-cloud-alibaba

在公共模块common 的pom 加入一下配置：

注：框架的版本和spring-boot的版本要同步，具体参考官方文档。

<dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>2.1.0.RELEASE</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

Nacos 注册中心

1.首先，修改 pom.xml 文件，引入在公共common模块引入 Nacos Discovery Starter。

 <dependency>
     <groupId>com.alibaba.cloud</groupId>
     <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
 </dependency>

2.Nacos server 配置

注：window下操作

2.1 https://github.com/alibaba/nacos/releases 下载 Nacos server , 我下载的是这个版本

2.2 下载完成后，解压，startup.cmd 启动

2.2.1 出现启动不了，窗口一闪的情况。

解决：你的jdk环境变量没有配置好，必须把jdk环境置顶，也就是上移，让系统优先选择。

最后，在微服务业务模块中加入以下配置

 spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

3.使用 @EnableDiscoveryClient 注解开启服务注册与发现功能，启动项目

@SpringBootApplication
 @EnableDiscoveryClient
 public class ProviderApplication {

 	public static void main(String[] args) {
 		SpringApplication.run(Application.class, args);
 	}

 	@RestController
 	class EchoController {
 		@GetMapping(value = "/echo/{string}")
 		public String echo(@PathVariable String string) {
 				return string;
 		}
 	}
 }

4.使用浏览器登录 http://localhost:8848/nacos/ ，账号密码 nacos ,但是并没有我们注册的服务。

那是因为微服务模块配置文件没有配置apllication.name 这个属性，加入之后就可以发现了。

4.1 修改配置文件之后出现

org.springframework.boot.context.properties.ConfigurationPropertiesBean

因为 springboot版本和springcloud版本不兼容，换一个版本试试。换成Greenwich.SR3 版本的。

Nacos服务中心部署到 docker

1.获取镜像

todo

OpenFeigh 测试远程调用

原理

todo

使用

1.引入依赖

<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>

2.项目接入feigh

2.1在优惠券服务取一个controller类文件，定义一个数据返回List

 @RequestMapping("/member/list")
    public R membercoupons(){
        CouponEntity couponEntity = new CouponEntity();
        couponEntity.setCouponName("测试优惠券");
        return R.ok().put("coupons",Arrays.asList(couponEntity));
    }

2.2 在会员模块下创建feigh包，这个文件夹用于声明feigh接口。

@FeignClient("supermall-coupon")
public interface CouponFeighService {

    @RequestMapping("/coupon/coupon/member/list")
    public R membercoupons();
}

2.3 在会员服务的启动类中加入注解，开启远程调用

@EnableFeignClients(basePackages = "com.centersept.supermall.member.feigh")

也可以在可以在接口上加入@Component 注解，交给spring 注入。

2.4 在会员模块下的MemberController类中加入一下内容，远程调用优惠券服务

@Autowired
    CouponFeighService couponFeignService;

    @RequestMapping("/coupons")
    public R test(){
        MemberEntity memberEntity = new MemberEntity();
        memberEntity.setNickname("大帅逼");

        R membercoupons = couponFeignService.membercoupons();
        return R.ok().put("member",memberEntity).put("coupons",membercoupons.get("coupons"));
    }

2.5 浏览器输入http://localhost:9000/member/member/coupons，测试是否连通。

Nacos 配置中心

简单配置实例

1.在common 模块引入nacos 配置中心的依赖

<dependency>
     <groupId>com.alibaba.cloud</groupId>
     <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
 </dependency>

2.在应用的/src/main/resources/bootstrap.properties 配置文件中配置Nacos Config 元数据，现在 coupon 模块创建

3.在controller层创建一个测试的用户代码，如下

@Value("${user.testname}")
    private String testUserName;

    @Value("${user.age}")
    private Integer testAge;

    @RequestMapping("/test")
    public R test(){
        return R.ok().put("testUserName",testUserName).put("testAge",testAge);
    }

注：user.name spring 会自动去读取计算机的名字

4.在 application.properties 中配置相应的属性，如下

user.testname=超人
user.age=25

5.为了不让我们重新打包重启，则在配置中心加上配置。启动的如下日志已经提醒，从 nacos 配置中心获取配置信息的

2020-07-16 21:00:46.045  INFO 14188 --- [           main] b.c.PropertySourceBootstrapConfiguration : Located property source: CompositePropertySource {name='NACOS', propertySources=[NacosPropertySource {name='supermall-coupon.properties'}]}

我们需要在 Nacos 配置中心配置相应的配置文件

6.打开Nacos 管理界面，点击配置列表，然后新建一个 DataId 为 supermall-coupon.properties 的命名，再然后把配置的内容写到配置内容栏里面，发布。

7.这个时候还没有结束，还需要在配置属性的类里面，加上@RefreshScope 注解，才能达到热更新的效果。

8.因为配置中心是bootstrap.properties 中配置加载的，所以相同的配置项，优先加载Nacos 配置中心的配置。

命名空间与配置分组

1.命名空间

配置隔离

默认：public

1.开发，测试，生产

配置命名空间

1.在命名空间中，分别添加开发，测试，生产的命名空间。

2.打开配置列表，发现页面上已经有我们添加的命名空间。

3.然后我们在新的命名空间中添加我们的配置项。我们可以直接在public 的命名空间中，选择已经配置好的配置，然后克隆到其他命名空间就可以了。

4.如果我们要在不同环境切换配置命名空间，可以在bootstrap.properties 中增加命名空间配置项

spring.cloud.nacos.config.namespace=98af8d57-dd3a-4b68-b1a1-945ee78f1239

5.也可以每个微服务创建一个命名空间。

2.配置集

所有的配置的集合

3.配置集ID

类似配置文件名

4.配置分组

默认所有的配置集都属于：DEFAULT_GROUP

需要在boostrap.properties 加入以下配置

#配置分组的命名
spring.cloud.nacos.config.group=test

一般来说一个微服务使用命名空间来隔离，然后使用分组来隔离环境的配置。

加载多配置源

1.新建一个配置，把数据源的配置当道这个配置中来，Data ID 为 datasource.yml ,Group 为 dev, 配置格式为YAML 配置内容为以下内容：

spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://192.168.72.130:3306/supermall_sms
    driver-class-name: com.mysql.jdbc.Driver

2.mybatis 的配置，也可以创建一个出来进行加载,配置如下：

mybatis-plus:
  #mapper 的路径 ，classpath* 全路径扫描，即java的类路径下；classpath 即 resource 路径下
  mapper-locations: classpath:/mapper/**/*.xml
  #配置主键使用规则
  global-config:
    db-config:
      #主键自增
      id-type: auto

3.新建一个其他的配置，统一进行管理

spring:
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
  application:
    name: supermall-coupon
server:
  port: 8000

4.把这些创建好的配置，配置到项目中，在bootstrap.properties 中加入以下配置

# datasource
spring.cloud.nacos.config.ext-config[0].data-id=datasource.yml
spring.cloud.nacos.config.ext-config[0].group=dev
#是否动态刷新
spring.cloud.nacos.config.ext-config[0].refresh=true

# mybatis
spring.cloud.nacos.config.ext-config[1].data-id=mybatis.yml
spring.cloud.nacos.config.ext-config[1].group=dev
#是否动态刷新
spring.cloud.nacos.config.ext-config[1].refresh=true

#other
spring.cloud.nacos.config.ext-config[2].data-id=other.yml
spring.cloud.nacos.config.ext-config[2].group=dev
#是否动态刷新
spring.cloud.nacos.config.ext-config[2].refresh=true

SpringCloud-Gateway 网关

网关作为流量的入口，常用功能包括路由转发、权限校验、限流控制等。而springcloud gateway
作为SpringCloud官方推出的第二代网关框架，取代了Zuul 网关（网飞）。

主要作用：动态路由，鉴权

rps：32213 每秒请求数

组件：Route,Predicate,Filter

注：官方文档中有很多配置实例，可以直接上去查看。

1.创建gatewey 模块，加入网关模块，以及引入common 模块

2.加入nacos 依赖，然后配置nacos的配置，新建bootstrap.properties ,加入以下配置：

spring.application.name=<你的应用名称>
spring.cloud.nacos.discovery.server-addr=<服务所在ip>:8848
spring.cloud.nacos.config.server-addr=<服务所在ip>:8848

3.排除数据库配置,在启动类上加入

@EnableDiscoveryClient
@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})

4.测试路由断言

spring:
  cloud:
    gateway:
      routes:
#        - id: test_route
#          uri: https://www.baidu.com
#          predicates:
#            - Query=url,baidu
#
#        - id: qq_route
#          uri: https://www.qq.com
#          predicates:
#            - Query=url,qq

        - id: product_route
          uri: lb://supermall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}

        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

前端基础

技术栈简介

ES6 语法

JavaScript 是它的实现

前端基础

1.let 声明变量

var 声明的变量往往会越域
let 声明的变量有严格局部作用域

var a - 1;
let b - 2;
console.log(a); 1
console.log(b);1ReferenceError:b is not defined

var 会存在变量提升
let 不存在变量提升

console.log(×); /l undefined
var x =10;
console.log(y); //ReferenceError: y is not defined
let y = 20;

2.const 声明常量（只读变量）

声明之后不允许改变

一旦声明必须初始化，否则报错

3.解构表达式

数组解构

let arr = [1,12,3]
// let a = arr[0]
// let b = arr[1]
// let c = arr[2]
let [a,b,c] = arr
console.log(a,b,c)

对象解构

const person = {
name: "jack",
age: 21,
language: ["java", "js", "css"]
}
const name = person.name
const age = person.age
const language = person.language

const {name,age,language} = person

console.log(name,age,language)
// 别名解构
const {name：userName,age:superAge,language} = person

4.字符串扩展

字符串API

let str = "hello.wue"";
console.log(str.startswith(hello"))//trui
console.log(str.endswith(".vue")//true
console.log(str.includes("e"));//true
console.log(str.includes("hello")//true

字符串模板

// 反引号 `
//1、多行字符串
let ss = `
<div>
<span>hello world<span>
</div>
`
console.log(ss)

字符串插入变量

//2、字符串插入变量和表达式。变量名写在${}中，${}中可以放入JavaScript表达式。
let info = 我是${abc}，今年${age+10}了,我想说${fun()};
console.logo(info)
function fun(){
    return "hello"
}

5.函数优化

5.1 函数参数默认值

// 在ES6以前，我们无法给一个函数的设置默认值，只能采用变通写去:
function add(a，b){
/判斯b是否为空，为空就拾认值1
b  = b || 1 ;
return a + b;
}
// 传一个参数
console.log(add(10));
// 现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add(a，b=1){
return a + b;
}

5.2 不定参数

function fun(..values){
console.log(values.length)
}
fun(1，2) //2
fun(1,2,3,4) //4

5.3 箭头函数

// 原来声明一个函数
var func = function (obj) {
 console.log(obj)
}
// 现在
var funcNew = obj => console.log(obj)
// 原来
var sum = function(a,b){
    return a+b;
}
// 现在
var sum2 = (a,b) => a+b;

function  hello (person) {
    console.log("hello,"+person.name)
}
// 箭头函数，加解构表达式
var hello2 = ({name}) => console.log("hello,"+person.name)
hello2(person)

6.对象优化

const person = {
name: "jack",
age: 21,
language: ["java", "js", "css"]
}

console.log(Object.keys(person));/["name","age"，"language"l
console.log(Object.values(person));77["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}

//{a:1,b:2,c:3}
Object.assign(target,source1,source2)

// 声明对象简写
const age = 23
const name = "张三"
const person1 =  {age:age,name:name}
// 属性名和变量值一样 直接一下简写
const person2 = {age,name}

// 对象函数属性简写
let person3 = {
    name:"jack",
    eat: function (food) {
        console.log(this.name + "在吃" + food)
    },
    // 箭头函数不能用this, 用 对象.属性
    eat: foot => console.log(person3.name + "在吃" + food),
    eat3 (foot) {
        console.log(this.name + "在吃" + food)
    }
}

// 对象扩展运算符
// 拷贝对象（深拷贝）
let p1 = {name:"tom",age:12}
let someone = {...person1}
console.log(someone) // {name:"tom",age:12}

// 合并对象
let age1 = {age:12}
let name1 = {name:"tom"}
let p2 = {name1:"am"}
 p2 = {...age1,...name1}

7.map 和 reduce

//数组中新增了map和reduce 方法

//map():接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回

let arr = ['1','20','-3','222']

arr = arr.map((item)=>{item*2})

// reduce() 为数组中的每个元素一次执行回调函数，不包括数组中被删除或从未被赋值的元素

// arr.reduce(callback,[initialValue])

1.previousValue(上一次调用回调返回的值，或者是提供的初始值（initialvalue）

2.currentvalue(数组中当前被处理的元素)
3.index（当前元素在数组中的素引)
4.array (调用reduce的数组)

arr.reduce((a,b)=>{
console.log("上次值"+a)
console.log("当前值"+b)
return a+b
})

8.Promise (异步编排)

问题：ajax 一步一步的递归调用

// 1.Promise 可以封装异步操作
let p = new Promise((resolve,reject)=>{
	// 1.异步操作
	&.ajax({
	url:"mock/user.json",
	success:function(data){
		resolve(data)
	},
	error:function(err){
		reject(err)
	}
	})
	if(true){
		resolve(data)
	}else{
		reject(error)
	}
})
p.then((obj)=>{
  return	new Promise((resolve,reject)=>{
	// 1.异步操作
	&.ajax({
	url:`mock/user_corse_${obj.id}.json`,
	success:function(data){
		resolve(data)
	},
	error:function(err){
		reject(err)
	}
	})
})
}).catch((err){

}).then((data)=>{
// 1.异步操作
	&.ajax({
	url:`mock/cors_score_${data.id}.json`,
	success:function(data){
		console.log(data)
	},
	error:function(err){
		console.log(err)
	}
	})
})

function get(url, data){	
	return new Proeise((resolve,reject)->{
	$.ajax({
		url: url,
		data: data,
		success: function (data){
			resolve(data);
		},
		error: function (err){
			reject(err)
        })
}); 
}
get("mock/user.json")
    .then((data)=>{
    return get(`mock/user_corse_${data.id}.json`)
}).then((data)=>{
    return get(`mock/cors_score_${data.id}.json`)
}).then((data)=>{
   console.log(data)
}).catch((err)=>{
   console.log(err)
})

9.模块化

9.1 什么是模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包，要使用一个包，必须先导包。而s中没有包的概念，换来的是模块。
模块功能主要由两个命令构成.‘export"和"import’.
export：命令用于规定模块的对外接口。
import：命令用于导入其他模块提供的功能。

9.2 export 导出

给导入另外起名，使用以下格式

export default {
  sum (a,b) {
    return a+b;
  }
}

9.3 import 导入

vue

MVVM

todo

官网看引入教程

nodejs

开始搭建前端模块

Vue模块化开发

搭建Vue脚手架

# 全局安装webpack
npm install webpack -g 

# 全局安装Vue的脚手架
npm install -g @vue/cli-init

# 新建一个项目工作文件，然后vue脚手架使用webpack模块初始化一个(自己的项目名称)
vue init webpack super-mall-vue

# 启动新建好的vue项目
npm run dev
# 打包项目
npm run build

创建一个组件

1.在src/components 下创建vue 文件，内容是vue的基本三大属性

<template>
  
</template>

<script>
export default {
  
}
</script>
<style lang="sass" scoped>

</style>

2.在src/router 下，编辑index.js，添加一下代码

import hello from '@/components/{你的文件名}'

export default new Router({
  routes: [
    {
      path:'/{你的文件名}',
      name:'{你的组件命名}',
      component:hello
    }
  ]
})

引用ElementUI

安装依赖

npm i element-ui

引入依赖

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

使用elementUI 提供的布局以及配置动态路由菜单

1.替换App.vue 中的内容

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']" router='true'>
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>

  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>

    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

2.删除<el-main>中的内容，替换成的标签，然后在中加入属性router=“true”,最后标签中加入route=’/{Vue Router 路径对象}’，是为了点击菜单达到替换内容的目的

VSCode,加入vue代码片段

1.点击文件-首选项-用户代码-点击新建代码片段-取名vue.json,然后替换一下内容

"Print to console": {
	"prefix": "vue",
	"body": [
		"<template>",
		"  <div>",
		"  </div>",
		"</template>",
		"",
		"<script>",
		"  export default {",
		"  data() {",
		"    return {",
		"",
		"    };",
		"  },",
		"  created() {",
		"",
		"  },",
		"  mounted() {",
		"",
		"  },",
		"  methods: {",
		"",
		"  },",
		"}",
		"</script>",
		"",
		"<style lang='scss' scoped>",
		"$4",
		"</style>"
	],
	"description": "Log output to console"
}