项目前端页面实例

 

 

第1步：登录阿里大于控制台

第2步：创建应用

 

第3步：配置短信签名

第4步：配置短信模板

第5步：前端

 

           手机号                                              验证码                  

 

第6步：js处理

$(function () {    $("#sms").click(function () {        sendCode($("#sms"));    });    v = getCookieValue("secondsremained");//获取cookie值    if (v > 0) {        settime($("#sms"));//开始倒计时    }}) //发送验证码function sendCode(obj) {    var phoneNumber = $("#Phone").val();    var result = isPhoneNum(phoneNumber);    if (result) {        //将手机利用ajax提交到后台的发短信接口        $.post("/College/Code", { Phone: phoneNumber }, function (data) {            if (data == "ok") {                alert("验证码发送成功!");            } else {                alert("验证码发送失败,请重新发送!");            }        });        addCookie("secondsremained", 60, 60);//添加cookie记录,有效时间60s        settime(obj);   //开始倒计时    }}//开始倒计时var countdown;function settime(obj) {    countdown = getCookieValue("secondsremained");    if (countdown == 0) {        obj.removeAttr("disabled");        obj.val("获取验证码");        return;    } else {        obj.attr("disabled", true);        obj.val("重新发送(" + countdown + ")");        countdown--;        editCookie("secondsremained", countdown, countdown + 1);    }    setTimeout(function () { settime(obj) }, 1000) //每1000毫秒执行一次}//校验手机号是否合法function isPhoneNum(phoneNumber) {    var myreg = /^(((13[0-9]{
   1})|(15[0-9]{
   1})|(18[0-9]{
   1}))+\d{
   8})$/;    if (!myreg.test(phoneNumber)) {        alert('请输入有效的手机号码！');        return false;    } else {        return true;    }}//发送验证码时添加cookiefunction addCookie(name, value, expiresHours) {    var cookieString = name + "=" + escape(value);    //判断是否设置过期时间,0代表关闭浏览器时失效    if (expiresHours > 0) {        var date = new Date();        date.setTime(date.getTime() + expiresHours * 1000);        cookieString = cookieString + ";expires=" + date.toUTCString();    }    document.cookie = cookieString;}//修改cookie的值function editCookie(name, value, expiresHours) {    var cookieString = name + "=" + escape(value);    if (expiresHours > 0) {        var date = new Date();        date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒        cookieString = cookieString + ";expires=" + date.toGMTString();    }    document.cookie = cookieString;}//根据名字获取cookie的值function getCookieValue(name) {    var strCookie = document.cookie;    var arrCookie = strCookie.split("; ");    for (var i = 0; i < arrCookie.length; i++) {        var arr = arrCookie[i].split("=");        if (arr[0] == name) {            return unescape(arr[1]);            break;        } else {            return "";            break;        }    }}

第7步：后台控制器处理

 

#region 商学院报名发送验证码        public ActionResult ValidateCode()        {            string Code = GetRandomString(6);            string url = "https://eco.taobao.com/router/rest";            string appkey = "****";  //此处填写你自己的            string secret = "****";   //此处填写你自己的            ITopClient client = new DefaultTopClient(url, appkey, secret);            AlibabaAliqinFcSmsNumSendRequest req = new AlibabaAliqinFcSmsNumSendRequest();            req.Extend = "";              //可空，返回状态            req.SmsType = "normal";             //不可更改            req.SmsFreeSignName = "个人小站";       //申请的短信签名，不可填写与申请的不一            req.SmsParam = "{VCode:'" + Code + "'}";  //模板内参数必填            req.RecNum = Request["Phone"];         //接收者手机号码            req.SmsTemplateCode = "SMS_74235011";    //短信模板的编号，不可出错            AlibabaAliqinFcSmsNumSendResponse rsp = client.Execute(req);             if (rsp.IsError == false)            {                Console.WriteLine(rsp.Body);                //return Content(rsp.Body);            }            //将验证码设置缓存            var CodeInfo = (Object)Code;            CacheOpt.SetCache("Code", CodeInfo, Convert.ToInt32(60));            return Content("ok");        }         #region 生成6位验证码        public string GetRandomString(int iLength)        {            string buffer = "0123456789";    // 随机字符中也可以为汉字（任何）            StringBuilder sb = new StringBuilder();            Random r = new Random();            int range = buffer.Length;            for (int i = 0; i < iLength; i++)            {                sb.Append(buffer.Substring(r.Next(range), 1));            }            return sb.ToString();        }        #endregion

 

第8步:缓存处理

public class CacheOpt    {        /// 
        /// 设置缓存        /// 
        ///         ///         /// 超过多少秒后过期        public static void SetCache(string CacheKey, object objObject, long Seconds)        {            System.Web.Caching.Cache objCache = HttpRuntime.Cache;            objCache.Insert(CacheKey, objObject, null, System.DateTime.Now.AddSeconds(Seconds), TimeSpan.Zero);        }        /// 
        /// 获取数据缓存        /// 
        /// 键        public static object GetCache(string CacheKey)        {            System.Web.Caching.Cache objCache = HttpRuntime.Cache;            return objCache[CacheKey];        }    }

 

注：完整版项目地址：http://www.gmkcn.com/