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

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

后台管理系统2——页面的设计_第1张图片

进行页面的设计
  1. components下面创建 header.vue组件,以便在主页面进行引入
    后台管理系统2——页面的设计_第2张图片
    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-1el-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>

后台管理系统2——页面的设计_第3张图片

右侧内容的设置

对于右侧的设置,需要进行使用 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>

你可能感兴趣的:(vue项目学习,前后端分离项目学习,vue.js,前端,javascript)