AspNetCore-MVC實戰系列（四）之結尾

AspNetCore - MVC實戰系列目錄

. 愛留圖網站誕生

. git源碼：https://github.com/shenniubuxing3/LovePicture.Web

. AspNetCore - MVC實戰系列（一）之Sqlserver表映射實體模型

. AspNetCore-MVC實戰系列（二）之通過綁定郵箱找回密碼

. AspNetCore-MVC實戰系列（三）之個人中心

. AspNetCore-MVC實戰系列（四）之結尾

 

開篇嘮嗑

今天嘮嘮家常吧，最近一段時間媳婦鬧着上班，由於這里算郊區吧所以希望我能在公司找個合適的職位，考慮到需要上下班接送孩子上學，所以工作的時間只能在早9晚5左右，不然人的精力有限會很疲倦的，因此通過各種渠道，最總她被安排到了xxx產品部門，從基本的開始學習，簡單介紹下她以前的工作主要是服裝店銷售衣服的，可以這樣說使用電腦的時間或者辦公軟件的時間很少，在家用電腦也就是看看電影，聽歌等，平常沒有涉及到各種辦公軟件，在這層前提下，這幾天在公司學習什么業務，后台系統，辦公通訊工具的使用竟然有打退堂鼓的意思，各種說自己不適合；想想以前在家里教她什么微信，支付寶轉賬等軟件的使用，很明顯就能感覺出來毛躁，愛面子。。。等；這有點像那種剛畢業又找到從來沒了解過的專業工作並且時常抱怨的朋友一樣，說什么這不適合，哪不適合，帶的人怎么的不好，怎么的看不順眼；這種類型的朋友和我媳婦兒一樣一般會選擇辭職吧，這里個人以工作6年的經驗說下個人見解：在職場上遇到困難就放棄並且干什么都是怕苦怕累，現在年輕還好有家里支柱，當您成為家里主要經濟來源的時候，您還有退路么，您還干輕易放棄么；故此昨天晚上狠狠的說了媳婦一頓，哈哈真是漲了地位；

vs2017怎么壓縮js和css文件

同樣為了文章的干貨性質，這里分享下自己再開發Netcore的Mvc時候利用vs2017怎么壓縮js和css文件的方法，由於也netframwork的mvc不一樣（她是寫在代碼中的）所以需要手動配置並輸入命令，壓縮主要分兩步；首先需要在web項目工程文件中添加如下配置信息：

1 項目中添加
2 <ItemGroup>
3     <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0-msbuild3-final" />
4     <DotNetCliToolReference Include="BundlerMinifier.Core" Version="2.2.281" />
5   </ItemGroup>

