管理系统的前端模板（vue2+Element UI）

爱被打了一巴掌 2024-04-26 03:56 113阅读 0赞

目录

前言

一、模板展示图

二、获取的方式及操作运行步骤

（一）获取方式

（二）操作步骤

1.下载安装node.js

2.下载完成解压缩后在idea的里面打开终端。

3.输入下载相关依赖的命令

4.运行项目的命令

5.然后把给到的地址浏览器打开就可以了

三、代码的展示(这个点的内容仅供阅览，实际意义不大)

HomeView.vue

App.vue

main.js

src的assets文件下新建的gloable.css

前言

这是引用ElementUI官网的布局容器里面的代码拿来修改优化后的。用的框架是vue2。

只是前端模板，没有涉及到后端的代码

一、模板展示图

导航栏、增删改查、导入导出、个人信息退出等

a8870988087b45f3b43faba9632debbf.png

导航栏收缩功能

656079665c0441779836512da2c2ce58.png分页功能

08fa2e21c4ee48bb9f8da50e101f8d97.png

代码目录阅览

43a8132e92404507aa5caf42f533ddf5.png

二、获取的方式及操作运行步骤

（一）获取方式

去公众号“云边的快乐猫”，回复：v2

（二）操作步骤

1.下载安装node.js

ps：如果有安装过的就不用安装了，查看的方式为，有版本号就说明之前安装过了

  1. node -v

nacos的介绍和下载安装（详细）_nacos下载安装_云边的快乐猫的博客-CSDN博客

2.下载完成解压缩后在idea的里面打开终端。

ps：命令有可能运行失败，那就是没有用管理员打开idea的原因导致 c5388b78e5be4d0a8d35c360c34649c4.png

3.输入下载相关依赖的命令

  1. npm install

4.运行项目的命令

  1. npm run serve

5.然后把给到的地址浏览器打开就可以了

7b7aeb578f884821a7a259ba74846dc3.png

三、代码的展示(这个点的内容仅供阅览，实际意义不大)

