初探ASP.NET Mvc5+EF7的美妙旅程

话说今年微软是很给力的,Win10算是吸引了大众的眼球了,而最新的.NET5框架更是OK。

最新的.NET5进行了开源,同时利用NuGet以及Node和Bower进行了跨平台化;这意味这可以直接在Mac或者Linux上使用.NET进行开发。

而最新的Mvc5和EF框架也算是进行了换脸了,跟之前Mvc4的项目都不一样,如果进行移植除了核心代码可以拷贝过来,其他的统统要重新来过。

最近准备改版一下网站,所以尝试了一把最新的框架;当然由于现在还是预览版所以改动什么的都超大,所以也走了不少弯路;特在此记录一下。

项目准备

由于是Beta7,而微软官方的说明文档和例子大部分可以适用,但是有些地方也是不对的,比如EF的命令,EF Beta3 与 Beta7差别很大,这也就是预览版的缺点,时不时的就改动了。
另外我这里使用的是VS2015而非Visual Studio Code ,毕竟有好点的肯定就用好的啊。

开工

新建项目

打开VS,点击文件-新建-项目-Web
这里写图片描述

这里起名叫做:MusicBank,就是一个音乐店吧。

这里写图片描述

在这里我们来一个空的就好。我们来自己建立Model/EF….
OK,项目建立好了后,我们看见的是这样的。
这里写图片描述

可以看见我们的项目其实是在 Src 文件夹下面。而项目中除了引用+简单设置以外就没有任何东西。

环境搭配

项目有了,但是却并不能直接用,我们需要搭建环境,比如我们需要引入EF等等。

dependencies

打开文件“project.json” 我们修改dependencies部分为:


  "dependencies": {
    "Microsoft.AspNet.Server.IIS": "1.0.0-beta7",
    "Microsoft.AspNet.Server.WebListener": "1.0.0-beta7",
    "Microsoft.AspNet.StaticFiles": "1.0.0-beta7",
    "Microsoft.AspNet.Mvc": "6.0.0-beta7",
    "EntityFramework.Commands": "7.0.0-beta7",
    "EntityFramework.SqlServer": "7.0.0-beta7",
    "Microsoft.Framework.Configuration.Json": "1.0.0-beta7",
    "Microsoft.Framework.Configuration.UserSecrets": "1.0.0-beta7"
  },

在这里添加了对Mvc、EF、Configuration的依赖。
Mvc的作用主要用于控制器的解析等操作,包括了WebAPI。
EF当然就是数据库了。
Configuration 用来读取本地配置,方便设置。

commands

打开文件“project.json” 我们修改commands部分为:

  "commands": {
    "web": "Microsoft.AspNet.Hosting --config hosting.ini",
    "ef": "EntityFramework.Commands"
  },

commands模块的主要作用是命令行执行,可简化操作,比如实际执行时输入 “ef” 即可代表 “EntityFramework.Commands”

Model

OK,在这里我们先建立文件夹 Models,随后我们在Model文件夹上右键-添加-类:

Artist

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MusicBank.Models
{
    public class Artist
    {
        [Key]
        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
        public Guid Id { get; set; }
        [Required]
        public string Name { get; set; }
        [Required]
        public int Age { get; set; }
        public virtual List<Audio> Audio { get; set; }
    }
}

一个歌唱家,有个名字和年龄,然后有N个歌曲。

Audio

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MusicBank.Models
{
    public class Audio
    {
        [Key]
        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
        public Guid Id { get; set; }
        [Required]
        public string Name { get; set; }
        [Required]
        public int Type { get; set; }
        [Required]
        public string Src { get; set; }
        [Required]
        public Guid ArtistId { get; set; }
        public Artist Artist { get; set; }
    }
}

歌曲也简化了,一个名字,一个类型,一个源文件,属于某个歌唱家。

MusicContext

这个想必大家不陌生吧,用于数据库的查询等操作就全靠这个了;算是EF的精髓。

using Microsoft.Data.Entity;

namespace MusicBank.Models
{
    public class MusicContext : DbContext
    {
        public DbSet<Audio> Audio { get; set; }
        public DbSet<Artist> Artists { get; set; }
    }
}

