level 1

最新推荐文章于 2022-03-21 09:29:12 发布

kk大屯学

最新推荐文章于 2022-03-21 09:29:12 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/high1999/article/details/103767083

版权

需求：网页上只有一个输入框：可以输入ID或姓名，然后在网页上显示匹配的学生信息

关键字：“一个输入框” “或”

技术选型：

后端：Java8、SSM、 MySQL、Tomcat9
前端：jQuery 、Ajax

设计思路：

1.数据库表：PDMan绘制表原型并与数据库MySQL形成版本关联

2.环境搭建自主进行，搭建后端框架脚手架

说明：工程Project 使用Maven构建Web原型，开发模式all in one

Dao层：根据需求"或"，遂采用或条件查询

<select id="selectByPrimaryKeyOrStuName" resultMap="BaseResultMap" parameterType="string" >
    select
    <include refid="Base_Column_List" />
    from student
    where id = #{idOrStuName} or stu_name = #{isOrStuName}
</select>

Service层：两个问题：1.表中创建时间和更新时间是没必要给po给前端接口的，遂采用Vo视图过滤掉两个字段。2.表中时间属性字段读出来po给json数据格式会显示成时间戳的格式，无形给前端增加开发压力，采用工具类封装内部方法方式，将时间戳更改为时间格式。

package com.student.service.Impl;

import com.student.common.ServerResponse;
import com.student.dao.StudentMapper;
import com.student.pojo.Student;
import com.student.pojo.vo.StudentVo;
import com.student.service.IStudentService;
import com.student.util.DateTimeUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service("iStudentService")
public class StudentServiceImpl implements IStudentService {

    @Autowired
    private StudentMapper studentMapper;


    @Override
    public ServerResponse<StudentVo> getInformation(String idOrStuName) {
        Student student = studentMapper.selectByPrimaryKeyOrStuName(idOrStuName);
        if(student == null){
            return ServerResponse.createByErrorMessage("该学生不存在");
        }
        StudentVo studentVo = assembleStudentVo(student);
        return ServerResponse.createBySuccess(studentVo);
    }

    private StudentVo assembleStudentVo(Student student){
        StudentVo studentVo = new StudentVo();
        studentVo.setAge(student.getAge());
        studentVo.setBirthday(DateTimeUtil.dateToStr(student.getBirthday()));
        studentVo.setCollege(student.getCollege());
        studentVo.setFromCity(student.getFromCity());
        studentVo.setId(student.getId());
        studentVo.setNation(student.getNation());
        studentVo.setTel(student.getTel());
        studentVo.setStuName(student.getStuName());
        studentVo.setSex(student.getSex());
        return studentVo;
    }
}

Api层：

package com.student.controller;

import com.student.common.ServerResponse;
import com.student.pojo.vo.StudentVo;
import com.student.service.IStudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;



@Controller
@RequestMapping("/student/")
public class StudentController {

    @Autowired
    IStudentService iStudentService;

    @RequestMapping(value = "get_information.do",method = RequestMethod.POST)
    @ResponseBody
    public ServerResponse<StudentVo> get_information(String idOrStuName){


        if(idOrStuName.isEmpty()){
            return ServerResponse.createByErrorMessage("输入信息为空");
        }

        return iStudentService.getInformation(idOrStuName);
    }

}

3.Api 层接口测试：利用Postman工具

4.前端：手太生花费时间最长，原谅它长得太丑。

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
<div class="student-info">
    <div class="search-con">
        <input class="search-input" id="search-input" placeholder="请输入学生ID或姓名"/>
    </div>
    <div class="form-line">
        <span class="label">学生ID：</span>
        <span id="id"></span>
    </div>
    <div class="form-line">
        <span class="label">学生姓名：</span>
        <span id="stuName"></span>
    </div>
    <div class="form-line">
        <span class="label">性别：</span>
        <span id="sex"></span>
    </div>
    <div class="form-line">
        <span class="label">大学：</span>
        <span id="college"></span>
    </div>
    <div class="form-line">
        <span class="label">年龄：</span>
        <span id="age"></span>
    </div>
    <div class="form-line">
        <span class="label">联系电话：</span>
        <span id="tel"></span>
    </div>
    <div class="form-line">
        <span class="label">名族：</span>
        <span id="nation"></span>
    </div>
    <div class="form-line">
        <span class="label">籍贯：</span>
        <span id="fromCity"></span>
    </div>
    <div class="form-line">
        <span class="label">生日：</span>
        <span id="birthday"></span>
    </div>
</div>
</body>
<script>
    $(document).ready(function () {
        $("#search-input").keypress(function (e) {
            var idOrStuName = $("#search-input").val();
            if (e.which == 13) {
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "student/get_information.do?idOrStuName=" + idOrStuName,
                    async: false,
                    contentType: 'application/json',
                    dataType: "json",
                    error: function (res) {
                        alert("系统错误");
                    },
                    success: function (res) {
                        if (res.status == 0) {
                            $("#id").html(res.data.id);
                            $("#stuName").html(res.data.stuName);
                            $("#sex").html(res.data.sex);
                            $("#college").html(res.data.college);
                            $("#age").html(res.data.age);
                            $("#nation").html(res.data.nation);
                            $("#tel").html(res.data.tel);
                            $("#birthday").html(res.data.birthday);
                            $("#fromCity").html(res.data.fromCity);
                        } else {
                            alert("未找到该学生信息")
                        }
                    }

                })
            }
        });
    });

</script>
</html>