java前后端分离之Scenic

Posted 潇洒哥浩浩

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java前后端分离之Scenic相关的知识，希望对你有一定的参考价值。

<template>
<div class="scenic">
<!-- ############添加对话框########## -->
<el-dialog title="发布景点" :visible.sync="dialogFormVisible" width="60%" center>
<el-form :model="insertForm" :rules="insertFormRules" ref="insertForm">
<el-form-item label="景点名称" prop="name">
<el-input v-model="insertForm.name"></el-input>
</el-form-item>
<el-form-item label="景点等级" prop="level">
<el-select v-model="insertForm.level" placeholder="请选择等级">
<el-option :label="level" v-for="level in levels" :value="level"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属风格" prop="type">
<el-select v-model="insertForm.type" placeholder="请选择风格">
<el-option :label="type.name" v-for="type in types" :value="type.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属地区">
<el-cascader v-model="xpcd" :options="pcd" :props="pcdProps"></el-cascader>
</el-form-item>
<el-form-item label="景区门票" prop="ticket">
<el-input v-model="insertForm.ticket"></el-input>
</el-form-item>
<el-form-item label="景点图片" prop="pic">
<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 label="景区介绍" prop="introduction">
<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="insertForm.introduction"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="insertData(‘insertForm‘)">发布</el-button>
<el-button @click="resetForm(‘insertForm‘)">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>

<!-- ############修改对话框########## -->
<el-dialog title="发布景点" :visible.sync="editFormVisible" width="60%" center>
<el-form :model="editForm">
<el-form-item label="景点名称" prop="name">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="景点等级" prop="level">
<el-select v-model="editForm.level" placeholder="请选择等级">
<el-option :label="level" v-for="level in levels" :value="level"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属风格" prop="type">
<el-select v-model="editForm.type" placeholder="请选择风格">
<el-option :label="type.name" v-for="type in types" :value="type.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属地区">
<el-cascader v-model="xpcd" :options="pcd" :props="pcdProps"></el-cascader>
</el-form-item>
<el-form-item label="景区门票" prop="ticket">
<el-input v-model="editForm.ticket"></el-input>
</el-form-item>
<el-form-item label="景点图片" prop="pic">
<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 label="景区介绍" prop="introduction">
<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="editForm.introduction"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="editData(‘editForm‘)">发布</el-button>
</el-form-item>
</el-form>
</el-dialog>

<!-- 添加按钮 -->
<el-row>
<el-col>
<el-button type="success" size="mini" @click="openInsertDialog">发布景点</el-button>
</el-col>
</el-row>

<!-- @@@@@@@@@@2搜索效果@@@@@@@@@@@@ -->
<el-row style="margin-bottom: 30px;">
<el-col style="text-align: left; margin-left: 100px;">
<div style="margin-bottom: 10px;">
<strong>按地区：</strong>
<el-radio-group v-model="searchForm.pid" @change="hanleProvinceChange">
<el-radio-button :label="province.id" v-for="province in provinces">{{province.name}}</el-radio-button>
<el-radio-button label="0">全部</el-radio-button>
</el-radio-group>
</div>
<div style="margin-bottom: 10px;">
<strong>按等级：</strong>
<el-radio-group v-model="searchForm.level" @change="handleLevelChange">
<el-radio-button :label="index+1" v-for="(item,index) in levels">{{item}}</el-radio-button>
<el-radio-button label="0">全部</el-radio-button>
</el-radio-group>
</div>
<div>
<strong>按风格：</strong>
<el-radio-group v-model="searchForm.type" @change="handleTypeChange">
<el-radio-button :label="type.id" v-for="type in types">{{type.name}}</el-radio-button>
<el-radio-button label="0">全部</el-radio-button>
</el-radio-group>
</div>
</el-col>
</el-row>

<!-- @@@@@@@@@@@@列表效果@@@@@@@@@@@ -->
<el-row>
<el-col :span="5" v-for="row in tableData" :offset="1">
<el-card :body-style="{ padding: ‘0px‘ }">
<!-- 图片 -->
<img :src="row.pic" class="image">
<!-- 文字 -->
<div style="padding: 0px; text-align: left; margin-left: 10px;">
<div>景区名称：{{row.name}}</div>
<div>景区位置：{{row.pname}}</div>
<div>景区门票：{{row.ticket}}</div>
<div>景区等级：{{row.level}}</div>
<div class="bottom clearfix">
<el-button size="mini" type="primary" @click="openEditDialog(row)">修改</el-button>
<el-button size="mini" type="danger" @click="deleteData(row)">删除</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
:page-sizes="pageSizes" :page-size="pageSize" :total="total" layout="prev, pager, next,jumper,total,sizes">
</el-pagination>
</div>
</template>

