随笔分类 - 手摸手教你用vue+elementUI撸管理系统
摘要:前戏 现在会员管理就差一个功能没有实现了,那就是删除会员的功能。 删除二次确认对话框 实现效果如下 之前我们已经写好了删除按钮,并且定义好了删除方法 handDelete 现在就来实现这个方法,在实现之前先写好我们的接口 在 src/api/member.js 里写delete请求,完整代码如下 /
阅读全文
摘要:提交数据 前面我们已经实现了新增对话框,现在将数据提交给后台 提交成功接口返回的格式如下 { "code": "2001", "success": True, "msg": "会员添加成功" } 在 src/api/member.js 下新增添加会员的接口 // 会员管理接口 import requ
阅读全文
摘要:前戏 前面我们已经实现了会员列表的渲染,分页,搜索,重置功能,现在来实现会员的新增功能 效果如下 会员新增功能 代码如下 <template> <div> <!-- 搜索框 --> <!-- :inline="true" 表单一行显示 --> <!-- :model="searchMap" 绑定到这
阅读全文
摘要:前戏 前面我们已经实现了会员管理的搜索功能,但是有一个点用起来不舒服,当我们搜索完成之后,搜索框里的内容要手动一个一个删除,耽误了我们撩小姐姐的时间,我们可以给自己提一个需求,增加一个重置功能,点击重置清空搜索框里的内容。嗯,人人都是产品经理。 重置 代码如下 <template> <div> <!
阅读全文
摘要:查询 前面我们做分页的时候,发送了 post 请求,在URL里携带了size和page,我们还可以把搜索的参数携带过去,让后台进行处理,返回搜索后的结果 修改 src/api/member.js 里的代码,加上请求参数data ,代码如下 // 会员管理接口 import request from
阅读全文
摘要:分页 当数据过多的时候,我们肯定是要实现分页效果的,分页效果在每个列表页都应该存在 我们后台的接口为 http://127.0.0.1:8081/api/manage/search/member?page=1&size=2 其中的page为页码,size为每页显示的条数。请求方法为post 接口数据
阅读全文
摘要:前戏 前面我们已经调通了会员管理的接口,现在将接口返回的数据渲染到页面上,实现的结果如下图所示 会员管理列表数据渲染 在src/views/member/index.vue里写如下代码 <template> <div> <!-- 列表页面 :data绑定渲染的数据,data 里我们定义的上list
阅读全文
摘要:会员管理页面接口调通 现在来开发我们的会员管理页面,我们获取会员数据的接口格式如下 { "code": "2001", "success": true, "msg": "", "total": 78, "data": [ { "id": 30, "update_time": "2020-06-11
阅读全文
摘要:前戏 前面我们实现了退出功能,退出之后会清掉浏览器里保存的 token ,并且会返回到登录页面,让我们登录,但是有一个问题,当我们退出之后,访问首页,或者会员的 URL ,都是可以访问到的,这是因为虽然我们退出掉,并清理掉 token,但是我们访问其他页面是不需要token的,所以我们在访问非登录和
阅读全文
摘要:前戏 前面我们已经实现了登录功能,并且能成功登录,那退出功能也是必不可少的。 既然要实现退出功能,那肯定要知道在哪个组件里面写,修改密码和退出登录都是在 components/AppHeader/index.vue 里面 <!-- 下拉菜单--> <el-dropdown @command="han
阅读全文
摘要:前戏 实现的效果是怎样的呢?如下图所示 面包屑导航 elementUI提供了面包屑组件,可以方便我们快速的实现我们的效果,在components/AppMain/index.vue里写如下代码 <template> <div class="main"> <!-- $route.meta.title
阅读全文
摘要:前戏 前面我们已经搭建好了首页的一个大概样式,现在我们就来使用ElementUI搭建头部组件的效果 头部组件 代码如下 AppHeader/index.vue <template> <!-- logo和文字 --> <div class="header"> <a href="#/"> <!-- 点击
阅读全文
摘要:前戏 前面我们已经写好了登录页面,当正常登录后应该跳转到首页 我们的顶部导航栏和左侧导航栏一般是固定的,我们可以布局成下面的样式 整体项目布局 因为我们的首页是个公共的组件,点击会员管理,供应商管理都不会变,所以我们可以放在components 下面,在下面创建一个 Layout.vue 的文件,写
阅读全文
摘要:添加Mock数据 前面我们使用elementUI实现了登录页面和简单的校验,现在使用接口的方式来实现登录的逻辑 使用EasyMock添加两个接口 因为要访问EasyMock 模拟接口, 所以要把 接口地址改一下,在 .env.development 文件中修改如下: 注意:改成你自已的EasyMoc
阅读全文
摘要:登录页面开发 先把项目根目录下components和views目录下的文件都删掉 在 src\router\index.js 中配置路由(把原有的路由配置删除),如下: import Vue from "vue"; import VueRouter from "vue-router"; Vue.us
阅读全文
摘要:环境准备 在前面我们学了很多vue相关的知识,学的比较独立,现在来开发一个简单的系统,使用vue全家桶和elementUI把之前学的东西都串起来。 我们基于Vue-CLI脚手架创建项目,需要安装Node.js8.9+ 安装Vue-CLI npm install -g @vue/cli 安装成功后,在
阅读全文