目录
一、搭建环境
1、创建maven项目
2、配置maven,Tomcat
3、导入相关配置文件
二、后台开发
1、生成代码
2、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>
3、OrderMapper.java
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);
}
4、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 updateByPrimaryKey(Order record) {
return orderMapper.updateByPrimaryKey(record);
}
}
5、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 updateByPrimaryKey(Order record);
}
6、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.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/order")
public class OrderController {
@Autowired
private IOrderService orderService;
/**
* 查询方法
* @param o 前端参数封装
* @return
*/
@RequestMapping ("/orders")
public Object getOrders(Order o) {
List<Order> orders = orderService.listOrders(o.getOrderDesc());
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 order 前端参数封装
* @return
*/
@RequestMapping("/edit")
public Object edit(Order order){
orderService.updateByPrimaryKeySelective(order);
Map<String, Object> data = new HashMap<>();
data.put("code","修改成功");
return data;
}
/**
* 删除
* @param order 前端参数封装
* @return
*/
@RequestMapping("/delete")
public Object delete(Order order){
orderService.deleteByPrimaryKey(order.getId());
Map<String, Object> data = new HashMap<>();
data.put("code","删除成功");
return data;
}
}
三、前台开发
1、orderList.jsp
<template>
<div>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="订单描述">
<el-input v-model="formInline.orderDesc" placeholder="订单描述"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button type="primary" @click="add">新增</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" v-model="tableData.id" label="ID">
</el-table-column>
<el-table-column prop="orderDesc" v-model="tableData.orderDesc" label="描述">
</el-table-column>
<el-table-column prop="amount" v-model="tableData.amount" label="金额">
</el-table-column>
<el-table-column prop="custName" v-model="tableData.custName" label="用户">
</el-table-column>
<el-table-column prop="custPhone" v-model="tableData.custPhone" label="手机号">
</el-table-column>
<el-table-column prop="custAddr" v-model="tableData.custAddr" label="地址">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="deleteid(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :title="title" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="描述">
<el-input v-model="form.orderDesc" autocomplete="描述"></el-input>
</el-form-item>
<el-form-item label="金额">
<el-input v-model="form.amount" autocomplete="金额"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="form.custPhone" autocomplete="手机号"></el-input>
</el-form-item>
<el-form-item label="用户">
<el-input v-model="form.custName" autocomplete="用户"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="form.custAddr" autocomplete="地址"></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="dialogFormVis">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
ts: new Date().getTime(),
formInline: {},
tableData: [],
dialogFormVisible: false,
form: {},
title: '',
};
},
created() {
//初始化加载
let url = this.axios.urls.ORDER_LIST;
this.axios.post(url, '').then(resp => {
console.log(resp)
this.tableData = resp.data.data
});
},
methods: {
//模糊查询
onSubmit() {
let url = this.axios.urls.ORDER_LIST;
this.axios.post(url, this.formInline).then(resp => {
console.log(resp)
this.tableData = resp.data.data
});
},
// 新增
add() {
this.clear();
this.dialogFormVisible = true;
this.title = '新增界面';
},
//表单提交
dialogFormVis() {
let url;
if (this.form.id == null) {
alert('新增');
url = this.axios.urls.ORDER_add;
} else {
alert('修改');
url = this.axios.urls.ORDER_EDIT;
}
this.axios.post(url, this.form).then(resp => {
this.onSubmit();
this.dialogFormVisible = false;
});
},
//删除
deleteid(row) {
let url = this.axios.urls.ORDER_DELETE;
this.form.id=row.id;
this.axios.post(url, this.form).then(resp => {
this.onSubmit();
});
},
// 修改
edit(row) {
this.clear();
this.dialogFormVisible = true;
this.title = '修改界面';
this.form = row;
},
//清空弹出框表单
clear() {
this.form.id = null;
this.form.orderDesc = null;
this.form.amount = null;
this.form.custPhone = null;
this.form.custAddr = null;
this.form.custName = null;
}
}
}
</script>
<style>
</style>
2、action.js
/**
* 对后台请求的地址的封装,URL格式如下:
* 模块名_实体名_操作
*/
export default {
//服务器
'SERVER': 'http://localhost:8080/ssm',
// 获取订单
'ORDERMSG_REQ':'/orders',
//增加
'ORDERMSG_ADD' : '/insert',
//删除
'ORDERMSG_DEL' : '/del',
//修改
'ORDERMSG_UPDATE' : '/update',
//获得请求的完整地址,用于mockjs测试时使用
'getFullPath': k => {
return this.SERVER + this[k];
}
}
版权声明:本文为m0_60375302原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。