原文地址：www.thepolyglotdeveloper.com/2019/04/bui…

原文作者：disqus.com/by/ewaldhor…

发布时间：2019年4月24日

Dart是一种由Google开发的编程语言，并因其跨平台应用开发的移动开发框架Flutter而流行。

Dart语言是一种通用的语言，其构建的目的不仅仅是用于移动开发，而且，在这个简短的教程中，我将向你展示如何使用Dart构建一个基本的Web应用程序。

你需要知道的事情

我将假设你对Web应用程序开发很满意，并且了解DOM、HTML、CSS等概念，并且有一些基本的JavaScript背景。如果你是Web开发的新手，我建议你从Dart文档开始，它详细解释了DOM等概念。

如果你对编写HTML，CSS和非常基本的JavaScript很满意，你会很容易地通过本教程，并在途中学习一些Dart技能。对于好奇心强的人来说，Dart语言之旅是一个很好的方式来快速了解足够的Dart语言，并开始使用它，特别是如果你以前有其他语言的编程经验，如C#，Java，JavaScript或Python。

在我们学习本教程的过程中，我会介绍一些Dart编程的概念，并为你指出相关的文档，如果你需要的话。你不需要知道Dart语言就可以开始学习本教程。

获取Dart安装和配置的Web开发。

Dart为每个支持的平台提供了一个简单易行的安装指南，你可以在Dart语言官方网站上找到。Windows、Linux和Mac都有详细的说明。在本教程中，你应该安装Dart SDK。

Dart SDK包含了许多有用的命令行工具。

dart - Dart虚拟机(VM)
dartdoc - 一个API文档生成器
dart2js - 一个从Dart到Javascript的编译器，它允许你用Dart来实现网络目标。
dartfmt - Dart的代码格式化器。
dartanalyzer - Dart的静态代码分析器。
pub - Dart软件包管理器
dartdevc - 一个非常快速的Dart编译器，对网络开发非常有用。

一旦你安装了Dart，根据你的平台说明，打开一个命令提示符并执行以下命令。

dart --version

你应该看到类似这样的东西。

Dart VM version: 2.2.0 (Tue Feb 26 15:04:32 2019 +0100) on "macos_x64"

现在Dart已经安装完毕，让我们来设置一下我们将要使用的CLI工具。Dart包管理器，pub，可以很容易的添加和管理Dart包。我们将使用pub来安装命令行界面工具。

首先，我们安装web开发工具。

pub global activate webdev

你可以通过运行webdev命令来测试webdev是否在工作。

webdev

然后我们安装Stagehand，一个Dart脚手架工具。

pub global activate stagehand

通过运行以下命令，确保stagehand工作正常。

stagehand

我们的第一个网站开发项目

让我们使用stagehand脚手架工具，创建一个简单的Web开发项目。使用这个工具的好处是，它将为我们执行很多繁重的工作。在Dart中设置一个新的项目，需要创建一些预定的文件夹，而stagehand让这一切变得轻而易举。

对于我们的第一个项目，我们将创建一个非常简单的网络应用。为了让stagehand为我们的项目创建脚手架，我们必须首先创建一个新的文件夹来存放项目。我将使用dartweb作为我的项目文件夹。欢迎你创建任何你想要的空文件夹，并导航到它。

一旦创建了文件夹，并且你已经导航到了里面，运行这个命令。

stagehand web-simple

项目脚手架将被创建，您将被指示运行 pub get 来更新项目的依赖关系。运行

pub get

项目的依赖关系将被解析和更新，允许我们调用webdev工具来查看我们生成的应用程序的运行情况。

运行下面的命令，并将浏览器指向http://localhost:8080，一旦它在http://localhost:8080 上显示Serving 'web'。

webdev serve

你应该看到这样的东西。

做出一些改变

在使用Dart时，你会很快注意到一件事，那就是更改的速度有多快。让我们来看看这一点，在我们的页面上添加一点样式。

首先，打开web文件夹下的style.css文件。它应该有以下内容。

@import url(https://fonts.googleapis.com/css?family=Roboto);

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

#output {
    padding: 20px;
    text-align: center;
}

这是由stagehand工具自动为我们创建的，当我们指示它为我们创建一个简单的网页项目时。更新style.css文件，在#output中加入以下内容。

font-weight: bold;
background.#BABBAA; #BABBAA #BABBAA;

它应该是这样的

#output {
    padding: 20px;
    text-align: center;
    font-weight: bold;
    background: #BABBAA;
}

