SPA项目开发之动态树+数据表格+分页 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key="" index=""> <el-submenu> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template&g…

思路: 1.准备好后台(左侧树,带分页的文章查询) 2.将左侧树的数据绑定到elementui中的menu标签上 3.新增一个自定义组件用来展示文章列表的 4.绑定elementui提供的分页组件来完成分页功能 后台数据 t_vue_user t_vue_tree_node t_vue_articles 动态生成NavMenu导航菜单(只支持2级菜单) 结构 <el-menu key="" index=""> <el-submenu> <…

首先我们来看下数据库 t_vue_user t_vue_tree_node t_vue_articles 2. 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key="" index=""> <el-submenu> <template slot="title"> <i class="el-icon-location"></i> <span…

SPA项目开发 1.修改左侧动态树 LeftNav.vue <template> <el-menu router :" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" > &…

SPA项目开发--左侧树以及首页导航 1. Mock.js 前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而今天的主角mockjs就可以做到这一点    Mock.js是一个模拟数据的生成器,用来帮助前端调试开发.进行前后端的原型分离以及用来提高自动化测试效率.    众所周知Mock.js因为两个重要的特性风靡前端:   数据类型丰富   支持生成随机的文本.数字.布尔值.日期.邮箱.链接.图片.颜色等.   拦截Ajax请求   不需要修改既有代码,就可以拦截Ajax请求,…

使用vue-cli脚手架工具创建一个vue项目 vue init webpack pro01 npm安装elementUI cd pro01 #进入新建项目的根目录 安装: npm install axios -S npm install qs -S npm install vue-axios -S npm install element-ui -S 在指定位置!!!~~~添加三行代码在项目中src目录下找到main.js,并在指定位置添加三行代码(main.js是入口文件,所以在这里引入就行,…

前端 首先安装开发模板 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 就这样把4个一个个安装就可以了,出现err就重新下载 index.jsp import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import L…

Mock.js: 前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器,用来帮助前端调试开发.进行前后端的原型分离以及用来提高自动化测试效率. 众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富 支持生成随机的文本.数字.布尔值.日期.邮箱.链接.图片.颜色等. 拦截Ajax请求 不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据. 注1:easy-mock,一个在线模拟后台的数据平台 Mo…

CMD安装所需要的pom依赖 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S package.json中查看安装的依赖 引入main.js配置 在项目中src目录下找到main.js,并在指定位置添加三行代码(main.js是入口文件,所以在这里引入就行,页面就不用引入了) import Vue from 'vue' import ElementUI from 'e…

1. Mock.js 前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊! 2. 后端小哥,接口写好了没,我要测试啊! 前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器,用来帮助前端调试开发.进行前后端的原型分离以及用来提高自动化测试效率. Mock模块安装mockjs依赖下载这个模块npm install mockjs -D如果在packag…