ASP.NET Core Web API + Angular 仿B站（二）後臺模型建立以及資料庫的初始化

前言：

本系列文章主要為對所學 Angular 框架的一次微小的實踐，對 b站頁面作簡單的模仿。

本系列文章主要參考資料：

微軟文件：　　　　https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs=windows

Angular 文件：　　 https://angular.cn/tutorial

Typescript 文件：　https://www.typescriptlang.org/docs/home.html

 

此係列皆使用 C#+Typescript+Angular+EF Core 作為開發環境，使用 VSCode 對 Angular 進行開發同時作為命令列啟動器，使用 VS2017 對 ASP.NET Core 進行開發。如果有什麼問題或者意見歡迎在留言區進行留言。 

如果圖片看不清的話請在新視窗開啟圖片或儲存本地檢視。

專案 github 地址：https://github.com/NanaseRuri/FakeBilibili

 

 本章內容：後臺模型建立以及資料庫的初始化，ASP.NET Core,獲取縮圖,獲取視訊某一幀圖片,ffmpeg,Image,SHA256,加密,鹽,EntityFramework 唯一性約束

 

 一、模型分析

 

 

  

二、建立模型以及資料庫

使用者登入資訊：

通過新增修飾 [DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.None)] 可以手動設定 Id 屬性插入資料庫：

增加一個 salt 用來接受隨機字串以進行加密。

    public class UserIdentity
    {
        [Key]
        [DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.None)]
        public int Id { get; set; }

        [Required]
        public string UserName { get; set; }

        [Required]
        [EmailAddress]
        public string Email { get; set; }

        [Required]        
        public string Password { get; set; }

        [Required]
        public string Salt { get; set; }
    }

 

使用者登入資訊資料庫，通過建立索引的方式為使用者名稱和郵箱新增唯一約束：

    public class UserIdentityDbContext : DbContext
    {
        public UserIdentityDbContext(DbContextOptions<UserIdentityDbContext> options):base(options)
        { }

        public DbSet<UserIdentity> Users { get; set; }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<UserIdentity>().HasIndex(u => new { u.Email }).IsUnique(true);
            modelBuilder.Entity<UserIdentity>().HasIndex(u => new { u.UserName }).IsUnique(true);
        }
    }

 

在 appsetting.json 中新增資料庫連線字串：

  "ConnectionStrings": {
    "UserIdentityDbContext": "Server=(localdb)\\mssqllocaldb;Database=UserIdentityDbContext;Trusted_Connection=True;MultipleActiveResultSets=true",
    "UserAndVideoDbContext": "Server=(localdb)\\mssqllocaldb;Database=UserAndVideoDbContext;Trusted_Connection=True;MultipleActiveResultSets=true"
  },

 

VS2017 PM控制檯中新增遷移：

    add-migration UserIdentityDb -c FakeBilibili.Data.UserIdentityDbContext

 

新增資料庫：

    update-database -c FakeBilibili.Data.UserIdentityDbContext

 

檢視資料庫中 User 表的定義，已新增唯一約束：

 

 

 使用者資訊類：

    public class User
    {
        [Key]
        [DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.None)]
        public int Id { get; set; }

        [EmailAddress]
        [Required]
        public string Email { get; set; }

        [Required]
        public string UserName { get; set; }

        public string AvatarLocation { get; set; }

        /// <summary>
        /// 作品
        /// </summary>
        public ICollection<Video> Works { get; set; }

        /// <summary>
        /// 關注，內部用 / 分隔
        /// </summary>
        public string Follows { get; set; }

        /// <summary>
        /// 粉絲
        /// </summary>
        public string Fans { get; set; }
    }

 

首先新建列舉用於確定視訊分類：

    public enum Category
    {
        動畫,
        番劇,
        音樂,
        數碼,
        遊戲,
        科技
    }

 

視訊資訊類：

    public class Video
    {
        [Key]
        public int Id { get; set; }

        [Required]
        public string Title { get; set; }

        [Required]
        public User Author { get; set; }

        [Required]
        public string VideoLocation { get; set; }     
        
        [Required]
        public string ThumbnailLocation { get; set; }       

        [Required]
        public TimeSpan Duration { get; set; }

        [Required]
        public DateTime PublishDateTime { get; set; }

        /// <summary>
        /// 類別
        /// </summary>
        [Required]
        public Category Category { get; set; }

        /// <summary>
        /// 標籤
        /// </summary>
        public string Tag { get; set; }

        /// <summary>
        /// 觀看數
        /// </summary>
        [Required]
        public int VideoView { get; set; }
    }

 

