美年旅游_自由行_新增自由行

最新推荐文章于 2022-03-07 22:43:49 发布

明月常新

最新推荐文章于 2022-03-07 22:43:49 发布

阅读量651

点赞数

分类专栏：美年旅游文章标签： java intellij-idea spring

本文链接：https://blog.csdn.net/weixin_45905210/article/details/121412683

版权

本文介绍了如何在美年旅游项目中实现新增自由行的功能。从前端的弹出新增窗口、输入校验、ajax表单提交，到后端的Controller、Service接口及实现类、Dao接口和Mapper映射文件的详细步骤进行了讲解。

摘要由CSDN通过智能技术生成

文章目录

新增自由行

新增自由行

1：前台代码
（1）弹出新增窗口
（2）输入校验
（3）提交表单数据

• ajax提交
axios.post("/travelItem/add.do",this.formData).then((response)=> {

})
2：后台代码
（1）TravelItemController.java （控制器，meinian_web里面实现）
（2）TravelItemService.java（服务接口，meinian_interface里面实现）
（3）TravelItemServiceImpl.java（服务实现类，meinian_service里面实现）
（4）TravelItemDao.java（Dao接口，meinian_dao里面实现）
（5）TravelItemDao.xml（Mapper映射文件）

前台代码

弹出新增窗口

页面中已经提供了新增窗口，只是处于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true就可以显示出新增窗口。
新建按钮绑定的方法为handleCreate，所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。

// 重置表单
resetForm() {
   
    this.formData = {
   };
},
// 弹出添加窗口
handleCreate() {
   
    this.resetForm();
    this.dialogFormVisible = true;
},

输入校验

rules: {
   //校验规则
    code: [{
    required: true, message: '项目编码为必填项', trigger: 'blur' }],
    name: [{
    required: true, message: '项目名称为必填项', trigger: 'blur' }]
}

提交表单数据

点击新增窗口中的确定按钮时，触发handleAdd方法，所以需要在handleAdd方法中进行完善。

//添加
handleAdd () {
   
    //校验表单输入项是否合法
    this.$refs['dataAddForm'].validate((valid) => {
   
        if (valid) {
   
            //表单数据校验通过，发送ajax请求将表单数据提交到后台
            //this.formData 是表单的数据
            axios.post("/travelItem/add.do",