项目实战(P6)（Day 34）（求助）

poppingQQ星

已于 2022-05-14 19:13:32 修改

阅读量346

点赞数

分类专栏：项目实战程序员成长之路问题文章标签： p2p linq html

于 2022-03-04 01:06:00 首次发布

本文链接：https://blog.csdn.net/weixin_50178621/article/details/123233703

版权

程序员成长之路同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

项目实战

19 篇文章 0 订阅

订阅专栏

问题

6 篇文章 0 订阅

订阅专栏

在Service层中书写多条件分页查询营销机会

学习内容：

营销模块

设计表

准备工作

使用generator来自动生成SaleChanceMapper、SaleChance和SaleService

然后再创建对应的SaleController

@Controller
public class SaleChanceController extends BaseController {

    @Resource
    private SaleChanceService saleChanceService;
}



@Service
public class SaleChanceService extends BaseService<SaleChance, Integer> {

    @Resource
    private SaleChanceMapper saleChanceMapper;
}

后端代码

因为前端要显示分页，所以创建一个SaleChaneQuery来继承BaseQuery

新思想：不在一个个创建对应的分页,而是统一继承一个基础分页类、

public class SaleChanceQuery extends BaseQuery {

    //分页查询

    //条件查询
    private String customerName;    //  客户名
    private String createMan;   //  创建人
    private Integer state;  //分配状态  0=未分配   1=已分配

    public String getCustomerName() {
        return customerName;
    }

    public void setCustomerName(String customerName) {
        this.customerName = customerName;
    }

    public String getCreateMan() {
        return createMan;
    }

    public void setCreateMan(String createMan) {
        this.createMan = createMan;
    }

    public Integer getState() {
        return state;
    }

    public void setState(Integer state) {
        this.state = state;
    }
}

在配置文件中写多条件查询

