关于富文本编辑器

在网页中，富文本编辑器可以允许用户实现图文混排。

在HTML中，并没有富文本编辑器的控件，所有富文本编辑器都是第三方的！

以wangeditor为例，首先，需要安装：

npm i wangeditor -S

安装完成后，需要在main.js中添加配置：

import wangEditor from 'wangeditor';

Vue.prototype.wangEditor = wangEditor;

完成配置后，此富文件编辑器就处于随时可用的状态！

在具体时，首先，应该在你希望使用富文本器的区域添加任意标签，例如：

后续，整个富文本编辑器会插入到以上<div>标签的子级，以上<div>标签的id是必须的，值是自定义的。

为了保证在各个方法中都可以访问到此富文本编辑器，应该先声明全局属性，表示它：

注意：以上变量名不可以是wangEditor，否则，后续通过this.wangEditor将无法访问到在main.js中配置的此名称对应的对象！

然后，在页面刚刚打开时，创建并初始化此富文本编辑器，则声明新的函数用于创建并初始化：

提示：以上this.editor.config.zIndex = 1;的作用是将富文本编辑调整到偏底的层级，避免遮挡了其它绝对定位的层，例如，如果没有此配置，富文本编辑器将遮挡Element UI的弹出窗口！

然后，在mouted()生命周期方法中调用以上函数：

当需要获取富文本编辑器中的内容时，调用编辑器对象的txt属性的html()方法即可获取对应的HTML源代码，例如：

执行效果例如：

新增SPU--服务器端

创建SpuAddNewDTO类，实现Serializable接口，添加@Data注解
- name, type_number, title, description, list_price, stock, stock_threshold, unit, brand_id, category_id, attribute_template_id, album_id, pictures, keywords, tags, sort, detail
  - 注意使用驼峰命名法
创建ISpuService接口，添加@Transactional注解，定义抽象方法：
- void addNew(SpuAddNewDTO spuAddNewDTO);

创建SpuServiceImpl类，实现ISpuService接口，添加@Service注解，重写抽象方法：

public void addNew(SpuAddNewDTO spuAddNewDTO) {
    // 检查品牌：是否存在，是否启用
    
    // 检查类别：是否存在，是否启用，是否不包含子级
    
    // 检查相册：是否存在
    
    // 创建Spu对象
    // 复制属性值
    // 补全属性值：id >>> 暂时随便写
    // 补全属性值：brand_name, category_name >>> 此前检查时的查询结果
    // 补全属性值：sales, comment_count, positive_comment_count >>> 0
    // 补全属性值：is_deleted, is_published, is_new_arrival, is_recommend >>> 0 
    // 补全属性值：is_checked >>> 0, check_user >>> null, gmt_check >>> null
    // 插入Spu数据
    
    // 创建SpuDetail对象
    // 补全属性值：spu_id >>> 与以上Spu的ID相同
    // 补全属性值：detail >>> 来自参数
    // 插入SpuDetail数据
}

创建测试类，测试以上方法是否可以正确执行
控制器部分，可以从此前其它控制器中参考

Spring AOP

AOP：面向切面的编程

注意：AOP技术源自AspectJ，并不是Spring框架特有的技术，只是Spring很好的支持了AOP

AOP技术主要解决了“若干个不同的方法均需要执行相同的任务”的问题！

在许多框架中，使用AOP实现了：事务管理、安全检查、其它。

在项目中，数据的处理流程大致是：

用户登录：请求 ---> Controller ---> Service ---> Mapper
新增相册：请求 ---> Controller ---> Service ---> Mapper
属性列表：请求 ---> Controller ---> Service ---> Mapper

假设存在一个需求：统计处理任何请求的过程中，Service的执行耗时。

在Spring Boot项目中要使用AOP，需要添加依赖项：

<!-- Spring Boot支持AOP编程 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-aop</artifactId>
</dependency>

然后，创建切面类，实现AOP编程，例如：

package cn.tedu.csmall.product;

import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.springframework.stereotype.Component;

import java.util.Arrays;

/**
 * 统计各Service方法执行耗时的切面
 *
 * @author java@tedu.cn
 * @version 0.0.1
 */
@Aspect // 切面
@Component // 组件
public class TimerAspect {

    // 连接点（JoinPoint）：程序执行过程中的某个节点，例如调用了某个方法
    // 切入点（PointCut）：选择1个或多个连接点的表达式
    // -----------------------------------------------------------
    // 通知（Advice）注解
    // @Around：环绕连接点，即包裹了连接点，你写的代码可以在连接点之前和之后执行
    // @Before：在连接点之前执行
    // @AfterReturning：仅当连接点方法正常返回后执行，也就是说，当抛出异常时不会执行
    // @AfterThrowing：仅当连接点方法抛出异常时执行，也就是说，当方法没有抛出异常，而是正常返回时并不会执行
    // @After：在连接点之后执行
    // 以上各Advice执行例如：
    // @Around
    // try {
    //     @Before
    //     执行连接点
    //     @AfterReturning
    // } catch (Throwable e) {
    //     @AfterThrowing
    // } finally {
    //     @After
    // }
    // @Around
    // -----------------------------------------------------------
    // execution()的配置是使用AOP时的“切入点表达式”，用于匹配某些方法
    // 在切入点表达式中，可以使用通配符
    // -- 星号：任意1次匹配
    // -- 2个连续的小数点：任意n次匹配，仅能用于包名和参数列表
    //                 ↓ 返回值类型
    //                   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 包名
    //                                                  ↓ 类名
    //                                                    ↓ 方法名
    //                                                      ↓↓ 参数列表
    // 另外，在表达式中，方法的返回值类型左侧还可以指定修饰符，修饰符是可选的
    // 注解是典型的修饰符之一
    @Around("execution(* cn.tedu.csmall.product.service.*.*(..))")
    public Object timer(ProceedingJoinPoint pjp) throws Throwable {
        System.out.println("TimerAspect切面中的方法开始执行");
        String targetClassName = pjp.getTarget().getClass().getName();// 类型
        String signatureName = pjp.getSignature().getName();// 方法的声明中的方法名
        Object[] args = pjp.getArgs();// 方法的参数列表
        System.out.println("类型：" + targetClassName);
        System.out.println("方法名：" + signatureName);
        System.out.println("参数：" + Arrays.toString(args));

        // 记录开始时间
        long start = System.currentTimeMillis();

        // 执行连接点方法
        // 注意：调用proceed()方法时，必须获取返回值，并作为当前切面方法的返回值
        // 注意：调用proceed()方法时，必须抛出异常，或在捕获到异常后再次抛出异常，否则，Controller将无法知晓曾经出现过异常，更不会向客户端响应错误信息
        Object result = pjp.proceed();

        // 记录结束时间
        long end = System.currentTimeMillis();

        // 显示执行耗时
        System.out.println("执行耗时：" + (end - start));

        // 必须返回调用proceed()方法的结果
        return result;
    }

}

Day17-关于富文本编辑器

关于富文本编辑器

新增SPU--服务器端

Spring AOP