保存文件，进入浏览器并刷新页面。你应该看到这样的东西。

更新的CSS

Dart工具webdev可以监控我们项目中的文件，当你保存更改时，会自动触发重建和重新部署。这为你节省了大量的时间和精力，使开发者的体验更加顺畅。这是有期望的，但是，大多数情况下，它的效果非常好。大多数时候，你需要做的就是刷新浏览器，才能看到你的变化。

如果你看一下控制台的输出，你会看到这样的东西，每次你保存对文件的更改。

更新HTML

我们已经看到了更新CSS是多么的简单，但是HTML呢？首先，让我们看看stagehand为我们创建的默认HTML文档。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="scaffolded-by" content="https://github.com/google/stagehand">
        <title>dartweb</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="icon" href="favicon.ico">
        <script defer src="main.dart.js"></script>
    </head>
    <body>
        <div id="output"></div>
    </body>
</html>

这看起来很标准，对吗？唯一看起来有点搞笑的是<script>标签的src属性--main.dart.js。请注意dart这一点--我们将在下一节讨论这个问题。现在，让我们把注意力放在HTML上。

因为这只是标准的HTML，我们可以进行修改。将以下代码添加到页面主体中，在outputdiv的周围。

<header style="text-align: center;">
    <h1>A simple Dart web project</h1>
</header>

<div id="output"></div>

<footer>
    <p>For more information about Dart, please visit the <a href="https://www.dartlang.org/" target="_blank">offical website</a>.</p>
</footer>

保存文件并刷新浏览器。它看起来应该是这样的。

编写HTML用于Dart网站项目并不需要任何新的技能或知识。你可以使用标准的HTML标签，内联CSS以及外部样式表。

现在，更多关于JavaScript文件中的Dart位的内容

那么Dart在这一切中的位置是什么呢？我们看到HTML中的JavaScript包含了一个dart，这很不寻常。在我们的web文件夹里还有一个main.dart文件，内容如下。

import 'dart:html';

void main() {
    querySelector('#output').text = 'Your Dart app is running.';
}

如果你看一下 'Your Dart app is running.' 这句话，你会发现这就是我们浏览器中HMTL页面上出现的内容。代码用querySelector Dart方法选择#output标签，并将文本改为我们的消息。那么这个是如何工作的呢？

Dart将我们的源代码编译成JavaScript，在浏览器中运行。这意味着你可以在Dart中编写在浏览器中执行的代码，而不需要了解JavaScript。

我们可以对Dart代码进行一些修改，保存文件并刷新浏览器。看看你能不能把main.dart代码改成Hello, Dart!

你的main.dart文件现在应该是这样的。

import 'dart:html';

void main() {
    querySelector('#output').text = 'Hello, Dart!';
}

准备做多一点

在我们开始用Dart做各种事情之前，让我们在HTML页面上添加更多的内容。你可以使用任何你喜欢的图片，但是尽量保持标识符和样式名的一致，否则代码可能无法工作。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="scaffolded-by" content="https://github.com/google/stagehand">
        <title>dartweb</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="icon" href="favicon.ico">
        <script defer src="main.dart.js"></script>
    </head>
    <body>
        <header style="text-align: center;">
            <h1>A simple Dart web project</h1>
        </header>
        <div id="output"></div>
        <div>
            <img src="tears_image.jpg" id="tears">
        </div>
        <div class="dogs">
            <ul>
                <li>roofus</li>
                <li>sally</li>
                <li>puddles</li>
                <li>abe</li>
                <li>nox</li>
                <li>charlie</li>
            </ul>
        </div>
        <footer>
            <p>For more information about Dart, please visit the <a href="https://www.dartlang.org/" target="_blank">offical website</a>.</p>
        </footer>
    </body>
</html>

我使用的图片。

保存您的更改并刷新您的浏览器，您应该看到这样的东西。

用Dart修复图像对齐

比方说，由于某些原因，你需要使用Dart来修正图片的对齐方式。虽然使用静态CSS可能更有效，但它给了我们一个使用Dart与DOM交互的机会。

我们要选择图片，然后找到它所在的div，并改变div的一个属性。然后我们还想对图片本身设置一些样式属性。

在main.dart文件中创建一个新方法。

void alignImageProperly() {
    querySelector('#tears')
        .parent.style.setProperty("width", "100%")
        .style.setProperty("display", "block")
        .style.setProperty("margin-right", "auto")
        .style.setProperty("margin-left", "auto")。
}

确保这个方法在main中被调用。

