谷粒商城学习笔记（一）

知识点

环境/工具

  1. Maven：可以将每个微服务组织起来（管理项目与项目之间的关系）

  2. Docker：容器管理，快速部署项目或环境

  3. MySQL：经典数据库

  4. Redis：缓存数据库，老版本（4.x）没有自动持久化，新版本（7.x）有自动持久化

  5. PowerDesigner：能够通过设计图生成SQL脚本文件

  6. 人人开源：快速构建后台管理系统，快速生成MVC架构代码，人人开源Gitee。

    1. renren-fast：是一个轻量级的，前后端分离的Java快速开发平台，能快速开发项目并交付【接私活利器】
    2. renren-fast-vue：基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案
    3. renren-generator：人人开源项目的代码生成器，可在线生成entity、xml、dao、service、html、js、sql代码，减少70%以上的开发任务

NACOS

NACOS官网，项目使用的是1.1.3版本，可查看NACOS 1.x官方文档。

注册中心

项目老版本Spring-Cloud-Alibaba微服务-NACOS注册中心案例

配置步骤

  1. 修改pom.xml文件，引入 Nacos Discovery Starter。

    1
    2
    3
    4
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
    </dependency>

  2. 在应用的/src/main/resources/application.properties（yaml也是可以的）配置文件中配置 Nacos Server 地址。

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

  3. 在SpringBoot启动类上使用@EnableDiscoveryClient注解开启服务注册与发现功能。

    1
    2
    3
    4
    5
    6
    7
    @SpringBootApplication
    @EnableDiscoveryClient
    public class GulimallCouponApplication {
        public static void main(String[] args) {
            SpringApplication.run(GulimallCouponApplication.class, args);
        }
    }

配置中心

项目老版本Spring-Cloud-Alibaba微服务-NACOS配置中心案例

配置步骤

  1. 修改pom.xml文件，引入 Nacos Config Starter。

    1
    2
    3
    4
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
    </dependency>

  2. 在应用的/src/main/resources/bootstrap.properties配置文件中配置 Nacos Config 元数据。

    1
    2
    spring.application.name=nacos-config-example
    spring.cloud.nacos.config.server-addr=127.0.0.1:8848

  3. 完成上述两步后，应用会从 Nacos Config 中获取相应的配置，并添加在 Spring Environment 的 PropertySources 中。这里我们使用 @Value 注解来将对应的配置注入到 SampleController 的 userName 和 age 字段，并添加 @RefreshScope 打开动态刷新功能。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @RefreshScope
    class SampleController {
       
    	@Value("${user.name}")
    	String userName;
       
    	@Value("${user.age}")
    	int age;
    }

配置中心相关名词：

  1. 命名空间
  2. 配置集：所有配置的集合
  3. 配置集ID：类似于文件名
  4. 配置分组

谷粒商城使用命名空间来隔离各个服务的配置，然后使用分组来区分不同环境的配置（开发、生产）

指定命名空间与组

默认命名空间为public，默认组为DEFAULT_GROUP。

在/src/main/resources/bootstrap.properties中，加入如下内容：

1
2
3
4
# 命名空间的ID
spring.cloud.nacos.config.namespace=8dd4b269-b8b3-4439-a242-8dc738c396f3
# 组名
spring.cloud.nacos.config.group=dev

扩展配置

可将某个配置拆分为多个配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
spring.application.name=gulimall-coupon
spring.cloud.nacos.config.server-addr=127.0.0.1:8848

spring.cloud.nacos.config.namespace=8dd4b269-b8b3-4439-a242-8dc738c396f3
spring.cloud.nacos.config.group=dev

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

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

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

Feign

Spring Cloud OpenFeign 中文文档