这里只需要添加两个表就OK。

SampleData

为了方便,这里我直接在创建数据库的时候就进行数据的初始化工作,添加一些默认数据。

using Microsoft.Framework.DependencyInjection;
using System;
using System.Linq;

namespace MusicBank.Models
{
    public class SampleData
    {
        public static void Initialize(IServiceProvider serviceProvider)
        {
            var context = serviceProvider.GetService<MusicContext>();
            if (context.Database.EnsureCreated())
            {
                if (!context.Artists.Any())
                {
                    var austen = context.Artists.Add(
                        new Artist { Name = "Austen", Age = 21 }).Entity;
                    var dickens = context.Artists.Add(
                        new Artist { Name = "Dickens", Age = 25 }).Entity;
                    var cervantes = context.Artists.Add(
                        new Artist { Name = "Cervantes", Age = 27 }).Entity;

                    context.Audio.AddRange(
                        new Audio()
                        {
                            Name = "Pride",
                            Type = 1,
                            Artist = austen,
                            Src = "Pride.mp3"
                        },
                        new Audio()
                        {
                            Name = "Northanger",
                            Type = 2,
                            Artist = austen,
                            Src = "Northanger.mp3"
                        },
                        new Audio()
                        {
                            Name = "David",
                            Type = 3,
                            Artist = dickens,
                            Src = "David.mp3"
                        },
                        new Audio()
                        {
                            Name = "DonQuixote",
                            Type = 1,
                            Artist = cervantes,
                            Src = "DonQuixote.mp3"
                        }
                    );
                    context.SaveChanges();
                }
            }
        }
    }
}

首先这是一个静态方法,需要传入一个“IServiceProvider”,这个可以在项目启动的时候调用。

在方法进入后我们获取到上面的“MusicContext”,然后我们进行数据库创建与数据添加工作。

if (context.Database.EnsureCreated())

这句主要用于判断是否需要进行数据库创建,如果是将进行创建,同时返回true,而后我们判断是否具有数据,如果数据库表为空,那么我们添加一些默认数据。

配置文件 config.json

在项目根目录添加文件:“config.json”在其中配置数据库链接字段如下:

{
  "Data": {
    "MusicConnection": {
      "ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=MusicBank-Database;Trusted_Connection=True;MultipleActiveResultSets=true"
    }
  }
}

启动配置 Startup.cs

在项目启动的时候将会调用 Startup.cs 中的相关方法进行数据的初始化操作。

在这里我们需要做三件事儿:

  1. 获取到配置config.json,在构造函数中完成
  2. 设置数据库文件连接,在ConfigureServices方法中完成
  3. 初始化数据库相关数据,在Configure方法中完成
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Hosting;
using Microsoft.Data.Entity;
using Microsoft.Dnx.Runtime;
using Microsoft.Framework.Configuration;
using Microsoft.Framework.DependencyInjection;
using MusicBank.Models;

namespace MusicBank
{
    public class Startup
    {
        public Startup(IHostingEnvironment env, IApplicationEnvironment appEnv)
        {
            var builder = new ConfigurationBuilder(appEnv.ApplicationBasePath)
                .AddJsonFile("config.json")
                .AddJsonFile($"config.{env.EnvironmentName}.json", optional: true);

            builder.AddEnvironmentVariables();
            Configuration = builder.Build();
        }
        public IConfigurationRoot Configuration { get; set; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();

            services.AddEntityFramework()
                .AddSqlServer()
                .AddDbContext<MusicContext>(options =>
                {
                    options.UseSqlServer(Configuration["Data:MusicConnection:ConnectionString"]);
                });
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseStaticFiles();
            app.UseMvc();

            SampleData.Initialize(app.ApplicationServices);
        }
    }
}

到这里我们的初始化操作基本完成了,现在来看看如何访问数据库数据了。

Controllers

首先在根目录添加文件夹 Controllers,右键-添加-新建项
这里写图片描述

在这里我就使用一个简单的WebAPI来进行数据演示了,后面会在文章中详细写写数据的渲染相关。

