美年旅游新增自由行

新增自由行

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",this.formData).then((response)=> {
    
    
                //隐藏新增窗口
                this.dialogFormVisible = false;
              //判断后台返回的flag值，true表示添加操作成功，false为添加操作失败
              //返回一个对象给前端判断 后台控制层的代码
            	//return new Result(true,MessageConstant.ADD_TRAVELITEM_SUCCESS);
                if(response.data.flag){
    
    //   resp.data 获得 ==>>  result  == {flag:true,message:'',data:''}
                    this.$message({
    
    
                        message: response.data.message,
                        type: 'success'
                    });
                }else{
    
    
                    this.$message.error(response.data.message);
                }
            }).finally(()=> {
    
    
                // 刷新页面（列表查询）
                this.findPage();
            });
        } else {
    
    
            this.$message.error("表单数据校验失败");
            return false;
        }
    });
},
//分页查询
findPage() {
    
    
},

回调函数的结果

后台代码

Controller

在 meinian_web 工程中创建 TravelItemController

package com.atguigu.controller;


import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.constant.MessageConstant;
import com.atguigu.entity.Result;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelItemService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController//组合注解 @Controller + @ResponseBody
@RequestMapping("/travelItem")
public class TravelItemController {
    
    
     远程调用服务
    @Reference
    private TravelItemService travelItemService;
    //新增方法方法返回值为工具类Result 封装了 flag message data
     //表单项参数名称必须和实体对象的属性名称一致，提供对应set方法，框架创建对象并封装数据。
    @RequestMapping("/add")
    public Result add(@RequestBody TravelItem travelItem){
    
    
					//接收数据用requestBody注解 因为前端是放在请求体里的
        try {
    
    
            //可能会失败所以要处理异常
            travelItemService.add(travelItem);//ctrl + ait + t 生成try... catch
            //返回一个对象给前端判断
            return new Result(true,MessageConstant.ADD_TRAVELITEM_SUCCESS);
        } catch (Exception e) {
    
    
            e.printStackTrace();
            return new Result(false, MessageConstant.ADD_TRAVELITEM_FAIL);
        }

    }



}

服务接口

在 meinian_interface 工程中创建 TravelItemService 接口

package com.atguigu.service;

import com.atguigu.pojo.TravelItem;

public interface TravelItemService {
    
    
    void add(TravelItem travelItem);
}

服务实现类

在 meinian_service 工程中创建 TravelItemServiceImpl 实现类

package com.atguigu.service.impl;

import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.TravelItemDao;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelItemService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;

@Service(interfaceClass = TravelItemService.class)//发布服务,注册到zk中心
@Transactional//声明式事务，所有方法都增加事务
public class TravelItemServiceImpl implements TravelItemService {
    
    

    @Autowired
    private TravelItemDao travelItemDao;

    @Override
    public void add(TravelItem travelItem) {
    
    
        travelItemDao.add(travelItem);
    }
}

Dao接口

在meinian_dao工程中创建TravelItemDao接口，本项目是基于Mybatis的Mapper代理技术实现持久层操作，故只需要提供接口和Mapper映射文件，无须提供实现类

package com.atguigu.dao;

import com.atguigu.pojo.TravelItem;

public interface TravelItemDao {
    
    
    void add(TravelItem travelItem);
}

Mapper映射文件

在meinian_dao 工程中创建 TravelItemDao.xml 映射文件，需要和 TravelItemDao 接口在同一目录下
新建文件夹的时候，一定一定要注意，在 resources 文件夹下面新建文件夹

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.dao.TravelItemDao">
    <!--新增-->
    <!--由于设置别名包，可以省略包名，直接写类名首字母小写  					parameterType="travelItem"-->
    <insert id="add" parameterType="travelItem">
        insert into t_travelitem(code,name,sex,age,price,type,remark,attention)
        values
        (#{code},#{name},#{sex},#{age},#{price},#{type},#{remark},#{attention})
    </insert>
</mapper>