配置步骤（参考）

  1. 导入spring-cloud-openfeign依赖

    1
    2
    3
    4
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-openfeign</artifactId>
    </dependency>

  2. 在feign包下编写Feign接口

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    package cn.insectmk.gulimall.member.feign;

    import cn.insectmk.common.utils.R;
    import org.springframework.cloud.openfeign.FeignClient;
    import org.springframework.web.bind.annotation.RequestMapping;

    @FeignClient("gulimall-coupon")// 应用名称
    public interface CouponFeignService {
        
        @RequestMapping("/coupon/coupon/member/list")
        R memberList();
    }

  3. SpringBoot启动类开启OpenFeign客户端并配置Feign接口所在的包

    1
    2
    3
    4
    5
    6
    7
    8
    @SpringBootApplication
    @EnableDiscoveryClient
    @EnableFeignClients(basePackages = "cn.insectmk.gulimall.member.feign")
    public class GulimallMemberApplication {
        public static void main(String[] args) {
            SpringApplication.run(GulimallMemberApplication.class, args);
        }
    }

  4. 调用案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    package cn.insectmk.gulimall.member.controller;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import cn.insectmk.common.utils.R;

    @RestController
    @RequestMapping("member/member")
    public class MemberController {
        @Autowired
        private MemberService memberService;
        @Autowired
        private CouponFeignService couponFeignService;

        @RequestMapping("/test")
        public R test(){
            R r = couponFeignService.memberList();

            return R.ok()
                    .put("coupons", r.get("coupons"))
                    .put("message", r.get("message"))
                    .put("msg", "调用成功！");
        }
    }

网关

spring-cloud-gateway中文文档

配置步骤

  1. 导入spring-cloud-gateway坐标

    1
    2
    3
    4
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-gateway</artifactId>
    </dependency>

  2. 同样需要做服务注册/发现。

  3. 可以自己配置路由规则及其他配置，具体路由规则查看路由谓词工厂

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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

前端

ES6

  1. var与let的区别

  2. 结构表达式

    1
    2
    3
    4
    5
    6
    7
    8
    let [a,b,c] = [1,2,3]

    let student = {
        name: 'zhangsan',
        age: 17
    }

    let {stuName, stuAge} = student

  3. 字符串扩展函数（有很多）

    1. startWith()
    2. endWith()

  4. 字符串模板：就是反引号，可以用插值表达式${}

  5. 函数优化

    1. 参数能够配合解构表达式使用

    2. 参数默认值

      1
      2
      3
      function doSome(num1, num2 = 1) {
          
      }

    3. 不定参数

      1
      2
      3
      function doSome(...nums) {
          
      }

    4. 箭头函数

      1. this指向问题

  6. 对象优化

    1. 对象扩展函数
    2. 对象声明简写
    3. 对象中的箭头函数的this不能使用，只能用对象名访问属性
    4. 对象扩展运算符

      1. 拷贝（深拷贝）

        1
        2
        3
        4
        5
        6
        let student = {
            name: 'zhangsan',
            age: 17
        }

        let zhangSan = {...student}

      2. 扩展

        1
        2
        3
        4
        5
        6
        7
        8
        9
        let studentName = {
            name: 'zhangsan',
        }

        let studentAge = {
            age: 72
        }

        let student = {...studentName, ...studentAge}

  7. 数组扩展

    1. map()：可以处理数组中的每一元素并返回。
    2. reduce()：可以处理数组中的每一个元素，并且遍历时下一次能使用上次的结果。

  8. Promise

  9. 模块化

    1. export与export default的区别：

      export可重复多次，并且需要用对象的某个属性接收。export default为一次性全部导出，只能使用一次，并且导出内容为一个对象，可以用任意名称的变量接收。

Vue2

Vue2官方文档

  1. MVVM
  2. 声明式渲染
  3. 双向绑定
  4. 事件处理
  5. 动态class
  6. 动态style
  7. 事件修饰符
  8. 按键修饰符
  9. 遍历
  10. 判断
  11. 计算属性
  12. 监听器
  13. 过滤
  14. 组件
  15. 生命周期、钩子函数

Webpack

Webpack中文文档

使用Vue-cli快速构建Vue前端工程。

构建步骤

  1. 安装全局webpack包

    1
    npm install webpack -g

  2. 安装全局vue-cli包

    1
    npm install @vue/cli-init

  3. 使用webpack模板初始化项目

    1
    vue init webpack <projecct-name>

ElementUI

ElementUI中文文档

在Vue工程使用ElementUI组件库

  1. 安装ElementUI

    1
    npm i element-ui -S

  2. 在main.js中导入ElemenUI

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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)
    });

疑问

  1. var与let的区别
  2. export与export default的区别

踩坑

  1. VirtualBox跟vagrant配置多次不成功，换成了VMware

  2. Spring-Cloud-Alibaba版本问题

  3. EasyConnect软件占用10000端口，导致项目无法启动