ssm之简单的增查与表单验证

前台：

npm install下载相关模块

OrderList.vue：

<template>
  <div>
    <h1 align="center">SSM阶段机试，ts={{ts}}</h1>

    <!-- 查询条件 -->
      <el-form style="margin-top: 15px" :inline="true" class="demo-form-inline">
         <el-form-item label="订单描述">
            <el-input v-model="orderDesc" placeholder="订单描述"></el-input>
           </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="qry()">查询</el-button>
            <el-button type="primary" @click="add">新增</el-button>
           </el-form-item>
        </el-form>

    <!--表格-->
      <el-table :data="orders" style="width: 100%;" :border="true" max-height="550">
         <el-table-column prop="id" label="编号" min-width="40" align="center"></el-table-column>
         <el-table-column prop="orderDesc" label="订单描述" min-width="100" align="center"></el-table-column>
         <el-table-column prop="amount" label="订单金额" min-width="70" align="center"></el-table-column>
         <el-table-column prop="custName" label="客户名称" min-width="70" align="center"></el-table-column>
        <el-table-column prop="custPhone" label="客户电话" min-width="70" align="center"></el-table-column>
      <el-table-column prop="custAddr" label="客户地址" min-width="70" align="center"></el-table-column>
    </el-table>

     
    <!-- 弹出窗口 -->
      <el-dialog title="增加订单" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
         <el-form :model="orderForm" :rules="rules" ref="orderForm">
            <el-form-item label="订单描述" :label-width="formLabelWidth" prop="orderDesc">
               <el-input v-model="orderForm.orderDesc" autocomplete="off" :style="{width: formEleWidth}"></el-input>
              </el-form-item>
            <el-form-item label="金额" :label-width="formLabelWidth" prop="amount">
               <el-input v-model="orderForm.amount" autocomplete="off" :style="
    {width: formEleWidth}"></el-input>
              </el-form-item>
            <el-form-item label="客户" :label-width="formLabelWidth">
               <el-input v-model="orderForm.custName" autocomplete="off" :style="
    {width: formEleWidth}"></el-input>
              </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
               <el-input v-model="orderForm.custPhone" autocomplete="off" :style="{width: formEleWidth}"></el-input>
              </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
               <el-input v-model="orderForm.custAddr" autocomplete="off" :style="{width: formEleWidth}"></el-input>
              </el-form-item>
           </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
         </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data: function() {
      var checkAmount = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入金额'));
        }
        if (isNaN(value)) {
          return callback(new Error("金额必须为数字"));
        }
        return callback();
      }

      return {
        ts: new Date().getTime(),
        orderDesc: '',
        orders: [],
        dialogFormVisible: false,
        formLabelWidth: '40px',
        formEleWidth: '400px',
        orderForm: {},

        rules: {
          orderDesc: [{
            required: true,
            message: '请输入描述',
            trigger: 'blur'
          }],
          amount: [{
            required: true,
            validator: checkAmount,
            trigger: 'blur'
          }]
        }
      };
    },



    methods: {
      qry: function() {
        let url = this.axios.urls.ORDERMSG_REQ;
        this.axios.get(url, {
          params: {
            orderDesc: this.orderDesc
          }
        }).then(resp => {
          this.orders = resp.data.data
        }).catch(error => {
          console.log(error);

        })
      },
      add: function() {
        alert("ok");
        this.dialogFormVisible = true;
      },

      save: function() {
        let url = this.axios.urls.ORDERMSG_ADD;
        this.$refs['orderForm'].validate(valid => {
          if (valid) {
            this.axios.post(url, this.stuForm).then(resp => {
              if (resp.data.code == 1) {
                alert("ok");
                this.qry();
                this.dialogFormVisible = false;
              } else {
                alert("no ok");
              }
            }).catch(error => {
              console.log(error);

            })
          }

        })

        this.axios.post(url, this.orderForm).then(resp => {
          if (resp.data.code == 1) {
            this.$message({
              message: '成功',
              type: 'success'
            });
            this.qry();
            this.dialogFormVisible = false;
          } else {
            this.$message({
              message: '错误',
              type: 'warning'
            })
          }
        }).catch(error => {
          console.log(error);
        })
      },

      closeBookForm: function() {

      }
    }
  }