建立使用者資訊和視訊的資料庫，並通過建立索引的方式為使用者名稱和郵箱新增唯一約束：

    public class UserAndVideoDbContext:DbContext
    {
        public UserAndVideoDbContext(DbContextOptions<UserAndVideoDbContext> options):base(options) { }

        public DbSet<User> Users { get; set; }
        public DbSet<Video> Videos { get; set; }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<User>().HasIndex(u => new { u.Email}).IsUnique(true);
            modelBuilder.Entity<User>().HasIndex(u => new { u.UserName }).IsUnique(true);
        }
    }

 

 執行遷移和更新命令：

    add-migration UserAndVideoDb -c FakeBilibili.Data.UserAndVideoDbContext
    update-database -c FakeBilibili.Data.UserAndVideoDbContext

 

 

 

三、資料庫初始化

為了方便新增鹽值，新增一個 SaltGenerator 類：

預設生成一個 8 位的隨機字串：

    public class SaltGenerator
    {
        public static string GenerateSalt()
        {
            return GenerateSalt(8);
        }

        public static string GenerateSalt(int length)
        {
            if (length<=0)
            {
                return String.Empty;
            }

            StringBuilder salt = new StringBuilder();
            Random random=new Random();            
            StringBuilder saltCharList=new StringBuilder();
            //將小寫字母加入到列表中
            for (int i = 97; i <= 122; i++)
            {
                saltCharList.Append((char) i);
            }
            //將大寫字母加入到列表中
            for (int i = 65; i <=90; i++)
            {
                saltCharList.Append((char) i);
            }
            saltCharList.Append(0123456789);

            for (int saltIndex = 0; saltIndex < length; saltIndex++)
            {
                salt.Append(saltCharList[random.Next(61)]);
            }

            return salt.ToString();
        }
    }

 

為了方便對密碼進行加密，在此建立一個 Encryptor 類：

    public class Encryptor : IEncrypt
    {
        private readonly SHA256 sha256;

        public Encryptor()
        {
            sha256 = SHA256.Create();
        }

        public string Encrypt(string password, string salt)
        {
            byte[] hashBytes = sha256.ComputeHash(Encoding.UTF8.GetBytes(password + salt));
            StringBuilder hashPassword = new StringBuilder();
            foreach (var hashByte in hashBytes)
            {
                hashPassword.Append(hashByte);
            }
            return hashPassword.ToString();
        }
    }

 

分別建立三個類進行登入用使用者，使用者以及視訊的初始化：

對登入用使用者進行初始化，使用 SHA256 演算法對密碼進行加密：

    public class UserIdentityInitiator
    {
        public static async Task Initial(IServiceProvider provider)
        {
            UserIdentityDbContext context = provider.GetRequiredService<UserIdentityDbContext>();
            Encryptor encryptor = new Encryptor();
            if (!context.Users.Any())
            {                
                for (int i = 0; i < 20; i++)
                {
                    string salt = SaltGenerator.GenerateSalt();
                    UserIdentity user = new UserIdentity()
                    {
                        UserName = $"User{i+1}",                        
                        Password = encryptor.Encrypt($"User{i+1}",salt),
                        Salt = salt,
                        Id = i+1,
                        Email = $"User{i + 1}@cnblog.com"
                    };
                    await context.Users.AddAsync(user);
                    await context.SaveChangesAsync();
                }
            }
        }
    }

 

然後在 Configure 方法最後一行中新增程式碼：

             UserIdentityInitiator.Initial(app.ApplicationServices).Wait();

 

執行程式後檢視本地資料庫：

 

 

 

對使用者進行初始化：

