ssm阶段考试

ssm阶段考试

目录

前言：今天跟大家分享的是ssm阶段考试，将一些实用的代码进行分享，考试也是对知识的巩固，这边对前段和后端分开进行 *** 作。

一、后端：

1、步骤：

1.1、先将项目导入到IEDA中，将maven环境配置好以及将项目部署到web中。

1.2、接下来将各个层写好，首先使用逆向工程将model层和mapper层写好：

1.3、接下里写好service和controer层：

二、前端：

1、先将功能的跳转路径定义好：

2、到界面中定义好表格以及方法：

3、查询方法：

4、增加/修改方法：增加和修改的实属一种类型的 *** 作，定义一个title，当触发增加/修改方法时将标题(title)设置为增加/修改，当进行表单提交的时候进行判断，如果title="增加"，则执行增加的方法，反之则执行修改的方法。

​ 

5、删除方法：

6、表单验证：在我们进行增加的时候往往会进行表单验证，表单里面依赖一个规则。

7、重置方法： 

---

前言：今天跟大家分享的是ssm阶段考试，将一些实用的代码进行分享，考试也是对知识的巩固，这边对前段和后端分开进行 *** 作。 一、后端： 1、步骤： 1.1、先将项目导入到IEDA中，将maven环境配置好以及将项目部署到web中。

 

1.2、接下来将各个层写好，首先使用逆向工程将model层和mapper层写好：

model：order：

package com.zking.ssm.model;

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


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

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 {

    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 listOrders(@Param("orderDesc") String orderDesc);
}

mapper.xml:

  
    
    
    
    
    
    
  
  
    id, order_desc, amount, cust_name, cust_phone, cust_addr
  
  
    select 
    
    from t_order
    where id = #{id,jdbcType=INTEGER}
  

  
    select
    
    from t_order
    
      
        and order_desc like concat(#{orderDesc,jdbcType=VARCHAR}, '%')
      
    
  

  
    delete from t_order
    where id = #{id,jdbcType=INTEGER}
  
  
    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 into t_order
    
      
        order_desc,
      
      
        amount,
      
      
        cust_name,
      
      
        cust_phone,
      
      
        cust_addr,
      
    
    
      
        #{orderDesc,jdbcType=VARCHAR},
      
      
        #{amount,jdbcType=FLOAT},
      
      
        #{custName,jdbcType=VARCHAR},
      
      
        #{custPhone,jdbcType=VARCHAR},
      
      
        #{custAddr,jdbcType=VARCHAR},
      
    
  
  
    update t_order
    
      
        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 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}
  

1.3、接下里写好service和controer层：

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 listOrders(@Param("orderDesc") String orderDesc);

    void insert(Order record);


    int deleteByPrimarykey(Integer id);

    int updateByPrimaryKeySelective(Order record);
}

service.impl:

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

controller:

package com.zking.ssm.controller;

import com.zking.ssm.model.Order;
import com.zking.ssm.service.IOrderService;
import org.apache.ibatis.annotations.Delete;
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 orders = orderService.listOrders(orderDesc);
        Map data = new HashMap<>();
        data.put("code", 1);
        data.put("msg", " *** 作成功");
        data.put("data", orders);

        return data;
    }

    @PostMapping("/insert")
    public Object insert(Order order) {
        Map 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;
    }


//    @PostMapping("/insert")
//    public Object insert(Order order){
//        Map 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"," *** 作失败");        }
//    }

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


    @PostMapping("/edit")
    public Object edit(Order order) {
        Map 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、先将功能的跳转路径定义好：

export default {
	//服务器
	'SERVER': 'http://localhost:8080/ssm',
  'ORDERMSG_REQ':'/orders',
  'ORDERMSG_ADD' : '/insert',
  'ORDERMSG_DEL' : '/delete',
  'ORDERMSG_Edit' : '/edit',
	//获得请求的完整地址，用于mockjs测试时使用
	'getFullPath': k => {
		return this.SERVER + this[k];
	}
}

2、到界面中定义好表格以及方法：

3、查询方法：

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

4、增加/修改方法：增加和修改的实属一种类型的 *** 作，定义一个title，当触发增加/修改方法时将标题(title)设置为增加/修改，当进行表单提交的时候进行判断，如果title="增加"，则执行增加的方法，反之则执行修改的方法。

增加代码：

      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;
            };
            console.log(url)
            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.rest();
              } else {
                this.$message({
                  message: resp.data.msg,
                  type: 'error'
                });
                this.dialogFormVisible = false;
              }
            }).catch(error => {
              console.log(error);
            })
          }
        });
      },

效果：

增加界面： 

修改界面：进行数据回显： 

  5、删除方法：

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

6、表单验证：在我们进行增加的时候往往会进行表单验证，表单里面依赖一个规则。

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

当进行数字验证的时候就会单独写一个函数，来定义规则。

 var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入金额'));
        }
        if (isNaN(value)) {
          return callback(new Error("金额必须为数字"));
        }
        return callback();
      }

使用表单验证需要注意的一个点：必须在表单中声明你要进行验证的属性：

 声明了要进行验证的属性，才会在表单中出现红色的星星标记，不声明则不会出现红色的星星标记。

7、重置方法： 

在每次进行增加和修改之前，都需要将表单中的数据清空：

 rest: function() {
        this.orderForm.orderDesc = null;
        this.orderForm.amount = null;
        this.orderForm.custName = null;
        this.orderForm.custPhone = null;
        this.orderForm.custAddr = null;
      },

整体代码：

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

以上就是前段和后端的所有代码,希望对你有所帮助。