学习记录(day12-container容器布局、侧边导航栏)

container容器布局、侧边导航栏

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    redirect:'/studentList'
  },
  {
    path: '/studentList',
    component: () => import('../views/StudentList.vue')
  },
  {
    path: '/studentAdd',
    component: () => import('../views/StudentAdd.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 对路由默认push方法进行增强--添加catch
// 1 获得原始push （缓存）
const originalPush = VueRouter.prototype.push
// 2 重写vue-router push函数
VueRouter.prototype.push = function push(location) {
  // 3 执行 原始push函数，如果有异常 catch掉
  return originalPush.call(this, location).catch(err => err)
}
export default router

App.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu class="el-menu-vertical-demo" default-active="2">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="2">
              <span slot="title">班级管理</span>
            </el-menu-item>
            <el-menu-item index="/studentList">学生管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

StudentList.vue

<template>
  <div>
    <el-button type="primary" @click="$router.push('/studentAdd')">新增</el-button>

    <el-table :data="slist" stripe style="width: 100%">
      <el-table-column prop="studentId" label="编号" width="180"></el-table-column>
      <el-table-column prop="studentName" label="姓名" width="180"></el-table-column>
      <el-table-column prop="studentAge" label="年龄"></el-table-column>
      <el-table-column prop="studentBirthday" label="生日"></el-table-column>
      <el-table-column prop="score" label="分数"></el-table-column>
      <el-table-column prop="classId" label="班级"></el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="Delete(scope.row.studentId)">删除</el-button>

          <el-button size="mini" type="text" @click="toEdit(scope.row.studentId)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="student" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="student.studentName"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="student.studentAge"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="student.studentBirthday"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="分数">
          <el-input v-model="student.score"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="student.classId" placeholder="请选择">
            <el-option
              v-for="(c,index) in clist"
              :key="index"
              :value="c.classId"
              :label="c.classname"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="Update()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://192.168.81.35:8090";
export default {
  data() {
    return {
      slist: [],
      dialogVisible: false,
      student: {},
      clist: []
    };
  },
  async created() {
    this.findAll();
  },
  methods: {
    async toEdit(sid) {
      let { data } = await axios.get("/student/" + sid);
      this.student = data;

      let { data: clistdata } = await axios.get("/class");
      this.clist = clistdata;

      this.dialogVisible = true;
    },

    async Update() {
      let { data: sdata } = await axios.put("/student", this.student);
      this.$message.success(sdata);
      this.dialogVisible = false;
      this.findAll();
    },

    Delete(sid) {
      this.$confirm("是否确定删除", "删除提示", { type: "warning" })
        .then(async () => {
          let { data } = await axios.delete("/student/" + sid);
          this.$message.success(data);
          this.findAll();
        })
        .catch(() => {
          this.$message.error("取消删除");
        });
    },

    async findAll() {
      let { data } = await axios.get("/student");
      this.slist = data;
    },

    // 关闭方法
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style>
</style>

StudentAdd.vue

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <el-form ref="form" :model="student" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="student.studentName"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="student.studentAge"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker type="date" placeholder="选择日期" v-model="student.studentBirthday" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="分数">
            <el-input v-model="student.score"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="student.classId" placeholder="请选择">
              <el-option
                v-for="(c,index) in clist"
                :key="index"
                :value="c.classId"
                :label="c.className"
              ></el-option>
            </el-select>

            <el-form-item>
              <el-button>取消</el-button>
              <el-button type="primary" @click="add">确定</el-button>
            </el-form-item>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://192.168.81.35:8090";
export default {
  data() {
    return {
      student: {},
      clist: []
    };
  },
  async created() {
       let{data} = await axios.get('/class')
       this.clist = data
  },
  methods: {
     async add(){
          let{data} = await axios.post("/student",this.student)
          this.$message.success(data)
          this.$router.push("/studentList")
     }
  }
};
</script>

<style>
</style>

---

日常学习的总结，主要是为了自己以后看，当然大家有什么好的建议，欢迎评论留言。