update
This commit is contained in:
parent
00ee71c0ef
commit
d1efbaaca1
@ -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"
|
||||
},
|
||||
|
||||
@ -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: {}
|
||||
|
||||
@ -37,10 +37,6 @@ darkblue{
|
||||
.aside{
|
||||
height: 100%;
|
||||
}
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.H-full{
|
||||
height: 100%;
|
||||
|
||||
16
src/App.vue
16
src/App.vue
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-container class="container">
|
||||
<div class="H-full">
|
||||
<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"
|
||||
icon-color="#fff" active-text-color="#f35">
|
||||
<el-menu class="el-menu-vertical H-full" background-color="#2bf" text-color="#fff" icon-color="#fff"
|
||||
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>
|
||||
|
||||
5
src/apiConfig.js
Normal file
5
src/apiConfig.js
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.prototype.$apiUrl = 'http://localhost:8080/learn02_war_exploded';
|
||||
}
|
||||
};
|
||||
@ -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({
|
||||
|
||||
@ -5,11 +5,11 @@ import VueRouter from 'vue-router'
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'root',
|
||||
component: () => import('../App.vue')
|
||||
},
|
||||
// {
|
||||
// path: '/',
|
||||
// name: 'root',
|
||||
// component: () => import('../App.vue')
|
||||
// },
|
||||
{
|
||||
path: '/course',
|
||||
name: 'course',
|
||||
|
||||
@ -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-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="courseListGet">查询</el-button>
|
||||
<el-button plain @click="courseSearchClear">清除</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="courseAdd" style="margin-left: 60px;">添加</el-button>
|
||||
<el-button type="success" @click="courseAdd">添加</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="danger" @click="courseDelete(scope.row.id)">删除</el-button>
|
||||
<el-button size="mini" type="primary" @click="courseEdit(scope.row)">编辑</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,
|
||||
page: 0,
|
||||
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: "" },
|
||||
]
|
||||
}
|
||||
pageSize: 10,
|
||||
page: 1,
|
||||
data: []
|
||||
|
||||
},
|
||||
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){
|
||||
alert("编辑:"+id);
|
||||
courseEdit(course) {
|
||||
this.courseEditForm = course;
|
||||
this.courseEditDialogVisible = true;
|
||||
},
|
||||
courseDelete(id){
|
||||
alert("删除"+id);
|
||||
courseAdd() {
|
||||
this.courseEditForm = { id: -1, name: "", type: "", credit: "", grade: "", major: "", detail: "" }
|
||||
this.courseAddDialogVisible = true;
|
||||
},
|
||||
courseAdd(){
|
||||
alert("添加课程");
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user