void main() {
    querySelector('#output').text = 'Hello, Dart!';
    alignImageProperly().text = 'Hello, Dart!
}

保存并刷新!

我们的预期输出。

那么发生了什么？让我们来看看更详细的代码。为了让事情更简单，我将添加行号。

1. void alignImageProperly() {
2.     querySelector('#tears')
3          ..parent.style.setProperty("width", "100%")
4.         ..style.setProperty("display", "block")
5.         ..style.setProperty("margin-right", "auto")
6.         ..style.setProperty("margin-left", "auto");
7. }

我们声明我们的新函数，名称为alignImageProperly，返回类型为void。
使用Dart方法querySelector，我们获得一个ID为tears的图片的引用。
一旦我们有了这个引用，我们就访问我们的图像的parent，并将width属性设置为100%。请注意Dart级联符号功能的使用。这个功能允许我们运行querySelector，并保留对返回元素的引用。有了这个级联操作符，我们就可以在这个引用上调用函数，而不必重新运行selector或创建一个临时变量。
现在我们对图片本身设置display样式属性。
在图像上设置margin-right。
在图像上设置margin-left。
关闭我们的函数体。

为我们的名称列表添加标题

Dart不仅允许我们修改元素的样式，而且还可以很容易地在DOM中添加新的元素。让我们在图片下的名称列表中添加一个标题。

在你的main.dart文件中创建一个新函数。

addHeader() {
    var heading = HeadingElement.h3();
    heading.text = "Animal Names";
    querySelector('.dogs').children.insert(0, heading);
}

确保它在main中被调用。

void main() {
    querySelector('#output').text = 'Hello, Dart!';
    alignImageProperly().text = 'Hello, Dart!
    addHeader().text = 'Hello, Dart'; alignImageProperly(); addHeader();
}

保存并刷新，你应该看到这样的东西。

那么在这三行代码中发生了什么，构成了我们的addHeader函数呢？好吧，我们使用Dart的h3命名构造函数功能创建了一个新的HeadingElement，并在heading中保存了一个引用。接下来，我们修改了heading元素的文本，最后，我们将它作为div的第一个子元素插入，类为dogs。

这些名字需要注意一下

现在我们已经给列表添加了一个标题，我们可以看看把列表本身修饰一下。名字应该以大写字母开头，而列表看起来有点不对劲。

让我们把对齐方式修正一下，这与其说是良好的Web开发实践，不如说是为我们的样式表添加一个CSS元素的借口。

创建一个名为addStyleElement的函数，内容如下。

var styleElement = new StyleElement();
document.head.append(styleElement)。
CssStyleSheet sheet = styleElement.sheet;

final rule = '.dogs { width: 150px; padding: 20px; margin-left: auto; margin-right: auto; display: block; }';
sheet.insertRule(rule, 0)。

确保它在main函数中被调用。

void main() {
    querySelector('#output').text = 'Hello, Dart!';
    alignImageProperly();
    addHeader();
    addStyleElement();
}

保存并刷新您的浏览器，列表应该会看起来更好!

下面是你的addStyleElement函数的样子，作为参考。

addStyleElement() {
    var styleElement = new StyleElement().document.head.append(styleElement);。
    document.head.append(styleElement).CssStyleSheet sheet = styleElement.sheet;。
    CssStyleSheet sheet = styleElement.sheet;

    final rule = '.dogs { width: 150px; padding: 20px; margin-left: auto; margin-right: auto; display: block; }';
    sheet.insertRule(rule, 0);  
}

现在，让我们来解决名字不是以大写字母开头的问题。使用Dart，我们可以得到一个列表的引用，然后通过名字，修正每个项目的大小写问题。

首先，创建一个名为fixCase的新函数，内容如下。

fixCase() {
    var listElementChildren = querySelector('.dogs').children[1].children;

    listElementChildren.asMap().forEach((idx, value) {
        listElementChildren[idx].text = "${value.text[0].toUpperCase()}${value.text.substring(1)}";
    });
}

确保它在main函数中被调用。保存您的更改并刷新您的浏览器。你应该看到类似这样的东西。

在这短短的代码中，发生了很多事情，让我们再仔细看一下

我们首先创建一个引用，指向包含我们名字列表的<div>的第二个子元素的子元素。我们之前添加的标题，是元素的第0个，或者说第一个子元素。第二个子元素是名称列表，我们要获取的是它的子元素，因为它们的大小写需要固定。

