天津网站建设服务公司,曲阜市政对过做网站的是那家,承德市建设局网站电话,律师在哪个网站做目录 动态树
数据表 案列
书籍管理 动态树 动态树#xff08;Dynamic tree#xff09;是一种数据结构#xff0c;它可以在树中动态地插入、删除和修改节点。与静态树不同#xff0c;静态树的节点是固定的#xff0c;一旦构建完成就无法再进行修改。而动态树可以在运行时…目录 动态树
数据表 案列
书籍管理 动态树 动态树Dynamic tree是一种数据结构它可以在树中动态地插入、删除和修改节点。与静态树不同静态树的节点是固定的一旦构建完成就无法再进行修改。而动态树可以在运行时根据需要进行节点的插入、删除和修改操作。 在计算机科学中动态树常用于解决一些与树相关的问题如动态连通性问题、动态最小生成树问题等。动态树的设计和实现较为复杂通常会使用一些高级数据结构和算法如平衡二叉树、堆等。 动态树的应用场景很广泛例如在网络路由算法中可以使用动态树来维护网络拓扑结构以便动态地调整路由路径在图像处理中可以使用动态树来表示图像的层次结构以便进行图像的快速搜索和修改等。 数据表
首先先创建数据表以及添加好数据 案列
在src/api目录下增加action.js的地址配置
/*** 对后台请求的地址的封装URL格式如下* 模块名_实体名_操作*/
export default {SERVER: http://localhost:8080/ssm, //服务器SYSTEM_USER_DOLOGIN: /user/userLogin, //登陆SYSTEM_USER_DOREG: /userAction.action, //注册SYSTEM_MENUS: /module/queryRootNode, //左侧菜单树getFullPath: k { //获得请求的完整地址用于mockjs测试时使用return this.SERVER this[k];}
}AppMain.vue的组件代码中修改template标签中的代码
templateel-container classmain-containerel-aside v-bind:classasideClassLeftNav/LeftNav/el-asideel-containerel-header classmain-headerTopNav/TopNav/el-headerel-main classmain-centerrouter-view/router-view/el-main/el-container/el-container
/template LeftNav.vue编写组件中的代码
templateel-menu router :default-active$route.path default-active2 classel-menu-vertical-demo background-color#334157 text-color#fffactive-text-color#ffd04b :collapsecollapseddiv classlogoboximg classlogoimg src../assets/img/logo.png alt/divel-submenu v-form in menus :indexidx_m.id :keykey_m.idtemplate slottitlei :classm.iocn/ispan{{m.text}}/span/templateel-menu-item v-form2 in m.modules :indexm2.url :keykey_m2.idi classm2.icon/ispan{{m2.text}}/span/el-menu-item/el-submenu/el-menu
/template
scriptexport default {data() {return {collapsed: false,menus: []}},created() {this.$root.Bus.$on(aaa, v {this.collapsed v;});let url this.axios.urls.SYSTEM_MENUS;this.axios.get(url, {}).then(r {console.log(r);this.menus r.data.rows;}).catch(e {})}}
/script
style.el-menu-vertical-demo:not(.el-menu--collapse) {width: 240px;min-height: 400px;}.el-menu-vertical-demo:not(.el-menu--collapse) {border: none;text-align: left;}.el-menu-item-group__title {padding: 0px;}.el-menu-bg {background-color: #1f2d3d !important;}.el-menu {border: none;}.logobox {height: 40px;line-height: 40px;color: #9d9d9d;font-size: 20px;text-align: center;padding: 20px 0px;}.logoimg {height: 40px;}
/style在src/views目录中创建book文件再在book的文件下创建以下两个组件
AddBook.vue
templateh1书籍的新增/h1
/templatescript
/scriptstyle
/style BookList.vue
templateh1书籍的数据/h1
/templatescript
/scriptstyle
/style
在src/router目录中的index.js下配置路径
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorld
import AppMain from /components/AppMain
import LeftNav from /components/LeftNav
import TopNav from /components/TopNav
import Login from /views/Login
import Register from /views/Register
import AddBook from /views/book/AddBook
import BookList from /views/booK/BookList
Vue.use(Router)export default new Router({routes: [{path: /,name: Login,component: Login}, {path: /Register,name: Register,component: Register}, {path: /AppMain,name: AppMain,component: AppMain,children: [{path: /LeftNav,name: LeftNav,component: LeftNav}, {path: /TopNav,name: TopNav,component: TopNav},{path: /book/AddBook,name: AddBook,component: AddBook}, {path: /booK/BookList,name: BookList,component: BookList}]}]
})效果图 书籍管理 BookList.vue 的组件中编写
templatediv classBook stylepadding: 30px;!-- 输入框搜索 --el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称 : el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-itemel-button typeprimary plain clickonSubmit查询/el-button/el-form-item/el-form!-- 书籍的书籍表格 --el-table :datatableData stylewidth: 100%el-table-column propid label书籍ID/el-table-columnel-table-column propbookname label书籍名称/el-table-columnel-table-column propprice label书籍价格/el-table-columnel-table-column propbooktype label书籍类型/el-table-column/el-table!-- 分页 --div classblock stylepadding: 20px;el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepagebackground :page-sizes[10, 20, 30, 40] :page-sizerows layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div/div/templatescriptexport default {data() {return {bookname: ,tableData: [],rows: 10,total: 0,page: 1}},methods: {handleSizeChange(r) {//当页大小发生变化let params {bookname: this.bookname,rows: r,page: this.page}// console.log(params)this.query(params);},handleCurrentChange(p) {//当前页码大小发生变化let params {bookname: this.bookname,rows: this.rows,page: p}// console.log(params)this.query(params);},query(params) {//获取后台请求书籍数据的地址let url this.axios.urls.SYSTEM_BookList;this.axios.get(url, {params: params}).then(d {console.log(url)this.tableData d.data.rows;this.total d.data.total;}).catch(e {});},onSubmit() {let params {bookname: this.bookname}console.log(params)this.query(params);this.bookname }},created() {this.query({})}}
/scriptstyle
/style
查询效果
