共计 4047 个字符,预计需要花费 11 分钟才能阅读完成。
想不到吧,我还会前端框架,还是类比 next.js 的框架。这个也算机缘巧合,为了晋升工作效率,保护了一个共事基于 remix 开发的小工具。感觉还挺好玩的,就想着联合官网文档写个初入门文章 ( 重点是共事交接给我后,不给我文档,只能去看官网文档)。
重点还是和之前的 mermaid 一样,次要跟大家讲下有这个货色,如果讲得不正确以官网为主。
什么是 Remix
Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.
老套路,一句话总结,就是全栈式的前台框架,而后再提前剧透下,因为在援用里是没有写的,remix 还应用了 Prisma,一个号称下一代 Node.js 和 TypeScript 的 ORM 数据库。
官网举荐的环境前提:
- Node.js version (^14.17.0, or >=16.0.0)
- npm 7 or greater
- A code editor (VSCode is a nice one)
好,先疾速搭建一个 helloworld 工程
npx create-remix@latest --template remix-run/indie-stack blog-tutorial
之后按需抉择,比方工程的目录名需不需要自定义,整体语言应用 js 还是 ts,最初一步需不需要帮你运行npm install
。最初这个我选的是否,因为我想用 pnpm。
最初在运行前记得吧工程目录下.env.example
文件改名为.env
,否则会始终报短少环境变量的错,就算应用npx prisma migrate deploy
也不行。最初关上localhost:3000
,呈现一下界面即为胜利
创立第一个路由
首先批改下主界面
<div className="mx-auto mt-16 max-w-7xl text-center">
<Link
to="/posts"
className="text-xl text-blue-600 underline"
>
Blog Posts
</Link>
</div>
回到界面点击必定是 404 的,因为都还没有 posts 的路由,所以接下来就是去创立路由,在 app/routes 下创立一个 posts 的文件夹。留神,这里的目录名和下面代码的名字要一样,换句话说,是依据目录名去渲染路由的。
在 posts 文件夹上面再创立一个index.tsx
的文件
export default function Posts() {
return (
<main>
<h1>Posts</h1>
</main>
);
}
回去界面从新点击下链接
加载数据
静态数据
上一步就是简略入门了,接下来讲下怎么加载用户数据,提前剧透下,加载数据用到的是 useLoaderData
这个 hook.
这个 hook 是在加载路由的就会渲染数据,当初给前一步的主界面增加静态数据
import {json} from "@remix-run/node";
import {Link, useLoaderData} from "@remix-run/react";
export const loader = async () => {
return json({
posts: [
{
slug: "my-first-post",
title: "My First Post",
},
{
slug: "90s-mixtape",
title: "A Mixtape I Made Just For You",
},
],
});
};
export default function Posts() {
// 通过 useLoaderData 这个 hook 渲染静态数据,拿到静态数据
const {posts} = useLoaderData<typeof loader>();
console.log(posts);
return (
<main>
<ul>
{posts.map((post) => (<li key={post.slug}>
<Link
to={post.slug}
className="text-blue-600 underline"
>
{post.title}
</Link>
</li>
))}
</ul>
</main>
);
}
原理在下面正文中也说过了,当初再次点击 posts 界面的链接,看下是否有两个超链接
减少后盾
一般来说读数据和写数据都是后盾的工作,前台只是调用接口或者调用办法去获取数据。还记得吗,后面介绍 remix 的时候就说过是这个全栈式框架,所以解析来吧博客数据放到后盾中。
在下图目录下创立一样的文件
内容如下:
type Post = {
slug: string;
title: string;
};
export async function getPosts(): Promise<Array<Post>> {
return [
{
slug: "my-first-post",
title: "My First Post",
},
{
slug: "90s-mixtape",
title: "A Mixtape I Made Just For You",
},
];
}
再来革新下posts 路由的 index 主界面,这样就可能从 remix 的后盾中取数据了。
数据库
后面同样提到过,remix 集成了 prisma,也就是说能够从数据库获取数据,首先得在数据库中新增一个表,批改以下文件
model Post {
slug String @id
title String
markdown String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
批改后记得更新下数据库,执行npx prisma db push
。
批改后记得更新下数据库,执行npx prisma db push
。
批改后记得更新下数据库,执行npx prisma db push
。
接下来和静态数据差不多,咱们 先预置表数据 ,这一步须要批改的是 seed.ts,seed 是收获的意思,就是种下咱们预置的数据。留神下官网给的数据结构,是有 文章题目和文章内容 的。
const posts = [
{
slug: "my-first-post",
title: "My First Post",
markdown: `
# This is my first post
Isn't it great?
`.trim(),},
{
slug: "90s-mixtape",
title: "A Mixtape I Made Just For You",
markdown: `
# 90s Mixtape
- I wish (Skee-Lo)
- This Is How We Do It (Montell Jordan)
- Everlong (Foo Fighters)
- Ms. Jackson (Outkast)
- Interstate Love Song (Stone Temple Pilots)
- Killing Me Softly With His Song (Fugees, Ms. Lauryn Hill)
- Just a Friend (Biz Markie)
- The Man Who Sold The World (Nirvana)
- Semi-Charmed Life (Third Eye Blind)
- ...Baby One More Time (Britney Spears)
- Better Man (Pearl Jam)
- It's All Coming Back to Me Now (Céline Dion)
- This Kiss (Faith Hill)
- Fly Away (Lenny Kravits)
- Scar Tissue (Red Hot Chili Peppers)
- Santa Monica (Everclear)
- C'mon N' Ride it (Quad City DJ's)
`.trim(),},
];
for (const post of posts) {
await prisma.post.upsert({where: { slug: post.slug},
update: post,
create: post,
});
}
写完种子后记得运行命令行进行收获,npx prisma db seed
。还记得后面加载静态数据的时候,后盾是怎么拜访数据的吗,是写定了的,当初咱们减少数据库之后,让后盾从数据库中读取数据。这里插一句题外话,这篇文章不是讲的 prisma,所以 prisma 的相干语法须要各位小伙伴本人钻研,或者后续也会出一篇文章。(斜眼笑)
批改内容如下
export async function getPosts(): Promise<Array<Post>> {return await prisma.post.findMany();
}
回去看 posts 路由,如果失常那就阐明没啥问题,同一张图我就不反复贴了。
动静路由
如果好奇心比拟大的同学,在 posts 界面点击文章的时候就会发现 404 了,那是很失常的,因为咱们没有对应的路由嘛。而对于博客来说,个别路由都是间接跟博客名相干的,remix 同样提供了动静路由的性能。
创立一个动静路由的文件,touch app/routes/posts/$slug.tsx,而后批改文件内容
export default function PostSlug() {
return (
<main className="mx-auto max-w-4xl">
<h1 className="my-6 border-b-2 text-center text-3xl">
Some Post
</h1>
</main>
);
}
失常状况下点击路由应该就能看到Some Post
界面,然而写到这里的时候发现不行,不能展现,始终都是 404。搜了一波发现是remix 出了 v2 的版本,感兴趣的同学能够本人钻研钻研,v2 其中一个就是扁平化了路由。
本文只是介绍 remix,就 基于 v1 的个性 来讲就好了
此时点击链接应该就能看到正确的界面了。因为篇幅无限,下篇更精彩。
参考文献
Blog Tutorial (short) | Remix