前后端分离
一、后端
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:
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>
结束