1.外观实现-后台管理系统

1.正式书写-后台管理系统

项目资料汇总： https://shimo.im/docs/5xkGMv6jpgCj783X/read

带你从0搭建一个Springboot+vue前后端分离项目，真的很简单！ https://www.bilibili.com/video/BV14y4y1M7Nc

1.创建Header.vue文件

在conmpoents文件夹下创建Header.vue文件

<template>
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
    <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
    <div style="flex: 1"></div>
    <div style="width: 100px">
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar :size="30" :src="user.avatar" style="position: relative; top: 10px"></el-avatar>
           {{ user.nickName }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="$router.push('/person')">个人信息</el-dropdown-item>
            <el-dropdown-item @click="$router.push('/password')">修改密码</el-dropdown-item>
            <el-dropdown-item @click="$router.push('/login')">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: ['user'],
  data() {
    return {

    }
  },
  created() {
  }
}
</script>

<style scoped>

</style>

2.定义golobal.css文件

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

注意要在main.js中导入

3.修改app.vue导入组件

遇见问题，自定义页面无法展示，要在view组件中将自定义组件注册才可以在页面之中展示。

解决方案，在router层中将index.js页面中将默认路径修改为header组件后可以展示

也可以在index.js的默认路径中将，展示页面的homeview.vue改为app.vue

<template>
  <div>
    <Header/>
  </div>
  <router-view/>
</template>
<script scoped>
import Header from "@/components/Header";

export default {
  name: 'Layout',
  components:{
    Header
  }
}
</script>

4.使用element-plus

https://element-plus.gitee.io/zh-CN/

查看指南 安装element-plus https://element-plus.gitee.io/zh-CN/guide/installation.html

npm install element-plus --save

注意，一定要在项目文件夹下进行安装

修改main.js中的内容

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
注意这里的use是可以叠加使用的
例如
createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

测试，在页面中添加一个按钮

<el-button>按钮</el-button>

效果展示

5.使用下拉栏

https://element-plus.gitee.io/zh-CN/component/icon.html

npm install @element-plus/icons-vue

<template>
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
        <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
        <div style="flex: 1"></div>
        <div style="width: 100px">
            <el-dropdown>
                <span class="el-dropdown-link" >
                   张三 <el-icon>
                    <ArrowDown />
                    <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item >个人信息</el-dropdown-item>
                        <el-dropdown-item >修改密码</el-dropdown-item>
                        <el-dropdown-item >退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
    import {ArrowDown} from "@element-plus/icons-vue";
    export default {
        components: {
            ArrowDown
        }
    }
</script>
<style scoped>
</style>

发现没有下拉栏的小箭头图标

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
app.use(ElementPlus).use(store).use(router).mount('#app')

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

注册arrowdown

在使用下拉栏的组件中导入ArrowDown，否则显示不了下拉箭头

<script>
    import { ArrowDown } from '@element-plus/icons-vue'
    export default {
        components: {
            ArrowDown
        }
    }
</script>

图标自己添加

<el-icon><ArrowDown /></el-icon> 

6.定义侧边栏

compoent组件中添加Aside.vue

<template>
    <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
    >
        <el-sub-menu index="1">
            <template #title>
                <el-icon><location /></el-icon>
                <span>导航一</span>
            </template>
            <el-menu-item-group title="分组一">
                <el-menu-item index="1-1">选项一</el-menu-item>
                <el-menu-item index="1-2">选项二</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组二">
                <el-menu-item index="1-3">选项三</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
                <template #title>选项四</template>
                <el-menu-item index="1-4-1">选项一</el-menu-item>
            </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span>导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
            <el-icon><document /></el-icon>
            <span>导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>导航四</span>
        </el-menu-item>
    </el-menu>
</template>

<script >
   export default{
       name:"Aside"
   }
</script>

在app.vue中引入

<template>
  <div>
    <Header/>

    <div style="display:flex">
        <Aside/>
    </div>
  </div>
  <router-view/>
</template>

<script scoped>


import Header from "@/components/Header";
import Aside from "@/components/Aside";
export default {
  name: 'Layout',
  components:{
    Header,
    Aside
  }
}
</script>

效果展示

修改app.vue

<template>
  <div>
    <Header/>
    <!--主题-->
    <div style="display:flex">
        <!--侧边栏-->
        <Aside/>
        <!--内容区域-->
        <router-view style="flex:1"/>
    </div>
  </div>

</template>

<script scoped>


