从0开始搭建vue + flask 旅游景点数据分析系统（九）：旅游景点管理之增删改查

这一期来做旅游景点数据的增删改查

先看下我们做好的效果是这样的：
在这里插入图片描述 ## 1 后台接口

这里的接口已经考虑到了分页的情况，因为前端的表格是带有分页的，接受的前端传过来的get参数为 title 、page、 limit ，titie是查询的关键词，会根据景点的title去模糊查询。

@main.route('/tours', methods=['GET'])
def get_tours():try:title = request.args.get('title', '')  # 获取查询参数中的 titlepage = int(request.args.get('page', 1))  # 获取当前页码，默认为 1limit = int(request.args.get('limit', 10))  # 获取每页显示的记录数，默认为 10# 根据 title 进行模糊搜索query = Tour.query.filter(Tour.title.like(f'%{title}%'))# 计算总数和获取当前页数据total = query.count()  # 总记录数tours = query.offset((page - 1) * limit).limit(limit).all()  # 当前页的数据result = tours_schema.dump(tours)  # 使用你的序列化方案处理数据return make_response(data={'total': total, 'records': result})except Exception as e:return make_response(code=1, message=str(e))

2 前端表格

前端表格分为表头、表格数据部分、分页，放在一个el-card中，注意到表格栏中有景点图片的处理，可以在表格中直接展示图片。

<el-card class="box-card"><div slot="header" class="header"><span class="header-title">旅游景点管理</span><div class="header-controls"><el-input v-model="searchTitle" placeholder="输入标题进行搜索" class="search-input"></el-input><el-button type="primary" @click="fetchData">搜索</el-button><el-button type="success" @click="handleAddTour">添加景点</el-button></div></div><el-table :data="tours" style="width: 100%"><el-table-column label="图片" width="120"><template slot-scope="scope"><el-image:src="scope.row.img"class="tour-image":alt="scope.row.title"fit="cover"lazy/></template></el-table-column><el-table-column prop="title" label="景点名称" min-width="180"></el-table-column><el-table-column prop="title_en" label="别名" min-width="180"></el-table-column><el-table-column prop="comments" label="评论数" min-width="100"></el-table-column><el-table-column prop="score" label="评分" min-width="100"></el-table-column><el-table-column prop="nation" label="国家" min-width="120"></el-table-column><el-table-column prop="city" label="城市" min-width="120"></el-table-column><el-table-column label="操作" min-width="180"><template slot-scope="scope"><el-button @click="handleEditTour(scope.row)" type="text" size="small">编辑</el-button><el-button @click="handleDeleteTour(scope.row)" type="text" size="small">删除</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize":total="totalItems"layout="total, sizes, prev, pager, next, jumper"/></el-card>

数据部分是这样的，原先的静态数据改成[]就行了，通过后台接口来获取数据：

