1、element 安装。 2、后台管理系统首页搭建。 3、后台管理系统 列表页搭建。。 4、后台管理系统 添加和修改、表单搭建

element 安装

 NPM
$ npm install element-plus --save

后台管理系统首页搭建

<template>
  <el-container class="layout" style="height: 100%">
    <aside style="height: 100%">
      <el-menu
        default-active="-1"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
      >
        <div class="logo">
          <router-link to="/" class="router">
            <img src="" alt="logo" />
            <h1>phpAdmin</h1>
          </router-link>
        </div>
        <router-link to="/">
        <el-menu-item index="-1">
          <template #title> 首页</template>
        </el-menu-item>
    </router-link>
        <el-menu-item index="-2">
          <template #title>个人中心</template>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <span>课袋鼠项目</span>
          </template>
          <router-link to="/ad">
          <el-menu-item index="1-1">
        <span>广告管理</span>
          </el-menu-item>
        </router-link>  
          <router-link to="/course"> 
          <el-menu-item index="1-2">
          <span>课程管理</span>
          </el-menu-item>
        </router-link> 
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <span>后台管理</span>
          </template>
          <router-link to="/admin_user">
          <el-menu-item index="2-1">
            <span>用户管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/course">
          <el-menu-item index="2-2">
            <span>菜单管理</span>
          </el-menu-item>
        </router-link>
        </el-sub-menu>
      </el-menu>
      <div class="flexible" @click="isCollapse = !isCollapse">
        <el-icon v-if="isCollapse" color="white" :size="40"
          ><ArrowRight
        /></el-icon>
        <el-icon v-else color="white" :size="40"><ArrowLeft /></el-icon>
      </div>
    </aside>
    <el-container>
      <el-header style="text-align: right; font-size: 20px">
        <div class="toolbar">
          <el-dropdown size="large" type="primary">
            <span
              >{{ name
              }}<el-icon style="margin-left: 8px; margin-top: 1px"
                ><ArrowDown /></el-icon
            ></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    // 获取左侧菜单和用户信息
    const state = reactive({
      isCollapse: false,
      name: "欧阳克",
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style>
a {
  text-decoration: none;
}
.layout {
  background-color: #f0f2f5;
}
.layout .el-header {
  position: relative;
  background-color: white;
  color: var(--el-text-color-primary);
}
.layout aside {
  color: var(--el-text-color-primary);
  background: #001529;
}
.layout .el-menu {
  border-right: none;
}
.layout .el-main {
  margin: 30px 10px;
  background-color: white;
}
.layout .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
aside {
  position: relative;
}
.flexible {
  background-color: #002140;
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.layout aside .logo .router {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  animation-duration: 0.1s;
  overflow: hidden;
  text-decoration: none;
  padding-left: 1px;
  position: relative;
  left: 2px;
}
.layout aside .logo .router h1 {
  margin-left: 10px;
  color: aliceblue;
  overflow: hidden;
}
.layout aside .logo .router img {
  padding-left: 5px;
  width: 48px;
  height: 48px;
}
</style>

后台管理系统 列表页搭建

<template>
    <el-table :data="tableData" border style="width: 100%" size="large">
      <el-table-column prop="date" label="ID" width="180" />
      <el-table-column prop="name" label="课程名称" width="180" />
      <el-table-column prop="address" label="课程图片" />
      <el-table-column prop="ylprice" label="课程原价格" />
      <el-table-column prop="xzprice" label="课程现价格" />
    </el-table>
  </template>
  <script  setup>
  const tableData = [
    {
      date: '1',
      name: '小狗',
      address: 'http://www.baidu.com',
      ylprice:5000,
      xzprice:6000
    },
    {
      date: '2',
      name: '小猫',
      address: 'http://www.baidu.com',
      ylprice:5000,
      xzprice:6000
    },
    {
      date: '3',
      name: '小狗牛',
      address: 'http://www.baidu.com',
      ylprice:5000,
      xzprice:6000
    },
  ]
  </script>

后台管理系统 添加和修改、表单搭建

<template>
  <div style="margin: 0 0 20px 10px">
                                                                    <!-- 增加点击事件，打开表单 -->
    <el-button type="success" size="large" @click="add(0)">添加</el-button>
  </div>
  <el-table :data="tableData" border style="width: 100%" size="large">
    <el-table-column prop="uid" label="ID"  />
    <el-table-column prop="account" label="用户账户"  />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="phone" label="手机号" />
    <el-table-column prop="status" label="状态" />
        <el-table-column prop="add_time" label="添加时间" />
        <el-table-column prop="last_time" label="最后登录时间" />
    <el-table-column label="操作">
           <!-- default 这个是默认的插槽 -->
            <!-- scope 是传值给这个插槽，这个值是什么呢？就是当前这条数据 -->
              <!-- 当数据有多条时，放el-table 这个标签里，它会自动循环，每次循环都会把当前的循环值给到el-table-column -->
      <template #default="scope">
          <!-- @click="handleEdit(scope.$index, scope.row)" -->
        <!-- <el-button size="small" type="primary" @click ="add(1)">修改1</el-button> -->
            <!-- <el-button size="small" type="primary"  @click="add(scope.$index, scope.row)>修改2</el-button> -->
            <el-button size="small" type="primary" @click="add(scope.row)">修改</el-button>
        <el-button size="small" type="danger" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   <!-- 增加 弹框  默认不显示  点击添加事件显示 -->
  <el-dialog 
  v-model="xsfrom.is_from" 
  :title="xsfrom.title"
   width="70%">
       <!-- 添加 页面表单                  填写数据双向绑定                         与添加按钮关联，判断是否显示 -->
  <el-form :model="fromData" label-width="120px" size="large"   >
    <el-form-item label="账户">
      <!-- 填写数据双向绑定     -->
      <el-input v-model="fromData.account"  />
    </el-form-item>
    <el-form-item label="姓名">
                <el-input v-model="fromData.name" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="fromData.phone" />
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker
                    v-model="fromData.add_time"
                    type="date"
                    placeholder="请选择日期"
                    :size="size"
                />
              </el-form-item>
            <el-button type="success" size="large" @click="fun">确定</el-button>
  </el-form>
</el-dialog>
</template>
<script setup>
  import { reactive } from 'vue'
  const xsfrom= reactive({
    is_from : false,
    title : "添加",
  }) ;
  const fromData= reactive( {
     account :'',
     name : '',
        phone : '',
        add_time : '',
  });
const tableData = [
  {
    uid: "1",
    account:'xiaogou',
    name: '小狗',
    phone:'18963300000',
    status: '在职',
    add_time: '2022年09月1日',
    last_time: '2022年09月2日',
  },
];
const fun = () =>{
  console.log(fromData);
  xsfrom.is_from = false;
};
// const add = (e,ee) =>{
const add = (e) =>{
  xsfrom.is_from = true;
  console.log(e);
  // console.log(ee);
  if (e !=0){
    xsfrom.title ="修改";
    fromData.account = e.account;
    fromData.phone = e.phone;
    fromData.name = e.name;
    fromData.status = e.status;
    fromData.add_time = e.add_time;
  }else{
    xsfrom.title ="添加";
    fromData.account = '';
    fromData.phone ='';
    fromData.name = '';
  }
};
</script>