有了引用之后，我们就创建一个地图，利用Dart字符串插值语法，我们可以将每个元素固定在原地。由于我们得到的引用是直接链接到DOM的，所以列表的值会立即改变，不需要进一步的干预。

修复可怕的页面标题

更新main功能中的页面标题，说一些更合适的东西。你可以放任何你想放的东西，我的改成了。

适当调整页脚

页脚看起来有点不对劲，我们来修正一下对齐方式。创建一个名为alignFooter的新函数，内容如下。

alignFooter() {
    querySelectorAll('footer').first.style.setProperty("text-align", "center")。
}

确保它在main中被调用，然后保存并刷新浏览器。现在页脚应该正确对齐了。

这次，我们使用了querySelectorAll，这是一个非常方便的函数，它将选择所有符合标准的元素。在我们的例子中，我们必须使用第一个关键字来给我们列表中的第一个元素，因为我们知道我们在页面上只有一个页脚。从那里开始，与之前设置样式属性以对齐页脚内容的过程相同。

修正一大段文本中的拼写错误

你有没有发现脚下的official拼错了？我们如何找到并修正它呢？

让我们创建一个名为fixSpelling的函数，并在main中调用它。

fixSpelling() {
    var p = querySelector('footer').querySelector('p');
    p.innerHtml = p.innerHtml.replaceFirst('offical', 'official');
}

保存并刷新，你应该会看到以下输出。

拼写已经修好了！但是，我们的链接消失了？这不是很有用。Dart在构建时考虑到了安全问题，默认情况下，它不允许像a href这样的东西被动态地添加到节点树中。

我们需要在这里做一些代码修改。

fixSpelling() {
    var p = querySelector('footer').querySelector('p');
    p.setInnerHtml(p.innerHtml.replaceFirst('offical', 'official'), treeSanitizer: AllowAllTreeSanitizer());
}

class AllowAllTreeSanitizer implements NodeTreeSanitizer {
    void sanitizeTree(Node node) {}
}

在我们的方案中，我们希望允许所有的变化发生在我们的网站上，因为我们控制着代码，知道会发生什么。然后，我们可以用我们自己的、空白的实现覆盖Dart内部的sanitizer，这将允许任何东西被添加到DOM中。

这也正好是Dart中命名参数的一个例子。你注意到treeSanitizer: paramenter这个名字了吗？Dart允许你指定你要给哪个参数赋值，当你在处理可选的参数，并且不想影响任何其他参数时，这真的很方便，尽管函数也可以接受其他参数。

这些代码变化的输出应该是。

建立我们的网络应用

到目前为止，我们一直使用webdev作为我们的编译和部署--边编译边部署--边部署边修改的服务器，这对于开发来说是很好的。然而，这并不是部署我们的Web应用程序的好方法。在部署我们的应用程序之前，我们需要构建它，并创建我们需要通过web服务器服务的部署工件。

按Ctrl-C（Break）停止webdev serve。webdev工具也可以用来生成这些工件。要构建项目，请在项目的根目录下执行以下命令。

webdev build

在输出中，你会看到这样的一行。

[INFO] Creating merged output dir 'build' completed, took 147ms

如果你检查新创建的build文件夹，你会发现webdev已经创建了我们需要的部署构件。

部署我们的网络应用

部署我们的Web应用程序是一项非常简单的工作。webdev工具已经创建了所有我们需要的部署工件，我们只需要将这些上传到我们的Web服务器上。我们可以将不需要部署到服务器的文件删除，比如隐藏的配置文件和package文件夹。

部署Artifacts。

将这些文件复制或上传到你喜欢的网络服务器上，你的应用程序就上线了。一个简单的方法，是使用Github Pages。Pages对于在浏览器中运行的web应用来说非常好用，而且不需要服务器端的代码来执行。

我已经将我们构建的应用部署到了Github页面上，你可以通过点击链接来实时查看。

结束语

这是一个简短的介绍，介绍了如何使用Dart构建一个非常基本的Web应用。对我来说，最大的胜利是我可以用我构建移动应用的语言，来构建我需要的web控制台。我希望你能学到一些东西，也希望你能进一步研究Dart这门语言。

当然，也有可用的网络应用框架，用于Dart。我将在下面的资源部分列出一些。

资源部分

支持Vue.js的Dart：VueDart
对Angular的Dart支持：AngularDart
一个Dart库和框架的集合：Awesome Dart

通过( www.DeepL.com/Translator )（免费版）翻译

[Web翻译]在Dart中构建一个简单的Web应用程序