學習記錄(day11-基於element ui的增刪改查、登陸、註冊(包括頁面的編寫))

基於element ui的增刪改查、登陸、註冊(包括頁面的編寫)

[TOC]

前端代碼 編寫

1、建立vue組件

2、index.js註冊路徑

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


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/home',
    component: () => import('../views/Home.vue'),
    redirect: '/mySubject',
    children: [{
      path: '/mySubject',
      component: () => import('../views/mySubject.vue')
    },
    {
      path: '/subjectList',
      component: () => import('../views/SubjectList.vue')
    },
    {
      path: '/login',
      component: () => import('../views/Login.vue')
    },
    {
      path: '/subjectAdd',
      component: () => import('../views/SubjectAdd.vue')
    },
    {
      path: '/form',
      component: () => import('../views/Form.vue')
    }]
  }
]

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

export default router

App.vue

<template>
   <div>
     <!-- 路由顯示區域 -->
     <router-view></router-view>
   </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

3、主頁面導航欄

Home.vue

<template>
  <div>
    <el-menu
      :default-active="$route.path"
      mode="horizontal"
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/mySubject">個人考題</el-menu-item>
      <el-menu-item index="/subjectList">考題管理</el-menu-item>
      <el-menu-item index="/login">登陸</el-menu-item>
      <el-menu-item index="/form">註冊</el-menu-item>
    </el-menu>

    <!-- 路由視圖，用於顯示子路由 -->
    <router-view></router-view>
  </div>
</template>

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

<style>
</style>

4、登陸頁面

Login.vue

<template>
  <div>
    <el-row>
      <el-col :span="12" :offset="6">
        <!-- 套一層卡片 -->
        <el-card class="box-card">
          <el-form ref="form" :v-model="user" label-width="80px">
            <el-form-item label="用戶名">
              <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密碼">
              <el-input v-model="user.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登陸</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
axios.defaults.baseURL='http://localhost:80'
export default {
  data() {
    return {
      user: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    async login(){
      // debugger
     let {data} = await axios.post('/user/login',this.user)      
     if(data){
         sessionStorage.setItem('user',JSON.stringify(data))
     
     this.$message.success('登陸成功')
     this.$router.push('/home')
     }else{
         this.$message.info('帳號或密碼不匹配')
     }
  },
}
}
</script>

<style>
</style>

5、註冊

Form.vue

<template>
  <div>
    <!-- 
        <el-form> 表單標籤
            model ： 須要data區域提供變量綁定模型，數據爲對象
            label-width：label寬度（文字描述信息）
        <el-form-item>  表單項
            label ： 文字描述信息
        <el-input>  輸入框
            v-model : 綁定的數據，綁定model聲明對象中某一個屬性

    -->
    <el-form ref="form" :model="user" label-width="80px">
      <el-form-item label="用戶名">
        <el-input v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="密碼">
        <el-input v-model="user.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="性別">
        <el-radio-group v-model="user.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="性別2">
        <el-radio-group v-model="user.gender2">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="愛好">
        <el-checkbox-group v-model="user.hobby">
          <el-checkbox label="學JAVA" name="type"></el-checkbox>
          <el-checkbox label="學PHP" name="type"></el-checkbox>
          <el-checkbox label="學C" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="學歷">
        <el-select v-model="user.edu" placeholder="請選擇活動區域">
          <el-option label="小班" value="1"></el-option>
          <el-option label="中班" value="2"></el-option>
          <el-option label="大班" value="3"></el-option>
          <el-option label="學前班" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活動時間">
        <el-date-picker
          type="date"
          placeholder="選擇日期"
          v-model="user.birthday"
          value-format="yyyy-MM-dd"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="婚否">
        <el-switch v-model="user.marry"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">註冊</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        gender: "女",
        gender2: "",
        hobby: ["學JAVA", "學PHP"],
        birthday: "",
        marry: ""
      }
    };
  }
};
</script>

<style>
</style>

