SPA项目开发之动态实现左侧菜单栏&查询功能

目录

一、动态左侧菜单

        1.1 实现动态左侧菜单的步骤

        1.2 测试

二、书籍列表查询功能

        2.1 自定义书籍展示组件

        2.2 测试

        2.3 总结

---

一、动态左侧菜单

1.1 实现动态左侧菜单的步骤

① 确定静态树形菜单节点的样式排版；

② 获取属性节点的数据；

this.axios.post

③ 通过拿到的数据，渲染树形节点。

        v-for 渲染节点

        定义渲染节点的变量

Leaf这里就直接放上写好的LeftNav.vue组件：

LeftNav.vue

④ 在AppMain.vue定义一个锚点

---

二、书籍列表查询功能

2.1 自定义书籍展示组件

自定义一个组件，编写书籍列表表单，并且向后台请求数据。

这里就直接放上写好的组件代码啦，就是要记得配置到路由就好了。

Articles

2.2 测试

我们配置好路由后，就可以来测试一下咯：

测试分页条：

测试搜索筛选：

2.3 总结

然后还是总结一下文章查询功能：

1、el-table 列表组件

2、利用axios调用后台的文章查询接口 ---> created

3、el-pagination 列表组件

size-change 页大小改变调用的事件

current-change 页码改变调用的事件

4、优化 将调用后台的文章查询接口的代码进行封装

5、el-form 查询的筛选条件（传参查询）