前后端分离之再前端

2020-06-09 21:01:28 阅读：282 来源： 互联网

标签：前后 searchForm courseid 前端分离 response courseEnum total message

<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>

},
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>

.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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前后端分离之再前端