从ASP.NET核心空项目创建基本Web站点

智能甄选 2018-11-28 09:07:05

我们来看看使用ASP.NET Core可以快速创建一个基本网站。如果您是ASP.NET Core新手或想要复习,请继续阅读以获取更多信息!

最近,我想做概念的非常快的证明,关于使用 setInterval 与 setTimeout 读取后 setTimeout 是可借鉴,如果你是非常迅速调用同一个功能。我想我会记录我从文件 - >新项目到POC运行的旅程,以便下次我不必重新查找各个部分。

文件 - >新项目

如果您创建一个全新的ASP.NET Core 2.1项目,选择空项目,然后运行生成的代码,您将看到:

这是由Startup.cs文件中的一行生成的 :

app.Run(async (context) =>

{

await context.Response.WriteAsync("Hello World!");

});

这里的目标是使空白应用程序尽可能快地为HTML页面提供一些附加的JavaScript。在这里,我有三个步骤。

第1步:创建HTML文件

应用程序只能从wwwroot文件夹中提供静态文件(HTML被视为静态文件)。此文件夹的内部结构无关紧要,但这是您的文件必须到达的位置:

该文件的内容如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<p>test</p>

</body>

</html>

这实际上不会做任何事情,因为,默认情况下,ASP.NET Core不提供静态文件,也不知道命名“索引”的巨大意义。

第2步:配置ASP.NET

Startup.cs是所有魔法发生的地方; 这就是开箱即用的样子:

public Startup

{

// This method gets called by the runtime. Use this method to add services to the container.

// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940

public void ConfigureServices(IServiceCollection services)

{

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

if (env.IsDevelopment())

{

app.UseDeveloperExceptionPage();

}

app.Run(async (context) =>

{

await context.Response.WriteAsync("Hello World!");

});

}

}

`context.Response.WriteAsync`去了,我们告诉ASP.NET Core提供静态文件,调用`UseDefaultFiles`意味着它将搜索Index或Default文件。值得指出的是这些事项的顺序:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

if (env.IsDevelopment())

{

app.UseDeveloperExceptionPage();

}

app.UseDefaultFiles();

app.UseStaticFiles();

}

现在它加载Index.html文件。所以,从技术上讲,它只有两个步骤 - 尽管我们还没有引用任何JavaScript。

第3步:添加JavaScript ......让我们做一些时髦的东西

更改HTML以为段落提供ID和绝对位置。另外,引用文件site.js:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="site.js"></script>

</head>

<body>

<p id="testElement" style="position:absolute">test</p>

</body>

</html>

显然,如果不添加site.js,就不会发生任何事情(它也需要在wwwroot中):

该新文件的JavaScript代码位于:

var divxPos = 0;

window.onload = function () {

runCode();

};

function runCode() {

var test = document.getElementById("testElement");

test.style.left = divxPos++ + 'px';

setTimeout(() => runCode(), 50);

};

如果你运行它,你会发现文本自行运动!

0 阅读:1
智能甄选

智能甄选

技术交流、资源共享,是程序员的网上乐园。