10.24仿京东网页开发日程

最新推荐文章于 2025-08-06 14:36:16 发布

原创最新推荐文章于 2025-08-06 14:36:16 发布 · 721 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#random #javascript #string #xhtml #数据库 #server

本文介绍了一个仿京东商城项目中的验证码实现过程，包括生成验证码的前后端代码及单击刷新功能。提供了完整的C#代码示例，适用于ASP.NET Web窗体应用程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天通过小组的努力，首先完成了整个仿京东商城项目的首页与用户注册，登录的页面，并且实现了注册时输入验证码，来验证注册的功能以及单击验证码图片刷新图片的功能。大部分都属于前台工作。

今天在验证码上花费了太多时间，虽然最后还是从资料中掌握到的验证码的流程，但是还是得到了较大的收获，下面是在资料中查到的在页面中添加验证码的代码，和大家共享下

首先创建一个Web窗体应用程序，以CheckCode.aspx命名

在CheckCode.aspx中不用写入任何代码，

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckCode.aspx.cs" Inherits="CheckCode" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

下面进入CheckCode.aspx.cs，并加入以下代码

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Drawing;
//这是一个生成验证码的网页
public partial class CheckCode : System.Web.UI.Page
{
    private string GenerateCheckCode()
    {
        int num;
        char code;
        string checkCode = string.Empty;
        Random random = new Random();
        for (int i = 0; i < 6; i++)//循环次数决定验证码的位数
        {
            num = random.Next();
            if (num % 2 == 0)
            {
                code = (char)('0' + (char)(num % 10));
            }
            else
            {
                code = (char)('A' + (char)(num % 26));
            }

            checkCode += code.ToString();
        }
        Response.Cookies.Add(new HttpCookie("CheckCode", checkCode));
        return checkCode;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        CreateCheckCodeImg(GenerateCheckCode());
    }

    private void CreateCheckCodeImg(string checkCode)
    {
        if (checkCode == null || checkCode.Trim() == String.Empty)
            return;
        Bitmap img = new Bitmap((int)Math.Ceiling((checkCode.Length * 12.5)), 22);

        Graphics g = Graphics.FromImage(img);
        try
        {
            Random random = new Random();
            g.Clear(Color.White);

            //画图片的背景线
            for (int i = 0; i < 2; i++)
            {
                int x1 = random.Next(img.Width);
                int x2 = random.Next(img.Width);
                int y1 = random.Next(img.Width);
                int y2 = random.Next(img.Width);
                g.DrawLine(new Pen(Color.Black), x1, y1, x2, y2);
            }

            //画出指定的字符
            Font font = new Font("Arial", 12, (FontStyle.Bold));
            System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, img.Width, img.Height), Color.Blue, Color.Red, 1.2f, true);
            g.DrawString(checkCode, font, brush, 2, 2);

            //画图片的前景噪点
            for (int i = 0; i < 100; i++)
            {
                int x = random.Next(img.Width);
                int y = random.Next(img.Height);
                img.SetPixel(x, y, Color.FromArgb(random.Next()));
            }
            g.DrawRectangle(new Pen(Color.Silver),0,0,img.Width-1,img.Height-1);
            System.IO.MemoryStream ms=new System.IO.MemoryStream();
            img.Save(ms,System.Drawing.Imaging.ImageFormat.Gif);
            Response.ClearContent();
            Response.ContentType="image/Gif";
            Response.BinaryWrite(ms.ToArray());

        }
        finally
        {
            g.Dispose();
            img.Dispose();
        }
    }

}

在这些代码中，主要分为三大部分，添加字符；添加背景线；添加前景的噪点

如果要只显示数字的验证码，可以在GenerateCheckCode()中的代码改成

string checkCode;
        Random rd = new Random(DateTime.Now.Millisecond);
        checkCode = rd.Next(1000,9999).ToString();
        Session["checkCode"] = checkCode;
        Response.Cookies.Add(new HttpCookie("checkCode", checkCode));
        return checkCode;

这个文件添加完成以后就可以在需要验证的页面的位置中写进下面的代码来完成添加验证码并且单击刷新的操作

<img   id="vcodeimg"; alt="换张图片"; onclick="this.src='Checkcode.aspx?time='+Math.random()"; src="Checkcode.aspx"; title="换张图片"/>

     <script language="javascript" type="text/javascript">
                        document.getElementById('vcodeimg').src = 'Checkcode.aspx?time=' + Math.random();
                    </script>
这部分用到了JavaScript，不过还有别的方法来实现这个功能。

验证部分的代码就很简单了使用if语句来判定一下就OK了。

明天开始部分后台功能的构建，并且完成数据库的制作，以及部分对数据库的连接操作功能。