ElementUI保姆级教学完成前端CRUD操作

ElementUI

按照行业规矩， 写博客都要介绍博客所说的技术是干嘛的，长篇大论的话我就不说了，逼格不够高面试官那也虎不住，我用一句话来概括就是：饿了么写的一个非常棒的UI组件，通过 vue add element 就能完成Vue引用此UI

ElementUI官方文档

vue add element

按照图内勾选即可

main.js就会自动引入这个包插件，两年elementui的时候还需要手动官网复制粘贴代码就很烦

为了做到前后端数据交互，我们引入一下axios这个技术他跟ajax一样解决跨域问题的，不知道这么说对不对在我学习的时候就是这个印象，有强迫症的选择可以去百度一下然后评论纠正一下，在下先给各位拜一拜了~~

启动项目我们开始码代码，因为是热部署我们直接码就好了

vue run serve

选择布局容器 container

<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        Aside
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

然后我们打开启动项目一看为啥页面没有变动这时候我们要看看我们的App.vue 页面和 router/index.js了

打开App.vue页面删除所有代码

<template>
  <div id="app">
   <router-view></router-view>
  </div>
</template>

复制这一串
再打开 router/index.js

删除常量里面的值

保留一个，然后我们再去HomeView添加我们的布局容器代码即可
这样我们再来打卡看看效果

是不是很nice
路由咋用直接百度一下
后面的细节我就不多说了 我直接上代码

在此我们要安装一下 axios

npm install axios

在main.js上面加上这两行 这样等下我们去修改路由的时候就不会报错啦

import axios from 'axios'
Vue.prototype.$axios = axios

「Element前端代码」等文件

<template>
  <div>
    <!-- 条件查询 start -->
    <el-form :inline="true" ref="form" :model="studentVo" label-width="80px">
        <el-form-item label="班级">
            <el-select v-model="studentVo.cid" placeholder="请选择班级">
                <el-option :label="classes.cname" :value="classes.cid" v-for = "(classes,index) in classesList" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="studentVo.sname" placeholder = "请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
            <el-col :span="11">
                <el-input v-model="studentVo.startAge" placeholder = "请输开始年龄"></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-input v-model="studentVo.endAge" placeholder = "请输入结束年龄"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="selectStudentList(1)">查询</el-button>
        </el-form-item>
    </el-form>
    <!-- 条件查询 end -->

    <!-- 添加学生 start -->
    <el-button type="success" @click="openAddDilog()">添加学生</el-button>

    <el-dialog :title="biaoti" :visible.sync="dialogFormVisible">
        <el-form :model="student" label-width = "80px">
            <el-form-item label="班级">
                <el-select v-model="student.cid" placeholder="请选择班级">
                    <el-option :label="classes.cname" :value="classes.cid" v-for = "(classes,index) in classesList" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="ID" >
                <el-input v-model="student.sid" placeholder = "请输入学生ID"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" >
                <el-input v-model="student.sname" placeholder = "请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="学生年龄" >
                <el-input v-model="student.age" placeholder = "请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" >
                 <el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;" value-format = "yyyy-MM-dd"></el-date-picker>
            </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-item label="选课">
                <el-checkbox-group v-model="student.courseIds">
                    <el-checkbox :label="course.cid" name="type" v-for = "(course,index) in courseList" :key="index">{{course.cname}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStudent()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 添加学生 end -->

    <!-- 表格 start -->
    <el-table
        :data="studentPage.list"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange">
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
        prop="sid"
        label="ID"
        width="180">
        </el-table-column>
        <el-table-column
        prop="sname"
        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.cid == 1 ? '男' : '女'}}
            </template>
        </el-table-column>
        <el-table-column
        label="选课"
        width="300">
            <template slot-scope="scope">
                <el-tag type="success" v-for = "(course,index) in scope.row.courseList" :key="index">{{course.cname}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
        prop="classes.cname"
        label="班级"
        width="180">
        </el-table-column>
        <el-table-column
        label="操作"
        width="180">
            <template slot-scope="scope">
                <el-button type="primary" @click = "openUpdate(scope.row.sid)">编辑</el-button>
                <el-button type="success" @click="deleteStudent(scope.row.sid)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-button type="danger" @click = "batchDelete()">批量删除</el-button>
    <!-- 表格 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>
import axios from 'axios'

export default {
    data() {
        return {
            studentVo:{},
            studentPage:{
                pageNum:1,
                pageSize:2
            },
            classesList:[],
            ids:[],
            student:{
                courseIds:[],   //选课
            },
            dialogFormVisible:false,
            biaoti:'',
            courseList:[],      //查询所有的选课
        }
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
            return 'warning-row';
            } else if (rowIndex === 3) {
            return 'success-row';
            }
            return '';
        },

        //查询所有学生
        async selectStudentList(num){
            if(num){
                this.studentPage.pageNum = num;
            }
            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;
        },

        //查询所有班级
        async selectClasses(){
            var url = "http://localhost:8888/classes";
            let {data:baseResult} = await axios.get(url);
            this.classesList = baseResult.data;
        },

        //每页多少条
        handleSizeChange(val){
            this.studentPage.pageNum = 1;
            this.studentPage.pageSize = val;

            this.selectStudentList();
        },

        //当前第几页
        handleCurrentChange(val){
            this.studentPage.pageNum = val;

            this.selectStudentList();
        },

        //批量删除 把学生id添加近 ids
        handleSelectionChange(val){
            this.ids = val.map(student => student.sid);
        },

        //批量删除
        batchDelete(){
            this.$confirm(`您确定要${this.ids.length}个么`, '提示', {
                type: 'warning'
            }).then(async () => {
                var url = `http://localhost:8888/student/batchDelete`;
                let {data:baseResult} = await axios.post(url,this.ids);
                if(baseResult.code == 20000){
                    this.$message.success(baseResult.message);

                    this.selectStudentList();     
                }else{
                    this.$message.error(baseResult.message);
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },

        //删除学生
        deleteStudent(id){
            this.ids = [];

            this.ids.push(id);

            this.batchDelete();
        },

        //添加学生 打开弹框
        openAddDilog(){    
            //查询所有选课
            this.selectCourse();

            this.biaoti = "添加学生";

            this.student = {
                courseIds:[]
            };

            this.dialogFormVisible = true;
        },

        //添加学生
        async addStudent(){
            var url = "http://localhost:8888/student/addOrUpdate";
            let {data:baseResult} = await axios.post(url,this.student);
            if(baseResult.code == 20000){
                this.$message.success(baseResult.message);

                this.selectStudentList();

                this.dialogFormVisible = false;
            }else{
                this.$message.error(baseResult.message);
            }
        },

        //编辑学生 查找学生
        async openUpdate(sid){ 
            //查询所有选课
            this.selectCourse();

            this.biaoti = "编辑学生";

            var url = `http://localhost:8888/student/selectById/${sid}`;
            let {data:baseResult} = await axios.get(url);
            this.student = baseResult.data;

            this.dialogFormVisible = true;
        },

        //查询所有选课
        async selectCourse(){
            var url = "http://localhost:8888/course";
            let {data:baseResult} = await axios.get(url);
            this.courseList = baseResult.data;
        }
    },
    mounted(){
        //查询所有学生
        this.selectStudentList();

        //查询所有班级
        this.selectClasses();
    }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .line{
      text-align: center;
  }
    .el-tag + .el-tag {
        margin-left: 10px;
    }
</style>