您现在的位置是:首页 > 技术教程 正文

【前端】Vue+Element UI案例:通用后台管理系统-项目总结

admin 阅读: 2024-03-30
后台-插件-广告管理-内容页头部广告(手机)

文章目录

    • 相关链接
    • 前言
    • 效果
      • 登录页
      • 首页
        • 管理员的首页
        • xiaoxiao的首页
      • 用户管理
    • 总结
      • 项目搭建
      • 左侧:CommonAside
      • 上侧:CommonHeader和CommonTag
      • 首页:Home.vue
      • 用户管理:User.vue
      • 登录页:Login.vue
    • 总代码(已开源)

相关链接

参考视频:VUE项目,VUE项目实战,vue后台管理系统,前端面试,前端面试项目

案例链接
【前端】Vue+Element UI案例:通用后台管理系统-导航栏(视频p1-16)https://blog.csdn.net/karshey/article/details/127640658
【前端】Vue+Element UI案例:通用后台管理系统-Header+导航栏折叠(p17-19)https://blog.csdn.net/karshey/article/details/127652862
【前端】Vue+Element UI案例:通用后台管理系统-Home组件:卡片、表格(p20-22)https://blog.csdn.net/karshey/article/details/127674643
【前端】Vue+Element UI案例:通用后台管理系统-Echarts图表准备:axios封装、mock数据模拟实战(p23-25)https://blog.csdn.net/karshey/article/details/127735159
【前端】Vue+Element UI案例:通用后台管理系统-Echarts图表:折线图、柱状图、饼状图(p27-30)https://blog.csdn.net/karshey/article/details/127737979
【前端】Vue+Element UI案例:通用后台管理系统-面包屑、tag栏(p31-35)https://blog.csdn.net/karshey/article/details/127756733
【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出(p36-38)https://blog.csdn.net/karshey/article/details/127787418
【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框(p39-42)https://blog.csdn.net/karshey/article/details/127777962
【前端】Vue+Element UI案例:通用后台管理系统-登陆页面Login(p44)https://blog.csdn.net/karshey/article/details/127795302
【前端】Vue+Element UI案例:通用后台管理系统-登陆页面功能:登录权限跳转、路由守卫、退出(p45-46)https://blog.csdn.net/karshey/article/details/127849502
【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由(p47-48)https://blog.csdn.net/karshey/article/details/127865621

前言

这个项目做了半个月,这半个月里我从一个只了解vue相关语法规则的小白变成了稍微熟悉vue的小白,在写项目的时候熟悉了(包括但不限于):组件化思想、axios、mock、cookie、vue-router、ElementUI。

在写项目过程中,以前只是匆匆掠过或了解的知识通过项目的实际运用变得生动了起来,很多知识知其然更知其所以然了。从p1-p47,我们是从项目的每个小部分开始,慢慢拼成一个项目。接下来我们将从上到下地纵览这个项目。

效果

我们先看看项目长成啥样:

登录页

在这里插入图片描述

首页

我们有两个用户:admin和xiaoxiao

admin:

username:admin password:admin
  • 1
  • 2

xiaoxiao:

username:xiaoxiao password:xiaoxiao
  • 1
  • 2
管理员的首页

在这里插入图片描述

导航栏收起:

在这里插入图片描述

xiaoxiao的首页

左侧菜单只有两个选项。

在这里插入图片描述

用户管理

页面:

在这里插入图片描述
点击新增:

在这里插入图片描述

点击编辑:

在这里插入图片描述

总结

项目搭建

整个项目的依赖:

"dependencies": { "axios": "^1.1.3", "core-js": "^3.8.3", "echarts": "^5.1.2", "element-ui": "^2.15.10", "js-cookie": "^3.0.1", "less": "^4.1.3", "less-loader": "^11.1.0", "mockjs": "^1.1.0", "vue": "^2.6.14", "vue-router": "^3.6.5", "vuex": "^3.6.2" }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

我们要搭建一个通用后台管理系统,它会有以下的页面:

  • 首页
  • 商品管理
  • 用户管理
  • 其他
    • 页面1
    • 页面2

点击导航栏会显示不同的页面:

  • 点击首页

在这里插入图片描述

  • 点击商品管理

在这里插入图片描述

显然,变化的页面不包括左侧导航栏和上侧头部部分。于是:

  • 把左侧和上侧单独写在一个组件,放入Main中,这样它们就会一直存在
  • 点击左侧导航栏显示不同页面:router-view与路由跳转
  • 项目搭建好之后,在不同组件中添加想要的效果即可

对应链接:【前端】Vue+Element UI案例:通用后台管理系统-导航栏

左侧:CommonAside

这里写的是导航栏:

  • 点击菜单跳转至对应页面:点击久路由跳转
  • 用Element UI:把导航栏展开收起,点击悬停效果完成

对应链接:【前端】Vue+Element UI案例:通用后台管理系统-导航栏

上侧:CommonHeader和CommonTag

这里写的是Header和tag:

  • 导航栏收起按钮:vuex
  • 用户退出按钮:vuex、cookie
  • 面包屑:Element UI
  • tag:Element UI

对应链接:
【前端】Vue+Element UI案例:通用后台管理系统-Header+导航栏折叠
【前端】Vue+Element UI案例:通用后台管理系统-面包屑、tag栏
【前端】Vue+Element UI案例:通用后台管理系统-登陆页面功能:登录权限跳转、路由守卫、退出

首页:Home.vue

  • 六个卡片:Element UI
  • 三个图表:Echarts
  • mock模拟数据

对应链接:
【前端】Vue+Element UI案例:通用后台管理系统-Echarts图表:折线图、柱状图、饼状图

用户管理:User.vue

  • mock模拟用户数据
  • table表格
  • Form表单
  • Dialog对话框
  • Message消息提示
  • Pagination分页
  • 数据增删查改

对应链接:
【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框

登录页:Login.vue

  • Form表单
  • 导航守卫、不同用户的权限、动态添加路由
  • token、cookie、mock

对应链接:
【前端】Vue+Element UI案例:通用后台管理系统-登陆页面Login
【前端】Vue+Element UI案例:通用后台管理系统-登陆页面功能:登录权限跳转、路由守卫、退出
【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由

总代码(已开源)

代码已经上传到Gitee:https://gitee.com/karshey/general-background
代码总结:https://blog.csdn.net/karshey/article/details/127891703

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索