SSM考试

最新推荐文章于 2023-01-04 17:29:47 发布

qq_57174976

最新推荐文章于 2023-01-04 17:29:47 发布

阅读量188

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_57174976/article/details/122438926

版权

前端界面代码

OrderList.vue

<template>
	<div>
		<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 prop="custAddr" 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="700px">
			<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.number="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.number="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('orderForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data: function() {
			return {
				orderDesc: '',
				books: [],
				dialogFormVisible: false,
				//统一控制标签的宽度
				formLabelWidth: '100px',
				//统一控制表单元素的宽度 
				formEleWidth: '400px',
				orderForm: {
					orderDesc: null,
					amount: null,
					custName: null,
					custPhone: null,
					custAddr: null
				},
				title: '',
				rules: {
					orderDesc: [{
						required: true,
						message: "订单描述不能为空",
						trigger: "change"
					}],
					amount: [{
							required: true,
							message: '金额不能为空'
						},
						{
							type: 'number',
							message: '金额必须为数字值'
						}
					],
					custName: [{
						required: true,
						message: "客户不能为空",
						trigger: "change"
					}],
					custPhone: [{
							required: true,
							message: '手机号不能为空'
						},
						{
							type: 'number',
							message: '手机号必须为数字值'
						}
					],
					custAddr: [{
						required: true,
						message: "地址不能为空",
						trigger: "change"
					}]
				},
			};
		},
		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() {
				this.rest();
				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.dialogFormVisible = true;
				this.title = "新增"
			},
			del(index, row) {
				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.dialogFormVisible = true;
				this.title = "修改";
				this.orderForm = row;
			},
			closeBookForm() {
				this.dialogFormVisible = false;
				this.qry();
			},
			save(orderForm) {
				this.$refs[orderForm].validate((valid) => {
					if (valid) {
						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;
								this.qry();
							}
						});
					} else {
						return false;
					}
				});

			},
		}
	}
</script>
<style>
</style>

action.js

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

后端代码

mapper.xml

模糊查询mapper.xml

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

mapper

List<Order> listOrders(@Param("orderDesc") String orderDesc);

model

用代码生成逆向生成

service

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

实现接口类

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

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", "操作成功1111111111");
            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;
        }
    }

}