谷粒学院5—阿里云OSS云存储及课程分类管理

EverydayOneCat

「🐈💤🎄🎁🤫!」
too late❌ 𝙏𝙞𝙥𝙨: 𝘾𝙖𝙩𝙬𝙤𝙧𝙡𝙙 𝙞𝙨 𝙖𝙡𝙬𝙖𝙮𝙨 𝙝𝙖𝙥𝙥𝙮 𝙝𝙤𝙡𝙞𝙙𝙖𝙮𝙨✅

e8abd9ade9e2029d1ea6e07ac2428dc32870ef18

阿里云存储OSS

在添加讲师中，我们还需要实现讲师头像的添加和显示。

这个和传智健康项目中我们图片云存储方案差不多，只是在那我们用的七牛云存储，在这个项目中，我们用阿里云OSS存储。大体还是很简单的。

1.新建云存储微服务

在service模块下创建子模块service-oss，配置pom

1
2
3
4
5
6
7
8
9
10
11
12
13
<dependencies>
    <!-- 阿里云oss依赖 -->
    <dependency>
        <groupId>com.aliyun.oss</groupId>
        <artifactId>aliyun-sdk-oss</artifactId>
    </dependency>

    <!-- 日期工具栏依赖 -->
    <dependency>
        <groupId>joda-time</groupId>
        <artifactId>joda-time</artifactId>
    </dependency>
</dependencies>

配置application.properties

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#服务端口
server.port=8002
#服务名
spring.application.name=service-oss

#环境设置：dev、test、prod
spring.profiles.active=dev
        
#阿里云 OSS
#不同的服务器，地址不同
aliyun.oss.file.endpoint=your endpoint
aliyun.oss.file.keyid=your accessKeyId
aliyun.oss.file.keysecret=your accessKeySecret
#bucket可以在控制台创建，也可以使用java代码创建
aliyun.oss.file.bucketname=guli-file

创建启动类后我们测试启动，发现报错

img

这是由于spring boot 会默认加载org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration这个类，而DataSourceAutoConfiguration类使用了@Configuration注解向spring注入了dataSource bean，又因为项目（oss模块）中并没有关于dataSource相关的配置信息，所以当spring创建dataSource bean时因缺少相关的信息就会报错。

解决办法：在@SpringBootApplication注解上加上exclude，解除自动加载DataSourceAutoConfiguration

1
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)

2.实现文件上传

2.1从配置文件读取常量

创建常量读取工具类：ConstantPropertiesUtil.java

用spring的 InitializingBean 的 afterPropertiesSet 来初始化配置信息，这个方法将在所有的属性被初始化后调用。

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
27
28
@Component
//用spring的 InitializingBean 的 afterPropertiesSet 来初始化配置信息，这个方法将在所有的属性被初始化后调用。
public class ConstantPropertiesUtil implements InitializingBean {
    @Value("${aliyun.oss.file.endpoint}")
    private String endpoint;

    @Value("${aliyun.oss.file.keyid}")
    private String keyid;

    @Value("${aliyun.oss.file.keysecret}")
    private String keysecret;

    @Value("${aliyun.oss.file.bucketname}")
    private String bucketname;

    public static String END_POINT;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;

    @Override
    public void afterPropertiesSet() throws Exception {
        END_POINT = endpoint;
        ACCESS_KEY_ID = keyid;
        ACCESS_KEY_SECRET = keysecret;
        BUCKET_NAME = bucketname;
    }
}

2.2文件上传

创建OssController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Api(description="阿里云文件管理")
@RestController
@RequestMapping("/oss/file")
@CrossOrigin
public class OssController {
    @Autowired
    private OssService ossService;

    //文件上传
    @PostMapping("upload")
    public R upload(MultipartFile file){
        String avatarUrl = ossService.upload(file);
        return R.ok().data("avatar",avatarUrl);
    }
}

