类后台管理笔记本项目, 难度初中级
发布于 13天前 作者 86driver 368 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

类后台管理笔记本项目, 难度初中级

预览地址 https://86driver.github.io/vue-admin-note/vue-admin/dist/#/login

github https://github.com/86driver/vue-admin-note

测试账号 610410574 密码 a203215

项目介绍

这是一个类似于后台管理系统的笔记本, 利用接口实现了增添改查功能,是一个不错的练习, 对于有基础的朋友大概一个多礼拜能完成 利用接口做了路由拦截,用户需要登录才能看到里面的内容 每个用户只能看到自己做的笔记 笔记本列表页:每一行数据相当于一个笔记本,在这里可以新建笔记本和导出现有页面的笔记, 需要注意的是如果该笔记本内如果还有笔记的话是不能删除这个笔记本的 笔记详情页:在这个页面可以看到某一笔记本下做的笔记, 在这个页面您可以切换不同的笔记本、在该笔记本下添加、修改和保存笔记, 在这个页面删除的笔记本会放回回收站 回收站页:在这个页面您可以看到您之前在笔记详情页面删除的笔记,在这个页面您可以恢复笔记 需要注意的是在回收站删除的笔记不可恢复

用到了什么

响应式布局:header页面和sider页面的响应式布局 当浏览器窗口小于一定尺寸的时候侧边导航栏消失,出现类似于手机端的导航按钮 vue全家桶:由于demo需要保存的数据不多,所以没有用到vuex iview UI框架 axios 获取后台数据

展示

登录页面

loginPage.png

笔记列表页面

notebookPage.png

笔记详情页面

noteDetailPage.png

回收站页面trashPage.png

统计页面

chartPage.png

项目相关(抽屉功能)

about1.png

响应式(窗口减小时)

响应式展示.png

绝对对您有帮助可以点击这里给个star STAR

回到顶部