前后端分离之再前端
作者：互联网
<template>
<div class="course">
<el-col :span="4">
<el-button type="success" @click="openInsertDialog">添加课程</el-button>
</el-col>
<el-col :span="20">
<el-form ref="searchForm" :model="searchForm" label-width="80px" inline>
<el-form-item label="课程分类">
<el-select v-model="searchForm.courseid" placeholder="请选择">
<el-option :label="item" :value="index+1" v-for="(item,index) in courses">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchData">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<el-table ref="rows" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="name" label="课程名称" width="120">
</el-table-column>
<el-table-column prop="picture" label="课程图片" width="120">
<template slot-scope="scope">
<!--头像-->
<el-avatar shape="square" :size="100" :src="scope.row.picture"></el-avatar>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="courseid" label="课程分类" width="120">
</el-table-column>
<el-table-column prop="price" label="课程价格" width="120">
</el-table-column>
<el-table-column prop="desc1" label="课程描述" width="120">
</el-table-column>
<el-table-column prop="teacher" label="讲师" width="120">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
:page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
prev-text="上一页" next-text="下一页">
</el-pagination>
<!-- 添加 -->
<el-dialog title="提示" :visible.sync="dialogInsertVisible" width="50%">
<el-form :model="insertForm" :rules="rulesForm" ref="insertForm" label-width="100px">
<el-form-item label="课程名称" prop="name">
<el-input v-model="insertForm.name"></el-input>
</el-form-item>
<el-form-item label="课程分类" prop="courseid">
<el-select v-model="insertForm.courseid" placeholder="请选择">
<el-option :label="course" :value="course" v-for="course in courses">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="课程价格" prop="price">
<el-input v-model="insertForm.price"></el-input>
</el-form-item>
<el-form-item label="描述" prop="desc1">
<el-input v-model="insertForm.desc1"></el-input>
</el-form-item>
<el-form-item label="讲师" prop="teacher">
<el-input v-model="insertForm.teacher"></el-input>
</el-form-item>
<el-form-item label="课程封面" prop="picture">
<el-upload class="avatar-uploader" action="http://localhost:92/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('insertForm')">添加</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogInsertVisible: false,
current: 1,
pageSize: 3,
pageSizes: [2, 3, 5],
total: 0,
tableData: [],
rows: [],
courses: [],
searchForm: {
courseid: '',
courseEnum: [],
},
rulesForm: {
name: [{
required: true,
message: '请输入活动名称',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
],
desc: [{
required: true,
message: '请填写课程描述',
trigger: 'blur'
}],
teacher: [{
required: true,
message: '请输入课程的讲师',
trigger: 'blur'
}],
price: [{
required: true,
message: '请填写正确的',
trigger: 'blur'
}],
},
insertForm: {
name: '',
courseid: '',
price: '',
desc1: '',
teacher: '',
picture: '',
},
imageUrl: '',
}
},
created: function() {
//初始化列表
this.initData();
//枚举课程分类
this.initCourses();
},
methods: {
submitForm(formName) {
console.log(this.insertForm);
console.log(this.insertForm);
this.$refs[formName].validate((valid) => {
if (valid) {
this.axios.post('http://localhost:92/course/insert', this.insertForm).then((response) => {
if (response.data) {
this.$message({
message: '恭喜你，添加成功',
type: 'success'
});
this.initData();
this.dialogInsertVisible=false;
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
openInsertDialog() {
console.log(this.courses);
this.dialogInsertVisible = true;
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
if (this.dialogInsertVisible) {
//写法 res.result
this.insertForm.picture = res.result;
}
},
searchData() {
if (this.searchForm.courseid == 1) {
this.searchForm.courseEnum = 'COURSE_ONE';
} else if (this.searchForm.courseid == 2) {
this.searchForm.courseEnum = 'COURSE_TWO';
} else if (this.searchForm.courseid == 3) {
this.searchForm.courseEnum = 'COURSE_THREE';
} else if (this.searchForm.courseid == 4) {
this.searchForm.courseEnum = 'COURSE_FOUR';
} else if (this.searchForm.courseid == 5) {
this.searchForm.courseEnum = 'COURSE_FIVE';
} else {
this.searchForm.courseEnum = null;
}
this.initData();
},
initCourses() {
this.axios.get('http://localhost:92/course/findAll').then((response) => {
this.courses = response.data.result;
});
},
initData() {
this.axios.get('http://localhost:92/course/list', {
params: {
current: this.current,
size: this.pageSize,
courseid: this.searchForm.courseEnum,
}
}).then((response) => {
this.tableData = response.data.result.records;
this.total = response.data.result.total;
});
},
handleEdit() {
},
handleDelete() {
},
handleSizeChange(val) {
this.pageSize = val;
this.initData();
},
handleCurrentChange(val) {
this.current = val;
this.initData();
},
handleSelectionChange(val) {
this.rows = val;
}
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
标签：前后,searchForm,courseid,前端,分离,response,courseEnum,total,message 来源： https://www.cnblogs.com/liuyazhou0055/p/13080708.html