在Service实现upload方法，OSS文件上传参照官网JavaSDK的快速入门

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
27
28
29
30
31
32
33
34
35
36
37
@Override
public String upload(MultipartFile file) {
    try {
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        String endpoint = ConstantPropertiesUtil.END_POINT;
        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
        String accessKeyId = ConstantPropertiesUtil.ACCESS_KEY_ID;
        String accessKeySecret = ConstantPropertiesUtil.ACCESS_KEY_SECRET;
        String bucketName = ConstantPropertiesUtil.BUCKET_NAME;
        // <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
        //我们需要将上传到文件按日期分类，如2021/1/17/01.jpg
        //为了防止同名文件上传报错，还要添加随机值
        String originalFilename = file.getOriginalFilename();
        int i = originalFilename.lastIndexOf('.');
        String substring = originalFilename.substring(i - 1);//后缀：.jpg
        String fileName = UUID.randomUUID().toString() + substring;
        String objectName = new DateTime().toString("yyyy/MM/dd") + "/" + fileName;

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 上传文件到指定的存储空间（bucketName）并将其保存为指定的文件名称（objectName）。
        InputStream input = file.getInputStream();
        ossClient.putObject(bucketName, objectName, input);

        // 关闭OSSClient。
        ossClient.shutdown();

        //https://jy741.oss-cn-hangzhou.aliyuncs.com/0c4154.jpg
        String avatarUrl = "https://" + bucketName + "." + endpoint + "/" + objectName;

        return avatarUrl;
    } catch (IOException e) {
        e.printStackTrace();
        return null;
    }
}

3.Nginx配置请求转发

由于现在后端多了一个模块，前端既要用到edu模块的8001端口，也要实现文件上传用到oss的8002端口，如果我们每个模块都在前端配置一个Base_URL，显然是很麻烦的。

我们的想法是前端只用一个Base_URL，但能通过路径中含有edu还是oss将请求转发到各个端口，Nginx符合我们的需求。

nginx概念回顾：《nginx史上最强入门教学》

07-nginx概念回顾

配置nginx代理：

在Nginx中配置对应的微服务服务器地址即可

注意：最好修改默认的 80端口到81

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
http {
    server {
        listen       81;
        ......
    }，
    
    ......
	server {
		listen 9001;
		server_name localhost;

		location ~ /serviceedu/ {           
			 proxy_pass http://localhost:8001;
		}
		
		location ~ /oss/ {    
			 proxy_pass http://localhost:8002;
		}
	}
}

重启nginx:

1
nginx -s reload

在前端修改config/dev.env.js

1
BASE_API: '"http://127.0.0.1:9001"'

4.前端整合图片上传组件

（1）从vue-element-admin复制组件到此前端模块：

vue-element-admin/src/components/ImageCropper
vue-element-admin/src/components/PanThumb

（2）添加文件上传组件

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
<!-- 讲师头像 -->
<el-form-item label="讲师头像">

    <!-- 头衔缩略图 -->
    <pan-thumb :image="teacher.avatar"/>
    <!-- 文件上传按钮 -->
    <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
    </el-button>

    <!--
v-show：是否显示上传组件
:key：类似于id，如果一个页面多个图片上传控件，可以做区分
:url：后台上传的url地址
@close：关闭上传组件
@crop-upload-success：上传成功后的回调 -->
    <image-cropper
                   v-show="imagecropperShow"
                   :width="300"
                   :height="300"
                   :key="imagecropperKey"
                   :url="BASE_API+'/admin/oss/file/upload'"
                   field="file"
                   @close="close"
                   @crop-upload-success="cropSuccess"/>

</el-form-item>

（3）js脚本实现上传和图片回显

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//引入组件模块
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  components: { ImageCropper, PanThumb },
  data() {
    return {
      //其它数据模型
      ......,
        
      BASE_API: process.env.BASE_API, // 接口API地址
      imagecropperShow: false, // 是否显示上传组件
      imagecropperKey: 0 // 上传组件id
    }
  },
    
  ......,
    
  methods: {
    //其他函数
    ......,

    // 上传成功后的回调函数
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      this.teacher.avatar = data.url
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },

    // 关闭上传组件
    close() {
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    }
  }
}

课程分类管理

1.EasyExcel使用

