CSS的:host伪类：精粹自定义Web组件选择艺术

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

先看下我们做好的效果是这样的：
## 1 后台接口

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

@main.route('/tours', methods=['GET'])
def get_tours():
    try:
        title = request.args.get('title', '')  # 获取查询参数中的 title
        page = int(request.args.get('page', 1))  # 获取当前页码，默认为 1
        limit = 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 = 1
    this.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.records
          this.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 // 消息框显示的时长（毫秒）
        });
      })
    },