ssm项目前后端分离

创建maven项目

使用pom文件导入必要的第三方包

spring配置文件，数据库连接配置文件，即日志配置文件，放在resources目录

spring mybatis集成配置文件，放在resources目录

springmvc 配置文件，放在WEB-INF目录

web.xml配置文件，放在WEB-INF目录创建项目结构

下载插件idea-mybatis-generator

跨域请求过滤器（CorsFilter），放入util包，需要在web.xml中配置

在util包加入ReturnData，统一Restful接口返回值格式

通过测试来验证框架的集成

2. 后台开发

better mybatis generator

1. 配置数据源

生成后台程序

1. mapper层添加一个查询方法

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 {

  /**
   * 删除
   * @param id
   * @return
   */
    int deleteByPrimaryKey(Integer id);

    int insert(Order record);


    int insertSelective(Order record);

    Order selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Order record);

   /**
   * 修改
   * @param record
   * @return
   */
    int updateByPrimaryKey(Order record);

    /**
     * 查询订单的信息
     * @param orderDesc
     * @return
     */
    List<Order> listOrders(@Param("orderDesc") String orderDesc);
}

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>

或

<select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
  select 
  <include refid="Base_Column_List" />
  from t_order
  where id = #{id,jdbcType=INTEGER}
</select>

<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>

完整

<?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.zking.ssm.mapper.OrderMapper">
  <resultMap id="BaseResultMap" type="com.zking.ssm.model.Order">
    <id column="id" jdbcType="INTEGER" property="id" />
    <result column="order_desc" jdbcType="VARCHAR" property="orderDesc" />
    <result column="amount" jdbcType="FLOAT" property="amount" />
    <result column="cust_name" jdbcType="VARCHAR" property="custName" />
    <result column="cust_phone" jdbcType="VARCHAR" property="custPhone" />
    <result column="cust_addr" jdbcType="VARCHAR" property="custAddr" />
  </resultMap>
  <sql id="Base_Column_List">
    id, order_desc, amount, cust_name, cust_phone, cust_addr
  </sql>
  <select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
    select 
    <include refid="Base_Column_List" />
    from t_order
    where id = #{id,jdbcType=INTEGER}
  </select>

  <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>

  <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
    delete from t_order
    where id = #{id,jdbcType=INTEGER}
  </delete>
  <insert id="insert" keyColumn="id" keyProperty="id" parameterType="com.zking.ssm.model.Order" useGeneratedKeys="true">
    insert into t_order (order_desc, amount, cust_name, 
      cust_phone, cust_addr)
    values (#{orderDesc,jdbcType=VARCHAR}, #{amount,jdbcType=FLOAT}, #{custName,jdbcType=VARCHAR}, 
      #{custPhone,jdbcType=VARCHAR}, #{custAddr,jdbcType=VARCHAR})
  </insert>
  <insert id="insertSelective" keyColumn="id" keyProperty="id" parameterType="com.zking.ssm.model.Order" useGeneratedKeys="true">
    insert into t_order
    <trim prefix="(" suffix=")" suffixOverrides=",">
      <if test="orderDesc != null">
        order_desc,
      </if>
      <if test="amount != null">
        amount,
      </if>
      <if test="custName != null">
        cust_name,
      </if>
      <if test="custPhone != null">
        cust_phone,
      </if>
      <if test="custAddr != null">
        cust_addr,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides=",">
      <if test="orderDesc != null">
        #{orderDesc,jdbcType=VARCHAR},
      </if>
      <if test="amount != null">
        #{amount,jdbcType=FLOAT},
      </if>
      <if test="custName != null">
        #{custName,jdbcType=VARCHAR},
      </if>
      <if test="custPhone != null">
        #{custPhone,jdbcType=VARCHAR},
      </if>
      <if test="custAddr != null">
        #{custAddr,jdbcType=VARCHAR},
      </if>
    </trim>
  </insert>
  <update id="updateByPrimaryKeySelective" parameterType="com.zking.ssm.model.Order">
    update t_order
    <set>
      <if test="orderDesc != null">
        order_desc = #{orderDesc,jdbcType=VARCHAR},
      </if>
      <if test="amount != null">
        amount = #{amount,jdbcType=FLOAT},
      </if>
      <if test="custName != null">
        cust_name = #{custName,jdbcType=VARCHAR},
      </if>
      <if test="custPhone != null">
        cust_phone = #{custPhone,jdbcType=VARCHAR},
      </if>
      <if test="custAddr != null">
        cust_addr = #{custAddr,jdbcType=VARCHAR},
      </if>
    </set>
    where id = #{id,jdbcType=INTEGER}
  </update>
  <update id="updateByPrimaryKey" parameterType="com.zking.ssm.model.Order">
    update t_order
    set order_desc = #{orderDesc,jdbcType=VARCHAR},
      amount = #{amount,jdbcType=FLOAT},
      cust_name = #{custName,jdbcType=VARCHAR},
      cust_phone = #{custPhone,jdbcType=VARCHAR},
      cust_addr = #{custAddr,jdbcType=VARCHAR}
    where id = #{id,jdbcType=INTEGER}
  </update>
</mapper>

1. 增加service层方法

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;

  /**
   * 查询
   * @param orderDesc
   * @return
   */
    @Override
    public List<Order> listOrders(String orderDesc) {
        return orderMapper.listOrders(orderDesc);
    }

  /**
   * 增加
   * @param record
   */
  @Override
    public void insert(Order record) {
        orderMapper.insert(record);
    }

  /**
   * 删除
   * @param id
   * @return
   */
    @Override
    public int deleteByPrimaryKey(Integer id) {
        return orderMapper.deleteByPrimaryKey(id);
    }

  /**
   * 修改
   * @param record
   * @return
   */
    @Override
    public int updateByPrimaryKeySelective(Order record) {
        return orderMapper.updateByPrimaryKeySelective(record);
    }

}

