这一期来做旅游景点数据的增删改查
先看下我们做好的效果是这样的:
## 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 // 消息框显示的时长(毫秒)});})},