实现一个（注册登录+验证码）判断功能点（纯代码）

最新推荐文章于 2023-08-29 12:09:56 发布

weixin_40876986

最新推荐文章于 2023-08-29 12:09:56 发布

阅读量1.6k

点赞数 2

分类专栏： JAVA 数据库技术 javascript

本文链接：https://blog.csdn.net/weixin_40876986/article/details/105634076

版权

javascript 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

JAVA

13 篇文章 0 订阅

订阅专栏

数据库技术

1 篇文章 0 订阅

订阅专栏

1.前端页面布局:

<! DOCTYPE html>

< html lang= "en" >

< head >

< meta charset= "UTF-8" >

< title >欢迎注册 </ title >

< link rel= "stylesheet" href= "style/common.css" >

< link rel= "stylesheet" href= "style/regStyle.css" >

< link href= "favicon.ico" rel= "shortcut icon" >

< link rel= "stylesheet" href= "style/footerStyle.css" >

</ head >

< body >

< div id= "reg_header" >

< div class= "reg_h_center" >

< img src= "images/logo.png" alt= "" >

< h3 >欢迎注册 </ h3 >

< div class= "reg_h_right" >

< span >已有账户 </ span >< a href= "login.html" >请登录 </ a >

</ div >

< div id= "reg_main" >

< div class= "main_left" >

< form action= "/Mystore/RegistServlet" id= "reg_form" method= "post" >

< div >

< label >用户名 </ label > < input id= "username" type= "text"

placeholder= "请输入用户名..." name= "username" >

</ div >

< div >

< label >密码 </ label > < input id= "pwd" type= "text" placeholder= "请输入密码.." name= "password" >

</ div >

< div >

< label >确认密码 </ label > < input id= "pwd2" type= "text"

placeholder= "请再次输入密码..." >

</ div >

< div >

< label >电话 </ label > < input type= "text" placeholder= "请输入电话..."

name= "phone" >

</ div >

< div class= "check_box" >

< label >验证码 </ label > < input type= "text" placeholder= "请输入验证码..."

name= "code" > < img src= "/Mystore/CheckCodeServlet"

onclick= "change(this)" > //调用JS函数处理验证码更新,把参数传递给checkcodeservlet

</ div >

< div class= "submit_button" >

< input type= "button" value= "立即注册" onclick= "checkData()" >

</ div > //调用JS函数处理网页端的逻辑验证

</ form >

</ div >

< div class= "main_right" >

< img src= "images/reg_right.png" alt= "" >

</ div >

< div id= "footer" >

< div class= "link" >

< a href= "#" >关于我们 </ a > | < a href= "#" >联系我们 </ a > | < a href= "#" >人才招聘 </ a > |

< a href= "#" >商家入驻 </ a > | < a href= "#" >广告服务 </ a > | < a href= "#" >手机码蚁 </ a > |

< a href= "#" >友情链接 </ a > | < a href= "#" >销售联盟 </ a > | < a href= "#" >兴兴社区 </ a > |

< a href= "#" >兴兴公益 </ a >

</ div >

< div class= "copyright" >

</ div >

< script src= "js/regist.js" ></ script >

</ body >

</ html >

2.JS处理逻辑:

unction change(obj) //验证码的刷新,把参数传给checkcodeservlet进行逻辑处理

{

obj.src = "/Mystore/CheckCodeServlet?time=" + new Date().getTime();

}