1. 增加controller层

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;

  /**
   * 查询
   * @param orderDesc
   * @return
   */
    @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;
    }

  /**
   * 增加
   * @param order
   * @return
   */
    @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;
        }
    }

  /**
   * 删除
   * @param o
   * @return
   */
    @PostMapping("/del")
    public Object del(Order o) {
        Map<String,Object> data = new HashMap<>();
        try {
            orderService.deleteByPrimaryKey(o.getId());
            data.put("code", 1);
            data.put("msg", "操作成功1111111111");
            return  data;
        } catch (Exception e) {
            e.printStackTrace();
            data.put("code", -1);
            data.put("msg", "操作失败");
            return data;
        }
    }

  /**
   * 修改
   * @param order
   * @return
   */
    @PostMapping("/upd")
    public Object upd(Order order) {
        Map<String,Object> data = new HashMap<>();
        try {
            orderService.updateByPrimaryKeySelective(order);
            data.put("code", 1);
            data.put("msg", "操作成功");
            return  data;
        } catch (Exception e) {
            e.printStackTrace();
            data.put("code", -1);
            data.put("msg", "操作失败");
            return data;
        }
    }

}

2. 前台开发

1. 开发前台页面

<template>
<div>

<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="addOrder()">新增</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-column label="操作" min-width="70" align="center">
<template slot-scope="scope">
<el-button type="primary" @click="del(scope.$index,scope.row)">删除</el-button>
<el-button type="primary" @click="upd(scope.$index,scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
<strong>

