上一期我们使用过了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}')
新增一个空的景点(注意,在前端我们没有做任何验证),然后得到的是错误提示,这个是使用插件化的消息框得到的效果: