从0开始搭建vue + flask 旅游景点数据分析系统(十):Element-UI消息插件封装

上一期我们使用过了elementui的Message来弹出消息提示框,但是上期的写法每次都要在vue文件中引入Message,并且要写不少重复代码,这一期就以插件方式将message封装到Vue的实例中。

创建plugins/message.js

这边加了判断的作用是,如果是直接塞入返回的数据,则不需要判断成功失败,根据返回的response.data.code自行判断。

如果手动传入(我们自己给出消息)这种情况,可以自己给出消息信息和类型,当然如果不传,那么默认是success,消息显示的时间默认是2000ms。

jsx 复制代码
import { Message } from 'element-ui';

Vue.prototype.$message = function(response, type='success', duration = 2000,) {
            let message;
            let messageType;

            // 检查 response.data 是否存在
            if (response.data) {
                message = response.data.message;
                messageType = response.data.code === 0 ? 'success' : 'error';
            } else {
                // 如果 response.data 不存在,直接使用 response
                message = response || '未知错误';
                messageType = type || 'error'; // 使用传入的类型或者默认为 'error'
            }

            // 显示消息
            Message({
                message: message,
                type: messageType,
                duration: duration
            });
        };

export default MessagePlugin;

修改main.js

jsx 复制代码
import MessagePlugin from './plugins/message'; // 引入插件

Vue.use(ElementUI)
Vue.use(MessagePlugin); // 使用插件

然后就可以把之间用到message的地方全部替换掉,例如这样

jsx 复制代码
handleSaveTour() {
      if (this.form.id) {
        updateTour(this.form.id, this.form).then(res=>{
          // console.log(res.data.message)
          this.$message(res); // 使用封装的 $message 函数
        })
      } else {
        addTour(this.form).then(res=>{
          console.log(res.data.message)
          this.$message(res); // 使用封装的 $message 函数
        })
      }

效果:

再测试下错误的情况,在后端添加一个字段验证:

python 复制代码
@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}')

    notnull_fields = ['title']
    for field in notnull_fields:
        if data[field]=='' or data[field]==None:
            return make_response(code=1, message= f'错误,字段不能为空: {field}')

新增一个空的景点(注意,在前端我们没有做任何验证),然后得到的是错误提示,这个是使用插件化的消息框得到的效果:

相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
盛夏绽放8 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
markyankee10112 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
UI设计和前端开发从业者13 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
翻滚吧键盘14 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹14 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_9709563915 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘15 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js