update

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "element-ui": "^2.15.14",
+    "jquery": "^3.7.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1"
   },

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       element-ui:
         specifier: ^2.15.14
         version: 2.15.14(vue@2.7.16)
+      jquery:
+        specifier: ^3.7.1
+        version: 3.7.1
       vue:
         specifier: ^2.6.14
         version: 2.7.16
@@ -2336,6 +2339,9 @@ packages:
   joi@17.13.3:
     resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==}
 
+  jquery@3.7.1:
+    resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
+
   js-message@1.0.7:
     resolution: {integrity: sha512-efJLHhLjIyKRewNS9EGZ4UpI8NguuL6fKkhRxVuMmrGV2xN/0APGdQYwLFky5w9naebSZ0OwAGp0G6/2Cg90rA==}
     engines: {node: '>=0.6.0'}
@@ -6468,6 +6474,8 @@ snapshots:
       '@sideway/formula': 3.0.1
       '@sideway/pinpoint': 2.0.0
 
+  jquery@3.7.1: {}
+
   js-message@1.0.7: {}
 
   js-tokens@4.0.0: {}

public/css/main.css

@@ -37,10 +37,6 @@ darkblue{
 .aside{
     height: 100%;
 }
-.container{
-    width: 100%;
-    height: 100%;
-}
 
 .H-full{
     height: 100%;

src/App.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="container">
+  <div class="H-full">
-    <el-container class="container">
+    <el-container class="H-full">
       <!-- 标题 -->
       <el-header class="header">
         <h1>学生信息管理系统</h1>
       </el-header>
-      <el-container class="container">
+      <el-container class="H-full">
         <!-- 侧栏 -->
         <el-aside class="aside" width="200px">
-          <el-menu class="el-menu-vertical H-full" background-color="#2bf" text-color="#fff"
+          <el-menu class="el-menu-vertical H-full" background-color="#2bf" text-color="#fff" icon-color="#fff"
-            icon-color="#fff" active-text-color="#f35">
+            active-text-color="#f35">
             <router-link to="student">
               <el-menu-item index="1">
                 <i class="el-icon-user-solid"></i>
@@ -30,10 +30,16 @@
             </router-link>
           </el-menu>
         </el-aside>
+        <el-container>
           <!-- 内容 -->
           <el-main>
             <router-view></router-view>
           </el-main>
+          <!-- 页脚 -->
+          <el-footer>
+            <div></div>
+          </el-footer>
+        </el-container>
       </el-container>
     </el-container>
   </div>

src/apiConfig.js

@@ -0,0 +1,5 @@
+export default {
+    install(Vue) {
+        Vue.prototype.$apiUrl = 'http://localhost:8080/learn02_war_exploded';
+    }
+};

src/main.js

@@ -7,6 +7,10 @@ import 'element-ui/lib/theme-chalk/index.css';
 //在vue中启用element-ui
 Vue.use(ElementUI);
 
+//引入配置作为插件
+import apiConfig from './apiConfig';
+Vue.use(apiConfig);
+
 Vue.config.productionTip = false
 
 new Vue({

src/router/index.js

@@ -5,11 +5,11 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
-  {
+  // {
-    path: '/',
+  //   path: '/',
-    name: 'root',
+  //   name: 'root',
-    component: () => import('../App.vue')
+  //   component: () => import('../App.vue')
-  },
+  // },
   {
     path: '/course',
     name: 'course',

src/views/course/CourseList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container">
+    <div class="">
         <!-- 查询表单 -->
         <el-form :inline="true" :model="courseSearchForm" class="demo-form-inline">
             <el-form-item label="课程名称">
@@ -9,19 +9,15 @@
                 <el-select v-model="courseSearchForm.courseType" placeholder="性质">
                     <el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
                         :value="index + 1"></el-option>
-                    <el-option label="区域二" value="beijing"></el-option>
                 </el-select>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="courseSearch">查询</el-button>
+                <el-button type="primary" @click="courseListGet">查询</el-button>
-            </el-form-item>
-            <el-form-item>
                 <el-button plain @click="courseSearchClear">清除</el-button>
-            </el-form-item>
+                <el-button type="success" @click="courseAdd">添加</el-button>
-            <el-form-item>
-                <el-button type="success" @click="courseAdd" style="margin-left: 60px;">添加</el-button>
             </el-form-item>
         </el-form>
+        <br><br>
 
         <!-- 课程表格 -->
         <el-table :data="courseList.data">
@@ -53,16 +49,117 @@
             <el-table-column label="操作" width="180px">
                 <template slot-scope="scope">
                     <div>
-                        <el-button size="mini" type="primary" @click="courseEdit(scope.row.id)">编辑</el-button>
+                        <el-button size="mini" type="primary" @click="courseEdit(scope.row)">编辑</el-button>
-                        <el-button size="mini" type="danger" @click="courseDelete(scope.row.id)">删除</el-button>
+                        <el-button size="mini" type="danger" @click="courseDeleteSubmit(scope.row)">删除</el-button>
                     </div>
                 </template>
             </el-table-column>
         </el-table>
+        <br><br>
+
+        <!-- 分页器 -->
+        <el-pagination background layout="sizes, prev, pager, next" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" :total="courseList.total">
+        </el-pagination>
+
+        <!-- 编辑弹出框 -->
+        <el-dialog title="编辑课程" :visible.sync="courseEditDialogVisible">
+            <el-form :model="courseEditForm">
+                <el-form-item label="课程名称">
+                    <el-col :span="16">
+                        <el-input v-model="courseEditForm.name" placeholder="课程名称" width="200px"></el-input>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程性质">
+                    <el-col :span="16">
+                        <el-select v-model="courseEditForm.type" placeholder="课程性质">
+                            <el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
+                                :value="index + 1"></el-option>
+                        </el-select>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程学分">
+                    <el-col :span="16">
+                        <el-input-number v-model="courseEditForm.credit"></el-input-number>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程年级">
+                    <el-col :span="16">
+                        <el-input v-model="courseEditForm.grade" placeholder="课程年级"></el-input>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程专业">
+                    <el-col :span="16">
+                        <el-select v-model="courseEditForm.major" placeholder="课程专业">
+                            <el-option v-for="(courseMajor, index) in courseMajors" :key="courseMajor"
+                                :label="courseMajor" :value="index + 1"></el-option>
+                        </el-select>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程备注">
+                    <el-col :span="16">
+                        <el-input type="textarea" autosize placeholder="备注内容" v-model="courseEditForm.detail">
+                        </el-input>
+                    </el-col>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="courseEditDialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="courseEditSubmit()">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 添加弹出框 -->
+        <el-dialog title="添加课程" :visible.sync="courseAddDialogVisible">
+            <el-form :model="courseEditForm">
+                <el-form-item label="课程名称">
+                    <el-col :span="16">
+                        <el-input v-model="courseEditForm.name" placeholder="课程名称" width="200px"></el-input>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程性质">
+                    <el-col :span="16">
+                        <el-select v-model="courseEditForm.type" placeholder="课程性质">
+                            <el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
+                                :value="index + 1"></el-option>
+                        </el-select>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程学分">
+                    <el-col :span="16">
+                        <el-input-number v-model="courseEditForm.credit"></el-input-number>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程年级">
+                    <el-col :span="16">
+                        <el-input v-model="courseEditForm.grade" placeholder="课程年级"></el-input>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程专业">
+                    <el-col :span="16">
+                        <el-select v-model="courseEditForm.major" placeholder="课程专业">
+                            <el-option v-for="(courseMajor, index) in courseMajors" :key="courseMajor"
+                                :label="courseMajor" :value="index + 1"></el-option>
+                        </el-select>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="课程备注">
+                    <el-col :span="16">
+                        <el-input type="textarea" autosize placeholder="备注内容" v-model="courseEditForm.detail">
+                        </el-input>
+                    </el-col>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="courseEditDialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="courseAddSubmit()">确 定</el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import $ from 'jquery'
 export default {
     data() {
         return {
@@ -79,34 +176,192 @@ export default {
             courseMajors: ['软件工程', '空间信息', '大数据'],
             courseList: {
                 total: 0,
-                pageSize: 15,
+                pageSize: 10,
-                page: 0,
+                page: 1,
-                data: [
+                data: []
-                    { id: 1, name: "数学", type: "2", credit: "3", grade: "2015", major: "1", detail: "这是一些备注内容" },
+
-                    { id: 2, name: "数学", type: "2", credit: "3", grade: "2015", major: "3", detail: "这是一些很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长备注内容" },
+            },
-                    { id: 3, name: "数学", type: "2", credit: "3", grade: "2015", major: "3", detail: "" },
+            courseEditDialogVisible: false,
-                ]
+            courseEditForm: { id: -1, name: "", type: "", credit: "", grade: "", major: "", detail: "" },
-            }
+            courseAddDialogVisible: false,
         };
     },
     methods: {
-        courseSearch() {
-            alert("搜索：" + JSON.stringify(this.courseSearchForm));
-        },
         courseSearchClear() {
             this.courseSearchForm.courseName = '';
             this.courseSearchForm.courseType = '';
-            this.courseSearch();
+            this.courseListGet();
         },
-        courseEdit(id){
+        courseEdit(course) {
-            alert("编辑:"+id);
+            this.courseEditForm = course;
-        },
+            this.courseEditDialogVisible = true;
-        courseDelete(id){
-            alert("删除"+id);
         },
         courseAdd() {
-            alert("添加课程");
+            this.courseEditForm = { id: -1, name: "", type: "", credit: "", grade: "", major: "", detail: "" }
-        }
+            this.courseAddDialogVisible = true;
         },
+        handleSizeChange(val) {
+            this.courseList.pageSize = val;
+            this.courseListGet();
+        },
+        handleCurrentChange(val) {
+            this.courseList.page = val;
+            this.courseListGet();
+        },
+        courseEditSubmit() {
+            this.$confirm('确定要保存' + this.courseEditForm.name + '编辑吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                $.ajax({
+                    url: this.$apiUrl + "/courseAction/update",
+                    method: "POST",
+                    data: this.courseEditForm,
+                    success: (data) => {
+                        if (!data.success) {
+                            this.$message({
+                                type: 'error',
+                                message: '保存编辑失败',
+                                showClose: true
+                            });
+                        } else {
+                            this.$message({
+                                type: 'success',
+                                message: '保存编辑成功',
+                                showClose: true
+                            });
+                            this.courseEditDialogVisible = false;
+                        }
+                        this.courseListGet();
+                    },
+                    error: (xhr) => {
+                        this.$message({
+                            type: 'error',
+                            message: '请求数据失败，code=' + xhr.status,
+                            showClose: true
+                        });
+                    }
+                });
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '取消保存',
+                    showClose: true
+                });
+            });
+        },
+        courseAddSubmit() {
+            this.$confirm('确定要添加' + this.courseEditForm.name + '编辑吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                $.ajax({
+                    url: this.$apiUrl + "/courseAction/add",
+                    method: "POST",
+                    data: this.courseEditForm,
+                    success: (data) => {
+                        if (!data.success) {
+                            this.$message({
+                                type: 'error',
+                                message: '添加失败',
+                                showClose: true
+                            });
+                        } else {
+                            this.$message({
+                                type: 'success',
+                                message: '添加成功',
+                                showClose: true
+                            });
+                            this.courseEditDialogVisible = false;
+                        }
+                        this.courseListGet();
+                    },
+                    error: (xhr) => {
+                        this.$message({
+                            type: 'error',
+                            message: '请求数据失败，code=' + xhr.status,
+                            showClose: true
+                        });
+                    }
+                });
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '取消添加',
+                    showClose: true
+                });
+            });
+        },
+        courseDeleteSubmit(course) {
+            this.$confirm('确定要删除' + course.name + '吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                $.ajax({
+                    url: this.$apiUrl + "/courseAction/delete",
+                    method: "POST",
+                    data: { id: course.id },
+                    success: (data) => {
+                        if (!data.success) {
+                            this.$message({
+                                type: 'error',
+                                message: '删除失败',
+                                showClose: true
+                            });
+                        } else {
+                            this.$message({
+                                type: 'success',
+                                message: '删除成功',
+                                showClose: true
+                            });
+                        }
+                        this.courseListGet();
+                    },
+                    error: (xhr) => {
+                        this.$message({
+                            type: 'error',
+                            message: '请求数据失败，code=' + xhr.status,
+                            showClose: true
+                        });
+                    }
+                });
+            }).catch(()=>{
+                this.$message({
+                    type: 'info',
+                    message: '取消删除',
+                    showClose: true
+                });
+            });
+        },
+        courseListGet() {
+            $.ajax({
+                url: this.$apiUrl + "/courseAction/list",
+                method: "GET",
+                data: {
+                    page: this.courseList.page,
+                    pageSize: this.courseList.pageSize,
+                    keyword: this.courseSearchForm.courseName,
+                    courseType: this.courseSearchForm.courseType
+                },
+                success: (data) => {
+                    console.log(data);
+                    this.courseList = data;
+                },
+                error: (xhr) => {
+                    this.$message({
+                        type: 'error',
+                        message: '请求数据失败，code=' + xhr.status,
+                        showClose: true
+                    });
+                }
+            });
+        },
+    },
+    mounted() {
+        this.courseListGet();
+    }
 };
 </script>