</script>

<style>
</style>

对后台请求的地址的封装:action.js

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	//服务器
	'SERVER': 'http://localhost:8080/ssm',

  // 获取订单
  'ORDERMSG_REQ':'/orders',

  //增加书本信息
  'ORDERMSG_ADD' : '/insert',

	//获得请求的完整地址，用于mockjs测试时使用
	'getFullPath': k => {
		return this.SERVER + this[k];
	}
}

后台：

实体类Order:

package com.zking.ssm.model;

import java.io.Serializable;
import lombok.Data;

/**
 * t_order
 * @author 
 */
@Data
public class Order implements Serializable {
    /**
     * 订单编号
     */
    private Integer id;

    /**
     * 订单描述
     */
    private String orderDesc;

    /**
     * 订单金额
     */
    private Double amount;

    /**
     * 客户名称
     */
    private String custName;

    /**
     * 客户电话
     */
    private String custPhone;

    /**
     * 客户地址
     */
    private String custAddr;

    private static final long serialVersionUID = 1L;
}

OrderMapper.xml:

<select id="listOrders" resultType="com.zking.ssm.model.Order">
    select
    <include refid="Base_Column_List" />
    from t_order
    <where>
      <if test="orderDesc != null and orderDesc != ''">
        and order_desc like concat(#{orderDesc,jdbcType=VARCHAR}, '%')
      </if>
    </where>
  </select>

OrderMapper.java:

package com.zking.ssm.mapper;

import com.zking.ssm.model.Order;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface OrderMapper {

    int deleteByPrimaryKey(Integer id);

    int insert(Order record);

    int insertSelective(Order record);

    Order selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Order record);

    int updateByPrimaryKey(Order record);

    List<Order> listOrders(@Param("orderDesc") String orderDesc);
}

OrderService.java:

package com.zking.ssm.service;

import com.zking.ssm.mapper.OrderMapper;
import com.zking.ssm.model.Order;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author aq
 * @site www.xiaomage.com
 * @company xxx公司
 * @create  2022-01-10 15:03
 */
@Service
public class OrderService implements IOrderService {

    @Autowired
    private OrderMapper orderMapper;

    @Override
    public List<Order> listOrders(String orderDesc) {
        return orderMapper.listOrders(orderDesc);
    }

    @Override
    public void insert(Order record) {
        orderMapper.insert(record);
    }

}

接口IOrderService.java:

package com.zking.ssm.service;

import com.zking.ssm.model.Order;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * @author aq
 * @site www.xiaomage.com
 * @company xxx公司
 * @create  2022-01-10 15:02
 */
public interface IOrderService {

    List<Order> listOrders(@Param("orderDesc") String orderDesc);

    void insert(Order record);

}

OrderController.java

package com.zking.ssm.controller;

import com.zking.ssm.model.Order;
import com.zking.ssm.service.IOrderService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author aq
 * @site www.xiaomage.com
 * @company xxx公司
 * @create  2022-01-10 15:06
 */
@RestController
public class OrderController {

    @Autowired
    private IOrderService orderService;

    @GetMapping("/orders")
    public Object getOrders(String orderDesc) {
        List<Order> orders = orderService.listOrders(orderDesc);

        Map<String, Object> data = new HashMap<>();
        data.put("code", 1);
        data.put("msg", "操作成功");
        data.put("data", orders);

        return data;
    }

    @PostMapping("/insert")
    public Object insert(Order order) {

        Map<String,Object> data = new HashMap<>();
        try {
            orderService.insert(order);
            data.put("code", 1);
            data.put("msg", "操作成功");
            return  data;
        } catch (Exception e) {
            e.printStackTrace();
            data.put("code", -1);
            data.put("msg", "操作失败");
            return data;
        }
    }

}