web登录注册网页代码
千次阅读

2021-06-10 10:12:30

web JSP 简单的登录+注册页面代码

简单做了界面，代码功能应该没有问题，简单做个文档分享一下。登录界面denglu.jsp:欢迎进入登录界面用户名：密码：

java web网页登录功能原理(最好有代码❳

在页面上输入用户名称和密码后，html页面发送请CSS布局HTML小编今天和大家分享到服务端，服务器接收请CSS布局HTML小编今天和大家分享后，根据你的请CSS布局HTML小编今天和大家分享由相应的控制器来处理，后台有代码来执行并返回结果，然后服务器把结果发回浏览器，你就能看到信息了，这个返回结果可以是内容，可以是路径。

急急急。。。。在线等。。javaweb怎么判断管理员和

javaweb 要eclipse+mysql登录注册系统源代码

这有一个管理系统的里面有用户管理把添加改成注册就行了嘛登录自带的有 Java web管理系统DEMO 有问题可以联系我贴吧ID qq

CSS布局HTML小编今天和大家分享 .Net web登录功能的实现代码(带验证码功能的实就是那个网页cs里用的名称是登录验证码，你可以获取用户输入的用户名if(userinfo 。= null) { if(userinf.password 。= txtPwd) { alert(',

做一个登录页面，如果输入正确的用户名和密码，则这是关于asp.net web窗体的

Default1.aspx窗体代码：登陆页用户名：密码：代码窗体的代码如下： using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI

CSS布局HTML小编今天和大家分享C# ASP.net webform 登陆界面的代码就是aspx的...普通的登陆界面即可

不懂的话，就直接拖控件了。

C#web 如何判断登录时是学生登录还是管理员登陆，登陆的时候有一个人员表吧。登陆的时候会去数据库查找那条数据吧。找到这条数据找到你给学生或者老师做的标识。

实现web的一键注册登录是用的js吗？希望各位给个详对这个语言不是很懂。希望详细些，最好有可以运行的文档。

不一定，可能是用了cookie然后在php端验证，js也可能会用到(ajax)。

更多相关内容
web交互设计网页注册源代码
2018-11-24 10:34:54

web交互设计课程实验源代码，用户登录注册设计，参考黎老师课程

收起
Web网页登录页面设计
2020-03-09 23:40:56

利用web网页设计技术（html+css）进行静态登录页面设计开发，包含源代码，以及网页所用的图片

收起

Web
Web网页登录注册处理ASP代码
2017-10-14 11:07:29

用户在网页登录注册的功能简单界面以及登录注册后台处理代码，在笔记本工具手动敲代码生成.asp文件，部署IIS后可在本机通过127.0.0.1：端口号/文件名.asp直接访问。

收起
WEB基本网页代码（含登录、注册、信息维护等）
热门讨论 2009-06-10 15:35:28

自己做的最简单的网页，有登录、注册、信息维护、密码找回、查看个人信息等功能，含加密与解密。数据库的创建为 Create table userinfo( Username varchar primary key, Pwd varchar, Gender varchar, Email varchar...

收起

WEB代码

web登录注册页面

万次阅读 多人点赞 2021-07-09 16:34:45

目录web登录注册页面效果图结构图Java代码User.javaUserMapper.javaIndexServlet.javaRegisterServlet.javaDButil.javaxml配置文件mybatis-config.xmldb.propertiesweb.xmlhtml与cssindex.jspindex.cssregister....

文章目录

- web登录注册页面

web登录注册页面

项目地址：https://download.csdn.net/download/qq_41505957/14938383

效果图

在这里插入图片描述

结构图

在这里插入图片描述

Java代码

User.java

存储实体类,User属性有id，name，password三个属性，与数据库中对应。

package com.zhang.dao;

/**
 * @title: User
 * @Author 张宜强
 * @Date: 2021/1/25 18:25
 * @Effect:
 */
public class User {
    String name;
    String id;
    String password;

    public User() {
    }

    public User(String id, String password) {
        this.id = id;
        this.password = password;
    }

    public User(String name, String id, String password) {
        this.name = name;
        this.id = id;
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getId() {
        return id;
    }

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

    public String getPassword() {
        return password;
    }

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

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

UserMapper.java

UserMapper.java是User类在数据库中的操作的接口，这里我直接用注解完成了。

package com.zhang.mapper;

import com.zhang.dao.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;

import javax.jws.soap.SOAPBinding;

/**
 * @title: UserMapper
 * @Author 张宜强
 * @Date: 2021/1/25 18:04
 * @Effect:
 */
public interface UserMapper {
    @Select("select * from user where id = #{id}")
    User findUserById(String id);

    @Select("select * from user where id = #{id} and password = #{password}")
    User findUser(User user);

    @Insert("insert into user (id,name,password) values (#{id}, #{name}, #{password})")
    void insertUser(User user);
}

IndexServlet.java

IndexServlet.java是对index.jsp中登录按钮进行处理。判断用户的用户名和密码是否正确，如果正确，显示登录成功，如果错误则显示登录失败。

package com.zhang.servlet;

import com.zhang.dao.User;
import com.zhang.mapper.UserMapper;
import com.zhang.util.DButil;
import org.apache.ibatis.session.SqlSession;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @title: IndexServlet
 * @Author 张宜强
 * @Date: 2021/1/25 10:28
 * @Effect:
 */
@WebServlet("/IndexServlet")
public class IndexServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        String id = req.getParameter("id");
        String pwd = req.getParameter("pwd");
   
        User user = new User(id,pwd);
        SqlSession sqlSession = DButil.getSqlSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        User user1 = mapper.findUser(user);
        
        if(user1 == null) resp.getWriter().write("登录失败");
        else resp.getWriter().write("登录成功");
        sqlSession.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

}

RegisterServlet.java

RegisterServlet.java是Register.html对应的Servlet，当密码不一致时，显示密码不一致，对输入的id进行判断，当数据库中有此id时，显示注册失败，账号已存在，如果没有，显示注册成功，在数据库中插入数据。

package com.zhang.servlet;

import com.zhang.dao.User;
import com.zhang.mapper.UserMapper;
import com.zhang.util.DButil;
import org.apache.ibatis.session.SqlSession;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @title: RegisterServlet
 * @Author 张宜强
 * @Date: 2021/1/25 17:08
 * @Effect:
 */
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        String id = req.getParameter("id");
        String password = req.getParameter("password");
        String surePassword = req.getParameter("surePassword");
        User registerUser = new User(id,password);

        if(password!=surePassword)
            resp.getWriter().write("注册失败，密码不一致");
        SqlSession sqlSession = DButil.getSqlSession();
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);

        User user = userMapper.findUserById(registerUser.getId());
        System.out.println(user);
        System.out.println(registerUser);
        if(user == null) {
            userMapper.insertUser(registerUser);
            sqlSession.commit();
            resp.getWriter().write("注册成功");
        }else resp.getWriter().write("注册失败，账号已存在");

        sqlSession.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
}

DButil.java

DButil.java是Mybatis的工具类，实现SqlSession的获取

package com.zhang.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

/**
 * @title: DButil
 * @Author 张宜强
 * @Date: 2021/1/25 18:43
 * @Effect:
 */
public class DButil {
    static InputStream inputStream = null;
    static {
        try {
            String resource = "mybatis-config.xml";

            inputStream = Resources.getResourceAsStream(resource);

        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    static SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

    static public SqlSession getSqlSession() {
        return sqlSessionFactory.openSession();
    }

}

xml配置文件

mybatis-config.xml

mybatis-config.xml是mybatis的配置文件，导入db.properties文件。

<?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>
    <!-- 环境配置 -->

    <properties resource="db.properties"></properties>

    <typeAliases>
        <typeAlias alias="User" type="com.zhang.dao.User"/>
    </typeAliases>


    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <!-- 数据库连接相关配置 ,这里动态获取config.properties文件中的内容-->
            <dataSource type="POOLED">
                <property name="driver" value="${driver}" />
                <property name="url" value= "${url}" />
                <property name="username" value="${username}" />
                <property name="password" value="${password}" />
            </dataSource>
        </environment>
    </environments>
    <!-- mapping文件路径配置 -->
    <mappers>
        <mapper resource="mapper/UserMapper.xml" />
    </mappers>

</configuration>

db.properties

db.properties 是数据库的相关信息。

driver = com.mysql.cj.jdbc.Driver
url = jdbc:mysql://localhost:3306/mybatis?serverTimezone=UTC&characterEncoding=UTF-8&useSSL=false
username = root
password = 123456

web.xml

web.xml中注册RegisterServlet与IndexServlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
  <display-name>Archetype Created Web Application</display-name>

  <servlet>
    <servlet-name>RegisterServlet</servlet-name>
    <servlet-class>com.zhang.servlet.RegisterServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>RegisterServlet</servlet-name>
    <url-pattern>/WebStudy2_war/RegisterServlet</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>IndexServlet</servlet-name>
    <servlet-class>com.zhang.servlet.IndexServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>IndexServlet</servlet-name>
    <url-pattern>/WebStudy2_war/IndexServlet</url-pattern>
  </servlet-mapping>

</web-app>

html与css

index.jsp

登录页面的界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>轩阁书城</title>
    <style>
    @import "css/index.css";
    </style>
</head>
<body>

<p class="b1">web登录注册页面</p>


<div class="box">
    <h2>登录</h2>
    <form action="/WebStudy2_war/IndexServlet">
        <div class="inputBox">
            <input type="text" name="id" required="">
            <label>账号</label>
        </div>
        <div class="inputBox">
            <input type="password" name="pwd" required="">
            <label>密码</label>
        </div>
        <div align="center">
            <input type="submit"  value="登录">

            <a href="html/register.html"><input type="button" value="注册"></a>
            <a href="index.jsp"><input type="reset" value="重置"></a>
        </div>
        <div align="center">
            ${loginErro}
        </div>
    </form>
</div>
</body>
</html>

index.css

登录界面的css样式

body{
    margin:0;
    padding: 0;
    font-family: sans-serif;
    background: url("../resources/login.jpg");
    background-size: cover;
    background-color: rgba(240, 255, 255, 0.5);
}
.box
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:400px;
    padding: 40px;
    background:rgba(75, 81, 95, 0.3);
    box-sizing:border-box;
    box-shadow:7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 10px;/*登录窗口边角圆滑*/
}
.box h2
{
    margin:0 0 30px;
    padding:0;
    color:#fff;
    text-align:center;
}
.box .inputBox
{
    position:relative;
}
.box .inputBox input
{
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom:30px;/*输入框设置*/
    border:none;
    border-bottom:1px solid #fff;
    outline:none;
    background:transparent;
}
.box .inputBox label
{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label
{
    top: -18px;
    left: 0;
    color: #03a9f4;
    font-size: 12px;
}
.box  input[type="submit"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.box  input[type="reset"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.box  input[type="button"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.b1
{
    color: white;
    font-size: 60px;
    font-family: "楷体";
    font-weight: bold;
    text-align: center;
    margin: 50px;
    padding: 60px;
    text-shadow: aqua 1px 2px 1px;
}

register.html

注册页面的界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
       @import "../css/register.css";
    </style>
</head>

<body>
<div id="loginDiv">
    <form action="/WebStudy2_war/RegisterServlet">
        <h1>注册</h1>
        <p>用户姓名:<input name="id" type="text" autofocus required><label></label></p>

        <p>用户密码:<input name="password" type="password" required><label></label></p>

        <p>确认密码:<input name="surePassword" type="password" required><label></label></p>

        <p style="text-align: center;">
            <input  type="submit" class="button" value="提交">
            <input type="reset" class="button" value="重置">
        </p>
    </form>

</div>

</body>

register.css

注册页面的css样式

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url("../resources/login.jpg") no-repeat 0px 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#loginDiv {
    width: 37%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 650px;
    background-color: rgba(75, 81, 95, 0.3);
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 5px;
}

#name_trip {
    margin-left: 50px;
    color: red;
}

p,
.sexDiv {
    margin-top: 10px;
    margin-left: 20px;
    color: azure;
}

.sexDiv>input,
.hobby>input {
    width: 30px;
    height: 17px;
}

input,
select {
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    height: 30px;
    width: 140px;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    color: #f0edf3;
    padding-left: 10px;
}

.button {
    border-color: cornsilk;
    background-color: rgba(100, 149, 237, .7);
    color: aliceblue;
    border-style: hidden;
    border-radius: 5px;
    width: 100px;
    height: 31px;
    font-size: 16px;
}

.introduce {
    margin-left: 110px;
}

.introduce>textarea {
    background-color: rgba(216, 191, 216, 0.5);
    border-style: hidden;
    outline: none;
    border-radius: 5px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    color: #f0edf3;
}

b {
    margin-left: 50px;
    color: #FFEB3B;
    font-size: 10px;
    font-weight: initial;
}

收起

展开全文

web前端中一个注册页面
2018-12-24 16:36:38

自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。

收起
HTML5+CSS3移动Web开发实战单元5 注册登录与留言网页设计.pptx
2020-03-17 13:31:40

实例探析任务5-1 探析手机麦包包网的用户注册网页 效果展示手机麦包包网的用户注册网页0501.html的浏览效果如图5-1所示 ;网页探析 1网页0501.html的HTML代码探析网页0501.html的HTML代码如表5-1所示;续表;2网页...

收起
用Python实现web端用户登录和注册功能
千次阅读 2021-02-12 09:21:36

这篇文章主要介绍了用Python实现web端用户登录和注册功能的教程,需要的朋友可以参考下用户管理是绝大部分Web网站都需要解决的问题。用户管理涉及到用户注册和登录。用户注册相对简单，我们可以先通过API把用户注册这...

这篇文章主要介绍了用Python实现web端用户登录和注册功能的教程,需要的朋友可以参考下

用户管理是绝大部分Web网站都需要解决的问题。用户管理涉及到用户注册和登录。

用户注册相对简单，我们可以先通过API把用户注册这个功能实现了：

_RE_MD5 = re.compile(r'^[0-9a-f]{32}$')

@api

@post('/api/users')

def register_user():

i = ctx.request.input(name='', email='', password='')

name = i.name.strip()

email = i.email.strip().lower()

password = i.password

if not name:

raise APIValueError('name')

if not email or not _RE_EMAIL.match(email):

raise APIValueError('email')

if not password or not _RE_MD5.match(password):

raise APIValueError('password')

user = User.find_first('where email=?', email)

if user:

raise APIError('register:failed', 'email', 'Email is already in use.')

user = User(name=name, email=email, password=password, image='http://www.gravatar.com/avatar/%s?d=mm&s=120' % hashlib.md5(email).hexdigest())

user.insert()

return user

注意用户口令是客户端传递的经过MD5计算后的32位Hash字符串，所以服务器端并不知道用户的原始口令。

接下来可以创建一个注册页面，让用户填写注册表单，然后，提交数据到注册用户的API：

{% extends '__base__.html' %}

{% block title %}注册{% endblock %}

{% block beforehead %}

function check_form() {

$('#password').val(CryptoJS.MD5($('#password1').val()).toString());

return true;

}

{% endblock %}

{% block content %}

欢迎注册！

名字:

电子邮件:

输入口令:

重复口令:

注册

{% endblock %}

Try

这样我们就把用户注册的功能完成了：

用户登录比用户注册复杂。由于HTTP协议是一种无状态协议，而服务器要跟踪用户状态，就只能通过cookie实现。大多数Web框架提供了Session功能来封装保存用户状态的cookie。

Session的优点是简单易用，可以直接从Session中取出用户登录信息。

Session的缺点是服务器需要在内存中维护一个映射表来存储用户登录信息，如果有两台以上服务器，就需要对Session做集群，因此，使用Session的Web App很难扩展。

我们采用直接读取cookie的方式来验证用户登录，每次用户访问任意URL，都会对cookie进行验证，这种方式的好处是保证服务器处理任意的URL都是无状态的，可以扩展到多台服务器。

由于登录成功后是由服务器生成一个cookie发送给浏览器，所以，要保证这个cookie不会被客户端伪造出来。

实现防伪造cookie的关键是通过一个单向算法(例如MD5)，举例如下：

当用户输入了正确的口令登录成功后，服务器可以从数据库取到用户的id，并按照如下方式计算出一个字符串：

"用户id" + "过期时间" + MD5("用户id" + "用户口令" + "过期时间" + "SecretKey")

当浏览器发送cookie到服务器端后，服务器可以拿到的信息包括：用户id

过期时间

MD5值

如果未到过期时间，服务器就根据用户id查找用户口令，并计算：

MD5("用户id" + "用户口令" + "过期时间" + "SecretKey")

并与浏览器cookie中的MD5进行比较，如果相等，则说明用户已登录，否则，cookie就是伪造的。

这个算法的关键在于MD5是一种单向算法，即可以通过原始字符串计算出MD5，但无法通过MD5反推出原始字符串。

所以登录API可以实现如下：

@api

@post('/api/authenticate')

def authenticate():

i = ctx.request.input()

email = i.email.strip().lower()

password = i.password

user = User.find_first('where email=?', email)

if user is None:

raise APIError('auth:failed', 'email', 'Invalid email.')

elif user.password != password:

raise APIError('auth:failed', 'password', 'Invalid password.')

max_age = 604800

cookie = make_signed_cookie(user.id, user.password, max_age)

ctx.response.set_cookie(_COOKIE_NAME, cookie, max_age=max_age)

user.password = '******'

return user

# 计算加密cookie:

def make_signed_cookie(id, password, max_age):

expires = str(int(time.time() + max_age))

L = [id, expires, hashlib.md5('%s-%s-%s-%s' % (id, password, expires, _COOKIE_KEY)).hexdigest()]

return '-'.join(L)

对于每个URL处理函数，如果我们都去写解析cookie的代码，那会导致代码重复很多次。

利用拦截器在处理URL之前，把cookie解析出来，并将登录用户绑定到ctx.request对象上，这样，后续的URL处理函数就可以直接拿到登录用户：

@interceptor('/')

def user_interceptor(next):

user = None

cookie = ctx.request.cookies.get(_COOKIE_NAME)

if cookie:

user = parse_signed_cookie(cookie)

ctx.request.user = user

return next()

# 解密cookie:

def parse_signed_cookie(cookie_str):

try:

L = cookie_str.split('-')

if len(L) != 3:

return None

id, expires, md5 = L

if int(expires) < time.time():

return None

user = User.get(id)

if user is None:

return None

if md5 != hashlib.md5('%s-%s-%s-%s' % (id, user.password, expires, _COOKIE_KEY)).hexdigest():

return None

return user

except:

return None

Try

这样，我们就完成了用户注册和登录的功能。

相关推荐：

python字符串连接的几种方式总结

python中的sort的方法使用详解

收起

展开全文
html注册页面代码
2018-07-31 13:51:46

html实例，一个简单的注册页面，，，，，，，，，，，，，，，，，，

收起

【Web开发】登录注册功能实现

千次阅读 2022-02-07 10:47:05

一个含注册登录的小demo

登录注册是网站的常用功能，本篇根据黑马程序员的教程来实现此功能的小demo。
参考：https://www.bilibili.com/video/BV1Qf4y1T7Hx?p=109
maven文件下载：https://download.csdn.net/download/qq1198768105/79568473

登录功能

思路分析

在这里插入图片描述

登录页面设计

在这里插入图片描述
相关前端资源文件见maven文件。

数据表数据建立

直接用IDEA集成的mysql数据库建立数据。
设置每个用户有三个值：
主键：id
用户名：username(最多20位，不能重复)
密码：password(最多32位)
设立一个账号：zstar,123
相关sql语句：

create table tb_user(
    id int primary key auto_increment,
    username varchar(20) unique,
    password varchar(32)
);

insert into tb_user (username,password) values('zstar','123');

select * from tb_user;

在这里插入图片描述

创建实体类

在com.itheima.pojo文件夹下创建User实体类，该实体类的三个属性和数据表里三个值相对应：

package com.itheima.pojo;

public class User {

    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer 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 + '\'' +
                '}';
    }
}

导入驱动

在项目的pom.xml导入所需驱动坐标

<dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>

        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.5</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.34</version>
        </dependency>
</dependencies>

设置mybatis配置

创建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>
    <!--起别名-->
    <typeAliases>
        <package name="com.itheima.pojo"/>
    </typeAliases>

    <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:///mybatis?useSSL=false&amp;useServerPrepStmts=true"/>
                <property name="username" value="root"/>
                <property name="password" value="zzz"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <package name="com.itheima.mapper"/>
    </mappers>
</configuration>

注：这里需要根据自己的数据库信息进行设置
我的数据库名为mybatis，在url上进行修改
数据库用户名为root
密码为zzz
useSSL:关闭SSL安全连接性能更高
useServerPrepStmts:开启预编译功能
& 等同于 &（直接写&会报错）

创建UserMapper接口

在mabatis的配置文件中，设置扫描mapper为com.itheima.mapper
在com.itheima.mapper包下创建UserMapper接口

package com.itheima.mapper;

import com.itheima.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

public interface UserMapper {
    /**
     * 根据用户名和密码查询用户对象
     * @param username
     * @param password
     * @return
     */
    @Select("select * from tb_user where username = #{username} and password = #{password}")
    User select(@Param("username") String username,@Param("password")  String password);
}

实现该接口的主要有两种方式，第一种在同文件夹下创建UserMapper.xml文件，在文件中用namespace来进行关联，第二种直接适用注解进行sql语句的实现。
这里采用了第二种方式。

这里sql语句的占位符有两种方式，一种是#{}，一种是${}，两者区别：
#{} ：执行SQL时，会将 #{} 占位符替换为？，将来自动设置参数值。底层使用的是PreparedStatement
${} ：拼接SQL。底层使用的是Statement，会存在SQL注入问题。
因此为了防止SQL注入问题，使用#不用$。

@Param注解的作用:用于传递参数,是方法的参数可以与SQL中的字段名相对应。

修改登录页面

修改loign.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="/request-demo/loginServlet" method="post" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text"></p>

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

        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>
</div>

</body>
</html>

这里主要修改的一点是username和password要设定id，这样才能被后面的LoginServlet获取到。

编写登录Servlet

package com.itheima.web;

import com.itheima.mapper.UserMapper;
import com.itheima.pojo.User;
import com.itheima.util.SqlSessionFactoryUtils;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        //2. 调用MyBatis完成查询
        //2.1 获取SqlSessionFactory对象
       /* String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);*/

        SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();
        //2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3 获取Mapper
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //2.4 调用方法
        User user = userMapper.select(username, password);
        //2.5 释放资源
        sqlSession.close();


        //获取字符输出流，并设置content type
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        //3. 判断user释放为null
        if(user != null){
            // 登陆成功
            writer.write("登陆成功");
        }else {
            // 登陆失败
            writer.write("登陆失败");
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

注：在2.1获取SqlSessionFactory对象中，登录和后面的注册均要使用这相同的三行代码，如果在两个Servlet都进行获取，则会重复创建，比较消耗资源；因此，这里作出了优化，创建SqlSessionFactory工具类，使用静态代码块保证只执行一次。

SqlSessionFactory工具类：SqlSessionFactoryUtils

package com.itheima.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlSessionFactoryUtils {

    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 SqlSessionFactory getSqlSessionFactory(){
        return sqlSessionFactory;
    }
}

功能测试

使用Maven Helper插件开启tomcat服务：
在这里插入图片描述
进入页面，访问

http://localhost:8080/request-demo/login.html

能正常访问，提交数据，提交数据，发现报错：
Could not create connection to database server
查阅原因：数据库版本和驱动不匹配
在控制台查看我的mysql版本：8.0.28
在这里插入图片描述
在pom.xml中修改mysql驱动：

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
        </dependency>

重新运行，结果正常。

注册功能

思路分析

在这里插入图片描述

注册页面设计

在这里插入图片描述
register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="/request-demo/registerServlet" method="post">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
</body>
</html>

修改UserMapper

在之前的基础上增加查询用户名和添加用户的功能：

package com.itheima.mapper;

import com.itheima.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

public interface UserMapper {


    /**
     * 根据用户名和密码查询用户对象
     * @param username
     * @param password
     * @return
     */
    @Select("select * from tb_user where username = #{username} and password = #{password}")
    User select(@Param("username") String username,@Param("password")  String password);

    /**
     * 根据用户名查询用户对象
     * @param username
     * @return
     */
    @Select("select * from tb_user where username = #{username}")
    User selectByUsername(String username);

    /**
     * 添加用户
     * @param user
     */
    @Insert("insert into tb_user values(null,#{username},#{password})")
    void add(User user);
}

编写注册Servlet

和登录类似 RegisterServlet:

package com.itheima.web;

import com.itheima.mapper.UserMapper;
import com.itheima.pojo.User;
import com.itheima.util.SqlSessionFactoryUtils;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;

@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收用户数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        //封装用户对象
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);

        //2. 调用mapper 根据用户名查询用户对象
        //2.1 获取SqlSessionFactory对象
       /* String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);*/
        SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();

        //2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //2.3 获取Mapper
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);

        //2.4 调用方法
        User u = userMapper.selectByUsername(username);

        //3. 判断用户对象释放为null
        if( u == null){
            // 用户名不存在，添加用户
            userMapper.add(user);

            // 提交事务
            sqlSession.commit();
            // 释放资源
            sqlSession.close();
        }else {
            // 用户名存在，给出提示信息
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("用户名已存在");
        }

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

功能测试

访问

http://localhost:8080/request-demo/register.html

提交表单后，查阅数据库成功输进新用户数据，测试通过。
在这里插入图片描述

收起

展开全文

mysql

web html 网页css 设计参照小米主页的登陆页面
2018-11-19 22:43:06

web html 网页设计参照小米主页的登陆页面运用了CSS

收起
web基础实训青软实训漫步时尚广场项目源代码以及图片
2021-06-24 14:27:51

web基础实训青软实训漫步时尚广场项目源代码以及图片从第一章到第十二章全，包括图片代码，每一章节一个文件夹。从前端到后端界面，从显示产品到注册、登录、发布、审核产品的静态页面都有。非常不错的实训资源

收起
用户注册登录页面实例 web前端开发HTML5 JavaScript css
千次阅读 2021-09-23 15:54:26

代码与注释如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>用户注册页面实例</title> <style> body { background-color:#CCC;} #container{ ...

收起
简简单单实现 Python Web 的登录注册页面，还包含一半逻辑。
万次阅读 多人点赞 2021-04-05 20:17:33

八、Django 用户注册与登录 8.1 编写注册页面 8.2 注册页面的 POST 与 GET 请求 8.3 登录页面实现 8.4 本篇博客小节八、Django 用户注册与登录在正式开始本篇博客代码写作之前，需要提前准备一下 sqlite3 相关数据...

收起

python django web Web
eclipse-登录注册web项目-练
千次阅读 2022-03-02 15:52:49

6. 新建一个 Servlet 用于登录 7. 修改代码中的数据库和数据库密码 8.注册页面 JSP 9. 新建一个 Servlet 用于注册用户 10.修改 web.xml 11.数据库建库（testdb）建表(user) 12.右键项目运行 13. ...

收起
网页制作千年之恋.rar
2020-08-14 17:25:23

一个HTML+CSS开发的注册页面，适合前端初学者

收起
一个简陋的C#web用户注册代码
2009-06-25 14:54:36

一个简陋的C#web用户注册代码,做工粗糙。

收起
动态实现web网页登陆和注册功能[保姆级教学]
千次阅读 多人点赞 2021-12-17 10:13:45

动态实现页面登陆和注册功能！！！！

收起

mysql navicat 网页设计
Visual Studio Code:Web前端——登录、注册界面、个人相册
千次阅读 2021-08-05 10:53:17

制作一个网页，有登录界面、注册界面和个人相册界面，注册成功后在登录界面登录成功后进入个人相册界面,个人相册里的所有图片是顺时针旋转的。若失败返回登录界面，登录界面和注册界面可相互切换。代码： login....

收起

正则表达式
html，css和js写的登录与注册界面
2018-10-18 11:55:25

html，css和js写的登录与注册界面。本人菜水平，希望对初学者有帮助

收起
HTML-第六周-表单-登录页面与跳转注册页面（代码在最后）
千次阅读 2022-04-03 16:01:54

HTML-第六周-表单-登录页面与跳转注册页面（代码在最后）

收起

vscode
web网站页面实现设计代码
千次阅读 2021-07-21 09:52:30

usersrRegsuccess.jsp <%@ page contentType="text...charset=gb2312"%> <%@ page import="java.sql.*"%> <...先生/女士,请从牢记你的用户名或者密码错，注册成功</h1> </title> <hr&...

收起

spring java tomcat
Html、Js基于web储存localStorage下的注册登录及登录验证的简单网页
千次阅读 多人点赞 2019-07-20 18:37:53

注册网页 注册信息存入localStorage （web下存储）登录网页注册完成跳转登录界面验证登录完成延时跳转至目标网页实现效果如下：（没来得及美化页面）登录界面注册界面注册完成界面验证登录界面 **...

收起
实现网页中用户注册及登录功能
千次阅读 2022-03-22 17:12:36

使用php与数据库交互，实现网页中用户注册及登录功能

收起

php web
HTML+CSS+JS编写一个较为美观的简单登录注册网页
千次阅读 多人点赞 2021-06-26 09:10:06

前辈们请跳过在校大学生学习web一个月做出来的。 CSS订制两个网页的样式和简单的小动画 Js实现注册登录的正确...登录页面代码： // An highlighted block <!DOCTYPE html> <html lang="en" dir="ltr">

收起
简单的JavaWeb注册登录案例
千次阅读 2021-06-12 13:11:37

简单的JavaWeb注册登录案例1.注册页面register.htmlregister姓名：电话：邮箱：qq： 2.注册案例实现程序register.java/*** 注册案例实现程序* @author lucky**/public class register extends HttpServlet {public ...

收起
Java web系列三--简单的网页注册登录
千次阅读 2017-09-07 00:34:38

1.写网页有html,jsp，servlet....2.本项目使用jsp+servlet来实现一个简单的网页注册和登录，需要一点jsp的语法基础，比如插入java代码%>、<a herf=""></a>表示转发。form跟html一样表示表单。<!---- --

收起

java java web servlet
网页设计表单制作代码制作一个很简单网页表单代码
千次阅读 2021-06-11 09:29:08

CSS布局HTML小编今天和大家分享以下网页设计表格html代码CSS布局HTML小编今天和大家分享以下网页设计表格html代码急急急，下午要交作业了，编码大神救救我代码(大小有需要可以调)：练习使用HTML 运行效果：HTML5...

收起
一个简单的前后端交互——登录注册页面（升级版）idea代码篇（2：Maven：Javaweb项目）使用MyBatis：Mapper...
千次阅读 多人点赞 2022-01-08 23:12:11

一个简单的前后端交互——登录注册页面（升级版）idea代码篇（2：Maven：Javaweb项目）使用MyBatis：Mapper，servlet+Tomcat

收起

tomcat mybatis

web交互设计网页注册源代码

Web网页登录页面设计

Web网页登录注册处理ASP代码

WEB基本网页代码（含登录、注册、信息维护等）

web登录注册页面

目录

文章目录

web登录注册页面

效果图

结构图

Java代码

User.java

UserMapper.java

IndexServlet.java

RegisterServlet.java

DButil.java

xml配置文件

mybatis-config.xml

db.properties

web.xml

html与css

index.jsp

index.css

register.html

register.css

web前端中一个注册页面

HTML5+CSS3移动Web开发实战 单元5 注册登录与留言网页设计.pptx

用Python实现web端用户登录和注册功能

欢迎注册！

html注册页面代码

【Web开发】登录注册功能实现

登录功能

思路分析

登录页面设计

数据表数据建立

创建实体类

导入驱动

设置mybatis配置

创建UserMapper接口

修改登录页面

编写登录Servlet

功能测试

注册功能

思路分析

注册页面设计

修改UserMapper

编写注册Servlet

功能测试

web html 网页css 设计参照小米主页的登陆页面

web基础实训青软实训 漫步时尚广场项目源代码以及图片

用户注册登录页面实例 web前端开发HTML5 JavaScript css

简简单单实现 Python Web 的登录注册页面，还包含一半逻辑。

eclipse-登录注册web项目-练

网页制作千年之恋.rar

一个简陋的C#web用户注册代码

动态实现web网页登陆和注册功能[保姆级教学]

Visual Studio Code:Web前端——登录、注册界面、个人相册

html，css和js写的登录与注册界面

HTML-第六周-表单-登录页面与跳转注册页面（代码在最后）

web网站页面实现设计代码

Html、Js基于web储存localStorage下的注册登录及登录验证的简单网页

实现网页中用户注册及登录功能

HTML+CSS+JS编写一个较为美观的简单登录注册网页

简单的JavaWeb注册登录案例

Java web系列三--简单的网页注册登录

网页设计表单制作代码 制作一个很简单网页表单代码

一个简单的前后端交互——登录注册页面（升级版）idea代码篇（2：Maven：Javaweb项目）使用MyBatis：Mapper...

web登录注册网页代码

HTML5+CSS3移动Web开发实战单元5 注册登录与留言网页设计.pptx

web基础实训青软实训漫步时尚广场项目源代码以及图片

网页设计表单制作代码制作一个很简单网页表单代码