然后查看下bundleconfig.json文件中的配置，一般默認的內容有：

 1 [
 2  { 3 "outputFileName": "wwwroot/css/site.min.css", 4 // An array of relative input file paths. Globbing patterns supported 5 "inputFiles": [ 6 "wwwroot/css/site.css" 7  ] 8  }, 9  { 10 "outputFileName": "wwwroot/js/site.min.js", 11 "inputFiles": [ 12 "wwwroot/js/site.js" 13  ], 14 // Optionally specify minification options 15 "minify": { 16 "enabled": true, 17 "renameLocals": true 18  }, 19 // Optionally generate .map file 20 "sourceMap": false 21  } 22 ]

我就以默認配置的js文件和css文件為例，運行命令： dotnet bundle 能夠看到如下效果：

此時打開您項目的wwwroot文件里面的css或者js文件，能夠看到壓縮成一行的代碼：

賬戶設置 - 修改頭像

對於幾乎每個系統來說，賬戶設置普遍包括有修改個人信息，頭像，密碼這3部分的操作，本篇的主要分享內容也是圍繞這3部分來講解和分享代碼；首先來看看愛留圖開源代碼的修改頭像模塊吧，對於修改頭像功能往往都是單獨的，所以我們可以通過如下界面跳轉到僅僅只有上傳頭像的界面：

修改頭像主要功能是上傳頭像，如果上傳的圖片過大就限制上傳或者系統生成一個小頭像的圖片，這樣避免用戶查看頭像時候由於圖片過大，加載速度變慢了；來看看主要處理上傳的Action方法吧：

[HttpPost]
        public async Task<IActionResult> UpHeadPhoto([Bind("Id")]MoUserInfo moUserInfo)
        {

            var file = Request.Form.Files.Where(b =>
                        b.Name == "myHeadPhoto" &&
                        b.ContentType.Contains("image")).
                        SingleOrDefault();
            if (file == null) { this.MsgBox("請選擇上傳的頭像圖片！"); return View(_MyUserInfo); }

            var maxSize = 1024 * 1024 * 4;
            if (file.Length > maxSize)
            {
                this.MsgBox("頭像圖片不能大於4M！"); return View(_MyUserInfo);
            }

            var fileExtend = file.FileName.Substring(file.FileName.LastIndexOf('.'));
            var fileNewName = $"{DateTime.Now.ToString("yyyyMMddHHmmssfff")}{fileExtend}";
            var path = Path.Combine(_selfSetting.UpHeadPhotoPath, fileNewName);
            using (var stream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.ReadWrite))
            {
                await file.CopyToAsync(stream);
            }

            //更新數據
            var viewPath = $"{_selfSetting.ViewHeadPhotoPath}/{fileNewName}";

            var user = _db.ToUserInfo.Where(b => b.Id == _MyUserInfo.Id).SingleOrDefault();
            if (user == null) { this.MsgBox("上傳失敗，請稍后重試！"); return View(_MyUserInfo); }
            user.HeadPhoto = viewPath;
            user.LevelNum += (int)EmLevelNum.修改頭像;
            var result = await _db.SaveChangesAsync();
            if (result > 0)
            {
                _MyUserInfo.HeadPhoto = viewPath;
                _MyUserInfo.LevelNum = user.LevelNum;
                HttpContext.Session.Set<MoUserInfo>(HttpContext.Session.SessionKey(), _MyUserInfo);
                this.MsgBox("上傳成功！");

                _db.ToUserLog.Add(new ToUserLog
                {
                    CodeId = (int)EmLogCode.積分,
                    CreateTime = DateTime.Now,
                    Des = $"【修改頭像】  +{(int)EmLevelNum.修改頭像}",
                    UserId = _MyUserInfo.Id
                });
                await _db.SaveChangesAsync();

            }
            else { this.MsgBox("上傳失敗，請稍后重試！"); }
            return View(_MyUserInfo);
        }

在寫博文的時候才發現，這代碼原來有部分多余的寫法，仔細的朋友應該看出來了 [Bind("Id")]MoUserInfo moUserInfo 我在action中根本沒有用到呢，不知道當初寫的時候是怎么想的哈哈，因為這里我直接通過 Request.Form.Files 來獲取上傳的頭像圖片文件信息，注意了由於Files是獲取多個文件信息，但是我們上傳頭像的時候只會有一張圖片存在才是合理的，所以我通過上傳的元素file對應的name='myHeadPhoto'來讓files匹配出對應的文件信息，所以有了這樣的篩選操作:

Request.Form.Files.Where(b =>b.Name == "myHeadPhoto" && b.ContentType.Contains("image")).SingleOrDefault()

對於存放圖片文件的路徑我是通過讀取配置在appsettings.json文件中的節點配置的，正如我AspNetCore - MVC實戰系列（一）之Sqlserver表映射實體模型寫到的怎么通過Options獲取appsettings.json文件配置信息是一樣的操作，如果你可以直接取那里看吧；然后通過 await file.CopyToAsync(stream); 來拷貝復制文件流到生成的圖片文件里面，以此完成上傳功能；至於其他的添加積分，上傳記錄日志等這些都是業務需要的操作，這里不在詳解；

賬戶設置 - 修改基本信息

基本信息的修改沒有什么特別的地方，提一下注意點對於一個登陸用戶來說，修改了基本信息，如果你session存儲有這些信息也同樣在更新數據表數據的時候也需要更新session存儲的信息，這樣才能保證修改后，用戶看到的是修改的內容；

[HttpPost]
        public async Task<IActionResult> ModifyUser(MoUserInfo moUserInfo)
        {
            if (moUserInfo.Id <= 0)
            {
                this.MsgBox("修改失敗，請稍后重試。");
                return View(_MyUserInfo);
            }
            else if (string.IsNullOrWhiteSpace(moUserInfo.NickName))
            {
                this.MsgBox("昵稱不能為空！");
                return View(_MyUserInfo);
            }

            _MyUserInfo.NickName = moUserInfo.NickName;
            _MyUserInfo.Tel = moUserInfo.Tel;
            _MyUserInfo.Sex = moUserInfo.Sex;
            _MyUserInfo.Birthday = moUserInfo.Birthday;

            _MyUserInfo.Blog = moUserInfo.Blog;
            _MyUserInfo.Introduce = moUserInfo.Introduce;

            var user = _db.ToUserInfo.Where(b => b.Id == _MyUserInfo.Id).SingleOrDefault();
            if (user == null) { this.MsgBox("修改失敗，請稍后重試"); return View(_MyUserInfo); }

            user.NickName = _MyUserInfo.NickName;
            user.Tel = _MyUserInfo.Tel;
            user.Sex = _MyUserInfo.Sex;
            user.Birthday = _MyUserInfo.Birthday;

            user.Blog = _MyUserInfo.Blog;
            user.Introduce = _MyUserInfo.Introduce;

            var result = await _db.SaveChangesAsync();
            if (result > 0)
            {
                HttpContext.Session.Set<MoUserInfo>(HttpContext.Session.SessionKey(), _MyUserInfo);
                this.MsgBox("修改成功！");
            }
            else { this.MsgBox("修改失敗，請稍后重試！"); }

            return View(_MyUserInfo);
        }

為了避免分享的內容枯燥性，這里分享一些通用方法，如用戶綁定了手機號或郵箱，處於安全考慮這些是不能直接在web網頁展示出來的需要類似於：8312***333.com的*號來屏蔽，這里提供個擴展方法：

/// <summary>
        /// 格式化安全信息
        /// </summary>
        /// <param name="val"></param>
        /// <param name="startLen"></param>
        /// <param name="endLen"></param>
        /// <returns></returns>
        public static string FomartPhone(this string val, int startLen = 3, int endLen = 3)
        {
            if (string.IsNullOrWhiteSpace(val)) { return ""; }

            var len = val.Trim().Length;
            var start = string.Empty;
            var end = string.Empty;
            if (len > startLen) { start = val.Substring(0, startLen); } else { start = val; }
            if (len - endLen > startLen) { end = val.Substring(len - endLen, endLen); }
            return string.Format("{0}***{1}", start, end);
        }

很簡單的吧，不過這種也是很常用並且是需要的一個方法，用起來僅僅只需要這樣： Model.Email.FomartPhone(startLen:4,endLen:4) ；再來個計算注冊時間距離現在多少天多少月多少年的方法：

/// <summary>
        /// 獲取據當前時間的時間間隔：如1年1月1日
        /// </summary>
        /// <param name="date"></param>
        /// <param name="yearNum"></param>
        /// <param name="monthNum"></param>
        /// <returns></returns>
        public static string FormatDateToNow(this DateTime date, int yearNum = 365, int monthNum = 31)
        {
            var subTime = DateTime.Now.Subtract(date);

            var dayNum = subTime.Days;

            var year = dayNum / yearNum;
            var month = dayNum % yearNum / monthNum;
            var day = dayNum % yearNum % monthNum;

            var str = year > 0 ? $"{year}年" : "";
            str += month > 0 ? $"{month}月" : "";
            str += day > 0 ? $"{day}天" : "1天";

            return str;
        }

由於也是擴展的DateTime的方法，所以可以直接這樣用 @Model.CreateTime.FormatDateToNow() ，然后看起來的效果是這樣：

賬戶設置 - 修改密碼

修改密碼這東西往往需要很多驗證，主要為了防盜；應對這些防盜的方法有綁定郵箱，綁定手機號碼，在AspNetCore-MVC實戰系列（二）之通過綁定郵箱找回密碼已經講解了如果通過綁定郵箱找回密碼的流程，有需要的朋友可以參考下，主要通過發送重置密碼鏈接，修改密碼；由於偷懶賬戶設置的修改密碼，我就沒有做這么多的流程驗證了，僅僅只需要填寫密碼和重復密碼即可：

 public IActionResult ModifyPwd()
        {
            return View(new MoRegisterUser { UserName = _MyUserInfo.UserName });
        }

        [HttpPost]
        public async Task<IActionResult> ModifyPwd([Bind("UserName,UserPwd,ComfirmPwd")]MoRegisterUser moRegisterUser)
        {
            if (ModelState.IsValid)
            {
                var user = _db.ToUserInfo.Where(b => b.Id == _MyUserInfo.Id).SingleOrDefault();
                if (user == null) { this.MsgBox("修改失敗，請稍后重試"); return View(moRegisterUser); }
                user.UserPwd = PublicClass._Md5(moRegisterUser.UserPwd.Trim());
                var result = await _db.SaveChangesAsync();
                if (result > 0)
                {18                     this.MsgBox("修改成功！");
                }
                else { this.MsgBox("修改失敗，請稍后重試！"); }
            }
            return View(moRegisterUser);
        }

結尾告白

到這里AspNetCore-MVC實戰系列基本就講解的差不多了，內容主要以業務場景居多，基本都是很常見的功能，代碼也已經開源分享了，剛接觸netcore並且有興趣的朋友可以參考；老實說對於這種感覺沒有什么特別之處的功能講解很費勁的，不過在本次開發過程中遇到的一些問題還是值得了解下的，這些都分享在每張講解的內容里面了，需要注意看下才能發現總結的經驗；最近在做公司系統，該系統會大量的發送郵件，因此簡單構思了個郵件系統，如果可以將再下一篇和大家分享；謝謝大家的支持。