| 网页用户注册登录功能即前后端连接(小白专用) | 您所在的位置：网站首页 › 前端登录代码是什么 › 网页用户注册登录功能即前后端连接(小白专用) |
网页用户注册登录功能即前后端连接(小白专用)
|
目录
使用html+mysql实现基本的前后端连接初始布局写一个初始的注册框实现数据库的书写关键来了：中继servlet的实现激动人心：服务器来了！！让我们运行吧铁子！展示了
使用html+mysql实现基本的前后端连接
初始布局
连环发问： 我们想要实现什么？注册和登录。 第一步注册，整个过程是什么？ 首先用户在html网页上输入信息并且此网页可以识别用户的账户名以及两次输入的密码是否符合规范。其次html网页通过某种途径把用户输入的账号、密码交给中继，中继再交后端数据库。 为什么不能直接交给数据库呢？数据库不能实现处理数据的功能，数据库只能保存数据，其他的任由别人摆布。 那么这样我们是不是就建立了前端到后端的连接呢！！ 注册结束了。我们来登录吧。 登录我们还从用户出发。不难想到就是将用户输入html的信息转送给数据库，借机完成查询，并可以返回是否查到的信息。与注册有共用的前后端连接的桥梁。 放开膀子去写代码吧！！ 写一个初始的注册框即然本篇文章是小白避坑版，自然要从最基础的讲起。那么好我们先实现一个基本的登录框。 Document 注册 账号 密码 再次输入密码 登录
按照步骤，不是该说中继的环节了吗？不基本功能我们还没有实现完。这里不着急。 我们采用java来实现对MySQL数据库的增删查改 这里直接粘代码 package 这个java所在的包; import java.io.PrintWriter; import java.sql.*; public class WriteSql（随便的文件名） { static Connection con; static Statement sql; static ResultSet res; public Connection Connection(){ // TODO Auto-generated method stub String Driver="com.mysql.cj.jdbc.Driver"; String url="jdbc:mysql://localhost:3306/users?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8&useSSL=false"; String name="root";你的数据库名称，默认是root String code="你的数据库密码"; try { Class.forName(Driver); } catch(ClassNotFoundException e) { e.printStackTrace(); } try { con=DriverManager.getConnection(url, name, code); return con; } catch(SQLException e) { e.printStackTrace(); } return con; } public void read() { WriteSql c=new WriteSql(); con=c.Connection(); try { sql=con.createStatement(); res=sql.executeQuery("select * from newdata"); while(res.next()) { String email=res.getString("id"); String password=res.getString("password"); System.out.println(email+" "+password); } } catch(SQLException e) { e.printStackTrace(); } } public void write(String id,String password) { WriteSql c=new WriteSql(); con=c.Connection(); try { sql=con.createStatement(); String code= "insert into newdata(id,password) values(?,?)"; PreparedStatement pst=con.prepareStatement(code); pst.setString(1, id); pst.setString(2, password); pst.executeUpdate(); } catch (SQLException e){ e.printStackTrace(); } } public boolean seek (String email,String password) { WriteSql c=new WriteSql(); con=c.Connection(); try { sql=con.createStatement(); res=sql.executeQuery("select * from newdata"); while(res.next()) { if(email.equals(res.getString("id"))) { if(password.equals(res.getString("password"))) { System.out.println("登录成功"); return true; } else { System.out.println("密码错误！"); return false; } } } System.out.println("无此用户！"); return false; } catch(SQLException e) { e.printStackTrace(); return false; } } public static void main(String[] args) { WriteSql c=new WriteSql(); c.read(); c.write("csdn","123"); } }这里我使用的是eclipse的web项目。关于web项目的使用与普通项目有一点点不同，建议小白学习一下再来。 几个坑： 1.版本问题：需要下载mysql-connector-java，就是连接java和数据库的包。要注意版本匹配。这里我的JDK是13.0.2。MySQL版本是8.0，所使用的mysql-connector-java一定要与MySQL版本搭配。我的mysql-connector-java也使用8.0。往往版本问题是小白代码起步的拦路虎，很难受，但也没办法。 2.敲黑板下载完mysql-connector-java之后。需要将包导入项目中。如何将包导入web项目中网上有详细的教程。这里要注意的是下载完的是zip压缩文件。一定要解压。我们要用的包是zip里面的jar！！两个都是压缩文件，图标一模一样，笔者在最初被困扰了好久~ 以上都完成，你就可以用eclipse对数据库进行读写啦！ 关键来了：中继servlet的实现我们说关键来了，关键就关键在当你把以上两个部分都实现好。但你没写好这个中继，你的项目还是失败。很少有博文仔细地去讲servlet的具体实现。请仔细看： 首先 Servlet 是什么？ Java Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。 其次在注册的层面上来讲，中继是要拿到html的输入信息，并传给数据库。 创建Servlet：与创建class相同，但需要设定包。Browse-httpservlet，点击ok。 接下来我们只针对对doPost，doGet不去管。 先看doPost代码 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("gbk");//编码部分 response.setCharacterEncoding("gbk"); response.setHeader("content-type", "text/html;charset=gbk");//解码部分 String id=request.getParameter("id");//获得html界面的信息 String password=request.getParameter("password"); WriteSql logining=new WriteSql(); logining.write(id, password);//使用上面的第二步，写入数据库 PrintWriter printwriter=response.getWriter();//浏览器界面显示 printwriter.write("注册成功");//成功 }看代码是不是很简单，确实hhh。只需要调用现成的包即可。 下面又要敲黑板了，直接决定你上面的servlet好不好用。 servlet类上面加一句 @WebServlet("/TestServlet")//指示在最初创立web项目的时候，一定要新建一个web.xml文件。他会next提示你，记得把这一项打勾。前面没说（狗头保命 我们要更改xml的配置，就会决定servlet成不成功 web.xml文件在WEB-INF下 这里以建立TestServlet.java为例： testServlet cn.test.servlet.testServlet（包名.xml文件） testServlet /test.do到此，我们的servlet就配置成功了，如果你遇到了一些问题，建议度娘。这里每个人的问题都可能不同。也是新手必走的心酸路。 激动人心：服务器来了！！这里我们使用TomCat,还是版本的问题，参照上面，TomCat我使用的是9.0。有时候最新的版本不见得最好，与之相关的匹配都没有做起来，导致不兼容时有发生。 TomCat的教程很好找，而且配置简单。 这里的坑： 困了笔者好久！！需要把上文中提到的mysql-connector-java的jar，记住是jar而非zip。复制到TomCat的lib文件夹中。lib是调用包的文件夹集合。否则可能出现http500错误。错的亲爹都不认识你！！ 让我们运行吧用TomCat运行html，TomCat需要在新建项目是导入。关键是记住路径。比如JDK，TomCat，MySQL的路径最好是信手捏来，必要的时候会节省好多时间
|
很快就实现了一个简陋的注册界面，这里我要说，有两点十分关键。 1.有html基础的都知道form标签用来提交信息。要注意我们用的form中的action和method。还记得上面说的中继吗？action是来指明这个中继的地址。method是用来说明方法，是要邮寄给某个东西，而不是自己使用。 2.另一点小白需要注意input的< type=“button”>和button的是完全不一样的。前者没有提交的功能，只是一个外表按钮的容器。后者相反。
创建好基本的servlet之后，来导入基本的函数。点击Override后，只需要选择dopost和doget即可。 
将doGet改写成
【本文地址】