后端
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
resources目录下的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>
<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>
实体类 model目录下的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; }
util目录下配置允许跨域访问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() { } }
mapper目录下的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);
}
service目录下的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 { List<Order> listOrders(@Param("orderDesc") String orderDesc); void insert(Order record); int deleteByPrimaryKey(Integer id); int updateByPrimaryKeySelective(Order record); }
service目录下的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; @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 record) { return orderMapper.updateByPrimaryKeySelective(record); } }
Controller目录下的OrderController
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; } } @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", "操作成功"); return data; } catch (Exception e) { e.printStackTrace(); data.put("code", -1); data.put("msg", "操作失败"); return data; } } @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; } } }
前端
OrderList
<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="books" 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 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> <!-- 弹出窗口 -->
<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>
</div>
</template>
<script>
export default {
data: function() {
return {
ts: new Date().getTime(),
orderDesc: '',
books: [],
dialogFormVisible: false,
//统一控制标签的宽度
formLabelWidth: '40px',
//统一控制表单元素的宽度
formEleWidth: '400px',
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 => {
this.books = resp.data.data;
}).catch(error => {
console.log(error);
});
},
addOrder() {
this.rest();
this.dialogFormVisible = true;
this.title = "新增"
},
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;
},
closeBookForm() {
this.dialogFormVisible = false;
},
save() {
let url = this.axios.urls.ORDERMSG_ADD;
if (this.title == "修改") {
url = this.axios.urls.ORDERMSG_UPD;
}
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/',
'ORDERMSG_REQ':'/orders',
'ORDERMSG_ADD':'/insert',
'ORDERMSG_DEL':'/del',
'ORDERMSG_UPD':'/upd',
//获得请求的完整地址,用于mockjs测试时使用
'getFullPath': k => {
return this.SERVER + this[k];
}
}