Java EE 用户信息查询与插入页面

文章目录

通过js实现前后端分离，信息传递从jsp—>js—>controller—>service—>dao层，

一、案例演示

开始查询页面和插入页面是不显示的呗display：none了，等到点击按钮的时候页面会出现，在进行查询插入操作。

在这里插入图片描述

请添加图片描述

二、实现步骤

1、View层

1.1、demo02_loginall.jsp

1、页面布局

在这里插入图片描述

2、代码

<%@page isELIgnored= "false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
</head>
<script type="text/javascript" src="../js/jquery02.js"></script>
<script type="text/javascript" src="../js/js_loginall_demo02.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .top{
        width: 100%;
        height: 100px;
        border: 1px solid black;
        background: #cbe579;
    }
    .title{
        text-align: center;
    }
    .p1{
        text-align: center;
    }
    .p2{
        margin-top: 20px;
        text-align: center;
    }
    .white_content{
        display: none;
        width: 500px;
        height: 500px;
        background: deepskyblue;
        border: 1px solid deepskyblue;
    }
    .table_content{
        width: 500px;
        height: 500px;
        background: deepskyblue;
        border: 1px solid deepskyblue;
    }
</style>
<body>
<%--顶部查询插入栏--%>
<div class="top">
    <p class="title">用户信息查询</p>
    <form class="selectAll" id="selectAll">
       <p class="p1"> 用户名：<input type="text"  class="username" name="username">
           姓名：  <input type="text"  class="name" name="name"></p>
    </form>
    <div class="button">
        <p class="p2"><input type="button" value="查询" onclick="selectAll();document.getElementById('selectDiv').style.display='block'"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="插入" onclick="document.getElementById('insertDiv').style.display='block'"></p>
    </div>
</div>
<%--插入--%>
<div id="insertDiv" class="white_content">
    <a href="javascript:void (0)" onclick="document.getElementById('insertDiv').style.display='none'">返回</a>
    <form id="insertForm">
        用户名：<input type="text" name="username"><br>
        性别： &nbsp;&nbsp;<input type="text" name="sex"><br>
        姓名： &nbsp;&nbsp;<input type="text" name="name"><br>
        年龄： &nbsp;&nbsp;<input type="text" name="age"><br>
        手机号：<input type="text" name="telephone"><br>
        <input type="button" value="提交" onclick="addUser()">
    </form>
</div>
<%--查询--%>
<div id="selectDiv" class="table_content">
    <a href="javascript:void (0)" onclick="document.getElementById('selectDiv').style.display='none'">返回</a>
    <table border="1" id="show">
    </table>
</div>
</body>
</html>

1.2、js_loginall_demo02.js

1、实现功能

插入用户功能和查询对应条件的用户

2、代码

function addUser(){
    var $form = $('#insertForm');
    var params =$form.serialize();
    params = decodeURIComponent(params,true);
    console.log(params);
    $.ajax({
        url:"http://localhost:8080/javaee_war_exploded/insertUser",
        type:"post",
        data:params,
        dataType:"json",
        success:function (data){
            if (data!=null){
                if(data.count==1){
                    alert("插入成功");
                }else if(data.count==0){
                    alert("插入失败");
                }
            }
        },
        error:function (){
            alert("error");
        }
    })
}
function selectAll(){
    var $form = $('#selectAll');
    var params =$form.serialize();
    params = decodeURIComponent(params,true);
    console.log(params);
    $.ajax({
        url:"http://localhost:8080/javaee_war_exploded/selectAll",
        type:"post",
        data:params,
        dataType:"json",
        success:function (data){
            var str="<tr><td>用户名</td> <td>姓名</td><td>性别</td><td>年龄</td><td>电话</td><td>操作</td></tr>";
            $.each(data,function (index,obj){
                str+="<tr><td>"+obj.username+"</td><td>"+obj.name+"</td><td>"+obj.sex+"</td><td>"+obj.age+"</td><td>"+obj.telephone+"</td><td>删除、修改</td></tr>";
            })
            $('#show').empty();
            $('#show').append(str);
        },
        error:function (){
            alert("error");
        }
    })
}

2、Controller层

2.1、UserController.java

1、实现功能

为了接收前端传来的数据，调用Service层的方法进行插入，查询数据

2、代码

@Controller
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("/insertUser")
    @ResponseBody
    public String insertUser(User user) throws JsonProcessingException {
        int count = userService.insertUser(user);
        //键值对
        HashMap<String,String> map=new HashMap();
        map.put("count", ""+count);
        //创建Jackson的核心对象ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //	将obj对象转换成json字符串
        String json = mapper.writeValueAsString(map);
        return json;
    }
    @RequestMapping(value = "/selectAll",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String User(String username, String name, HttpSession httpSession) throws JsonProcessingException {
        List<User> user=userService.selectAll(username,name);
        ObjectMapper mapper=new ObjectMapper();
        String json=mapper.writeValueAsString(user);
        return json;
    }
}

3、Service层

3.1、UserService.java

定义接口名字，返回类型，参数

public interface UserService {
    public int insertUser(User user);
    public List<User> selectAll(String username, String name);
}

3.2、UserImplement.java

实现接口功能

@Service
public class UserImplement implements UserService{
    //注入UserMapper
    @Autowired
    private UserMapper mapper;
    @Override
    public int insertUser(User user) {
        return mapper.insertUser(user);
    }

    @Override
    public List<User> selectAll(String username, String name) {
        return mapper.selectAll(username,name);
    }
}

4、Dao层

4.1、UserMapper.java

public interface UserMapper {
    public int insertUser(User user);
    public List<User> selectAll(@Param("username") String username, @Param("name") String name);
}

4.2、UserMapper.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.example.text.dao.UserMapper">
    <insert id="insertUser" parameterType="User">
        insert into user(username,sex,name,age,telephone) values (#{username},#{sex},#{name},#{age},#{telephone})
    </insert>
    <select id="selectAll" parameterType="String" resultType="User">
-- 动态组织sql语句
        select * from user where 1=1
        <if test="name!=null and name!=''">
            and name=#{name}
        </if>
        <if test="username!=null and username!=''">
            and username=#{username}
        </if> 
    </select>
</mapper>

5、Vo层

对应数据库表的参数

5.1、User.java

public class User {
    private String username;
    private String sex;
    private String name;
    private int age;
    private String telephone;

    public User(String username, String sex, String name, int age, String telephone) {
        this.username = username;
        this.sex = sex;
        this.name = name;
        this.age = age;
        this.telephone = telephone;
    }

    public User() {
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
}

原文链接：https://blog.csdn.net/qq_52108058/article/details/127583202