HomeView.vue

  1. <template>
  2.     <el-container style="min-height: 100vh">
  3.       <el-aside width="sideWidth+'px'" style="background-color: rgb(255,255,255)"> <!--width="sideWidth+'px'"导航栏动态宽度-->
  4.         <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
  5.         background-color="rgb(48,65,86)"
  6.                  text-color="#fff"
  7.                  active-text-color="#ffd04b"
  8.                  :collapse-transition="false"
  9.                  :collapse="isCollapse"
  10.         > <!--active-text-color="#ffd04b"点击导航栏文字时候高亮黄色。  :collapse-transition="false"关闭动画（为了收缩导航栏做铺垫）
  11.         :collapse="isCollapse"控制展开折叠
  12.         -->
  13.           <div style="height: 60px; line-height: 60px; text-align: center">
  14.             <img src="../assets/logo.png" alt="" style="width: 30px;position: relative; top: 10px;margin-right: 10px">
  15.             <b style="color: white" v-show="logoTextShow">后台管理系统</b>
  16.           </div>
  17.           <el-submenu index="1">
  18.             <template slot="title">
  19.               <i class="el-icon-message"></i>
  20.               <span slot="title">导航一</span>
  21.             </template>
  22.             <el-menu-item-group>
  23.               <template slot="title">分组一</template>
  24.               <el-menu-item index="1-1">选项1</el-menu-item>
  25.               <el-menu-item index="1-2">选项2</el-menu-item>
  26.             </el-menu-item-group>
  27.             <el-menu-item-group title="分组2">
  28.               <el-menu-item index="1-3">选项3</el-menu-item>
  29.             </el-menu-item-group>
  30.             <el-submenu index="1-4">
  31.               <template slot="title">选项4</template>
  32.               <el-menu-item index="1-4-1">选项4-1</el-menu-item>
  33.             </el-submenu>
  34.           </el-submenu>
  35.           <el-submenu index="2">
  36.             <template slot="title"><i class="el-icon-menu"></i>
  37.               <span slot="title">导航二</span>
  38.             </template>
  39.             <el-menu-item-group>
  40.               <template slot="title">分组一</template>
  41.               <el-menu-item index="2-1">选项1</el-menu-item>
  42.               <el-menu-item index="2-2">选项2</el-menu-item>
  43.             </el-menu-item-group>
  44.             <el-menu-item-group title="分组2">
  45.               <el-menu-item index="2-3">选项3</el-menu-item>
  46.             </el-menu-item-group>
  47.             <el-submenu index="2-4">
  48.               <template slot="title">选项4</template>
  49.               <el-menu-item index="2-4-1">选项4-1</el-menu-item>
  50.             </el-submenu>
  51.           </el-submenu>
  52.           <el-submenu index="3">
  53.             <template slot="title"><i class="el-icon-setting"></i>
  54.               <span slot="title">导航三</span>
  55.             </template>
  56.             <el-menu-item-group>
  57.               <template slot="title">分组一</template>
  58.               <el-menu-item index="3-1">选项1</el-menu-item>
  59.               <el-menu-item index="3-2">选项2</el-menu-item>
  60.             </el-menu-item-group>
  61.             <el-menu-item-group title="分组2">
  62.               <el-menu-item index="3-3">选项3</el-menu-item>
  63.             </el-menu-item-group>
  64.             <el-submenu index="3-4">
  65.               <template slot="title">选项4</template>
  66.               <el-menu-item index="3-4-1">选项4-1</el-menu-item>
  67.             </el-submenu>
  68.           </el-submenu>
  69.         </el-menu>
  70.       </el-aside>
  72.       <el-container>
  73.           <el-header style="font-size: 12px;border-bottom: 1px solid #ccc; line-height: 60px;display:flex">
  74.             <div style="flex: 1; font-size: 25px">
  75.                   <!-- ?收缩栏图标-->
  76.               <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
  77.             </div>
  78.           <el-dropdown style="width: 100px;cursor:pointer">
  79.             <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
  80.             <el-dropdown-menu slot="dropdown">
  81.               <el-dropdown-item>个人信息</el-dropdown-item>
  82.               <el-dropdown-item>退出</el-dropdown-item>
  83.             </el-dropdown-menu>
  84.           </el-dropdown>
  86.         </el-header>
  87.         <el-main>
  88.               <!--下面这个div盒子是搜索框和搜索按钮 -->
  89.           <div style="margin: 10px 0">
  90.             <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
  91.               <el-button class="ml-5" type="primary">搜索</el-button>
  92.           </div>
  94.               <!--  下面这个div盒子是新增、批量删除、导入导出按钮的  -->
  95.           <div style="margin: 10px 0">
  96.             <el-button type="primary">新增<i class="el-icon-circle-plus-outline"></i></el-button>
  97.             <el-button type="danger">批量删除<i class="el-icon-remove-outline"></i></el-button>
  98.             <el-button type="danger">导入<i class="el-icon-bottom"></i></el-button>
  99.             <el-button type="danger">导出<i class="el-icon-top"></i></el-button>
  100.           </div>
  102.           <el-table :data="tableData" border stripe: header-cell-class-name="headerBg">
  103.             <el-table-column prop="date" label="日期" width="140">
  104.             </el-table-column>
  105.             <el-table-column prop="name" label="姓名" width="120">
  106.             </el-table-column>
  107.             <el-table-column prop="address" label="地址">
  108.             </el-table-column>
  109.               <!-- 表格里面添加编辑和删除的按钮  -->
  110.             <el-table-column label="操作">
  111.               <template v-slot="scope">
  112.               <el-button type="success">编辑 <i class="el-icon-edit"></i></el-button>
  113.               <el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
  114.               </template>
  115.             </el-table-column>
  118.           </el-table>
  119.           <!--下边这个div盒子是添加进来可以分页的代码 -->
  120.           <div style="padding: 10px 0">
  121.             <el-pagination
  123.                 :page-sizes="[5, 10, 15, 20]"
  124.                 :page-size="10"
  125.                 layout="total, sizes, prev, pager, next, jumper"
  126.                 :total="400">
  127.             </el-pagination>
  128.           </div>
  129.         </el-main>
  130.       </el-container>
  131.     </el-container>
  133. </template>
  135. <script>
  136. // @ is an alias to /src
  137. import HelloWorld from '@/components/HelloWorld.vue'
  139. export default {
  140.   name: 'HomeView',
  141.   data() {
  142.     const item = {
  143.       date: '2016-05-02',
  144.       name: '王小虎',
  145.       address: '上海市普陀区金沙江路 1518 弄'
  146.     };
  147.     return {
  148.       tableData: Array(20).fill(item),
  149.       collapseBtnClass:'el-icon-s-fold',
  150.       isCollapse:false,
  151.       sideWidth:200, //动态收缩导航栏初始值200
  152.       logoTextShow:true,
  153.       headerBg:'headerBg'
  154.     }
  155.   },
  156.   methods:{
  157.     collapse(){ //点击收缩按钮触发
  158.       this.isCollapse = !this.isCollapse
  159.       if (this.isCollapse){ //收缩
  160.         this.sideWidth = 64
  161.         this.collapseBtnClass='el-icon-s-unfold'
  162.         this.logoTextShow=false
  163.       }else {  //展开
  164.         this.sideWidth = 200
  165.         this.collapseBtnClass='el-icon-s-fold'
  166.         this.logoTextShow=true
  167.       }
  168.     }
  169.   }
  170. }
  171. </script>
  173. <!--顶部的横栏颜色定义-->
  174. <style>
  175. .headerBg{
  176.   background: #ccc !important;
  177. }
  178. </style>

App.vue

  1. <template>
  2.   <div id="app">
  3.     <router-view/>
  4.   </div>
  5. </template>
  7. <style>
  8. #app{
  9.   height: 100%;
  10. }
  11. </style>

main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  6. /*这三行是引入的*/
  7. import ElementUI from 'element-ui';
  8. import 'element-ui/lib/theme-chalk/index.css';
  9. Vue.use(ElementUI);
  11. Vue.config.productionTip = false
  13. new Vue({
  14.   router,
  15.   store,
  16.   render: h => h(App)
  17. }).$mount('#app')

src的assets文件下新建的gloable.css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. /*定义全局的css样式，哪里需要就可以调用，{}开头的昵称是简写*/
  7. .ml-5{
  8.     margin-left: 5px;
  9. }
  10. .mr-5{
  11.     margin-right: 5px;
  12. }
  13. 。pd-10{
  14.     padding: 10px 0;
  15. }

四、另一个模板

cf85e3cb672f4b69a29d5d99ff0b9e80.png

点击底部的扫，去那边回复：v22

有什么问题都可以评论区留言，看见都会回复的

如果你觉得本篇文章对你有所帮助的，多多支持吧！！！

点赞收藏评论，当然也可以点击文章底部的红包或者订阅给文章创作支持一下了。抱拳了！

发表评论

表情：
评论列表 （有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读