学生管理 + 用户管理（Element版）（一）-阿里云开发者社区

1.1 搭建环境

创建vue项目：vue create day16_element_student
安装第三方组件：axios、element

npm install axios
vue add element

1.2 查询所有前端

1.2.1. 显示页面

创建页面

配置路由

const routes = [
  {
    path: '/studentList',
    name: '学生列表',
    component: () => import('../views/StudentList.vue')
  }
]

访问路径

http://localhost:8080/studentList

1.2.2 ajax操作

<template>
  <div>
    {{studentPage}}
  </div>
</template>
<script>
// 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      studentVo: {    //条件查询
      },
      studentPage: {    //分页数据
        pageNum: 1,
        pageSize: 3
      }
    }
  },
  methods: {
    async condition() {
      // ajax查询
      var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
      let {data:baseResult} = await axios.post(url, this.studentVo)
      // 保存结果
      this.studentPage = baseResult.data
    }
  },
  mounted() {
    // 查询
    this.condition()
  },
}
</script>
<style>
</style>

1.2.3 整合element ui

<template>
  <div>
    <!-- 表单start -->
    <el-form :inline="true" :model="studentVo" size="mini" >
      <el-form-item label="班级">
        <el-select v-model="studentVo.cid" placeholder="请选择班级" clearable>
          <el-option label="Java12班" value="c001"></el-option>
          <el-option label="Java56班" value="c003"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="11">
          <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="condition(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单end -->
    <!-- 表格start -->
    <el-table
      :data="studentPage.list"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="sid"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sname"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cid"
        label="班级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="180">
        <template slot-scope="scope">
          {{scope.row.gender == 1 ? "男" : "女"}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->
    <!-- 分页条start -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="studentPage.pageNum"
      :page-sizes="[1, 2, 3, 5, 10]"
      :page-size="studentPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="studentPage.total">
    </el-pagination>
    <!-- 分页条end -->
  </div>
</template>
<script>
// 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      studentVo: {    //条件查询
      },
      studentPage: {    //分页数据
        pageNum: 1,
        pageSize: 3
      }
    }
  },
  methods: {
    async condition(num) {
      if(num) {
        this.studentPage.pageNum = num
      }
      // ajax查询
      var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
      let {data:baseResult} = await axios.post(url, this.studentVo)
      // 保存结果
      this.studentPage = baseResult.data
    },
    handleSelectionChange(val) {
      console.info('批量删除')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.studentPage.pageSize = val
      this.studentPage.pageNum = 1
      // 重新开始
      this.condition()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.studentPage.pageNum = val
      // 重新开始
      this.condition()
    }
  },
  mounted() {
    // 查询
    this.condition()
  },
}
</script>
<style>
</style>

1.3 导航（嵌套路由）

步骤1：创建页面

创建登录页面（模板页面）
编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）
创建页面：ClassesList.vue

步骤2：配置路由
步骤3：编写布局容器和导航

步骤1：创建页面

创建登录页面（模板页面）

编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）

创建页面：ClassesList.vue

步骤2：配置路由

const routes = [
  {
    path: '/',
    redirect: '/home'    //重定向
  },
  {
    path: '/login',
    name: '登录',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/home',
    name: '首页',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: '/studentList',
        name: '学生列表',
        component: () => import('../views/StudentList.vue')
      },
      {
        path: '/classesList',
        name: '班级列表',
        component: () => import('../views/ClassesList.vue')
      }
    ]
  },
]

步骤3：编写布局容器和导航

修改main.js，配置css加载顺序（配置重置样式）

修改App.vue，配置样式，上下自动填充

编写Home页面，完成导航和二级路由显示

<template>
  <el-container>
    <el-header class="home-header">
      <!-- 导航start -->
      <el-menu
        :default-active="$route.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-submenu index="/classes">
          <template slot="title">班级管理</template>
          <el-menu-item index="/classesList">班级列表</el-menu-item>
        </el-submenu>
        <el-submenu index="/student">
          <template slot="title">学生管理</template>
          <el-menu-item index="/studentList">学生列表</el-menu-item>
        </el-submenu>
      </el-menu>
      <!-- 导航end -->
    </el-header>
    <el-main>
      <!-- 二级路由 -->
      <router-view></router-view>
    </el-main>
    <el-footer>学生管理系统Element UI 版</el-footer>
  </el-container>
</template>
<script>
export default {
}
</script>
<style>
  .el-container {
    height: 100%;
  }
  .home-header {
    padding: 0;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
</style>

1.4 编辑学生（弹出框）

1.4.1 分析

页面布局：

添加一个“添加”按钮，点击可以显示弹出层
拷贝添加的弹出框Dialog，且要求表单（班级列表、id、名称、年龄、生日、性别）

提供student变量，用于表单数据的绑定
ajax操作

查询班级列表
添加按钮绑定事件，进行ajax提交（成功：刷新列表关闭弹出框，失败：错误提示，但不关闭弹出框）

1.4.2 页面布局

页面布局：

添加一个“添加”按钮，点击可以显示弹出层

拷贝添加的弹出框Dialog，且要求表单（班级列表、id、名称、年龄、生日、性别）

 <!-- 添加的弹出框start -->
    <el-dialog title="添加学生" :visible.sync="addStudentDialogVisible">
      <el-form :model="student" label-width="80px">
        <el-form-item label="班级列表" >
          <el-select v-model="student.cid" placeholder="请选择班级">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="id" >
          <el-input v-model="student.sid"></el-input>
        </el-form-item>
        <el-form-item label="名称" >
          <el-input v-model="student.sname"></el-input>
        </el-form-item>
        <el-form-item label="生日" >
          <el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="年龄" >
          <el-input v-model="student.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-radio-group v-model="student.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addStudentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStudentDialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加的弹出框end -->

提供student变量，用于表单数据的绑定

学生管理 + 用户管理（Element版）（一）

1.1 搭建环境

1.2 查询所有前端

1.2.1. 显示页面

1.2.2 ajax操作

1.2.3 整合element ui

1.3 导航（嵌套路由）

1.4 编辑学生（弹出框）

1.4.1 分析

1.4.2 页面布局

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

学生管理 + 用户管理（Element版）（一）

1.1 搭建环境

1.2 查询所有前端

1.2.1. 显示页面

1.2.2 ajax操作

1.2.3 整合element ui

1.3 导航（嵌套路由）

1.4 编辑学生（弹出框）

1.4.1 分析

1.4.2 页面布局

热门文章

最新文章

相关电子书