现在,您登录的几乎每个应用程序都有一个仪表板。它们中的大多数都是用React或Angular等现代框架构建的,并且有某种后端来支持它们。用户依靠这些仪表板来检查他们的帐户信息、更新他们的业务以及处理许多其他操作。
在本教程中,我们将使用Redwood为管理系统制作一个用户面板。用户可以采取一些操作将其他用户添加到具有不同角色的帐户中。仪表板还允许用户将新项目添加到其库存中,这些项目将附加到不同的位置。
让我们以红木为背景开始吧。
什么是Redwood
Redwood是一个使用Prisma、React和GraphQL构建的全栈框架。它有很多功能和一些命令,我们将使用这些功能快速制作这个应用程序。如果你有兴趣了解更多关于红木的信息,一定要查看他们的文档。
设置项目
现在,让我们开始设置我们的仪表板。我们将通过运行以下命令来引导此应用程序。只是提醒一下,它可能需要几分钟才能完成,但值得等待。
yarn create redwood-app ./redwood-dashboard
当命令执行完毕后,您会注意到您有相当多的文件夹和文件。最重要的文件夹是api目录和web目录。api目录保存后端和数据库的所有代码,而web目录保存前端的所有代码。
在我们开始使用该应用程序之前,您应该先运行它,看看它是如何工作的。使用以下命令启动前端和后端。
yarn rw dev
以下是您应该在浏览器中看到的内容。
基本红木应用程序
定义仪表板模型
既然您已经看到了该应用程序的运行情况,让我们开始利用Redwood的一些命令在后端工作。我们将首先为仪表板制作一个Prisma模型。这就是我们的应用程序连接到Postgres数据库的方式。在api>db内部,打开schema.prisma文件。
在这里,我们将使用几种不同类型的关系为数据库中所需的表创建模式。您将看到Redwood已经设置了一些配置和一个用户模型的示例。
我们将把数据源数据库提供程序更改为postgresql,您可以在下面的代码片段中看到。
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
然后,我们将删除TODO并更新示例用户模型。
model User {
id Int @id @default(autoincrement())
email String @unique
name String
role String
}
我们更新的用户模型有几个列,用于存储关于用户的信息。电子邮件字段有一个约束,即它必须始终是唯一的值。同一个电子邮件地址不能多次出现在数据库中。接下来,我们将为Item和Location表添加一个新模型。这些需要同时创建,因为它们彼此之间有关系。
model Item {
id Int @id @default(autoincrement())
sku String @unique
name String
location Location @relation(fields: [locationId], references: [id])
locationId Int
}
model Location {
id Int @id @default(autoincrement())
name String
district Int
Item Item[]
}
然后,我们将更新seed.js文件,以便在启动应用程序之前存在一些值。这在产品面板上很常见,用于填充下拉选项或初始化用户可以添加到不同设置中的标记。我们将添加一个用户、一个项目和一个位置来为我们的数据库播种。提醒一下,我已经从这个文件中删除了很多评论。
/* eslint-disable no-console */
const { PrismaClient } = require('@prisma/client')
const dotenv = require('dotenv')
dotenv.config()
const db = new PrismaClient()
async function main() {
console.warn('Please define your seed data.')
await db.user.create({
data: { name: 'Kaiya', email: 'best@test.com', role: 'inventory' },
})
await db.location.create({
data: { name: 'Compound North', district: 1 },
})
await db.item.create({
data: {
name: 'Morning Glory',
sku: 'hf8029ht8942ht8429pht8p942p',
locationId: 1,
},
})
}
main()
.catch((e) => console.error(e))
.finally(async () => {
await db.$disconnect()
})
有了模式和种子数据,我们几乎可以运行第一次迁移了。在我们这样做之前,我们需要连接到数据库。因此,在项目根目录的.env文件中,更新DATABASE_URL以匹配Postgres实例。它看起来和这个相似。
DATABASE_URL=postgres://postgres:admin@localhost:5432/dashboard
如果你没有本地的Postgres实例,你可以很快在这里下载。
现在,我们将使用以下内容运行迁移:
yarn rw prisma migrate dev
这将提示您输入迁移名称,创建数据库和表,并添加种子数据。如果您通过pgAdmin查看数据库,您会看到这样的内容。
pgAdmin中的种子数据库
现在您已经准备好了数据库,可以存储和发送我们需要的值,让我们转到后端和前端。
添加后端和前端
Redwood有一个特殊的命令,它为我们做了很多工作。它将为从前端组件到后端GraphQL查询、类型和突变的表创建整个CRUD。我们将利用这一点来充分利用我们的仪表板。让我们从以下命令开始。
yarn rw g scaffold user
这将生成几个页面、组件和GraphQL文件,以处理仪表板用户部分的所有CRUD操作。查看web > pages。您应该看到一个名为User的新目录。这包含了我们需要处理的所有关于用户的页面。
现在查看web > components。将有另一个用户文件夹。这个包含了我们用来与GraphQL服务器交互的组件。大多数数据都是在这些组件中提取的,请求是从这些组件发送的。
web > layouts文件夹还将有一个新目录,其中包含用户页面的布局文件。这就是您可以为一组特定页面创建样式的方法。
在Routes.js文件中,您将看到UserLayout中为用户包装了一组新的路由。生成的所有页面也会将其路由自动添加到其父布局内的该文件中。
在api目录中还生成了一些新文件。如果您在api>src>graphql中查看,您会发现用于所有所需CRUD操作的graphql模式,并且类型已由schema.prisma文件中的模型定义。
然后在api > src > services
,中,您将找到模式中定义的查询和突变的所有GraphQL解析器。
所有这些页面、组件、类型和解析器都是由Redwood命令生成的。让我们使用yarn rw-dev运行该应用程序,这样您就可以看到所有这些工作。如果你在浏览器中转到用户页面,你应该会看到类似的内容。
主页现在将返回404,因为我们还没有为该路由添加组件。我们稍后会这样做,但/users页面仍然可以工作。
您可以使用页面上的按钮添加新用户、更新当前用户或删除当前用户。
我们将再运行两次scaffold命令,以生成项目和位置的CRUD。
yarn rw g scaffold location
yarn rw g scaffold item
现在,我们已经拥有了用户面板所需的所有操作。我们需要做几件事来给这个仪表板一个更真实的感觉。我们将添加一个主页和一个布局,以帮助我们在仪表板的各个部分之间导航。
制作主页
让我们从添加样式化组件包开始,因为我们将使用它来样式化一些东西。首先,转到终端中的web目录。这就是这个软件包需要安装的地方。
yarn add styled-components
现在让我们运行一个神奇的Redwood命令来生成主页及其路由。
yarn rw g page home /
这将在web > src > pages中为主页组件创建一个新目录,并将一个新路由添加到Routes.js。您可以在此处重新运行应用程序以查看新主页。在浏览器中会是这样的。
新主页
现在我们已经有了主页,让我们制作一个适用于此页面和迄今为止所有其他页面的布局。当然,有一个Redwood命令可以处理这个问题。
yarn rw g layout home
这将为我们的主页在web > src > layouts中创建一个新文件夹。我们将在HomeLayout组件中使用一些样式化的组件来创建侧导航菜单,并为面板提供一个小的定义。我们还将使用红木路由在侧边导航中添加到其他页面的链接。
import { Link, routes } from '@redwoodjs/router'
import styled from 'styled-components'
const HomeLayout = ({ children }) => {
return (
<FlexBox>
<SideNav>
<LinkContainer>
<Link to={routes.users()}>Users</Link>
</LinkContainer>
<LinkContainer>
<Link to={routes.locations()}>Locations</Link>
</LinkContainer>
<LinkContainer>
<Link to={routes.items()}>Items</Link>
</LinkContainer>
</SideNav>
<FullPage>{children}</FullPage>
</FlexBox>
)
}
const FlexBox = styled.div`
display: flex;
`
const FullPage = styled.div`
height: 100vh;
width: 100%;
`
const LinkContainer = styled.div`
padding: 12px;
> * {
color: #000;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}
> *:hover {
color: #5b5b5b;
}
`
const SideNav = styled.nav`
border-right: 1px solid;
width: 250px;
`
export default HomeLayout
接下来,我们需要将此布局应用于应用程序中的所有页面。我们将在Routes.js文件中执行此操作。这意味着在所有现有路线周围添加一个<Set>组件,如下所示。
...
<Router>
<Set wrap={HomeLayout}>
<Route path="/" page={HomePage} name="home" />
<Set wrap={ItemsLayout}>
<Route path="/items/new" page={ItemNewItemPage} name="newItem" />
<Route path="/items/{id:Int}/edit" page={ItemEditItemPage} name="editItem" />
<Route path="/items/{id:Int}" page={ItemItemPage} name="item" />
<Route path="/items" page={ItemItemsPage} name="items" />
</Set>
<Set wrap={LocationsLayout}>
<Route path="/locations/new" page={LocationNewLocationPage} name="newLocation" />
<Route path="/locations/{id:Int}/edit" page={LocationEditLocationPage} name="editLocation" />
<Route path="/locations/{id:Int}" page={LocationLocationPage} name="location" />
<Route path="/locations" page={LocationLocationsPage} name="locations" />
</Set>
<Set wrap={UsersLayout}>
<Route path="/users/new" page={UserNewUserPage} name="newUser" />
<Route path="/users/{id:Int}/edit" page={UserEditUserPage} name="editUser" />
<Route path="/users/{id:Int}" page={UserUserPage} name="user" />
<Route path="/users" page={UserUsersPage} name="users" />
</Set>
<Route notfound page={NotFoundPage} />
</Set>
</Router>
现在,如果您运行yarn rw-dev,您将看到这样的内容。
应用了全局布局的仪表板
如果你浏览侧面导航中的任何链接,你都会看到这样的内容。
具有布局的仪表板中的用户
我把多余的款式留给你。设计这个可以是一个完全独立的教程!
这可能感觉像是一个悬念,因为我们实际上并没有写太多代码,但这就是我喜欢Redwood的地方。你可以让大型应用程序快速启动并运行,一切正常。
已完成代码
您可以在这个代码沙盒( Code Sandbox)上签出前端,而无需连接到后端。
如果您想要前端和后端的所有代码,请查看redwood-user-dashboard
in this Git repo!!
结论
仪表板是许多应用程序的主要组成部分,因此了解如何快速创建仪表板很有帮助。红木是一个框架,可以帮助你开始这样的高级项目,它可以快速生成复杂的结构。
- 登录 发表评论