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];
新手写博,请多多包涵~