import Header from "@/components/Header";
import Aside from "@/components/Aside";
export default {
  name: 'Layout',
  components:{
    Header,
    Aside
  }
}
</script>

7.设置侧边栏宽度

在el-menu标签中设置样式,添加一个style

Aside.vue文件修改部分如下

 <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            style="width:200px"
    >

8.删去导航栏分组管理

导航栏分组管理不是必要的

修改Aside.vue为如下

<template>
    <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            style="width:200px"
    >
        <el-sub-menu index="1">
            <template #title>
                <el-icon><location /></el-icon>
                <span>导航一</span>
            </template>
            <el-sub-menu index="1-4">
                <template #title>选项四</template>
                <el-menu-item index="1-4-1">选项一</el-menu-item>
            </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span>导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
            <el-icon><document /></el-icon>
            <span>导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>导航四</span>
        </el-menu-item>
    </el-menu>
</template>

<script >
   export default{
       name:"Aside"
   }
</script>

9.让导航栏占满左侧

链接

https://element-plus.gitee.io/zh-CN/component/menu.html

在el-menu标签中设置样式,添加一个style

Aside.vue文件修改部分如下

<el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            style="width:200px;height:100vh"
    >

发现长度过高，没有减去头部的高度

<el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            style="width:200px;min-height: calc(100vh - 100px)"
    >

10.添加主体表格

在home.vue中添加

记录产生的问题

有点疑惑了，路由里设置访问的是app.vue,
如果主体设置的在home.vue中,那么要怎样访问到主题呢？
难道是直接设置作为组件么，那view层和component层有什么区别呢？

链接

https://element-plus.gitee.io/zh-CN/component/table.html#基础表格

必须添加在app.vue中才能显示

如果只在home中添加的话，是不显示添加的列表组件的

找到原因了，没有在index.js中注册

router层里index.js

要非常注意import语句，没有用import导入的话是无法注册路由的

import { createRouter, createWebHistory } from 'vue-router'

import Home from "../views/Home"
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  }
]
/.
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

11.可以设置国际化将英文显示为中文

网页链接

https://element-plus.gitee.io/zh-CN/guide/i18n.html

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

12.为表格添加数据

添加排序

添加斑马纹

添加搜索

<template>
  <div style="padding:10px ">
    <!--<img alt="Vue logo" src="../assets/logo.png">-->
      <!---功能区域-->
        <div style="margin:10px 0">
            <el-button type="primary">新增</el-button>
            <el-button type="primary">导入</el-button>
            <el-button type="primary">导出</el-button>

        </div>
      <!--搜索区域-->
      <div style="margin:10px 0">
          <el-input v-model="search" placeholder="请输入关键字" style="width:20%" />
          <el-button type="primary" style="margin-left:5px">查询</el-button>
      </div>
      <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column
                  prop="date"
                  label="Date"
                  sortable
          />
          <el-table-column
                  prop="name"
                  label="Name"
          />
          <el-table-column
                  prop="address"
                  label="Address"
          />
          <el-table-column fixed="right" label="操作" width="120">
              <template #default>
                  <el-button link type="primary" size="small" @click="handleClick"
                  >查看</el-button
                  >
                  <el-button link type="primary" size="small">编辑</el-button>
              </template>
          </el-table-column>
      </el-table>

  </div>
</template>

<script>
// @ is an alias to /src
import App from "@/App";


export default {
  name: 'Home',
  components: {

  },
  data(){
      return {search:"",
          tableData:[
              {
                  date: '2016-05-03',
                  name: 'Tom',
                  address: 'No. 189, Grove St, Los Angeles',
              },
              {
                  date: '2016-05-02',
                  name: 'Tom',
                  address: 'No. 189, Grove St, Los Angeles',
              },
              {
                  date: '2016-05-04',
                  name: 'Tom',
                  address: 'No. 189, Grove St, Los Angeles',
              },
              {
                  date: '2016-05-01',
                  name: 'Tom',
                  address: 'No. 189, Grove St, Los Angeles',
              },
          ]}
  }
}
</script>

13.定义函数

要在method里面定义函数方法

用@click为按钮绑定函数事件

添加删除确认

https://element-plus.gitee.io/zh-CN/component/popconfirm.html

使用气泡确认框实现

14.添加分页

https://element-plus.gitee.io/zh-CN/component/pagination.html

<div style="margin:10px 0">
      <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
      />
      </div>

添加函数

  },
    methods:{
      handleEdit(){

      },
      handleSizeChange(){

      },
      handleCurrentChange(){

      }

    }

15.效果展示