<!--  多条件查询-->
    <select id="selectByParams" parameterType="com.xxxx.crm.query.SaleChanceQuery"
            resultType="com.xxxx.crm.vo.SaleChance">
        select
        <include refid="Base_Column_List"/>
        from
        t_sale_chance
        <where>
            is_valid = 1
            <if test="customerName != null and customerName != ''">
                and customer_name like concat('%',#{customerName},'%')
            </if>
            <if test="createMan != null and createMan != ''">
                and create_man = #{createMan}
            </if>
            <if test="state != null">
                and state = #{state}
            </if>

        </where>

    </select>

在Service层中书写多条件分页查询营销机会

public Map<String, Object> querySaleChanceByParams(SaleChanceQuery saleChanceQuery) {

        Map<String, Object> map = new HashMap<>();

        //开启分页
        PageHelper.startPage(saleChanceQuery.getPage(),saleChanceQuery.getLimit());
        //得到对应分页对象
        PageInfo<SaleChance> pageInfo =new PageInfo<>(saleChanceMapper.selectByParams(saleChanceQuery));

        //设置map对象
        map.put("code","0");
        map.put("msg","success");
        map.put("count",pageInfo.getTotal());
        //设置分页好的列表
        map.put("date",pageInfo.getList());


        return map;
    }

遇到错误:

未找到页面

在saleChanceController上加上@Responsbody即可

前端代码

导入模板后书写index方法即可

/**
     * @param
     * @return java.lang.String
     * @author QQ星
     * 进入营销机会管理界面
     * @Date 2022/3/3 22:34
     */
    @RequestMapping("index")
    public String index() {
        return "saleChance/sale_chance";
    }

加载数据表格

求助！！

遇到问题：

显示不出数据

后端接口可以返回数据

但是前端就是接受不到

前端代码

<!DOCTYPE html>A
<html>
<head>
	<title>营销机会管理</title>
	<#include "../common.ftl">
</head>
<body class="childrenBody">

<form class="layui-form" >
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" name="customerName"
						   class="layui-input
					searchVal" placeholder="客户名" />
				</div>
				<div class="layui-input-inline">
					<input type="text" name="createMan" class="layui-input
					searchVal" placeholder="创建人" />
				</div>
				<div class="layui-input-inline">
                    <select name="state"  id="state">
                        <option value="" >分配状态</option>
                        <option value="0">未分配</option>
                        <option value="1" >已分配</option>
                    </select>
				</div>
				<a class="layui-btn search_btn" data-type="reload"><i
							class="layui-icon">&#xe615;</i> 搜索</a>
			</div>
		</form>
	</blockquote>

	<#-- 在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器 -->
	<table id="saleChanceList" class="layui-table"  lay-filter="saleChances"></table>

	<#-- 头部工具栏 -->
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<a class="layui-btn layui-btn-normal addNews_btn" lay-event="add">
				<i class="layui-icon">&#xe608;</i>
				添加
			</a>
			<a class="layui-btn layui-btn-normal delNews_btn" lay-event="del">
				<i class="layui-icon">&#xe608;</i>
				删除
			</a>
		</div>
	</script>


	<!-- 行工具栏 -->
	<script id="saleChanceListBar" type="text/html">
		<a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a>

		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>

	</script>

</form>
<script type="text/javascript" src="${ctx}/js/saleChance/sale.chance.js"></script>

</body>
</html>

JS代码

layui.use(['table','layer'],function(){
    var layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        table = layui.table;

    /**
     * 加载数据表格
     */
     var tableIns = table.render({
        id:'saleChanceTable'
        // 容器元素的ID属性值
        ,elem: '#saleChanceList'
        // 容器的高度 full-差值
        ,height: 'full-125'
        // 单元格最小的宽度
        ,cellMinWidth:95
        // 访问数据的URL（后台的数据接口）
        ,url: ctx + '/sale_chance/list'
        // 开启分页
        ,page: true
        // 默认每页显示的数量
        ,limit:10
        // 每页页数的可选项
        ,limits:[10,20,30,40,50]
        // 开启头部工具栏
        ,toolbar:'#toolbarDemo'
        // 表头
        ,cols: [[
            // field：要求field属性值与返回的数据中对应的属性字段名一致
            // title：设置列的标题
            // sort：是否允许排序（默认：false）
            // fixed：固定列
            {type:'checkbox', fixed:'center'}
            ,{field: 'id', title: '编号',  sort: true, fixed: 'left'}
            ,{field: 'chanceSource', title: '机会来源', align:'center'}
            ,{field: 'customerName', title: '客户名称', align:'center'}
            ,{field: 'cgjl', title: '成功几率', align:'center'}
            ,{field: 'overview', title: '概要', align:'center'}
            ,{field: 'linkMan', title: '联系人', align:'center'}
            ,{field: 'linkPhone', title: '联系号码', align:'center'}
            ,{field: 'description', title: '描述', align:'center'}
            ,{field: 'createMan', title: '创建人', align:'center'}
            ,{field: 'uname', title: '分配人', align:'center'}
            ,{field: 'assignTime', title: '分配时间', align:'center'}
            ,{field: 'createDate', title: '创建时间', align:'center'}
            ,{field: 'state', title: '分配状态', align:'center',templet: function (d) {
                // 调用函数，返回格式化的结果
                return formatState(d.state);
            }}
            ,{field: 'devResult', title: '开发状态', align:'center', templet: function (d) {
                // 调用函数，返回格式化的结果
                return formatDevResult(d.devResult);
            }}
            ,{title:'操作',templet:'#saleChanceListBar', fixed: 'right', align:'center', minWidth:150}
        ]]
    });

    /**
     * 格式化分配状态值
     *  0 = 未分配
     *  1 = 已分配
     *  其他 = 未知
     * @param state
     */
    function formatState(state) {
        if (state == 0) {
            return "<div style='color: yellow'>未分配</div>";
        } else if (state == 1) {
            return "<div style='color: green'>已分配</div>";
        } else {
            return "<div style='color: red'>未知</div>";
        }
    }

    /**
     * 格式化开发状态
     *  0 = 未开发
     *  1 = 开发中
     *  2 = 开发成功
     *  3 = 开发失败
     *  其他 = 未知
     * @param devResult
     */
    function formatDevResult(devResult) {
        if (devResult == 0) {
            return "<div style='color: yellow'>未开发</div>";
        } else if (devResult == 1) {
            return "<div style='color: orange'>开发中</div>";
        } else if (devResult == 2) {
            return "<div style='color: green'>开发成功</div>";
        } else if (devResult == 3) {
            return "<div style='color: red'>开发失败</div>";
        } else {
            return "<div style='color: blue'>未知</div>";
        }
    }

    /**
     * 搜索按钮的点击事件
     */
    $(".search_btn").click(function () {

        /**
         * 表格重载
         *  多条件查询
         */
        tableIns.reload({
            // 设置需要传递给后端的参数
            where: { //设定异步数据接口的额外参数，任意设
                // 通过文本框/下拉框的值，设置传递的参数
                customerName: $("[name='customerName']").val() // 客户名称
                ,createMan: $("[name='createMan']").val() // 创建人
                ,state:$("#state").val() // 状态
            }
            ,page: {
                curr: 1 // 重新从第 1 页开始
            }
        });

    });


    /**
     * 监听头部工具栏事件
     *  格式：
     *      table.on('toolbar(数据表格的lay-filter属性值)', function (data) {
     *
            })
     */
    table.on('toolbar(saleChances)', function (data) {
        // data.event：对应的元素上设置的lay-event属性值
        // console.log(data);
        // 判断对应的事件类型
        if (data.event == "add") {
            // 添加操作
            openSaleChanceDialog();

        } else if (data.event == "del") {
            // 删除操作
            deleteSaleChance(data);
        }
    })

 

});

处理不了停住了很尴尬,就是前端一直接受不到后端的数据,有没有懂哥救救我,一整天了也解决不了

学习时间：

2022-3-2 16：00-17：45、20:00-22:13

2022-3-3 9：43-11：43、16：00-17：23、20：22-00：00