1.1EasyExcel简介

  • Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行，但是一旦并发上来后一定会OOM或者JVM频繁的full gc。
  • EasyExcel是阿里巴巴开源的一个excel处理框架，以使用简单、节省内存著称。EasyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据一次性全部加载到内存中，而是从磁盘上一行行读取数据，逐个解析。
  • EasyExcel采用一行一行的解析模式，并将一行的解析结果以观察者的模式通知处理（AnalysisEventListener）。

pom中引入xml相关依赖：

1
2
3
4
5
6
7
8
<dependencies>
    <!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>easyexcel</artifactId>
        <version>2.1.1</version>
    </dependency>
</dependencies>

1.2Excel写

（1）创建实体类，设置表头和添加的数据字段

1
2
3
4
5
6
7
8
9
10
@Data
public class DemoData {
    //设置表头名称
    @ExcelProperty("学生编号")
    private int sno;
    
	//设置表头名称
    @ExcelProperty("学生姓名")
    private String sname;
}

（2）实现写操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//循环设置要添加的数据，最终封装到list集合中
private static List<DemoData> data() {
    List<DemoData> list = new ArrayList<DemoData>();
    for (int i = 0; i < 10; i++) {
        DemoData data = new DemoData();
        data.setSno(i);
        data.setSname("张三"+i);
        list.add(data);
    }
    return list;
}

public static void main(String[] args) throws Exception {
    String fileName = "F:\\11.xlsx";
    // 这里 需要指定写用哪个class去写，然后写到第一个sheet，名字为模板 然后文件流会自动关闭
    // 如果这里想使用03 则 传入excelType参数即可
    EasyExcel.write(fileName, DemoData.class).sheet("111").doWrite(data());
}

1.3Excel读

（1）创建实体类

1
2
3
4
5
6
7
8
9
10
@Data
public class ReadData {
    //设置列对应的属性
    @ExcelProperty(index = 0)
    private int sid;
    
    //设置列对应的属性
    @ExcelProperty(index = 1)
    private String sname;
}

（2）创建读取操作的监听器，需要继承AnalysisEventListener类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//创建读取excel监听器
public class ExcelListener extends AnalysisEventListener<ReadData> {

    //创建list集合封装最终的数据
    List<ReadData> list = new ArrayList<ReadData>();

    //一行一行去读取excle内容
    @Override
    public void invoke(ReadData user, AnalysisContext analysisContext) {
       System.out.println("***"+user);
        list.add(user);
    }

    //读取excel表头信息
    @Override
    public void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {
        System.out.println("表头信息："+headMap);
    }

    //读取完成后执行
    @Override
    public void doAfterAllAnalysed(AnalysisContext analysisContext) {
    }
}

（3）调用实现最终的读取

1
2
3
4
5
6
   public static void main(String[] args) throws Exception {
       
        String fileName = "F:\\01.xlsx";
        // 这里 需要指定读用哪个class去读，然后读取第一个sheet 文件流会自动关闭
        EasyExcel.read(fileName, ReadData.class, new ExcelListener()).sheet().doRead();
}

2.添加课程分类

我们希望通过读取Excel表格来实现对课程分类的添加。

2.1创建和Excel对应的实体类

1
2
3
4
5
6
7
8
@Data
public class ExcelSubjectData {
    @ExcelProperty(index = 0)
    private int oneSubjectName;

    @ExcelProperty(index = 1)
    private String twoSubjectName;
}

2.2基本模块

service-edu模块配置EasyExcel依赖

用MybatisPlus代码生成器生成代码，修改EduSubjectController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Api(description="课程分类管理")
@RestController
@RequestMapping("/serviceedu/subject")
@CrossOrigin
public class EduSubjectController {

    @Autowired
    private EduSubjectService subjectService;

    //根据excel添加课程分类
    @PostMapping("add")
    public R add(MultipartFile file){
        subjectService.add(file,subjectService);
        return R.ok();
    }
}

Service实现方法