data() {return {searchTitle: '',tours: [],// tours: [//   { id: 1, name: '东京迪士尼度假区', alias: 'Tokyo Disney Resort', reviewCount: 1500, rating: 4.8, featuredReview: '非常美丽的景点', country: '日本', city: '东京' },//   { id: 2, name: '东京塔', alias: 'Tokyo Tower', reviewCount: 2500, rating: 4.9, featuredReview: '历史悠久，气势恢宏', country: '日本', city: '东京' },//   { id: 3, name: '三鹰之森吉卜力美术馆', alias: 'Ghibli Museum', reviewCount: 1800, rating: 4.7, featuredReview: '象征自由的地标', country: '日本', city: '东京' }// ],dialogVisible: false,form: {},formLabelWidth: '100px',totalItems: 0,currentPage: 1,pageSize: 10,};},

在页面加载的时候默认让它显示第一页，进行搜索的时候，会根据关键词去查询后台接口：

mounted() {this.currentPage = 1this.loadData()},methods: {fetchData() {this.loadData()},//加载数据loadData() {tours(this.searchTitle, this.currentPage, this.pageSize).then(res => {// console.log(res.data.data.records);this.tours = res.data.data.recordsthis.totalItems = res.data.data.total})},handleCurrentChange(page) {this.currentPage = page;this.loadData();},handleSizeChange(size) {this.pageSize = size;this.loadData();},
}

还有两个分页相关的方法也可以注意下，因为分页控件可以调整页数、每页显示的数量，点击之后也需要加载数据，而且假如说这时候是有搜索关键词的，关键词也需要保持。

样式部分

.tours-container {padding: 20px;
}.header {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;
}.dialog-footer {text-align: right;
}.header-title {font-size: 18px;font-weight: bold;
}.header-controls {display: flex;align-items: center;
}.search-input {width: 300px;margin-right: 10px; /* Adjust spacing between input and buttons */
}

在tour.js中需要添加新的接口:

export function  tours(title,page=1,limit=10){return request({url:  '/tours',method: 'get',params: {title, page, limit}})
}

3 搜索效果测试

在这里插入图片描述

4 新增景点

先增加后端方法:

@main.route('/tour', methods=['POST'])
def add_tour():data = request.json  # 获取JSON数据# 这里可以进行数据验证，例如检查必填字段是否存在required_fields = ['img', 'title', 'title_en', 'comments', 'score', 'select_comment', 'nation', 'city']for field in required_fields:if field not in data:return make_response(code=1, message= f'错误,缺少字段: {field}')# 创建新的景点对象new_tour = Tour(img=data['img'],title=data['title'],title_en=data['title_en'],comments=data['comments'],score=data['score'],select_comment=data['select_comment'],nation=data['nation'],city=data['city'] )

前端部分我们先增加一个接口，使用的是POST请求：

export function  addTour(data){return request({url:  '/tour',method: 'post',data})
}

页面部分是先点击添加景点，触发handleAddTour，打开对话框：

handleAddTour() {this.dialogTitle = '新增景点'this.dialogVisible = true;this.form = {img: '',title: '',title_en: '',comments: 0,score: 0,select_comment: '',nation: '',city: ''};},<el-dialog :title="dialogTitle" :visible.sync="dialogVisible"><el-form :model="form"><el-form-item label="景点图片地址" :label-width="formLabelWidth"><el-input v-model="form.img"></el-input></el-form-item><el-form-item label="景点名称" :label-width="formLabelWidth"><el-input v-model="form.title"></el-input></el-form-item><el-form-item label="别名" :label-width="formLabelWidth"><el-input v-model="form.title_en"></el-input></el-form-item><el-form-item label="评论数" :label-width="formLabelWidth"><el-input v-model="form.comments" type="number"></el-input></el-form-item><el-form-item label="评分" :label-width="formLabelWidth"><el-input v-model="form.score" type="number"></el-input></el-form-item><el-form-item label="精选评论" :label-width="formLabelWidth"><el-input v-model="form.select_comment"></el-input></el-form-item><el-form-item label="国家" :label-width="formLabelWidth"><el-input v-model="form.nation"></el-input></el-form-item><el-form-item label="城市" :label-width="formLabelWidth"><el-input v-model="form.city"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="handleSaveTour">保存</el-button></div></el-dialog>

对话框填写完毕后，点击handleSaveTour，有后台交互，这里为了偷懒，这个对话框我们打算既支持新增也支持编辑，所以对话框的标题也是动态的数据：

 handleSaveTour() {if (this.form.id) {//更新景点信息的逻辑} else {addTour(this.form).then(res=>{console.log(res.data.message)const messageType = res.data.code === 0 ? 'success' : 'error';Message({message: res.data.message,type: messageType, // 'success' 或者 'error' 根据需要duration: 2000 // 消息框显示的时长（毫秒）});})}this.dialogVisible = false;},

根据返回code，弹出不同的消息框（elmentui的Message）。

我们添加了一个测试景点：

在这里插入图片描述

返回消息框：
在这里插入图片描述

5 修改景点

先新增前后端的接口：

@main.route('/tour/<int:id>', methods=['PUT'])
def update_tour(id):data = request.json  # 获取JSON数据tour = Tour.query.get(id)  # 根据ID查找景点if not tour:return make_response(code=1, message='景点不存在')# 更新景点的字段for field in ['img', 'title', 'title_en', 'comments', 'score', 'select_comment', 'nation', 'city']:if field in data:setattr(tour, field, data[field])db.session.commit()return make_response(code=0, message='修改景点成功')

tour.js

// 修改现有景点
export function updateTour(id, data) {return request({url: `/tour/${id}`,method: 'put',data});
}

然后就很容易，修改补全刚才未完成的*handleSaveTour 就行了，基本上和新增的都一样。逻辑就是如果form.id 存在，说明是一个修改操作，如果不存在，说明是一个新增操作。*

 handleSaveTour() {if (this.form.id) {updateTour(this.form.id, this.form).then(res=>{console.log(res.data.message)const messageType = res.data.code === 0 ? 'success' : 'error';Message({message: res.data.message,type: messageType, // 'success' 或者 'error' 根据需要duration: 2000 // 消息框显示的时长（毫秒）});})} else {addTour(this.form).then(res=>{console.log(res.data.message)const messageType = res.data.code === 0 ? 'success' : 'error';Message({message: res.data.message,type: messageType, // 'success' 或者 'error' 根据需要duration: 2000 // 消息框显示的时长（毫秒）});})}this.dialogVisible = false;},

在这里插入图片描述

6 删除景点

先增加后端接口

@main.route('/tour/<int:id>', methods=['DELETE'])
def delete_tour(id):tour = Tour.query.get(id)  # 根据ID查找景点if not tour:return make_response(code=1, message='景点不存在')db.session.delete(tour)db.session.commit()return make_response(code=0, message='删除景点成功')

然后修改前端tour.js

// 删除景点
export function deleteTour(id) {return request({url: `/tour/${id}`,method: 'delete'});
}

最后就是完善一下 *handleDeleteTour*这个方法就是点击每行上的删除按钮触发的:

handleDeleteTour(tour) {deleteTour(tour.id).then(res=>{const messageType = res.data.code === 0 ? 'success' : 'error';Message({message: res.data.message,type: messageType, // 'success' 或者 'error' 根据需要duration: 2000 // 消息框显示的时长（毫秒）});})},

在这里插入图片描述