在文件 AudioController.cs 中,我们更改代码为:

using Microsoft.AspNet.Mvc;
using MusicBank.Models;
using System.Collections.Generic;
using System.Linq;

namespace MusicBank.Controllers
{
    [Route("api/[controller]")]
    public class AudioController : Controller
    {
        [FromServices]
        public MusicContext db { get; set; }

        [HttpGet]
        public IEnumerable<Audio> Get()
        {
            return db.Audio.ToList();
        }

        [HttpGet("{name}")]
        public Audio Get(string name)
        {
            Audio audio = db.Audio.Where(a => (a.Name == name)).FirstOrDefault();
            return audio;
        }
    }
}

一个属性,两个方法。

在这里我们可以看见 MusicContext 属性并没有初始化,但是下面却能直接调用;这是因为我们添加了一个属性“[FromServices]”,该属性意味着服务器能自动采用注解的方式对 db 进行赋值。

下面两个方法分别返回全部的音乐列表,和根据音乐名称返回音乐相关信息。

当然在两个方法上都有“[HttpGet]”属性,该属性指定了请求类型为 Get 方式,当然也有其他几种,如:“HttpPost”“HttpPut”“HttpDelete”等。

运行

在这里运行方式有两种,分别是 IIS 与 Web 命令行的方式。
这里写图片描述

IIS

这种方式直接运行,VS将打开浏览器并设置端口。

Web

还记得上面写到命令行的地方么?其中有这样一行:

    "web": "Microsoft.AspNet.Hosting --config hosting.ini",

在这里我们启动时候的参数在“hosting.ini”文件中,我们打开 hosting.ini 文件。

server=Microsoft.AspNet.Server.WebListener
server.urls=http://localhost:5000

可以找到我们访问的Url,运行后把Url拷贝到浏览器运行就OK。
运行情况下你会看见这样的窗口,可以看出其实是调用的dnx进行运行的程序。而 DNX 是可以跨平台的,这也就意味着可以直接在Mac上跑起来。
这里写图片描述

效果

这里写图片描述

这里写图片描述

可以看出两个方法的接口调用结果是OK的。

代码

项目完成了,代码也进行了打包;具体地址在这儿:
MusicBank

博客中的相关代码都集中在:
https://github.com/qiujuer/BeFoot

========================================================
作者:qiujuer
博客:blog.csdn.net/qiujuer
网站:www.qiujuer.net
开源库:github.com/qiujuer/Genius-Android
开源库:github.com/qiujuer/Blink
转载请注明出处:http://blog.csdn.net/qiujuer/article/details/48268729
—— 学之开源,用于开源;初学者的心态,与君共勉!

========================================================

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 + TypeScript + Vite 是一种常见的前端项目搭建方式,它结合了Vue框架的最新版本Vue3、TypeScript语言和Vite构建工具。这种项目搭建方式可以提供更好的开发体验和性能优化。 在Vue3中,可以使用`watch`方法来监听数据的变化。通过`import { watch, ref } from "vue"`引入相关的模块,然后在`setup`函数中使用`watch`方法来监听数据的变化。例如,可以创建一个`ref`对象来存储数据,并使用`watch`方法来监听该数据的变化。在`watch`的回调函数中,可以执行一些操作,比如发送异步请求。具体的代码示例如下: ```javascript import { watch, ref } from "vue" const name = ref('') export default defineComponent({ setup(props) { watch(name, () => { // 可添加异步请求 }) } }) ``` 基于Vue3 + Element + Vite的基本后台管理系统是可以成型的。除了这些基本的组件和工具之外,还可以根据需要自行添加其他功能,比如配置ESLint代码规范。此外,还可以进一步学习Vue3的其他高级用法,可以通过阅读其他相关的文章来深入了解。 #### 引用[.reference_title] - *1* [vite+vue3+ts 手把手教你创建一个vue3项目](https://blog.csdn.net/weixin_59916662/article/details/127331094)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [基于vue3 + ts + vite项目初探](https://blog.csdn.net/m0_49569569/article/details/124782445)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值