1
2
3
4
5
6
7
8
9
10
@Override
public void add(MultipartFile file, EduSubjectService subjectService) {
    try {
        //调用EasyExcel工具实现对excel表格的读取和操作
        InputStream input = file.getInputStream();
        EasyExcel.read(input, ExcelSubjectData.class,new SubjectExcelListener(subjectService)).sheet().doRead();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

2.3创建读取Excel监听器

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
public class SubjectExcelListener extends AnalysisEventListener<ExcelSubjectData> {

    //由于SubjectExcelListener需要自己new,不能交给Spring管理，所以注入不了其他对象，也就实现不了数据库操作
    //我们需要创建一个属性，在它new的时候赋值，相当于注入进来
    public EduSubjectService subjectService;

    public SubjectExcelListener(EduSubjectService subjectService) {
        this.subjectService = subjectService;
    }
    public SubjectExcelListener() {
    }

    //一行一行读取时做的操作
    @Override
    public void invoke(ExcelSubjectData excelSubjectData, AnalysisContext analysisContext) {
        if(excelSubjectData==null){
            throw  new GuliException(20001,"文件为空！");
        }

        //一行一行读取，每次两个值：一级分类和二级分类
        EduSubject oneSubject = existOneSubject(subjectService, excelSubjectData.getOneSubjectName());
        if (oneSubject == null) {//没有相同的一级分类，可以添加
            oneSubject = new EduSubject();
            oneSubject.setTitle(excelSubjectData.getOneSubjectName());
            oneSubject.setParentId("0");
            subjectService.save(oneSubject);
        }

        EduSubject twoSubject = existTwoSubject(subjectService, excelSubjectData.getTwoSubjectName(),
                oneSubject.getId());
        if (twoSubject == null) {//没有相同的二级分类，可以添加
            twoSubject = new EduSubject();
            twoSubject.setTitle(excelSubjectData.getTwoSubjectName());
            twoSubject.setParentId(oneSubject.getId());
            subjectService.save(twoSubject);
        }
    }

    //判断一级分类不能重复添加
    private EduSubject existOneSubject(EduSubjectService subjectService,String oneName){
        QueryWrapper<EduSubject> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id","0");
        wrapper.eq("title",oneName);
        EduSubject eduSubject = subjectService.getOne(wrapper);
        return eduSubject;
    }

    //判断二级分类不能重复添加
    private EduSubject existTwoSubject(EduSubjectService subjectService,String twoName,String pid){
        QueryWrapper<EduSubject> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",pid);
        wrapper.eq("title",twoName);
        EduSubject eduSubject = subjectService.getOne(wrapper);
        return eduSubject;
    }

    //读取完毕做的操作
    @Override
    public void doAfterAllAnalysed(AnalysisContext analysisContext) {

    }
}

2.4用Swagger测试

创建一个Excel文件

image-20210119115027017

测试发现成功导入

image-20210119115100018

2.5配置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 课程分类管理
{
  path: '/edu/subject',
  component: Layout,
  redirect: '/edu/subject/list',
  name: 'Subject',
  meta: { title: '课程分类管理', icon: 'nested' },
  children: [
    {
      path: 'list',
      name: 'EduSubjectList',
      component: () => import('@/views/edu/subject/list'),
      meta: { title: '课程分类列表' }
    },
    {
      path: 'import',
      name: 'EduSubjectImport',
      component: () => import('@/views/edu/subject/import'),
      meta: { title: '导入课程分类' }
    }
  ]
},

2.6页面实现

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
27
28
29
30
31
32
33
34
35
<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="信息描述">
        <el-tag type="info">excel模版说明</el-tag>
        <el-tag>
          <i class="el-icon-download"/>
          <a :href="'/static/01.xlsx'">点击下载模版</a>
        </el-tag>

      </el-form-item>

      <el-form-item label="选择Excel">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="importBtnDisabled"
          :limit="1"
          :action="BASE_API+'/serviceedu/subject/add'"
          name="file"
          accept="application/vnd.ms-excel"><!-- 规定只能是excel文件 -->
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button
            :loading="loading"
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload">{{ fileUploadBtnText }}</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

定义js方法

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
export default {
    data(){
        return {
            BASE_API: process.env.BASE_API, // 接口API地址
            fileUploadBtnText: '上传到服务器', // 按钮文字
            importBtnDisabled: false, // 按钮是否禁用,
            loading: false
        }
    },
    created(){

    },
    methods: {
        submitUpload(){
            this.fileUploadBtnText = '正在上传'
            this.importBtnDisabled = true
            this.loading = true
            //this.$refs是找到全部组件并合成一个数组
            this.$refs.upload.submit()
        },

        //上传成功
        fileUploadSuccess(){
            this.fileUploadBtnText = '导入成功'
            this.loading = false
            this.$message({
                type: 'success',
                message: response.message
            })
        },

        fileUploadError(){
            this.fileUploadBtnText = '导入失败'
            this.loading = false
            this.$message({
            type: 'error',
            message: '导入失败'
            })
        }
    }
}
</script>

3.课程分类列表

3.1分析

我们想把课程分裂通过树形图的方式实现出来，参照模块一开始的tree/index.vue，分析后端接口返回的数据类型

image-20210119181326501

可以看到返回的数据整体是一个List，List里面封装的Map或者自定义的类，其中children这个属性封装的还是一个List的嵌套。

我们这里通过创建自定义的类实现对返回结果的封装：

（1）创建OneSubject：

1
2
3
4
5
6
@Data
public class OneSubject {
    private String id;
    private String title;
    private List<TwoSubject> children;
}

（2）创建TwoSubject：

1
2
3
4
5
@Data
public class TwoSubject {
    private String id;
    private String title;
}

3.2后端实现

Controller：

1
2
3
4
5
6
//课程分类列表（树形）
@GetMapping("getAllSubject")
public R getAllSubject(){
    List<OneSubject> list = subjectService.getAllSubject();
    return R.ok().data("items",list);
}

Service：

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
27
28
29
30
31
32
33
34
35
36
@Override
public List<OneSubject> getAllSubject() {
    //查询所有一级分类(parent_id==0)
    QueryWrapper<EduSubject> oneWrapper = new QueryWrapper<>();
    oneWrapper.eq("parent_id","0");
    List<EduSubject> eduOneSubjects = baseMapper.selectList(oneWrapper);
    //查询所有二级分类(parent_id!=0)
    QueryWrapper<EduSubject> twoWrapper = new QueryWrapper<>();
    twoWrapper.ne("parent_id","0");
    List<EduSubject> eduTwoSubjects = baseMapper.selectList(twoWrapper);

    //最终返回值
    List<OneSubject> list = new ArrayList<>();

    //封装一级分类
    for (EduSubject eduOneSubject : eduOneSubjects) {
        OneSubject oneSubject = new OneSubject();
        //使用BeanUtils工具类直接复制对象
        BeanUtils.copyProperties(eduOneSubject,oneSubject);

        List<TwoSubject> children = new ArrayList<>();
        //封装二级分类
        for (EduSubject eduTwoSubject : eduTwoSubjects) {
            if(eduTwoSubject.getParentId().equals(eduOneSubject.getId())){
                TwoSubject twoSubject = new TwoSubject();
                BeanUtils.copyProperties(eduTwoSubject,twoSubject);
                children.add(twoSubject);
            }
        }
        oneSubject.setChildren(children);

        list.add(oneSubject);
    }

    return list;
}

通过Swagger测试符合要求：

image-20210119181813045

3.3前端实现

创建api/edu/subject.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import request from '@/utils/request'

const subject_baseurl = '/serviceedu/subject'

export default{
    //1 课程分类列表
    getAllSubject(){
        return request({
            url: `${subject_baseurl}/getAllSubject`,
            method: 'get'
        })
    }
}

导入组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />

    <el-tree
      ref="tree2"
      :data="data2"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />

  </div>
</template>

编写js方法

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
27
28
29
30
31
32
33
34
35
36
<script>
import subject from '@/api/edu/subject'
export default {
  data() {
    return {
      filterText: '',
      data2: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  created(){
    this.getAllSubjectList()
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },

  methods: {
      //这里的toLowerCase方法是为了过滤时不区分大小写，日常的验证码也用的同一个逻辑：把所有的变成小写再比较
    filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    },
    getAllSubjectList(){
        subject.getAllSubject().then(res=>{
            this.data2 = res.data.items
        })
    }
  }
}
</script>

结语

最近我的剑鞘动了，👴的S7肌肉记忆要被唤醒了吗

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家