快递项目组织者

为了练习 N:M 关联，​​我们将在现有项目管理器中添加对项目进行分类的功能。

背景故事：项目组织者

跟踪项目是人们个人生活和业务的必要组成部分。另一个人创建了一个项目管理器，允许您创建和查看项目，但最好对项目进行分类。让我们添加这个功能吧！

入门

我们将使用一个现有的应用程序，其中包括一个模型、一些路线和一些视图。

• 分叉并克隆此存储库
• 运行npm install以从现有package.json文件 安装依赖项
  • 用于nodemon启动您的应用程序
• 设置您的数据库（此应用程序已有一个现有模型）
  • 运行createdb project_organizer_development创建数据库
  • 运行sequelize db:migrate以运行迁移
  • 运行sequelize db:seed:all以使用之前西雅图队列中的 4 个项目填充数据库。

阅读代码

设置完成后，停止。您正在使用现有的应用程序，因此请务必阅读代码并确保应用程序的功能。以下是有关当前设置的一些信息。

• 路线
  • GET /- 列出所有项目的主页
  • POST /projects- 创建一个新项目，然后重定向回GET /
  • GET /projects/new- 具有用于创建新项目的表单的页面
  • GET /projects/:id- 显示特定项目的页面
• 楷模
  • project
  • 属性：name，githubLink，deployedLink，description

用户故事

• 作为用户，我想使用不同的名称对项目进行分类。例如，我的所有 Node 项目都将位于“Node”类别下。
• 作为用户，我想将多个类别分配给一个项目。
• 作为用户，我想查看我分配的类别列表。
• 作为用户，我想查看与我选择的类别关联的项目。

要求

第 1 部分：创建类别模型

为了添加类别，请创建一个 Sequelize 模型来存储类别。建议您将此模型命名为category。它将存储一个属性：类别的名称（一个字符串）。

创建此模型后，运行模型的迁移并测试模型的功能。这可以在单独的文件中完成。一个例子：

dbTest.js

const db = require('./models')

db.category.create({
    name: 'node'
  })
  .then(category => {
    console.log(category.id)
  })
  .catch(console.log)

async function createCategory() {
  try {
    const newCategory = await db.category.create({ name: 'python' })
    console.log(newCategory)
  } catch (err) {
    console.log(err)
  }
}

createCategory()

第 2 部分：创建连接模型

为了将一个类别与多个项目关联，以及一个项目与多个类别关联，我们需要创建一个中间模型。建议您将此模型命名为categoriesProjects。它将存储两个属性：类别的 id（整数）和项目的 id（整数）。

创建后，使用刚刚创建的联接表添加在类别和项目之间创建多对多关联所需的关联。请务必通过创建类别和项目来测试此功能，然后查看是否可以将它们包含在不同的查询中。

const db = require('./models')

db.project.findOne({
    where: { id: 1 },
    include: [db.category]
  })
  .then(project => {
    // by using eager loading, the project model should have a categories key
    console.log(project.categories)

    // createCategory function should be available to this model - it will create the category then add it to the project
    project.createCategory({ name: 'express' })
    .then(category => {
      console.log(category.id)
    })
  })

请注意，这是您可以执行的两个可能的查询。您还想测试其他一些。

第 3 部分：将模型与应用程序集成

现在模型已创建，您将需要向应用程序的其余部分添加创建类别、查看类别和按类别查看项目的功能。您可以采取以下方法：

• 将字段添加到与 关联的现有视图GET /projects/new。这个新字段应该接受新的类别名称。
• 添加到POST /projects路线以将类别添加到正在创建的项目中。
  • 类别名称应该是唯一的；类别模型不应有重复项（提示使用findOrCreate）。
  • 请记住，类别应与项目相关联（提示使用该addCategory方法）。
• 创建以下用于查看类别和按类别查看项目的路由：
  • GET /categories- 显示所有存在的类别
  • GET /categories/:id- 显示特定类别以及该类别的所有项目

第 4 部分：造型

完成上述操作后，使用 CSS 适当地设置应用程序的样式。尝试使用您以前从未使用过的 CSS 框架，或者BEM或OOCSS等 CSS 语法。

奖金

• 添加编辑和删除项目的功能
• 添加通过逗号分隔列表输入和分配多个标签的功能。
  • 示例：输入node, pizza, music会将所有三个标签一次添加到项目中。

可交付成果

以下是一些屏幕截图示例。您完成的交付成果将会有所不同，并包含所需的功能。

带类别的新项目页面

类别页面

类别 显示页面

---

原文来自：TP钱包--下载_最新TokenPocket钱包--|你的通用钱包