html编写加载更多_更好计划的10个步骤，使您可以编写更少的代码

html编写加载更多

by freeCodeCamp

通过freeCodeCamp

更好计划的10个步骤，使您可以编写更少的代码 (10 Steps to Plan Better so you can Write Less Code)

An ounce of preparation is worth a pound of cure. That’s true in medicine, and that’s definitely true in software development.

一盎司的准备值得一磅的治疗。 在医学上是正确的，在软件开发中绝对是正确的。

Here’s a structured 10-step workflow that will guide you through the app planning process, with the goal of saving you from writing a lot of unnecessary code.

这是一个结构化的10个步骤的工作流程，它将指导您完成应用程序规划过程，以使您免于编写大量不必要的代码。

Together, we’ll plan out a simple “To-do” single-page web app. We’ll also plan for an API backend for a future mobile app. Here are the steps we’ll take in planning out this project:

我们将一起计划一个简单的“待办事项”单页Web应用程序。 我们还将为将来的移动应用计划API后端。 以下是我们计划此项目的步骤：

1)创建我们的Trello板 (1) Create our Trello board)

Trello is a fun, free way to break your planning and development process into small tasks that can be tracked.

Trello是一种有趣，免费的方法，可以将您的计划和开发过程分解为可以跟踪的小任务。

• To Do — what is left to do
  要做的事-剩下要做的事
• In progress — tasks that people are currently working on
  进行中-人们当前正在处理的任务
• Done — tasks that are done and ready for testing
  完成-完成并准备进行测试的任务

2)创建我们的敏捷用户故事 (2) Create our agile user stories)

Here are some example user stories. These will guide how we think about our app’s features and functionality. Note that they all follow a similar structure: as a <person> I can <do something>.

这是一些用户故事示例。 这些将指导我们如何考虑应用程序的功能。 请注意，它们都遵循类似的结构：作为<person>，我可以<做某事>。

• as a logged-in user I can see the list of my to-do’s.
  作为登录用户，我可以看到我的工作清单。
• as a logged-in user I can add a new to-do.
  作为登录用户，我可以添加一个新的待办事项。
• as a logged-in user I can delete a to-do (only my to-do’s — not other users’).
  作为登录用户，我可以删除待办事项(仅我的待办事项，而不是其他用户)。
• as a logged-in user I can complete a to-do (only my to-do’s — not other users’).
  作为登录用户，我可以完成一个待办事项(只有我的待办事项，而不能是其他用户的事)。
• as an anonymous user, I can register for a new account, recover my password, or log in to the app with an existing account.
  作为匿名用户，我可以注册一个新帐户，恢复密码或使用现有帐户登录到该应用程序。

3)创建我们的用例模型 (3) Create our use case model)

Our use case model will visualize our user stories, and add suggestions for how we can implement them.

我们的用例模型将可视化我们的用户故事，并添加有关如何实现它们的建议。

4)创建活动图 (4) Create our activity diagram)

Our activity diagram will show the different paths our users can take through our app.

我们的活动图将显示用户可以通过我们的应用程序采取的不同路径。

• A user accesses our to-do application.
  用户访问我们的待办事项应用程序。
• If the user is not logged in she will see our login page.
  如果用户未登录，她将看到我们的登录页面。
• If she already has an account, she can log in.
  如果她已经有​​一个帐户，则可以登录。
• If she has an account, but she forgot her password, she can recover her password.
  如果她有一个帐户，但是忘记了密码，则可以恢复密码。
• If she doesn’t have an account, she can create one.
  如果没有帐户，则可以创建一个帐户。
• Both “create an account” and “recover my password” will require email validation. A user can log in to our application only after she has confirmed her email address.
  “创建帐户”和“恢复我的密码”都需要电子邮件验证。 用户只有在确认电子邮件地址后才能登录我们的应用程序。
• If she is logged in, she will see her todo list (this can be empty if she hasn’t added any to-dos yet).
  如果她已登录，则将看到她的待办事项列表(如果尚未添加任何待办事项，则可以为空)。
• is able to see her tasks list
  能够看到她的任务列表
• is able to mark a task from her list as completed
  能够将她列表中的任务标记为已完成
• is able to search within her task list
  能够在她的任务列表中搜索
• is able to delete a task from her list
  能够从她的列表中删除任务
• The user can exit the application at any time.
  用户可以随时退出应用程序。

5)创建我们的模型 (5) Create our mockups)

Our mockups show what our app should look like. It’s much faster to iterate on a mockup than it is to do so on working code.

我们的模型显示了我们的应用程序应该是什么样子。 迭代模型要比工作代码要快得多。

6)为我们的项目选择合适的技术 (6) Choose the right technologies for our project)

