javaEE简单前后端分离

落晚_

已于 2023-02-23 16:41:04 修改

阅读量225

点赞数 1

文章标签： java-ee javascript 前端

于 2023-02-23 10:28:52 首次发布

本文链接：https://blog.csdn.net/m0_46536704/article/details/129175892

版权

创建首页

<body>
<a href="add.html">添加学生数据</a><br/>
<a href="delete.html">删除学生数据</a><br/>
<a href="update.html">修改学生数据</a><br/>
<a href="select.html">查看学生数据</a><br/>
</body>

进行创建查看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body onload="f()">
<table id="t" border="2px" align="center">

</table>
<a href="index.html">回到首页</a>
</body>
</html>
<script>
  function f(){
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","s",true);
    xmlhttp.send();
    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        //将后端数据从新转为json格式
        var data =JSON.parse(xmlhttp.responseText);
        //获取元素table
        var table = document.getElementById("t");
        for (var  i = 0;i<data[0].length;i++){
          if (data[0][i]!=null){
            //创建a节点
            var a_shan = document.createElement("a");
            var a_xiu = document.createElement("a");
            //创建a标签
            a_shan.setAttribute('href','delete?did='+data[0][i]);
            a_shan.append(document.createTextNode("删除"));
            a_xiu.setAttribute('href','update.html');
            a_xiu.append(document.createTextNode("修改"));
            //创建td文本节点
            var text_id = document.createTextNode(data[0][i]);
            var text_name = document.createTextNode(data[1][i]);
            //创建td
            var td_id = document.createElement("td");
            var td_name = document.createElement("td");
            var td_xiu = document.createElement("td");
            var td_shan = document.createElement('td');
            //创建tr节点
            var tr = document.createElement("tr");
            //开始挂节点
            td_id.append(text_id);
            td_name.append(text_name);
            td_xiu.append(a_xiu);
            td_shan.append(a_shan);
            tr.append(td_id);
            tr.append(td_name);
            tr.append(td_xiu);
            tr.append(td_shan);
            table.append(tr);
          }
        }
      }
    }
  }
</script>

进行servlet获取数据

import com.alibaba.fastjson.JSON;

import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
@WebServlet("/s")
public class select implements Servlet{
    @Override
    public void init(ServletConfig servletConfig) throws ServletException {

    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        try {
            //链接数据库，做查询操作
            Class.forName("com.mysql.jdbc.Driver");
            //获取链接
            Connection root = DriverManager.getConnection("jdbc:mysql://localhost:3306/school",
                    "root",
                    "123456");
            //创建平台
            Statement statement = root.createStatement();
            //执行sql语句
            ResultSet resultSet = statement.executeQuery("select * from student");
            //数据库的值首先得进行赋值给数组，再将数组进行转换成json格式，进行拼接发送到前端
            String[] ids = new String[100];
            String[] names = new String[100];
            for (int i = 0;resultSet.next();i++){
                ids[i] = resultSet.getString("id");
                names[i] = resultSet.getString("name");
            }
            //分别将ids和names转换为json格式
            String s = JSON.toJSONString(ids);
            String s1 = JSON.toJSONString(names);
            //将两条json格式拼接为一条
            String json = "["+s+","+s1+"]";
            //还得将数据响应给前端 （后端数据----json----前端）
            servletResponse.getWriter().write(json);

        }catch (Exception e){
            e.printStackTrace();
        }
    }

    @Override
    public String getServletInfo() {
        return null;
    }

    @Override
    public void destroy() {

    }
}

进行写增加页面

<form action="insert">
  学号:<input type="text" name="aid"/> <br/>
  姓名:<input type="text" name="aname">  <br/>
  <input type="submit" value="确认添加"/>
</form>

进行获取数据

import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.Statement;

@WebServlet("/insert")
public class Insert implements Servlet {
    @Override
    public void init(ServletConfig servletConfig) throws ServletException {

    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        try{
            //接受前端的请求
            String aid = servletRequest.getParameter("aid");
            String aname = servletRequest.getParameter("aname");
            //连接数据
            //链接数据库，做查询操作
            Class.forName("com.mysql.jdbc.Driver");
            //获取链接
            Connection root = DriverManager.getConnection("jdbc:mysql://localhost:3306/school",
                    "root",
                    "123456");
            //创建平台
            Statement statement = root.createStatement();
            //inset into students values (13,'a')
            String insert = "insert into student values ("+aid+", '"+aname+"')";
            int i = statement.executeUpdate(insert);
            if (i!=0){
                System.out.println("插入成功！");
                //跳转到首页
                servletRequest.getRequestDispatcher("index.html").forward(servletRequest, servletResponse);
            }

        }catch (Exception e){
            e.printStackTrace();
        }
    }

    @Override
    public String getServletInfo() {
        return null;
    }

    @Override
    public void destroy() {

    }
}

/修改和删除同上进行修改即可