function checkData() {

//1.获取用户名，密码确认密码

var username = document.getElementById( "username");

var pwd = document.getElementById( "pwd");

var pwd2 = document.getElementById( "pwd2");

//2.判断输入的内容不能为空

if(username.value== ""){

alert( "请输入用户名");

return;

}

if(pwd.value== ""){

alert( "请输入密码");

return;

}

if(pwd2.value== ""){

alert( "请再次输入密码");

return;

}

//3。两次密码是否一样

if(pwd.value == pwd2.value){

//发送请求 form 获取form表单在regist.html中

var form = document.getElementById( "reg_form");

form.submit(); //通过js提交表单执行action

} else{

alert( "两次输入的密码不一样");

}

3.servlet 端（后端）的逻辑处理:

checkcodeservlet ：处理验证码的更新逻辑

package com.lhp.servlet;

import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.image.BufferedImage;

import java.io.BufferedReader;

import java.io.FileReader;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import java.util.Random;

import javax.imageio.ImageIO;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/CheckCodeServlet") // 注解checkcodeservlet

public class CheckCodeServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

// 集合中保存所有成语

private List<String> words = new ArrayList<String>();

@Override

public void init() throws ServletException {

// 初始化阶段，读取new_words.txt

// web工程中读取文件,必须使用绝对磁盘路径

String path = getServletContext().getRealPath("/WEB-INF/words.txt");

try {

BufferedReader reader = new BufferedReader(new FileReader(path));

String line;

//把读的成语全部添加到一个集合当中

while ((line = reader.readLine()) != null) {

words.add(line);

}

reader.close();

} catch (IOException e) {

e.printStackTrace();

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setHeader("Cache-Control", "no-cache");

//设置过期时间为立即过期

response.setDateHeader("Expires", 0);

int width = 120;

int height = 30;

// 步骤一绘制一张内存中图片

BufferedImage bufferedImage = new BufferedImage(width, height,

BufferedImage.TYPE_INT_RGB);

// 步骤二图片绘制背景颜色 ---通过绘图对象

Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔

// 绘制任何图形之前都必须指定一个颜色

graphics.setColor(getRandColor(200, 250));

graphics.fillRect(0, 0, width, height);

// 步骤三绘制边框

graphics.setColor(Color.WHITE);

graphics.drawRect(0, 0, width - 1, height - 1);

// 步骤四四个随机数字

Graphics2D graphics2d = (Graphics2D) graphics;

// 设置输出字体

graphics2d.setFont(new Font("宋体", Font.BOLD, 18));

Random random = new Random();// 生成随机数

int index = random.nextInt(words.size());

String word = words.get(index);// 获得成语

System.out.println(word);

// 定义x坐标

int x = 10;

for (int i = 0; i < word.length(); i++) {

// 随机颜色

graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random

.nextInt(110), 20 + random.nextInt(110)));

// 旋转 -30 --- 30度

int jiaodu = random.nextInt(60) - 30;

// 换算弧度

double theta = jiaodu * Math.PI / 180;

// 获得字母数字

char c = word.charAt(i);

// 将c 输出到图片

graphics2d.rotate(theta, x, 20);

graphics2d.drawString(String.valueOf(c), x, 20);

graphics2d.rotate(-theta, x, 20);

x += 30;

}

// 将验证码内容保存session

//request.getSession().setAttribute("checkcode_session", word);

//把生成的验证码存放到全局域对象当中

this.getServletContext().setAttribute("checkCode", word);

// 步骤五绘制干扰线

graphics.setColor(getRandColor(160, 200));

int x1;

int x2;

int y1;

int y2;

for (int i = 0; i < 30; i++) {

x1 = random.nextInt(width);

x2 = random.nextInt(12);

y1 = random.nextInt(height);

y2 = random.nextInt(12);

graphics.drawLine(x1, y1, x1 + x2, x2 + y2);

}

// 将上面图片输出到浏览器 ImageIO

graphics.dispose();// 释放资源

//将图片写到response.getOutputStream()中

ImageIO.write(bufferedImage, "jpg", response.getOutputStream());

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doGet(request, response);

}