6、考題管理(包含修改的彈框)

SubjectList.vue

<template>
  <div>
    <el-table :data="subjectList" border style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="title" label="考題標題" width="180"></el-table-column>
      <el-table-column prop="description" label="考題內容" width="180"></el-table-column>
      <el-table-column prop="subjectCategory.cname" label="分類"></el-table-column>
      <el-table-column label="操做">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="Edit(scope.row.sid)">編輯</el-button>
          <el-button size="mini" type="danger" @click="Delete(scope.row.sid)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加按鈕 -->
    <el-button type="success" @click="$router.push('/subjectAdd')">添加</el-button>

    <!-- 修改的彈出框 -->
    <el-dialog title="考題修改" :visible.sync="dialogvisible" :before-close="handleClose" width="30%">
      <el-form ref="form" :model="subject" label-width="120px">
        <el-form-item label="選擇分類">
          <el-select v-model="subject.categoryId" placeholder="請選擇分類">
            <!-- 顯示全部內容 -->
            <el-option
              v-for="(category,index) in allCategory"
              :key="index"
              :value="category.cid"
              :label="category.cname"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考題標題">
          <el-input v-model="subject.title"></el-input>
        </el-form-item>
        <el-form-item label="考題描述(內容)">
          <el-input v-model="subject.description"></el-input>
        </el-form-item>
        <el-form-item>
          <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://localhost:80";
export default {
  data() {
    return {
      subjectList: [], //存放考題
      subject: {}, //修改數據
      dialogvisible: false,
      allCategory: []
    };
  },
  async created() {
    //頁面加載成功後,查詢全部的考題
    this.findAll();
  },

  methods: {
    //查詢全部的考題
    async findAll() {
      let { data } = await axios.get("/subject/selectAll");
      this.subjectList = data;
    },

    //編輯彈出框
    async Edit(sid) {
      //查詢全部分類
      let { data: Category } = await axios.get( "/subjectcategory/selectCategory");
      this.allCategory = Category;

      //查詢當前考題
      let { data: subject } = await axios.get("/subject/toEdit/" + sid);
      this.subject = subject;

      //設置變量爲true,打開彈出層
      this.dialogvisible = true;
    },

      //考題修改
      async Update(){
        let {data} = await axios.put('/subject',this.subject)
         this.$message.success(data)
         this.dialogvisible=false
         this.findAll()
      },

    // 關閉提示
    handleClose(done) {
      this.$confirm("確認關閉？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    Delete(sid) {
      this.$confirm("您確認要刪除麼?", "刪除提示", { type: "warning" })
        .then(async () => {
          let { data } = await axios.delete("/subject/" + sid);
          this.findAll();
          this.$message.success("刪除成功");
        })
        .catch(() => {
          this.$message.error("取消刪除");
        });
    }
  }
};
</script>

<style>
</style>

7、添加考題

SubjectAdd.vue

<template>
  <div>
    <el-card class="box-card" style="width:800px">
      <!-- 表單 -->
      <el-form ref="form" :model="subject" label-width="120px">
        <el-form-item label="選擇分類">
          <el-select v-model="subject.categoryId" placeholder="請選擇分類">
            <!-- 顯示全部內容 -->
            <el-option v-for="(category,index) in subjecCategorytList" :key="index" :value="category.cid" :label="category.cname"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考題標題">
          <el-input v-model="subject.title"></el-input>
        </el-form-item>
        <el-form-item label="考題描述(內容)">
          <el-input v-model="subject.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">添加考題</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:80";
export default {
  data() {
    return {
      subject: {},
      subjecCategorytList: []
    };
  },
  async created(){
      let {data} = await axios.get('/subjectcategory/selectCategory')
       this.subjecCategorytList=data;
  },
  methods: {
  async   add(){
      let {data} = await axios.post("/subject",this.subject)
        this.$message.success(data);
        this.$router.push('/subjectList')
     }
},
};
</script>

<style>
</style>

---

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