學習記錄(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>

---

平常學習的總結，主要是爲了本身之後看，固然你們有什麼好的建議，歡迎評論留言。