zoukankan      html  css  js  c++  java

  • Javaweb——前端与数据库简单交互

    HTML（前端）：
    <!    DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端与数据库交互</title>
<style type="text/css">
@import url("Style0.css");
</style>
<script type="text/javascript" src="0.js"></script>
<script>
function Check(){
    if(document.Form.Name.value=="")
    {
    alert("姓名不能为空！");
    return false;
    }
else if(document.Form.psword.value.length<6||document.Form.psword.value.length>10)
    {
    alert("密码长度应在6-10位！");
    return false;
    }
else if(document.Form.radio0.value!="男"&&document.Form.radio0.value!="女")
    {
    alert("请选择性别为男或者女，人妖请联系程序员！
                       call  13856854188");
    return false;
    }
else 
    return true;
}
</script>
</head>
<body bgcolor=pink>
<form action="test" method="post" name="Form" onsubmit="return Check()">
<p align="center"><br><br><br><br><br><br><br><br>
<input type="text" name="Name" value="姓名" class=describe0 onfocus="Input()" onblur="Verify()"><br><br>
<input type="password" name="psword" value="password" class=describe0 onfocus="Input()" onblur="Verify()"><br><br>
<input type="radio" name="radio0" value="男" class=radioclass><font size=5 color="red" face="楷体">男
<input type="radio" name="radio0" value="女">女</font><br><br>
<input type="submit" value="登录" class=describe0></p>
</form>
</body>
</html>
    CSS样式：
    @charset "UTF-8";
.describe0    {
color:red;
background-color:pink;
height:40px;
text-align:center;
font-size:25px;
font-family:楷体;
cursor:help;            /*必须分号隔开*/
}
.describe1{
    color:green;
    height:400px;
    width:400px;
    text-align:center;
}
    JS控制：
    function     Input(){
    if(document.Form.Name.value=="姓名"){
        document.Form.Name.value="";
    }
    if(document.Form.psword.value=="password"){
        document.Form.psword.value="";
    }
}
    SEVERLET(服务器):
    package     Java_web.Java_web0;
import java.io.IOException;
//import java.io.PrintWriter;
//import java.sql.Connection;
//import java.sql.ResultSet;
import java.sql.SQLException;
//import java.sql.Statement;

import javax.servlet.ServletException;
//import javax.servlet.ServletRequest;
//import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import Java_web.Java_web1.Dbbase;


public class servlet0 extends HttpServlet{


    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    /*法1：
     * private static final long serialVersionUID = 1L;

    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException 
    {
        // TODO Auto-generated method stub
        req.setCharacterEncoding("utf-8");
        res.setContentType("text/html;charset=utf-8");
        PrintWriter print=res.getWriter();
        String psword=req.getParameter("psword");
        String Name=req.getParameter("Name");
        //调用方法
        Dbbase db = new Dbbase();
        Connection con = null ;
        try {
            con=db.communicate();
        } catch (ClassNotFoundException | SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        Statement seach=null;
        try {
            seach=(Statement)con.createStatement();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        String sql="select * from table0 where username='"+Name+"'and password='"+psword+"'";
        ResultSet result = null;
        try {
            result=seach.executeQuery(sql);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        try {
            if(result.next())
            {
                print.println("<html><head><title>前端与数据库交互</title></head><body bgcolor=pink><meta http-equiv='Content-Type;content=text/html;charset=utf-8'>");
                print.println("<br><br><br><br><br><br><br><br><div align=center><font face='楷体' size=6 color=red>前端与数据库交互<br>姓名："+Name+"<br>密码："+psword+"</font></div></body></html>");
                print.close();
            }
            else
            {
                print.println("<html><head><title>前端与数据库交互</title></head><body bgcolor=pink><meta http-equiv='Content-Type;content=text/html;charset=utf-8'>");
                print.println("<br><br><br><br><br><br><br><br><div align=center><font face='楷体' size=6 color=red>数据库中没有所查询用户！</font></div></body></html>");
                print.close();
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }*/
//法2：
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String Name=req.getParameter("Name");
        String psword=req.getParameter("psword");
        Dbbase db=new Dbbase();
        boolean flag=false;
        try {
            flag=db.test(Name,psword);
        } catch (ClassNotFoundException | SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        if(flag)
        {//如果前端传递的参数存在，就转发到后台主页面//转发
            req.getRequestDispatcher("main.jsp").forward(req, resp);
        }
        else
        {//如果不存在，重新回到登录页面//重定向
            resp.sendRedirect("0.jsp");//打开新0.jsp页面,是重新定向，前后页面不是一个request。
            //req.getRequestDispatcher("0.jsp").forward(req, resp);//刷新页面，是请求转发，前后页面共享一个request ; 
        }
    }
}
    DATABASE（数据库）：
    package     Java_web.Java_web1;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class Dbbase 
{
    //法1：
    /*public Connection communicate() throws ClassNotFoundException, SQLException
    {
        Class.forName("com.mysql.cj.jdbc.Driver");//数据库驱动
        Connection con = (Connection) DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/first_database?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Hongkong","root","123456");
        return con;
    }*/

    
    
    
//法2：
        public Statement cheack() throws SQLException, ClassNotFoundException {
        Class.forName("com.mysql.cj.jdbc.Driver");//数据库驱动
        Connection con = (Connection) DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/first_database?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Hongkong","root","123456");
        Statement st=null;
        st=(Statement)con.createStatement();
        return st;
    }
    
    
    public Boolean test(String Name,String psword) throws ClassNotFoundException, SQLException {
        String sql="select * from table0 where username='"+Name+"'and password='"+psword+"'";
        ResultSet result = null;
        Statement st=this.cheack();
        result=st.executeQuery(sql);
        if(result.next())
            return true;
        else
            return false;
    }
}

    上面数据库和服务器里用了两种写法，注意对应，法1被注释掉了。

    跳转页面（0.jsp）：
    <%    @ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body bgcolor=pink>
<br><br><br><br><br><br><br><br><div align=center><font face='楷体' size=6 color=red>登录失败，数据库中无此用户！</font></div>
</body>
</html>
    跳转页面（main.jsp）：
    <%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端与数据库交互</title>
</head>
<body bgcolor=pink>
<br><br><br><br><br><br><br><br><div align=center><font face='楷体' size=6 color=red>登陆成功，该用户在数据库中查得！</font></div>
</body>
</html>
    WEB.XML（配置文件）：
    <?    xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>0</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
        <servlet-name>servlet0</servlet-name>
        <servlet-class>Java_web.Java_web0.servlet0</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>servlet0</servlet-name>
        <url-pattern>/test</url-pattern>
    </servlet-mapping>
</web-app>

    数据库表：

    图 1

    工程路径及文件存放路径：

    图 2

     注意要在lib目录下添加jar包，下面为此工程用到的库，其中就有上面的jar包mysql-connector-java-8.0.15.jar,要注意mysql版本不一样jar包则不同，jdbc命令略有不同，我的mysql是8.0，注意保持一致。

    图 3

    界面：

    图 4

    图 5

     图 6

     
  • 相关阅读:
    解决 JDK1.7 不支持 VCenter 6.7 的问题（涉及到Https TLS1.2协议）
    无法删除另一个分区的windows文件夹
    首次将项目从eclipse提交到服务器的SVN
    无法截图右键菜单
    配置文件无法修改（以修改my-default.ini为例）
    运行JavaWeb项目报错Access denied for user 'root'@'localhost' (using password: YES)
    jquery.page.js插件在使用时重复触发“上一页”和“下一页”操作
    请求ajax失败的原因（进入到error）
    ajax请求执行完成后再执行其他操作（jQuery.page.js插件使用为例）
    img标签src资源无法加载，报net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION错
  • 原文地址：https://www.cnblogs.com/zwsmile/p/12605240.html
Copyright © 2011-2022 走看看