在此新增了一個 Avatar 資料夾並放入幾張圖片備用，對使用者頭像進行初始化：

    public class UserInitiator
    {
        public static async Task Initial(IServiceProvider serviceProvider)
        {
            UserAndVideoDbContext context = serviceProvider.GetRequiredService<UserAndVideoDbContext>();
            if (!context.Users.Any())
            {
                string currentDirectory = Directory.GetCurrentDirectory();
                int pictureSerial = 0;                  
                                
                for (int i = 0; i < 20; i++)
                {
                    pictureSerial = i % 4;
                    User user = new User()
                    {
                        AvatarLocation = Path.Combine(currentDirectory,"Avatar",$"{pictureSerial}.jpg"),
                        UserName = $"User{i+1}",
                        Id = i+1,
                        Email = $"User{i+1}@cnblog.com"
                    };                    

                    await context.Users.AddAsync(user);
                    await context.SaveChangesAsync();
                }
            }
        }
    }

 

在 Configure 方法最後一行新增方法：

            UserInitiator.InitialUsers(app.ApplicationServices).Wait();

 

 

對視訊進行初始化：

新建一個 Video 資料夾放置若干視訊：

 

在.net core 中為了生成縮圖，需要引用 System.Drawing.Common 庫：

 

為了方便地獲取視訊封面，可以引用 Xabe.FFmpeg 庫：

 

 

由於 Xabe.FFmpeg 是 .NET 平臺上對 FFmpeg 封裝，基本功能依靠於 FFmpeg 實現，因此需要下載 FFmpeg：https://ffmpeg.zeranoe.com/builds/

 

解壓檔案後將資料夾新增到環境變數中：

 

 新建一個類用以在本地儲存縮圖：

    public class PictureTrimmer
    {        
        public static string GetLocalTrimmedPicture(string fileName)
        {
            string newLocation = fileName.Insert(fileName.LastIndexOf(".")+1, "min.");
            Image.FromFile(fileName).GetThumbnailImage(320, 180, (() => false), IntPtr.Zero).Save(newLocation);
            return newLocation;
        }
    }

 

初始化視訊：

為 FFmpeg.ExecutablesPath 賦值，設定成 FFmpeg 解壓後的位置：

由於 Xabe.FFmpeg 建立圖片時使用 FileStream 指定 FileMode 為 NewCreate，所以存在已有檔案時會丟擲異常，需保證建立的圖片不與現有檔案重名。

在此全部視訊由 ID 為1的使用者上傳：

    public class VideoInitiator
    {
        public static async Task Initial(IServiceProvider provider)
        {
            FFmpeg.ExecutablesPath = @"D:\office softwares\FFMpeg";

            UserAndVideoDbContext context = provider.GetRequiredService<UserAndVideoDbContext>();
            string videoDirectory = Path.Combine(Directory.GetCurrentDirectory(), "Video");

            User author = context.Users.Include(u => u.Works).FirstOrDefault(u => u.Id == 1);

            if (!context.Videos.Any())
            {
                for (int i = 1; i <= 6; i++)
                {
                    string videoPath = Path.Combine(videoDirectory, $"{i}.mp4");
                    string picPath = Path.Combine(videoDirectory, $"{i}.jpg");

                    if (File.Exists(picPath))
                    {
                        File.Delete(picPath);
                    }

                    //獲取視訊資訊
                    IMediaInfo mediaInfo = await MediaInfo.Get(videoPath);
                    //以 0 秒時的畫面作為封面圖並儲存在本地
                    Conversion.Snapshot(videoPath, picPath,
                        TimeSpan.FromSeconds(0)).Start().Wait();

                    Video video = new Video()
                    {
                        Title = $"輕音少女 第{i}集",
                        Author = context.Users.FirstOrDefault(u => u.Id == 0),
                        Category = Category.番劇,
                        VideoLocation = videoPath,
                        Duration = mediaInfo.Duration,
                        PublishDateTime = DateTime.Now,
                        ThumbnailLocation = PictureTrimmer.GetLocalTrimmedPicture(picPath),
                        Tag = "輕音少女",
                        VideoView = 0
                    };
                    author.Works.Add(video);
                    await context.Videos.AddAsync(video);
                    await context.SaveChangesAsync();
                }

            }
        }
    }

 

 在 Configure 方法最後一行呼叫初始化方法：

            VideoInitiator.Initial(app.ApplicationServices).Wait();

 

執行程式：

 

至此資料庫初始化工作完成。