Because this is a single page app, we’ll rely heavily — or in this case exclusively — on JavaScript. Let’s use one of the most popular JavaScript stacks: the MEAN stack. One big benefit of the MEAN stack is that all of its components are free and open-source. There are also tons of resources available for learning the MEAN stack, and for debugging it when you inevitably encounter errors.

因为这是一个单页应用程序，所以我们将严重依赖于JavaScript(在这种情况下，尤其是JavaScript)。 让我们使用最流行JavaScript堆栈之一： MEAN堆栈。 MEAN堆栈的一大好处是其所有组件都是免费的和开源的。 还有大量资源可用于学习MEAN堆栈，以及在不可避免地遇到错误时进行调试的资源。

You can have a MEAN stack development environment up and running in the cloud in less than an hour, for free.

您可以在不到一个小时的时间内免费建立MEAN堆栈开发环境并在云中运行。

Here are the components we’ll use:

这是我们将使用的组件：

1. MongoDB for our database

   MongoDB用于我们的数据库

2. Node.js and Express.js for implementing our API

   用于实现我们的API的Node.js和Express.js

3. AngularJS, along with HTML and CSS (and Bootstrap) for our client-side application

   AngularJS以及HTML和CSS(和Bootstrap)用于我们的客户端应用程序

4. Mongoose to connect our application to MongoDB

   将我们的应用程序连接到MongoDB的猫鼬

7)设计我们的数据库架构 (7) Design our database schema)

It’s worth the effort to design a database schema, even for our simple application.

即使是对于我们的简单应用程序，也要付出努力来设计数据库模式。

We’ll have two collections: our “Users” collection will house our user data, and our “ToDo” collection will house our tasks that need to be done. One user can have zero, one, or many tasks in her todo list, so we will have a one-to-many (1:m) relationship between our two collections.

我们将有两个集合：“用户”集合将容纳我们的用户数据，而“待办事项”集合将容纳我们需要完成的任务。 一个用户的待办事项列表中可以包含零个，一个或多个任务，因此我们两个集合之间将具有一对多(1：m)的关系。

8)定义我们的用例 (8) Define our use cases)

1. What happens to the todos related to a user that deletes her account? When the user deletes her account the todos related to that user should also be deleted.
   与删除帐户的用户相关的待办事项会怎样？ 当用户删除其帐户时，与该用户相关的待办事项也应删除。
2. No todo can be added without being attached to a confirmed user.
   如果未附加已确认的用户，则无法添加待办事项。
3. A todo can only be deleted by its owner.
   待办事项只能由其所有者删除。
4. No user can be added with an empty username or password.
   不能使用空的用户名或密码添加用户。
5. No todo can be added with an empty task.
   空任务不能添加待办事项。

Things to keep in mind:

注意事项：

1. Use the Mongoose middleware to remove dependent documents like todos when a user deletes her account.
   当用户删除帐户时，使用Mongoose中间件删除依赖文档(如待办事项)。
2. Use Mongoose validation rules on models to prevent empty fields from being added to our database.
   在模型上使用猫鼬验证规则，以防止将空字段添加到我们的数据库中。

9)设计和测试我们的API (9) Design and test our API)

I recommend you create an account and start playing with it. If you link your GitHub account with Apiary, you can ensure your documentation always stays up to date. You’ll also be able to test your data visually without the need for actually hitting your API endpoints. If you prefer to test your API from the command line, here’s an example of how to do this.

我建议您创建一个帐户并开始使用它。 如果您将GitHub帐户与Apiary关联，则可以确保您的文档始终保持最新。 您还可以直观地测试数据，而无需实际访问API端点。 如果您希望从命令行测试您的API，请参见以下示例 。

Later, once you’ve implemented your API with Node.js and Express.js, you’ll just need to set your URL in Apiary. Then you can start testing your calls. Our current host url (http://fcctodoapp.apiblueprint.org/) will be replaced by your API’s URL.

稍后，在使用Node.js和Express.js实现API后，只需在Apiary中设置URL。 然后，您可以开始测试您的呼叫。 我们当前的主机网址( http://fcctodoapp.apiblueprint.org/ )将替换为您API的URL。

10)开始编写代码！ (10) Start writing code!)

This is the fun part, and it will take up most of your project’s time. If you need help with this, join us and learn to code.

这是有趣的部分，它将占用您项目的大部分时间。 如果您需要帮助，请加入我们并学习编码 。

Bianca Mihal originally published this on our now-defunct blog in June 2015.

比安卡·米哈尔(Bianca Mihal) 最初发表于 请访问我们现已停用的博客(2015年6月)。

翻译自: https://www.freecodecamp.org/news/10-steps-to-plan-better-so-you-can-write-less-code-ece655e03608/

html编写加载更多