<script>
export default {
data() {
return {
editFormVisible: false,
imageUrl: ‘‘,
xpcd: [],
pcd: [],
pcdProps: {
value: ‘id‘,
label: ‘name‘,
children: ‘list‘
},
editForm: {
id:0,
name: ‘‘,
level: null,
type: ‘‘,
province: ‘‘,
city: ‘‘,
country: ‘‘,
ticket: ‘‘,
pic: ‘‘,
introduction: ‘‘
},
insertForm: {
name: ‘‘,
level: null,
type: ‘‘,
province: ‘‘,
city: ‘‘,
country: ‘‘,
ticket: ‘‘,
pic: ‘‘,
introduction: ‘‘
},
insertFormRules: {
name: [{
required: true,
message: ‘请输入景点名称‘,
trigger: ‘blur‘
}]
},
dialogFormVisible: false,
levels: [],
pageSize: 4,
pageSizes: [4, 8, 12],
total: 0,
current: 1,
tableData: [],
provinces: [],
types: [],
searchForm: {
pid: 0,
level: ‘‘,
type: ‘‘,
levelEnum:‘‘
}
}
},
created: function() {
this.initData();
this.initLevels();
this.initProvinces();
this.initTypes();
this.initPCD();
},
methods: {
/* 修改 */
/* 添加 */
editData(formName) {
//判断结果
if (this.xpcd.length > 0) {
this.editForm.province = this.xpcd[0];
this.editForm.city = this.xpcd[1];
this.editForm.country = this.xpcd[2];
}
this.axios.post(‘http://localhost:92/scenic/update‘, this.editForm).then((response) => {
if (response.data) {
this.$message({
message: ‘修改成功‘,
type: ‘success‘
});
this.editFormVisible = false;
this.initData();
} else {
this.$message({
message: ‘修改失败‘,
type: ‘warning‘
});
}
});
},

/* 打开修改的对话框 */
openEditDialog(row) {
Object.assign(this.editForm,row);

//三级联动回显
this.xpcd=[];
this.xpcd.push(row.province);
this.xpcd.push(row.city);
this.xpcd.push(row.country);

//图片回显
this.imageUrl=row.pic;
this.editFormVisible = true;
},
/* 删除 */
deleteData(row) {
this.$confirm(‘你确定要删除数据吗？‘, ‘提示‘, {
confirmButtonText: ‘确定‘,
cancelButtonText: ‘删除‘,
type: ‘warning‘
}).then(() => {
this.axios.get(‘http://localhost:92/scenic/delete‘, {
params: {
ids: row.id
}
}).then((response) => {
if (response.data.result) {
this.$message({
message: ‘删除成功‘,
type: ‘success‘
});
this.initData();
} else {
this.$message({
message: ‘删除失败‘,
type: ‘info‘
});
}
});
}).catch(() => {
this.$message({
message: ‘已取消删除‘,
type: ‘info‘
});
});
},
/* 图片上传 */
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
if (this.dialogFormVisible) {
//写法 res.result
this.insertForm.pic = res.result;
}else if(this.editFormVisible){
this.editForm.pic=res.result;
}
},
/* 三级联动查询 */
initPCD() {
this.axios.get(‘http://localhost:92/district/findAll‘).then((response) => {
console.log(response.data);
this.pcd = response.data;
});
},
/* 添加 */
insertData(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//判断结果
if (this.xpcd.length > 0) {
this.insertForm.province = this.xpcd[0];
this.insertForm.city = this.xpcd[1];
this.insertForm.country = this.xpcd[2];
}
this.axios.post(‘http://localhost:92/scenic/insert‘, this.insertForm).then((response) => {
if (response.data) {
this.$message({
message: ‘添加成功‘,
type: ‘success‘
});
this.dialogFormVisible = false;
this.initData();
} else {
this.$message({
message: ‘添加失败‘,
type: ‘warning‘
});
}
});
} else {
console.log(‘error submit!!‘);
return false;
}
});
},
/* 重置按钮 */
resetForm(formName) {
this.$refs[formName].resetFields();
},
/* 打开对话框 */
openInsertDialog() {
this.dialogFormVisible = true;
},
/* 定义搜索时查询风景的方法 */
initTypes() {
this.axios.get(‘http://localhost:92/type/list‘).then((response) => {
this.types = response.data.result;
});
},
/* 定义搜索时改变风景的方法 */
handleTypeChange() {
this.initData();
},
/* 定义搜索时改变等级的方法 */
handleLevelChange() {
if (this.searchForm.level == 1) {
this.searchForm.levelEnum = ‘LEVEL1‘;
} else if (this.searchForm.level == 2) {
this.searchForm.levelEnum = ‘LEVEL2‘;
} else if (this.searchForm.level == 3) {
this.searchForm.levelEnum = ‘LEVEL3‘; //LEVEL_THREE
} else if (this.searchForm.level == 4) {
this.searchForm.levelEnum = ‘LEVEL4‘;
} else if (this.searchForm.level == 5) {
this.searchForm.levelEnum = ‘LEVEL5‘;
} else {
this.searchForm.levelEnum = null;
}
this.initData();
},
/* 定义搜索时查询地区的方法 */
initProvinces() {
this.axios.get(‘http://localhost:92/district/list‘).then((response) => {
this.provinces = response.data.result;
});
},
/* 定义搜索时改变省份的方法 */
hanleProvinceChange() {
this.initData();
},
/* 查询枚举常量 */
initLevels() {
this.axios.get(‘http://localhost:92/scenic/levels‘).then((response) => {
this.levels = response.data.result;
});
},
/* 初始化列表数据 */
initData() {
this.axios.get(‘http://localhost:92/scenic/list‘, {
params: {
current: this.current,
size: this.pageSize,
province: this.searchForm.pid,
type: this.searchForm.type,
level: this.searchForm.levelEnum
}
}).then((response) => {
this.tableData = response.data.result.records;
this.total = response.data.result.total;
});
},
/* 改变每页显示的条数 */


handleSizeChange(val) {
this.pageSize = val;
this.initData();
},
/* 当前页改变的方法 */
handleCurrentChange(val) {
this.current = val;
this.initData();
}

}
}
</script>

<style>
.image {
width: 100%;
display: block;
}

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

以上是关于java前后端分离之Scenic的主要内容，如果未能解决你的问题，请参考以下文章

秒懂《前后端分离》之谬误

java前后端分离之Patient

java前后端分离之Patient

什么是前后端，有没有前后端分离，还有如何区分mvc与前后端分离

从 MVC 到前后端分离（上）

前后端分离与不分离的区别总结