/**

* 取其某一范围的color

* @param fc

* int 范围参数1

* @param bc

* int 范围参数2

* @return Color

private Color getRandColor(int fc, int bc) {

// 取其随机颜色

Random random = new Random();

if (fc > 255) {

fc = 255;

}

if (bc > 255) {

bc = 255;

}

int r = fc + random.nextInt(bc - fc);

int g = fc + random.nextInt(bc - fc);

int b = fc + random.nextInt(bc - fc);

return new Color(r, g, b);

}

4.RegistServlet 处理验证逻辑:

package com.lhp.servlet;

import java.io.IOException;

import java.lang.reflect.InvocationTargetException;

import java.sql.SQLException;

import java.util.Map;

import java.util.UUID;

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 org.apache.commons.beanutils.BeanUtils;

import org.apache.commons.dbutils.QueryRunner;

import com.lhp.domain.user;

import com.lhp.util.JdbcUtil;

/**

* Servlet implementation class RegistServlet

@WebServlet("/RegistServlet")

public class RegistServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// System.out.println("RegistServlet");

// System.out.println("已收到客户端请求！");

/***

* 步骤:

* 1. 判断输入的验证码是否正确

* 2. 接收所有参数

* 3. 把收到的参数封装成user对象

* 4. 设置UID

* 5. 写入到数据库

//1.判断输入的验证码是否正确:

//设置请求编码，与响应编码

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

//获取参数验证码

String code = request.getParameter("code");

System.out.print("code="+code);

//判断服务器生成的验证码，需要做一个字符串类型的强制转换

String word = (String) this.getServletContext().getAttribute("checkCode");

//判断输入的验证

if(code.equals(word)) {

// 如果验证码正确，进行后面的操作 response.getWriter().write("验证码正确!");

//1.接收所有参数

Map<String, String[]> parameterMap = request.getParameterMap();

user u = new user();

//2.把接收的参数封装成user对象

try {

BeanUtils.populate(u, parameterMap);

} catch (IllegalAccessException | InvocationTargetException e) {

e.printStackTrace();

}

System.out.println(u);

//3.生成uid

u.setUid(UUID.randomUUID().toString());

//4.写入数据库

QueryRunner qr= new QueryRunner(JdbcUtil.getDataSource());

String sql ="insert into user value(?,?,?,?)";

try {

qr.update(sql, u.getUid(),u.getUsername(),u.getPassword(),u.getPhone());

} catch (SQLException e) {

e.printStackTrace();

}

response.getWriter().write("注册成功!");

//5.跳转到登录页面

response.setHeader("refresh","3,url=/Mystore/login.html");

}else {

// 如果验证码不正确,告诉用户验证码不正确。跳转回注册页面

response.getWriter().write("验证码错误!");

response.setHeader("refresh","3,url=/Mystore/regist.html");

}

5.数据库的封装:

package com.lhp.util;

import java.io.FileInputStream;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.Properties;

import javax.sql.DataSource;

import com.alibaba.druid.pool.DruidDataSourceFactory;

public class JdbcUtil {

public static DataSource ds = null;

static {

try {

//1.加载配置文件

Properties p = new Properties();

//获取字节码目录

String path = JdbcUtil.class.getClassLoader().getResource("db.properties").getPath();

FileInputStream in = new FileInputStream(path);

p.load(in);

//ds = BasicDataSourceFactory.createDataSource(p);

ds = DruidDataSourceFactory.createDataSource(p);

}catch(Exception e) {

e.printStackTrace();

}

//获取数据源

public static DataSource getDataSource() {

return ds;

}

public static Connection getConn() {

try {

// 2.连接数据

return ds.getConnection();

} catch (Exception e) {

e.printStackTrace();

}

return null;

}

/**

* 关闭资源

public static void close(Connection conn,Statement st,ResultSet rs) {

if (rs != null) {

try {

rs.close();

} catch (SQLException e) {

e.printStackTrace();

}

if (st != null) {

try {

st.close();

} catch (SQLException e) {

e.printStackTrace();

}

if (conn != null) {

try {

conn.close();

} catch (SQLException e) {

e.printStackTrace();

}

weixin_40876986

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录