想不到吧，我还会前端框架，还是类比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 postIsn'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