SSM复习

前后端分离

一、后端

1、环境准备

①、先将项目在IEDA中打开(文件->打开->选择相应项目),在将maven环境配置好以及将项目部署到web中

 ②、Tomcat

 2、后端开发

 ①,连接数据库(在resources中增加jdbc.properties)

jdbc.properties:

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/eshop?useUnicode=true&characterEncoding=UTF-8
jdbc.username=root
jdbc.password=123456
jdbc.initialSize=10
jdbc.maxTotal=100
jdbc.maxIdle=50
jdbc.minIdle=10
jdbc.maxWaitMillis=-1

连接对应数据库(点击“+”号->数据源->mysql)

 

②、自动生成代码

创建项目结构 

生成代码

数据库->选择表右键

 最终目录:

 ③、相关代码

逆向工程将model层和mapper层

插件:

 (1)实体类(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;
}

(2)OrderMapper 

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);
}

OrderMapper .xml

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

service层和controer层

IOrderService(接口)

package com.zking.ssm.service;
import com.zking.ssm.model.Order;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface IOrderService {
//    查询
    List<Order> listOrders(@Param("orderDesc") String orderDesc);
//   增加
    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;

@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);
    }

    @Override
    public int deleteByPrimaryKey(Integer id) {
        return orderMapper.deleteByPrimaryKey(id);
    }

    @Override
    public int updateByPrimaryKeySelective(Order order) {
        return orderMapper.updateByPrimaryKeySelective(order);
    }
}
跨域请求过滤器(CorsFilter),放入util包, 需要在web.xml中配置
util包加入ReturnData,统一Restful接口返回值格式

CorsFilter:

package com.zking.ssm.util;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 配置tomcat允许跨域访问
 * 
 * @author Administrator
 *
 */
public class CorsFilter implements Filter {

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}

	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {
		HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
		HttpServletRequest req = (HttpServletRequest) servletRequest;
		// Access-Control-Allow-Origin就是我们需要设置的域名
		// Access-Control-Allow-Headers跨域允许包含的头。
		// Access-Control-Allow-Methods是允许的请求方式
		httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
		httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,jwt");
		//允许客户端,处理一个新的响应头jwt
		httpResponse.setHeader("Access-Control-Expose-Headers", "jwt");
		
		// axios的ajax会发两次请求,第一次提交方式为:option,直接返回即可
		if ("OPTIONS".equals(req.getMethod())) {
			return;
		}
		
		filterChain.doFilter(servletRequest, servletResponse);
	}

	@Override
	public void destroy() {

	}
}

controer层

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.*;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@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;
        }
    }

    @DeleteMapping("/del")
    public Object delete(Integer id){
        Map<String,Object> map=new HashMap<>();
        try {
            orderService.deleteByPrimaryKey(id);
            map.put("code",1);
            map.put("msg","操作成功");
            return map;
        }catch (Exception e){
            e.printStackTrace();
            map.put("code",-1);
            map.put("msg","操作失败");
        }
        return map;
    }

    @PostMapping("/edit")
    public Object edit(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;
    }
}

二、前端

api中的action.js,views中的组件

1、获得后台请求的地址

/**
 * 对后台请求的地址的封装,URL格式如下:
 * 模块名_实体名_操作
 */
export default {
  //服务器
  'SERVER': 'http://localhost:8080/ssm',
  //获得请求的完整地址,用于mockjs测试时使用

  //查看
  'ORDERMSG_REQ': '/orders',

  //增加
  'ORDERMSG_ADD': '/insert',

  //删除
  'ORDERMSG_DEL':'/del',

  //修改
  'ORDERMSG_Edit' : '/edit',


  'getFullPath': k => {
    return this.SERVER + this[k];
  }
}

2、订单详情(其中包括:查询、增加、删除、修改、表单验证)

<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="addOrder()">新增</el-button>
      </el-form-item>
    </el-form>
    <!--表格 -->
    <!-- :data 用来为表格绑定数据 -->
    <el-table :data="order" style="width: 100%;" :border="true" max- height="550">
      <el-table-column prop="orderDesc" label="订单描述" min-width="40" align="center"></el-table-column>
      <el-table-column prop="amount" label="金额" min-width="100" 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="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </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" prop="custName">
          <el-input v-model="orderForm.custName" autocomplete="off" :style=" {width: formEleWidth}"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="custPhone">
          <el-input v-model="orderForm.custPhone" autocomplete="off" :style="{width: formEleWidth}"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="custAddr">
          <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 checkAamount = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入金额'));
        }
        if (isNaN(value)) {
          return callback(new Error("金额必须为数字"));
        }
        return callback();
      }

      return {
        ts: new Date().getTime(),
        orderDesc: '',
        order: [],
        //控制对话框是否显示,默认是隐藏状态
        dialogFormVisible: false,
        //统一控制标签的宽度
        formLabelWidth: '40px',
        //统一控制表单元素的宽度
        formEleWidth: '400px',
        //定义表单对应的model
        orderForm: {
          orderDesc: '',
          amount: '',
          custName: null,
          custPhone: '',
          custAddr: ''
        },

        stuForm: {
          orderDesc: '',
          amount: ''
        },


        //-------定义验证规则
        rules: {
          orderDesc: [{
            required: true,
            message: '请输入订单描述',
            trigger: 'blur'
          }],
          amount: [{
            required: true,
            validator: checkAamount,
            trigger: 'blur'
          }]
        },

      };
    },

    methods: {

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

      /* 清空数据*/
      clearData() {
        this.dialogFormVisible = false;
        this.title = '';
        this.orderForm.orderDesc = '';
        this.orderForm.amount = 0;
        this.orderForm.custName = '';
        this.orderForm.custPhone = '';
        this.orderForm.custAddr = '';
      },


      addOrder: function() {
        this.dialogFormVisible = true;
        this.title = "新增";
      },


      handleEdit: function(row) {
        this.dialogFormVisible = true;
        this.title = "修改";
        this.orderForm = row;
      },

      save: function() {
        this.$refs['orderForm'].validate(valid => {
          if (valid) {
            let url = this.axios.urls.ORDERMSG_ADD;
            if (this.title == "修改") {
              url = this.axios.urls.ORDERMSG_Edit;
            };
            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();
                /* 使用时先清空数据*/
                this.clearData();

              } else {
                this.$message({
                  message: resp.data.msg,
                  type: 'error'
                });
                this.dialogFormVisible = false;
              }
            }).catch(error => {
              console.log(error);
            })
          }
        });
      },

      //保存书本信息
      // save: function() {
      //   let url = this.axios.urls.ORDERMSG_ADD;
      //   this.axios.post(url, this.orderForm).then(resp => {
      //     //操作成功,关闭弹出框,执行查询以便于显示最新数据
      //     //操作失败,提示失败,关闭弹出框

      //     /* 使用时先清空数据*/
      //     this.clearData();

      //     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 => {})
      // },


      //删除
      handleDelete: function(row) {
        let url = this.axios.urls.ORDERMSG_DEL + "?id=" + row.id;
        this.axios.delete(url).then(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'
            });
          }
        });
      },

      closeBookForm: function() {
        this.dialogFormVisible = false;
      },


    },
    created() {
      this.qry();
    }


  };
</script>
<style> </style>

结束

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值