實現一個（註冊登錄+驗證碼）判斷功能點（純代碼）

1.前端頁面佈局:

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<div>

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

placeholder="請輸入用戶名..." name="username">

</div>

<div>

</div>

<div>

<label>確認密碼</label> <input id="pwd2" type="text"

placeholder="請再次輸入密碼...">

</div>

<div>

<label>電話</label> <input type="text" placeholder="請輸入電話..."

name="phone">

</div>

<label>驗證碼</label> <input type="text" placeholder="請輸入驗證碼..."

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

onclick="change(this)"> //調用JS函數處理驗證碼更新,把參數傳遞給checkcodeservlet

</div>

</div> //調用JS函數處理網頁端的邏輯驗證

</form>

</div>

</div>

<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>

</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();

}

實現一個（註冊登錄+驗證碼）判斷功能點（純代碼）

node後端開發（十二）------ Express 框架(1)

包裝類總結

linux5-----日常運維(2)

Javascript 語言系列------基本語法(1)

static關鍵字的四種用法和void的用法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結