<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
<el-form :model="orderForm">
<el-form-item label="描述" :label-width="formLabelWidth">
<el-input v-model="orderForm.orderDesc" autocomplete="off" :style="{width: formEleWidth}"></el-input>
</el-form-item>
<el-form-item label="金额" :label-width="formLabelWidth">
<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>
</strong>
</div>
</template>
<script>
export default {
data: function() {
return {
ts: new Date().getTime(),
orderDesc: '',
orders: [],
dialogFormVisible: false,
//控制对话框是否显示，默认是隐藏状态
dialogFormVisible: false,
//统一控制标签的宽度
formLabelWidth: '40px',
//统一控制表单元素的宽度
formEleWidth: '400px',
//定义表单对应的model
orderForm: {
orderDesc: '',
amount: '',
custName: null,
custPhone: '',
custAddr: ''
},
title:''
};
},
//直接不用点击查询自动出来查询全部
created() {
this.qry();
},
methods: {
rest() {
this.orderForm.orderDesc = null;
this.orderForm.amount = null;
this.orderForm.custName = null;
this.orderForm.custPhone = null;
this.orderForm.custAddr = null;
this.orderForm.id = null;
},
//查询
qry() {
let url = this.axios.urls.ORDERMSG_REQ;
this.axios.get(url, {
params: {
orderDesc: this.orderDesc
}
}).then(resp => {
console.log(resp);
this.orders = resp.data.data;
}).catch(error => {
console.log(error);
})
},
//删除
del(index, row) {
this.rest();
this.orderForm = row;
console.log(row)
let url = this.axios.urls.ORDERMSG_DEL;
this.axios.post(url, this.orderForm).then(resp => {
console.log(resp);
if (resp.data.code == 1) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.qry();
} else {
this.$message({
message: resp.data.msg,
type: 'error'
});
}
})
},
//修改
upd(index, row) {
this.rest();
this.dialogFormVisible = true;
this.title = "修改";
this.orderForm = row;
},
//新增
addOrder() {
this.dialogFormVisible = true;
this.title="新增"
},
closeBookForm() {
this.dialogFormVisible = false;
},
//新增
save() {
let url = this.axios.urls.ORDERMSG_ADD;
this.axios.post(url, this.orderForm).then(resp => {
//操作成功，关闭弹出框，执行查询以便于显示最新数据
//操作失败，提示失败，关闭弹出框
if (resp.data.code == 1) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.dialogFormVisible = false;
this.qry();
} else {
this.$message({
message: resp.data.msg,
type: 'error'
});
this.dialogFormVisible = false;
}
}).catch(error => {})
},
}
}
</script>
<style>
</style>
action.js
/**
* 对后台请求的地址的封装，URL格式如下：
* 模块名_实体名_操作
*/
export default {
   //服务器
   'SERVER': 'http://localhost:8080/ssm',
//获取订单信息
'ORDERMSG_REQ':'/orders',
//增加书本信息
'ORDERMSG_ADD':'/insert',
//删除
'ORDERMSG_DEL':'/del',
//修改
'ORDERMSG_UPD':'/upd',
   //获得请求的完整地址，用于mockjs测试时使用
   'getFullPath': k => {
       return this.SERVER + this[k];
   }
}

增加

IOrderservice层

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 {

    /**
     * 查询
     * @param orderDesc
     * @return
     */
    List<Order> listOrders(@Param("orderDesc") String orderDesc);

    /**
     * 增加
     * @param record
     */
    void insert(Order record);

    int deleteByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Order record);

}

OrderService

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;

  /**
   * 查询
   * @param orderDesc
   * @return
   */
    @Override
    public List<Order> listOrders(String orderDesc) {
        return orderMapper.listOrders(orderDesc);
    }

  /**
   * 增加
   * @param record
   */
  @Override
    public void insert(Order record) {
        orderMapper.insert(record);
    }

  /**
   * 删除
   * @param id
   * @return
   */
    @Override
    public int deleteByPrimaryKey(Integer id) {
        return orderMapper.deleteByPrimaryKey(id);
    }

  /**
   * 修改
   * @param record
   * @return
   */
    @Override
    public int updateByPrimaryKeySelective(Order record) {
        return orderMapper.updateByPrimaryKeySelective(record);
    }

}

controller层

/**
 * 增加
 * @param order
 * @return
 */
  @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;
      }
  }

删除！

修改！

原文链接：https://blog.csdn.net/m0_60375943/article/details/122438821