java实现一个浏览器登录 用java实现登录页面怎么写

Mybatis和web学习的课后实操

首先我们确定我们的需求：

一：我们需要一个登入和注册的网页页面进行操作

二：我们需要连接数据库查询是否有该用户，并且实现登入和注册

确定完需求我们来实操

首先是界面：

这里需要用到css和html前端知识

我就直接抄作业了

具体效果如上

我们主要讲一下功能的实现 

首先是登入界面：

第一步我们先创建一个数据库来存放用户

这里面我们有id，username和password三个属性

我们把属性在User中创建：

 创建完成后我们需要getset和tostring；

package com.gao.polo;

public class User {
    private int id;
    private String username;
    private String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

这步之后我们要思考如何实现mybatis的使用

首先配置mybatis文件

一，在maven的pom中导入相应的mybatis坐标和mysql-connector坐标： 

<dependencies>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.2</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.47</version>
    </dependency>
  </dependencies>

然后我们要配置mybatis设置文件：

在resource下创建一个mybatis-config.xml文件

写入以下配置：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>



    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql://localhost:3306/jd_user?useSSL=false&useServerPrepStmts=true"/>
                <property name="username" value="root"/>
                <property name="password" value="000511"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <mapper resource="com\gao\mapper\UserMapper.xml"/>


    </mappers>

</configuration>

 注意一点：

<mapper resource="com\gao\mapper\UserMapper.xml"/>里面的resource需要写上的是项目里面Mapper的xml映射文件的目录

完成后我们现在可以去配置Marrper文件了

基础的UserMapper.xml文件：

（注意namespace需要对应接口坐标）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gao.mapper.UserMapper">
    
</mapper>
        <!--UserMapper.xml-->

 和UserMapper接口：

（建一个查询用户的接口）

（因为比较简单，所以我们这次写的Mapper用注解来实现）

public interface UserMapper {
    @Select("select * from jd_user.user_login where username=#{username} and password=#{password}")
    User loginSelect(@Param("username")String username,@Param("password") String password);
}

好我们登入工作基本的准备工作做完了

现在进行测试

先在我们的pom文件中导入一下Junit

<!--junit-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>

创建test文件

对了，我们先在utils里面做一个sqlsessionfactory工厂文件

public class MybatisUtil {
    private static SqlSessionFactory sqlSessionFactory;
    static {
        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    public static SqlSession getSqlSession(){
        return sqlSessionFactory.openSession();
    }
}

然后在test中利用工厂文件解析出session

利用getmaaper来对我们的映射文件进行测试

public class test {

    //测试数据库是否连接成功
    @Test
    public void loginTest ()throws Exception{
        SqlSession sqlSession = MybatisUtil.getSqlSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        User user = mapper.loginSelect("740803880", "000511");
        System.out.println("user = " + user);
    }
}

ok，我们看看测试结果

果然有错误！我们来找一下：

 不能解析我们的Mapper.xml文件

仔细查询后发现没有问题再看看看我们的target目录

 发现我们的Mapper下没有.xml文件

如果将静态资源放在src/main/java中,那么编译时将被maven忽略,在target目录下将没有这些资源,此处,我们将mybatis的mapper.xml放在了dal包中,方便编程查看,所以需要将该目录添加为资源目录.

<build>
  <!--注意,如果将静态资源放在src/main/java中,那么编译时将被maven忽略,在target目录下将没有这些资源,此处,我们将
  mybatis的mapper.xml放在了dal包中,方便编程查看,所以需要将该目录添加为资源目录.
  -->
  <resources>
    <resource>
      <directory>src/main/java</directory>
      <includes>
        <include>**/*.xml</include>
      </includes>
    </resource>
  </resources>
  </build>

我们在maven的配置文件中加入这段

好现在我们来测试，发现已经测试成功

 代表数据库已经连接成功

接下来我们来配置web文件

首先配置maven

导入tomcat插件和servlet的坐标

总的一个需要的maven已经配置完了，结果如下

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>
  <packaging>war</packaging>

  <name>LoginAndRegister</name>
  <groupId>com.gao</groupId>
  <artifactId>LoginAndRegister</artifactId>
  <version>1.0-SNAPSHOT</version>
  <dependencies>
    <!--mybatis-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.2</version>
    </dependency>
    <!--mysql-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.47</version>
    </dependency>
    <!--junit-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>
    <!--导入servlet工具包-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>
  <build>
  <!--注意,如果将静态资源放在src/main/java中,那么编译时将被maven忽略,在target目录下将没有这些资源,此处,我们将
  mybatis的mapper.xml放在了dal包中,方便编程查看,所以需要将该目录添加为资源目录.
  -->
  <resources>
    <resource>
      <directory>src/main/java</directory>
      <includes>
        <include>**/*.xml</include>
      </includes>
    </resource>
  </resources>
 <!--导入tomcat工具类-->
    <plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.2</version>
        <configuration>
          <port>80</port>
          <path>/</path>
        </configuration>
      </plugin>
    </plugins>
  </build>


</project>

导入后我们就可以在新建里创建Servlet类了

 我们创建个LoginServlet

用注解@webservlet标记一下我们的Servlet

在request申请里获得username和password

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
}
}

我们来看看html配置：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form action="/loginServlet" id="form" method="post">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>账号:<input id="username" name="username" type="text"></p>

        <p>密码:<input id="password" name="password" type="password"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="登入" name="login up">
            <a href="register.html"><input type="button" class="button" value="注册" name="register"></a>
        </div>
    </form>
</div>

</body>
</html>

在<form action="/loginServlet" id="form" method="post">处的action后面输入我们loginservlet的坐标，就映射成功了

现在我们配置servlet的代码逻辑

先利用工厂获取sqlsession

在利用sqlSession获取解析我们的mapper文件

最后再利用mapper的login查询查出用户的数据表单

SqlSession sqlSession = MybatisUtils.getSqlSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        User user = mapper.loginSelect(username, password);

至此我们就已经完成了从用户输入的用户密码而查询出数据库的内容了

最后我们利用respond加上代码逻辑

response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        if(user !=null){
            writer.write("输入成功");
        }else{
            writer.write("登入失败");
        }

实现了账户密码的验证登入

我们来试着验证一下

 run一下tomcat

 在浏览器输入我们的网址

http://localhost/login.html

尝试一下登入

输入了个错误的账号密码

在输入正确的成功导出

至此我们的登入功能已经搞定了

这个项目是简单的基于tomcat+servlet+mybatis实现的项目，记录一下方便我们学习