毕业论文写作

毕业设计需求

计算机毕业设计中Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）

作者：帮我毕业 点击次数：0

 本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面。对用户输入的用户名和密码就行校验，校验通过则登录成功，密码和用户信息保存在mysql表中，通过MyBatis访问（MyBatis相关知识可参考先前的文章MyBatis测试）。先给出最终的效果图：

登录成功则进入如下页面：

如果输入的密码或者用户名为空或者不合法，则页面上提示：

（一）安装配置tomcat

这里使用的是tomcat 8.0，直接官网下载压缩包解压，然后添加环境变量TOMCAT_HOME（值为D:\apache-tomcat-8.0.52）并修改CLASSPATH环境变量（末尾添加%TOMCAT_HOME%\BIN），然后在D:\apache-tomcat-8.0.52\bin下双击startup.bat运行tomcat，运行成功，在浏览器中输入http://localhost:8080/，可见欢迎页面如图：

（二）eclipse配置tomcat 8.0

window-->preferences-->Server-->runtime environments，添加tomcat 8.0,然后apply即可。

双击server视图中的tomcat 8.0,需要如下配置，否则运行时可能会报错。

（三）eclipse创建Dynamic Web project 

先给出工程视图如下：

具体步骤如下：

（1）创建Dynamic Web project工程，命名为LoginTest

注意选中下图中的单选框，这样自动创建一个web.xml文件

(2) 编写 index.jsp（这里只使用了index.jsp作为登录页面，注册查询等可以类似实现），先给出最终的index.jsp。实际上对于最简单的java web程序，只有一个web.xml和index.jsp即可运行，index.jsp的body中只写hello world，然后再tomcat上运行，就可实现java web的hello world。最终版本的index.jsp用到了模板css/init.css（用于初始化css的一些基本配置，以便屏蔽一些浏览器差异），css/login.css则是自定义的登录界面的样式；index.jsp还用到了js/login.js，利用javascript对输入框信息做一些校验并给出提示。最终的源码包中给出相应文件。

index.jsp:

  1. <%@ page language="java" contentType="text/html; charset=utf-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5.  
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8. <title>登录界面</title>
  9. <link rel="stylesheet" href="css/inti.css" type="text/css" />
  10. <link rel="stylesheet" href="css/login.css" type="text/css" />
  11.  
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17.  
  18. <!--absolute 绝对定位相对于父元素 不占空间 z-index属性-->
  19. <div id="bg">
  20. <div class='div_logo'>
  21. <p >用户登录</p>
  22. </div>
  23.  
  24. <div class='div_form'>
  25.  
  26. <form name='login' action='Login' onsubmit='return validation()' method='post'>
  27. <div class='div_login_input' id='user'>
  28. <div id='icon_user'></div>
  29. <input class='login' id='username' type='text' name='username' placeholder='用户名'></input>
  30. <span class='hint' id='hint_user'></span>
  31. </div>
  32.  
  33. <div class='div_login_input' id='pwd' >
  34. <div id='icon_pwd'></div>
  35. <input class='login' id='password' type='password' name='password' placeholder='请输入密码'></input>
  36. <span class='hint' id='hint_pwd'></span>
  37. </div>
  38.  
  39. <div class='div_btn'>
  40. <input id='login_submit'  type='submit'  value='登录'></input>
  41. </div>
  42. </form>
  43.  
  44. </div>
  45.  
  46. <script src='js/login.js'></script>
  47.  
  48. </body>
  49.  
  50. </html>

（3）编写LoginServlet.java

  1. package com.test.servlet;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10. import org.apache.ibatis.session.SqlSession;
  11.  
  12. import com.test.dao.*;
  13. import com.test.util.GetSqlSession;
  14.  
  15. public class LoginServlet extends HttpServlet{
  16. public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException{
  17. UserDaoImplement usrdao = new UserDaoImplement();
  18. SqlSession session = GetSqlSession.createSqlSession();
  19.  
  20. String username = req.getParameter("username");
  21. String password = req.getParameter("password");
  22. resp.setContentType("text/html;charset=UTF-8");
  23.  
  24.  
  25. try {
  26. PrintWriter pw = resp.getWriter();
  27. pw.println("<html>");
  28. pw.println("<body>");
  29. if(usrdao.verify(username, password, session)==true)
  30. {
  31. pw.println("Login success.");
  32. }
  33. else
  34. {
  35. pw.println("Login failed. Wrong username or password");
  36. }
  37. pw.println("</body>");
  38. pw.println("</html>");
  39. pw.close();
  40. } catch (IOException e) {
  41. e.printStackTrace();
  42. }
  43. }
  44. }

LoginServlet.java获取提交的用户名和密码信息，调用验证方法进行验证，并根据验证结果写验证成功或者失败的界面。这里没有主方法，因为tomcat运行时存在一个主方法。

（4）配置web.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <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">
  3. <display-name>test</display-name>
  4.  
  5. <welcome-file-list>
  6. <welcome-file>index.jsp</welcome-file>
  7. </welcome-file-list>
  8.  
  9. <servlet>
  10. <servlet-name>LoginServlet</servlet-name>
  11. <servlet-class>com.test.servlet.LoginServlet</servlet-class>
  12. </servlet>
  13.  
  14. <servlet-mapping>
  15. <servlet-name>LoginServlet</servlet-name>
  16. <url-pattern>/Login</url-pattern>
  17. </servlet-mapping>
  18. </web-app>

