• 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>         
            <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>
        性别：   <input type="text" name="sex"><br>
        姓名：   <input type="text" name="name"><br>
        年龄：   <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
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    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="用户名 姓名性别年龄电话操作";
            $.each(data,function (index,obj){
                str+=""+obj.username+""+obj.name+""+obj.sex+""+obj.age+""+obj.telephone+"删除、修改";
            })
            $('#show').empty();
            $('#show').append(str);
        },
        error:function (){
            alert("error");
        }
    })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    3、Service层

    3.1、UserService.java

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

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

    • 1
    • 2
    • 3
    • 4
    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);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

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

    • 1
    • 2
    • 3
    • 4
    4.2、UserMapper.xml
    
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
  • 相关阅读:
    SS928开发板 开发记录三： nfs 挂载
    [C++]C++入门--引用
    ic2常用命令
    【Linux】Linux的环境变量（PATH、env、子进程继承环境变量等）
    P1449 后缀表达式题解
    【javaEE】网络原理（传输层Part2）
    Maven历史版本下载
    Express写接口—接口的跨域问题-CORS中间件
    压榨数据库的真实处理速度
    谈云原生，不得不谈的容器
  • 原文地址：https://blog.csdn.net/qq_52108058/article/details/127583202