新增自由行
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>