数据库课设记录 Day 6

最新推荐文章于 2024-08-07 21:58:12 发布

古樾枳梢

最新推荐文章于 2024-08-07 21:58:12 发布

阅读量318

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51546928/article/details/126871065

版权

公司职员方的 ”接取投递“ 也完成了，直接套的 ”我的应聘“ 的容器块写的。

最上方有三个选项，“可接取投递” 就是上一场通过，需要安排下一场或是处于刚刚投简历的投递，另两个字面意思。

在这里插入图片描述

点那个 “接取投递” 的按钮后会蹦出来三个 input 框，填写后 ajax 提交后台修改。不过…我这时才知道 ajax ，如果提交的数据格式设置为 json (contentType:'json')，而且使用 Post 请求的话，后台控制器会无法识别参数…。当时点击提交后冇得反应，IDEA 也没有报错，就是单纯没有找到对应的控制器方法。
控制器和 ajax 部分代码

@PostMapping("/pickUpApply")
@ResponseBody
String pickUpApply(@RequestParam("applicant") String applicant,
                   @RequestParam("positionID") String positionID,
                   @RequestParam("empID") String empID,
                   @RequestParam("desc") String desc,
                   @RequestParam("time") String time,
                   @RequestParam("place") String place ) {

$('#submit').click(function (e) {
    let desc = $('#fillInfo input[name=desc]').val();
    let time = $('#fillInfo input[name=time]').val();
    let place = $('#fillInfo input[name=place]').val();
    $.ajax( {
        url: '/apply/pickUpApply',
        data: {'applicant':applicant, 'positionID':positionID, 'empID':empID, 'desc':desc, 'time':time, 'place':place},
        type:"post",
        // contentType: "json", // 这个位置
        success: function (data) {
            alert("接取成功!");
        },
        error: function () {
            alert("error");
        }
    });

    $('#fillInfo').remove();
    location.reload();
});

当时看了好久没看出问题，网上又搜了好久才知道。解决方法是用 @RequestBody 替代 @RequestParam，但是用 @RequestBody 好像只能允许一个参数。刚想换成 HttpServletRequest retuest 试试，然后看以前写的 ajax 都是 contentType:'text'…。原来 ajax 写了这么久，参数一直写的 json 的格式，传递参数的格式确是 text…还是说这个 text 和我理解的有点不一样？不懂…

后面有时间可以考虑在每个容器块左边加一窄条色块，提示是 “很久前已完成”，“今天的面试” 还是 “刚结束需要填写结果” ，类似 CF 那样：

在这里插入图片描述
– 每道题左边的窄条，绿色代表通过，粉色代表有提交但未通过

还有就是 interview 表可以添加一个字段用来记录面试官的评价。

然后主页面的分页也写了，样式大体也是扒的 elementUI 的。
在这里插入图片描述

<!-- 分页器 -->
<div style="width:400px; height:40px; margin-left: 200px; ">
    <button type="button" class="el-prev toPrev"></button>
    <ul id="pageSelector" class="el-pager">
    </ul>
    <button type="button" class="el-next toNext"></button>
</div>
<!-- 保存当前页面的页数信息， hide 是 width = height = font-size = 0 实现视觉隐藏 -->
<div id="pagedata" class="hide">
    <span class="hide curPage" th:text="${curPage}"></span>
    <span class="hide totPage" th:text="${totPage}"></span>
</div>
<!-- curPage totPage toPrev toNext 是没有 css 样式的类，单纯用来借助 js 控制分页器的 -->
<!-- pageSelector 和 pagedata 这两个 ID 也是同理，单纯用来方便 js 定位的 -->

.el-pager {
    user-select: none;
    list-style: none;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    padding: 0;
    margin: 0;
}

.el-pager li, .el-prev, .el-next {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
    padding: 0 8px;
    /* background: #fff; */
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    /* min-width: 35.5px; */
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}
.el-pager li.active {
    background-color: #409eff;
    color: #fff;
    cursor: default;
}
.el-pager li:hover {
    background-color: #409eff;
    color: #fff;
}
.el-prev, .el-next {
    border: 0 none transparent;
    outline: 0;
}
.el-prev:hover, .el-next:hover {
    background-color: #409eff;
    color: #fff;
}
/* 这个文字完全是我瞎搞的，建议还是删了，'上一页'在button标签里写 */
.el-prev::before {
    content: "上一页";
}
.el-next::after {
    content: "下一页";
}

jquery

<script src="课设页面/js/jquery-3.6.0.min.js"></script>
<script>
function calcPage() {
    //  从隐藏的 span 中读取当前是哪一页， 和一共有多少页
    // 开始没有 parseInt...，debug了好久
    let curPage = parseInt( $('#pagedata .curPage').text() );
    let totPage = parseInt( $('#pagedata .totPage').text() );

    //  不超过 6 页全部显示
    if( totPage <= 6 ) {
        for(let i=1; i<=totPage; i++) {
            // 开始我拼接的 html 特别蠢: <li th:class=" ${curPage} == i ? 'active' : '' ">
            // 这里和原生 JS 里的 window.onload() 一样，是在页面加载完成后在计算分页器的，
            // 而 thymeleaf 的模板肯定是在加载前就解析的。当时检查元素里看了好久发现 <li> 里面的是 th:class 而不是 class 才意识到
            $('#pageSelector').append("<li class=\" numPage " + (i == curPage ? 'active' : '') + "\">" + i + "</li>");
        }
    } else {
        // 第一页先加上去
        $('#pageSelector').append("<li class=\" numPage " + (1 == curPage ? 'active' : '') + "\">" + 1 + "</li>");
        // 显示当前页前后 2 页，最多 5 页
        let left = Math.max(2,curPage - 2);
        let right = Math.min(totPage-1, curPage + 2);
        // 第一页 和 第 left 页之间加一个 ...
        if( 2 < left ) $('#pageSelector').append("<li class=\"toPrev\">...</li>");
        // left ~ right 页
        for(let i=left; i<=right; i++) {
            $('#pageSelector').append("<li class=\" numPage " + (i == curPage ? 'active' : '') + "\">" + i + "</li>");
        }
        // 第 right 页和最后一页之间加一个 '...'
        if( right < totPage-1 ) $('#pageSelector').append("<li class=\"toNext\">...</li>");
        $('#pageSelector').append("<li class=\" numPage " + (totPage == curPage ? 'active' : '') + "\">" + totPage + "</li>");
    }
}
$(document).ready(function () {
    // 处理页面
    calcPage();
    
    // 点击某个数字时实现跳转
    $('.numPage').click(function (e) {
        let num = $(this).text();
        let url = '/position/?page=' + num;
        window.location = url;
    });
    // 点击 '上/下一页' 或 '...' 时
    $('.toPrev').click(function () {
        let num = parseInt( $('#pageSelector .active').text() );
        let url = '/position/?page=' + Math.max(1,num-1);
        window.location = url;
    });
    $('.toNext').click(function () {
        let num = parseInt( $('#pageSelector .active').text() );
        let totPage = $('#pagedata .totPage').text();
        let url = '/position/?page=' + Math.min(totPage,num+1);
        window.location = url;
    });
});
</script>