vue的细节

1.如果使用路由跳转到别的界面的话，例如从文章list页面跳转到具体文章查看详情页，查看某一个具体就需要传递那个文章的id去后台查询，

this.$router.push的params方法可以实现传递，但是如果在详情页面再一次刷新，你会发现详情页面数据没有了。就需要用query属性把需要的参数传递过去即可解决问题

this.$router.push({
  name: 'ArticleDetail',
  query: {
    articleId: obj.id,
  },
  path: '/article/detail',
});

2.讲讲饿了么的插件element-ui的组件el-cascade级联选择器的使用

当时在做二级联动，其实select框也可以实现但是cascade不是更方便嘛。

首先提供了:options属性，只要指定选项数组即可渲染出一个级联选择器。代码如下

<el-cascader
    :options="options"
    v-model="selectedOptions"
    @change="handleChange"
　　:props="props"
>
  </el-cascader>
 

options数组通过：props来进行数据渲染的。这个属性有三个默认值，value,label,children。可以想象成id，名字和子选项数组，子选项下属性以此类推，还是value,label,children。具体如下图；

可以通过props来修改三个属性值，例如

 props: {
        value: 'id',
        label: 'name',
        children: 'subjects',
      }

我做的是分类下的主题。是个二级联动。效果如下：

 

 那么就要往options数组中塞值，首先在vue界面声明如下数据，

data() {
    return {
      props: {
        value: 'id',
        label: 'name',
        children: 'subjects',
      },
      options: [],
    }
}

接着查询出分类下的所有数据，往options中塞值，代码如下：

async function getTopicIds() {
  const result = await getSubjects();
  if (result.code === 1200) {
    const topicIds = [];
    const topicArr = [];
    result.data.subjects.forEach((sub) => {
      const topic = {};
      if (topicIds.indexOf(sub.topic.id) === -1) {
        topicIds.push(sub.topic.id);
        topic.id = sub.topic.id;
        topic.name = sub.topic.name;
        topic.subjects = [];
        topicArr.push(topic);
      }
      topicArr.forEach((top) => {
        if (top.id === sub.topic.id) {
          top.subjects.push(sub);
        }
      });
    });
    this.options = topicArr;
  }
}

这个时候就可以渲染数据了。

js方法getSubjects如下：

export function getSubjects() {
  return fetch({
    url: '/api/subjects',
    method: 'get',
  });
}

后台代码：

subject（主题）和Topic（分类）两个类：

import lombok.Data;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.DBRef;
import org.springframework.data.mongodb.core.mapping.Document;

import java.util.List;

@Data
@Document
public class Subject {
    /**
     * id
     */
    @Id
    private String id;

    /**
     * 名称
     */
    private String name;/**
     * 主题分类
     * 父类
     */
    @DBRef
    private Topic topic;

    /**
     * 删除标志位
     */
    private Integer isDeleted;

}

import lombok.Data;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.DBRef;
import org.springframework.data.mongodb.core.mapping.Document;

import java.util.List;

@Data
@Document
public class Topic {
    /**
     * id
     */
    @Id
    private String id;

    /**
     * 名称
     */
    private String name;

    /**
     * 图片
     */
    private String image;

    /**
     * 删除标志位
     */
    private Integer isDeleted;


}

controller层代码：

/**
     * 获取分类下的所有主题
     **/
    @GetMapping("{topicId}/subjects")
    public ResultData getSubject(@PathVariable("topicId") String topicId){
        Optional<Topic> topicOptional = topicRepository.findByIdAndIsDeleted(topicId, SimpleStatus.NO.getCode());
        if (topicOptional.isPresent()) {
            List<Subject> subjectList = subjectRepository.findByTopicAndIsDeleted(topicOptional.get(),SimpleStatus.NO.getCode());
            List<SubjectDTO> subjectDTOList = subjectList.stream().map(SubjectDTO::new).collect(Collectors.toList());
            return ResultData.ok().putDataValue("subjects",subjectDTOList);
        } else {
            return ResultData.notFound();
        }
    }

持久层采用的mongodb，有兴趣的小伙伴可以研究一下

 

然后是数据回显（例如修改或者查看详情时），级联框的v-model需要进行赋值，elementui中的组件大概都是用id来做检索，所以把selectOptions用分类和分类下的主题id塞值即可，样子如下。

  this.selectOptions = [subject.topic.id, subject.id];

新手写博，请多多包涵~