后台管理系统2——页面的设计

后台管理系统2——页面的设计

进行页面的设计

1. 在components下面创建 header.vue组件，以便在主页面进行引入
   
   2 将header组件，引入到app.vue组件中。
   js代码

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

html代码：

<template>
  <div>
    <Header></Header>
    <router-view/>
  </div>
</template>

引入之后，对样式进行处理

在assets文件夹下定义一个css文件夹，然后在里面进行样式的编写

*{
    margin: 0;
    padding: 0;
    /* 怪异盒模型 */
    box-sizing: border-box;

}

之后，在main.js里面进行引入

import '@/assets/css/global.css'

一般来说，在做项目不会自己手写css样式，所以需要使用vue3对应的 Element Plus 进行设计页面。

（1） 在项目中进行安装 Element Plus ，

npm install element-plus --save

（2）全局进行引入，在main.js中添加以下的代码：

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

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

（3）在项目中进行引入dropdown组件是，里面会包含icon图标组件，也需要进行引入

// 图标组件安装
npm install @element-plus/icons-vue

引入：

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'

import '@/assets/css/global.css'
const app = createApp(App)

// 全局注册el-icon
for (const [name, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(name, component);
}
app.use(store).use(router).use(ElementPlus).mount('#app')

注意：在引入之后，可能会影响原来设置的位置，可以再下面的style进行修改line-height ，因为引入的 组件的行高默认为 1，改为自己设置的即可。

.el-dropdown{
    line-height: 50px;
}

左侧菜单栏的设置

对于左侧菜单栏也需要进行使用组件，可以将单独在进行定义一个组件
（1）首先定义一个侧边栏组件Aside，然后在Aside里面进行将menu菜单组件进行引入。
（2）引入之后，在app.vue组件进行导入。

import Aside from '@/components/Aside'
export default {
  name:'Layout',
  components:{
    Header,
    Aside
  }
}

    <Aside></Aside>

最终Aside页面中的代码如下：
注意：里面有关calc的语法，要注意加上空格，要不然不会生效，对于100vh 表示的是整个视图的高度，因为原来已经设置了50px的header ，所以要将50px进行减去，不然会出现滚动条。

<template>
    <div >
        <el-menu
        default-active="2"
        class="el-menu-vertical-demo"   
        style="width:200px;min-height:calc(100vh - 50px)"
      >
        <el-sub-menu index="1-4">
            <template #title>
                <span>选项一</span>
            </template>
            <el-menu-item index="1-4-1">选项1-1</el-menu-item>
          </el-sub-menu>
          
        <el-menu-item index="2" >
          <el-icon><document /></el-icon>
          <span>导航二</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon><setting /></el-icon>
          <span>导航三</span>
        </el-menu-item>
      </el-menu>
    
    </div>
</template>

右侧内容的设置

对于右侧的设置，需要进行使用 table组件进行设置

<template>
  <div style="flex:1">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>

<script>

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

  },
  data(){
    return {
      tableData:[]
    }
  }
}
</script>

此时上面的代码是没有进行具体的修改，就是单纯的页面展示。

注意: 此时由于使用的element-ui是vue3版本的，里面的默认语言是英文，所以在table里面的数据，是英语

将其改为中文：
配置 改为中文的地址参考

将下面的代码添加到main.js里面即可：

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

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

最终内容页面：此页面在 views文件夹下的home.vue里面，在里面分别用到了 element-ui里面的 button，table，popconfirm，pagination，input

html代码

<template>
  <div style="flex:1;padding:10px">
   <div class="content">
        <!-- 功能区域————新增按钮 -->
      <div style="margin:10px 0" class="content_left">
        <el-button type="primary">增加</el-button>
        <el-button type="primary">导入</el-button>
        <el-button type="primary">导出</el-button>
      </div>

      <!-- 搜索区域 -->
      <div style="margin:10px 0" class="content_right">
        <el-input v-model="search" placeholder="请输入关键字" style="width:200px" />
        <el-button type="primary" style="margin-left:5px">查询</el-button>
      </div>
   </div>
    <el-table :data="tableData" border style="width: 100%" stripe>
      <!-- 在进行数据显示的时候，给日期加上排序 -->
      <el-table-column prop="date" label="日期" sortable />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="address" label="地址" />
      <el-table-column fixed="right" label="操作" width="120">
      <template #default>
        <el-button link type="primary"  @click="handleEdit">编辑</el-button>
        <el-popconfirm title="确认删除吗？">
          <template #reference>
            <el-button link type="primary" >删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    </el-table>

    <div style="margin:10px 0;">
       <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="10"
          layout="sizes, prev, pager, next,jumper"
          :total="total"
          
    />
    </div>
  </div>
</template>

js代码：

<script>

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

  },
  data(){
    return {
      currentPage:1,
      total:10,
      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',
        },
      ]
    }
  },
  methods:{
    handleEdit(){
    },
    // 改变页面触发函数
    handleSizeChange(){},
    // 改变当前页
    handleCurrentChange(){}
  }
}
</script>

css代码：

<style scoped>
.content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>