如何构建一个原创的ASP.NET个人网站？

2024年11月6日 互联网

ASP.NET 个人网站开发详细指南

如何构建一个原创的ASP.NET个人网站？

背景与简介

在当今的信息化时代，拥有一个展示自我的平台变得尤为重要，ASP.NET Core 是一个跨平台的开源框架，用于构建现代云基础的互联网应用程序，如 Web 应用、API 服务、移动后端等，本文将详细介绍如何使用 ASP.NET Core 搭建一个功能齐全的个人网站。

开发环境准备

安装 Visual Studio

确保你的计算机上安装了最新版本的 Visual Studio（推荐使用 Visual Studio 2019 或更高版本），可以通过以下步骤安装：

访问 [Visual Studio 官方网站](https://visualstudio.microsoft.com/)。

下载并安装 Visual Studio Installer。

选择“ASP.NET 和 Web 开发”工作负载进行安装。

安装 .NET Core SDK

如果还没有安装 .NET Core SDK，请访问 [.NET 官方页面](https://dotnet.microsoft.com/download) 下载并安装最新版本的 .NET SDK。

创建 ASP.NET Core 项目

新建项目

打开 Visual Studio，选择“创建新项目”，在模板中选择“ASP.NET Core Web 应用 (模型-视图-控制器)”，点击“下一步”。

配置项目

在“配置新项目”窗口中：

命名项目名称，例如MyPortfolio。

选择目标位置和解决方案名称。

确保选择了“ASP.NET Core 5.0”作为目标框架。

身份验证选择“个人用户账户”。

点击“创建”按钮生成项目。

如何构建一个原创的ASP.NET个人网站？

项目结构

ASP.NET Core 项目的文件目录结构如下：

MyPortfolio/
│
├── wwwroot/            # 存放静态文件（js, css, images）
├── Views/             # 存放视图组件
├── Controllers/       # 控制器类
├── Pages/             # Razor Pages 文件夹
├── Models/            # 数据模型
├── Data/              # 数据库上下文和实体框架迁移命令
├── Services/          # 业务逻辑层
└── ...                # 其他文件夹

核心模块开发

主页

在Views 文件夹中，找到Home/Index.cshtml，编辑这个文件以添加个人简介、头像和个人说明等内容。

@{
    ViewData["Title"] = "主页";
}
<div class="text-center">
    <h1>ViewData["Name"]</h1>
    <p>ViewData["Description"]</p>
</div>

在HomeController 中修改Index 方法来传递数据：

public IActionResult Index()
{
    ViewData["Name"] = "你的名字";
    ViewData["Description"] = "这里是你的个人简介";
    return View();
}

关于我

在Views 文件夹中，右键选择“添加” -> “新建文件夹”，命名为About，在该文件夹下新建一个视图文件Index.cshtml如下：

@{
    ViewData["Title"] = "关于我";
}
<div class="text-center">
    <h1>关于我</h1>
    <p>这是关于我页面的内容。</p>
</div>

在Controllers 文件夹中，新建一个AboutController，并添加一个Index 方法：

public class AboutController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

在Views/Shared/_Layout.cshtml 文件中添加导航栏项：

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">主页</a>
</li>
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="About" asp-action="Index">关于我</a>
</li>

个人相册

在Views 文件夹中，新建一个Photos 文件夹，并在该文件夹下新建一个Index.cshtml 文件：

@{
    ViewData["Title"] = "我的相册";
}
<div class="text-center">
    <h1>我的相册</h1>
    <!-这里可以添加相册图片 -->
</div>

在Controllers 文件夹中，新建一个PhotosController，并添加一个Index 方法：

public class PhotosController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

在Views/Shared/_Layout.cshtml 文件中添加导航栏项：

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Photos" asp-action="Index">我的相册</a>
</li>

个人音乐播放器

在Views 文件夹中，新建一个Music 文件夹，并在该文件夹下新建一个Index.cshtml 文件：

@{
    ViewData["Title"] = "我的音乐";
}
<div class="text-center">
    <h1>我的音乐</h1>
    <!-这里可以添加音乐播放器 -->
</div>

在Controllers 文件夹中，新建一个MusicController，并添加一个Index 方法：

public class MusicController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

在Views/Shared/_Layout.cshtml 文件中添加导航栏项：

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Music" asp-action="Index">我的音乐</a>
</li>

联系方式

在Views 文件夹中，新建一个Contact 文件夹，并在该文件夹下新建一个Index.cshtml 文件：

@{
    ViewData["Title"] = "联系方式";
}
<div class="text-center">
    <h1>联系方式</h1>
    <p>这里可以添加你的联系方式。</p>
</div>

在Controllers 文件夹中，新建一个ContactController，并添加一个Index 方法：

public class ContactController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

在Views/Shared/_Layout.cshtml 文件中添加导航栏项：

如何构建一个原创的ASP.NET个人网站？

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Contact" asp-action="Index">联系方式</a>
</li>

数据库配置与连接

SQL Server 安装与配置

参考[SQL Server 2012](https://support.microsoft.com/zh-cn/help/4027685/sql-server-2012-express-localdb)进行安装，安装完成后，通过以下步骤配置远程访问：

打开 SQL Server Management Studio。

右键点击服务器实例 -> 属性 -> 安全性 -> 允许远程连接到此服务器。

配置防火墙规则以允许 SQL Server 端口（默认是1433）。

设置 SQL Server 身份验证模式为混合模式（SQL Server 身份验证和 Windows 身份验证），并设置sa用户的密码。

更新数据库连接字符串

在appsettings.json 文件中添加数据库连接字符串：

"ConnectionStrings": {
    "DefaultConnection": "Server=your_server_address;Database=your_database_name;User Id=your_username;Password=your_password;"
}

在Startup.cs 文件中配置服务：

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
    services.AddDefaultIdentity<IdentityUser>().AddEntityFrameworkStores<ApplicationDbContext>();
    services.AddControllersWithViews();
}

运行迁移命令以创建数据库表结构：

dotnet ef migrations add InitialCreate
dotnet ef database update

实现用户身份验证与授权

确保在Startup.cs 文件中添加了以下代码：

services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
         .AddEntityFrameworkStores<ApplicationDbContext>();

在Pages/Account/Register.cshtml.cs 和Pages/Account/Login.cshtml.cs 中分别处理注册和登录操作。

部署到服务器

发布网站

在 Visual Studio 中，选择“生成” -> “发布...”，选择合适的发布目标（如文件夹、IIS、FTP等），然后点击“发布”，发布成功后，将生成的文件拷贝到服务器指定目录下。

配置 IIS 站点

在服务器上，打开 IIS Manager，添加一个新的网站，绑定域名和物理路径到发布后的文件目录，确保已安装并配置好 .NET Core Hosting Bundle，完成配置后，启动网站即可通过浏览器访问。## 上文归纳通过以上步骤，我们成功创建了一个基于 ASP.NET Core 的个人网站，这个网站包括了主页、关于我、个人相册、个人音乐以及联系方式等基本模块，并实现了用户身份验证与授权，希望这篇指南能够帮助大家快速上手 ASP.NET Core 开发，并建立自己的个人网站平台。

以上内容就是解答有关“asp.net 个人网站”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。

最新文章