web.xml功能页面使用的类以以及类与url-pattern之间的关系。web.xml和index.jsp以及LoginServlet.java可构成一个web service,其中inde.jsp定义了页面，LoginServlet.java是提供服务的程序，而web.xml指定了页面与servlet类之间的映射关系，即某个功能页面使用哪个类在后台进行处理。

（5）配置MyBatis访问数据库中的用户表

首先建立用户表，插入两条数据：

  1. create database  test;
  2. use test;
  3.  
  4. create table tbl_user(
  5. username       varchar(32)    NOT NULL,
  6. password   varchar(32)            ,
  7. PRIMARY KEY ( username )
  8. )ENGINE=InnoDB DEFAULT CHARSET=utf8;
  9.  
  10. insert into tbl_user values("admin", "admin");
  11. insert into tbl_user values("testname", "123456");

然后参考先前的文章MyBatis测试配置MyBatis使用的config/Configure.xml ，mysql.properties以及UserMapper.xml，文章最后在源码中给出。这里先给出表对应的实体类User.java和UserMapper.xml:

User.java:

  1. package com.test.entity;
  2.  
  3. public class User {
  4. private String username;
  5. private String password;
  6.  
  7. //无参构造方法
  8. public User(){
  9.  
  10. }
  11.  
  12. //有参构造方法
  13. public User(String username, String password){
  14. this.username = username;
  15. this.password = password;
  16. }
  17.  
  18. public void setUsername(String username){
  19. this.username = username;
  20. }
  21.  
  22. public void setPassword(String password){
  23. this.password = password;
  24. }
  25.  
  26. public String getUsername(){
  27. return this.username;
  28. }
  29.  
  30. public String getPassword(){
  31. return this.password;
  32. }
  33. }

UserMapper.xml:

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper  
  3. PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4. "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5.  
  6. <mapper namespace="UserMapper">
  7. <select id="getUserByName" parameterType="String" resultType="User">
  8. select * from tbl_user where username = #{username}
  9. </select>
  10. </mapper>

访问数据库使用GetSqlSession类，该类利用Configure.xml文件获取sqlSessionFactory实例，并返回一个用于操作数据库的SqlSession实例。GetSqlSession.java如下：

  1. package com.test.util;
  2.  
  3. import java.io.IOException;
  4. import java.io.InputStream;
  5.  
  6. import org.apache.ibatis.io.Resources;
  7. import org.apache.ibatis.session.SqlSession;
  8. import org.apache.ibatis.session.SqlSessionFactory;
  9. import org.apache.ibatis.session.SqlSessionFactoryBuilder;
  10.  
  11. public class GetSqlSession {
  12.  
  13. public static SqlSession createSqlSession(){
  14. SqlSessionFactory sqlSessionFactory = null;
  15. InputStream input = null;
  16. SqlSession session = null;
  17.  
  18. //创建sqlSessionFactory
  19. try {
  20. input = Resources.getResourceAsStream("config/Configure.xml");
  21. sqlSessionFactory = new SqlSessionFactoryBuilder().build(input);
  22. session  = sqlSessionFactory.openSession();
  23. return session;
  24. } catch (IOException e) {
  25. e.printStackTrace();
  26. return null;
  27. }
  28.  
  29. }
  30.  
  31.  
  32. }

 

(6) dao层定义接口并实现接口中的方法

 

编写接口UserDao.java并由UserDaoImplement.java实现该接口，使用接口的目的是统一规范。实现接口的类，访问数据库中的tbl_user表，查找用户名和密码，与用户提交的用户名和密码进行比对，并返回校验结果。

UserDao.java:

  1. package com.test.dao;
  2.  
  3. import org.apache.ibatis.session.SqlSession;
  4.  
  5. public interface UserDao {
  6. public boolean verify(String username, String password, SqlSession session);//verify username and passwd
  7. }

UserDaoImplement.java:

  1. package com.test.dao;
  2.  
  3. import org.apache.ibatis.session.SqlSession;
  4.  
  5. import com.test.entity.*;
  6.  
  7.  
  8. public class UserDaoImplement implements UserDao {
  9. public boolean verify(String username, String password, SqlSession session){
  10. User user = (User) session.selectOne("UserMapper.getUserByName", username);
  11.  
  12. if(user == null){
  13. session.close();
  14. return false;
  15. }
  16. else if(user.getUsername().equals(username) && user.getPassword().equals(password))
  17. {
  18. session.close();
  19. return true;
  20. }
  21. else
  22. {
  23. session.close();
  24. return false;
  25. }
  26.  
  27.  
  28. }
  29. }

（7）运行测试：

结果如下：

用户名只能是英文，输入用户名/密码为admin/admin或者testname/123456时候登录成功，否则登录失败。

 

最新毕业设计成品

计算机毕业设计网站热销排行

版权所有© 帮我毕业网 并保留所有权利

QQ 1370405256 微信 biyebang

QQ：629001810微信：biyebang

收缩
  • 联系帮我作业网客服