[实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册

来源:转载

写在前面

今天贴合到实际的客户需求仔细的想了下,其实在userInfo这个类里面很多字段都不是必须的。有很多的事业单位根本就不能上网,填写的邮箱也是exchange的,个人的详细信息都在ad里面可以取到,再这里重新注册一次确实没有必要。所以对注册的字段重新筛选了一下。对于目前大多数网站来说,要么就是采用第三方的登录方式,要么就是非常简单的注册方式,对我本人来说,如果非必要,我喜欢第三方的登录方式。当然,简单的注册信息,可以更方便用户,也可以在用户注册后,为用户提供积分系统等让用户完善个人资料来增加积分。所以这里就用到了三个字段:用户名,头像,密码,所属部门。

系列文章

[EF]vs15+ef6+mysql code first方式

[实战]MVC5+EF6+MySql企业网盘实战(1)

[实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册

[实战]MVC5+EF6+MySql企业网盘实战(3)——验证码

[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

[Bootstrap]modal弹出框

[实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面,头像等比例压缩

[实战]MVC5+EF6+MySql企业网盘实战(5)——页面模板

[实战]MVC5+EF6+MySql企业网盘实战(5)——jquery.validate表单验证

代码片段

首先看一下界面,明白我们验证那些字段。

页面代码

@model [email protected]{Layout = "~/Views/Shared/_LayoutRegister.cshtml";}<div class="form-group">@Html.LabelFor(model => model.Header)<div id="imgViewer" style="width: 100px; height: 100px; display:none; border: 1px solid #0094ff; "><img src="#" alt="Alternate Text" id="" width="100" height="100" /></div><input type="file" name="name" value="上传头像" accept="image/*" id="uplaodImg" class="form-control" /></div><div class="form-group">@Html.LabelFor(model => model.UserName)<input type="text" class="form-control" name="name" value="" id="txtUserName" /></div><div class="form-group">@Html.LabelFor(model => model.Pwd)<input type="text" class="form-control" name="name" value="" id="txtPwd" />@Html.ValidationMessageFor(model => model.Pwd)</div><div class="form-group"><label>确认密码</label><input type="text" class="form-control" name="name" value="" id="txtSurePwd" />@Html.ValidationMessageFor(model => model.Pwd)</div><div class="form-group">@Html.LabelFor(model => model.Department)@Html.DropDownList("departments", null, new { @class = "form-control", id = "department" })</div><div class="form-group"><label>验证码</label><input type="text" name="code" id="code" value="" class="form-control" /> <img id="imgCode" class="img-thumbnail" style="cursor:pointer;" title="切换下一张" src="/UserInfo/VerifyCodeImage" alt="验证码" /></div><div class="form-group"><input type="button" value="立即注册" id="btnRegister" class="btn btn-primary btn-lg" /></div><script src="~/Scripts/jquery-1.10.2.min.js"></script><script>var user = {};//切换验证码$("#imgCode").click(function () {var ran = Math.random();//加上随机数ran,避免验证码缓存。this.src = "/UserInfo/VerifyCodeImage?_r=" + ran;});//模式对话框var showMsg = function (msg) {$(".modal-body").html(msg);$("#myModal").modal("show");};//上传图片,使用html5 fileapi进行操作document.querySelector("#uplaodImg").onchange = function (evt) {var files = evt.target.files;for (var i = 0, f; f = files[i]; i++) {if (!f.type.match('image.*')) continue;var reader = new FileReader();reader.onload = (function (theFile) {return function (e) {$("#imgViewer").css("display", "block");user.fileName = theFile.name;$("#imgViewer img").attr("src", e.target.result);user.header = e.target.result;console.log(user);}})(f);reader.readAsDataURL(f);}};//注册事件$("#btnRegister").click(function () {user.userName = $("#txtUserName").val();user.pwd = $("#txtPwd").val();user.surePwd = $("#txtSurePwd").val();user.code = $("#code").val();user.department = $("#department option:selected").val();console.log(user);var isOk = false;if (!user.userName) {showMsg('用户名不能为空');} else if (!user.pwd) {showMsg('密码不能为空');} else if (user.pwd.length < 6 || user.pwd.length > 16) {showMsg('密码长度在6~16个字符之间');} else if (!user.surePwd) {showMsg('确认密码不能为空');} else if (user.pwd != user.surePwd) {showMsg('两次输入的密码不一致');} else if (!user.code) {alert(323423);showMsg('验证码不能为空');} else {isOk = true;};if (isOk) {$.ajax({type: "post",url: "/UserInfo/Register",data: { data: JSON.stringify(user) },dataType: "json",success: function (data) {console.log(data);data = JSON.parse(data);if (data._code == 4) {showMsg(data.msg);} else {showMsg(data.msg);$("#imgCode").click();};}});};});</script> Register.cshtml

需要验证的信息:

1.字段名称,密码不能为空

2、名称不能重复注册。

3、密码长度不能低于6位。

4、密码与确认密码要相等。

使用添加mvc项目,默认添加的js文件jquery.validate(关于这个插件的使用,可以参考这篇文章)来验证表单信息。这里字段不多,还是自己来写比较快,不用再去研究这个插件如何使用了。

上传头像的代码,采用HTMl5的FileApi,将图片读为base64的字符串,然后在服务端进行转换。

using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using System.Web;using System.Web.Mvc;using Wolfy.NetDisk.Model;using Wolfy.NetDisk.IBLL;using Wolfy.NetDisk.BLL;using Wolfy.NetDisk.Utilities;using System.IO;using System.Drawing;using Newtonsoft.Json.Linq;using System.Runtime.Serialization.Formatters.Binary;namespace Wolfy.NetDisk.Site.Controllers{public class UserInfoController : AsyncController{private IUserInfoServiceRepository _userInfoServiceRepository = new UserInfoServiceRepository();private IDepartmentServiceRepository _departmentServiceRepository = new DepartmentServiceRepository();/// <summary>/// 用户信息列表/// </summary>/// <returns></returns>public ActionResult Users(){var users = _userInfoServiceRepository.FindAll(x => x.UserName != "");return View(users);}[HttpGet]public ActionResult Register(){ViewBag.ChildTitle = "用户注册";IQueryable<Department> departments = _departmentServiceRepository.FindAll(x => x.Pid != 0);List<SelectListItem> lstItemt = new List<SelectListItem>();foreach (var item in departments){lstItemt.Add(new SelectListItem() { Text = item.Name, Value = item.Id.ToString() });}ViewData["departments"] = lstItemt;return View();}[HttpPost]public JsonResult Register(string user){var data = Request.Form["data"];JObject jobj = JObject.Parse(data);UserInfo userInfo = new UserInfo(){CreateDt = DateTime.Now,Gender = GenderType.保密,Header = jobj["header"] != null ? jobj["header"].ToString() : "",LoginDt = DateTime.Now,LoginOutDt = DateTime.Now,Pwd = jobj["pwd"] != null ? jobj["pwd"].ToString() : string.Empty,UserName = jobj["userName"] != null ? jobj["userName"].ToString() : string.Empty};string fileName = jobj["fileName"] != null ? jobj["fileName"].ToString() : "";string code = jobj["code"] != null ? jobj["code"].ToString() : "";int intDepartId = Convert.ToInt32(jobj["department"]);userInfo.Department = _departmentServiceRepository.Find(x => x.Id == intDepartId);int saveCount = 0;string strFileSavePath = string.Empty;System.Web.Script.Serialization.JavaScriptSerializer Jss = new System.Web.Script.Serialization.JavaScriptSerializer();if (string.IsNullOrEmpty(code)){var response = new{_code = 1,msg = "验证码不能为空"};return new JsonResult() { Data = Jss.Serialize(response) };}if (code.ToLower() != Session["code"].ToString().ToLower()){var response = new{_code = 2,msg = "验证码不正确,请重新输入"};return new JsonResult() { Data = Jss.Serialize(response) };}if (_userInfoServiceRepository.Exist(userInfo.UserName)){var response = new{_code = 3,msg = "该用户名已经存在,请重新输入"};return new JsonResult() { Data = Jss.Serialize(response) };}if (!string.IsNullOrEmpty(fileName) && !string.IsNullOrEmpty(userInfo.Header)){//说明上传头像strFileSavePath = Request.MapPath("~/Content/Images");string strFileExtention = Path.GetExtension(fileName);if (!Directory.Exists(strFileSavePath)){Directory.CreateDirectory(strFileSavePath);}strFileSavePath += "/" + userInfo.UserName + strFileExtention;string relativePath = "/Content/Headers/" + userInfo.UserName + strFileExtention;//将base64字符串转化为图片byte[] buffer = Convert.FromBase64String(userInfo.Header.Split(',')[1]);MemoryStream memStream = new MemoryStream(buffer);SaveImageByWidthHeight(50, 50, memStream, strFileSavePath);memStream.Dispose();userInfo.Header = relativePath;}//对密码进行处理userInfo.Pwd = MD5Helper.GetMD5FromString(userInfo.Pwd);_userInfoServiceRepository.Add(userInfo);saveCount = _userInfoServiceRepository.SaveChanges();if (saveCount > 0){var response = new{_code = 4,msg = "添加成功",img = userInfo.Header};return new JsonResult() { Data = Jss.Serialize(response) };}else{//添加失败,将头像删除if (System.IO.File.Exists(strFileSavePath)){System.IO.File.Delete(strFileSavePath);}var response = new{_code = 5,msg = "添加失败"};return new JsonResult() { Data = Jss.Serialize(response) };}}/// <summary>/// 等比例压缩图片/// </summary>private void SaveImageByWidthHeight(int intImgCompressWidth, int intImgCompressHeight, Stream stream, string strFileSavePath){//从输入流中获取上传的image对象using (Image img = Image.FromStream(stream)){//根据压缩比例求出图片的宽度int intWidth = intImgCompressWidth / intImgCompressHeight * img.Height;int intHeight = img.Width * intImgCompressHeight / intImgCompressWidth;//画布using (System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(img, new Size(intImgCompressWidth, intImgCompressHeight))){//在画布上创建画笔对象using (System.Drawing.Graphics graphics = System.Drawing.Graphics.FromImage(bitmap)){//将图片使用压缩后的宽高,从0,0位置画在画布上graphics.DrawImage(img, 0, 0, intImgCompressWidth, intImgCompressHeight);//保存图片bitmap.Save(strFileSavePath);}}}}[HttpGet]public ActionResult VerifyCodeImage(){string strCode = string.Empty;byte[] buffer = VerifyCode.Create(6, out strCode);Session["code"] = strCode;return File(buffer, @"image/jpeg");}//// GET: /Home/[HttpGet]public ActionResult Login(){UserInfo userInfo = null;if (Request.Cookies["n"] != null && Request.Cookies["p"] != null){string userName = Request.Cookies["n"].Value;string pwd = Request.Cookies["p"].Value;userInfo = _userInfoServiceRepository.Find(x => x.UserName == userName && x.Pwd == pwd);}return RedirectToAction("FileList", "Home");}/// <summary>/// 登录/// </summary>/// <param name="userName"></param>/// <param name="code"></param>/// <returns></returns>[HttpPost]public JsonResult Login(string userName, string pwd, string remember){if (!string.IsNullOrEmpty(pwd)){pwd = MD5Helper.GetMD5FromString(pwd);}UserInfo userInfo = _userInfoServiceRepository.Find(x => x.UserName == userName && x.Pwd == pwd);if (!string.IsNullOrEmpty(remember) && remember.Equals("checked")){HttpCookie nameCookie = new HttpCookie("n", userName);nameCookie.Expires = DateTime.Now.AddDays(7);//将md5串写入cookie,或者再次进行AES加密写入HttpCookie pwdCookie = new HttpCookie("p", pwd);pwdCookie.Expires = DateTime.Now.AddDays(7);Response.Cookies.Add(nameCookie);Response.Cookies.Add(pwdCookie);}if (userInfo != null){return new JsonResult() { Data = "200" };}else{return new JsonResult() { Data = "401" };}}}} UserInfoController

上传头像,并注册用户

这里得说明一下,为什么不用其他的jquery上传插件,考虑到以后可能会在移动端浏览,而jquery的大多数上传插件基于flash的异步上传。而移动端的浏览器对flash的兼容性不好。另外是因为之前没用过html5的fileAPI,所以算是在项目中实践一下。

总结

一个项目都是一个个的小功能堆起来的。现在算是有个完美的注册界面了。


分享给朋友:
您可能感兴趣的文章:
随机阅读: