image.png

本教程可以全面来哦姐Remix中主要的API，到最后你会得到一个完整的应用程序。

我将会基于上一章节的源码及官方文档的实例进行演示

项目结构

  1. 项目文件夹
  2. ├── README.md
  3. ├── app 应用代码文件夹
  4. │   ├── entry.client.tsx 在浏览器加载时运行
  5. │   ├── entry.server.tsx 在请求到达服务器时运行 Remix负责加载所有必要的数据，而你则负责发送响应，我们将使用这个文件将React应用渲染成字符串/流，并将其作为我们的响应内容发送到客户端
  6. │   ├── root.tsx 应用程序跟组件 在这里渲染元素
  7. │   └── routes 所有路由模块的位置Remix使用这个目录中的文件，根据文件名作为应用的URL路由
  8. │   └── utils
  9. │   └── styles
  10. ├── package.json
  11. ├── public 存放静态文件/图片/字体
  12. │   └── favicon.ico
  13. ├── remix.config.js remix配置选项
  14. ├── remix.env.d.ts
  15. └── tsconfig.json

路由

以下是我们的应用程序新增的路由

  1. /jokes joke主页
  2. /jokes/:jokeId joke内容
  3. /jokes/new 新增joke
  4. /jokes/login 登陆joke

css

加载css资源

在Remix中不像传统react开发那样直接import css文件就能直接使用 而是需要将引入的文件导出为links

  1. 例如
  2. app/root.tsx
  4. import globalStylesUrl from "~/styles/global.css";
  5. export const links: LinksFunction = () => {
  6.   return [
  7.     { rel: "stylesheet", href: globalStylesUrl },
  8.   ];
  9. };

首先这个操作可以在每个路由文件内使用，路由文件？没错你猜对了，这样每个路由就可以有自己的独立的css文件了，路由切换时不同的路由加载不同的link css，至于全局样式，那可以写在global.css内并在root.tsx加载它

这意味着你在写CSS的时候不必担心意外的CSS冲突。你可以写任何你喜欢的东西，只要你检查你的文件内的links，你就会知道你没有影响到其他页面 🔥

这也意味着你的CSS文件可以被长期缓存，而且你的CSS是自然的代码分割。性能FTW ⚡

数据库

在这一步，我会演示在Remix中如何连接数据库，因为我有一个mysql云数据库所以在这里我就不展示如何在自己的电脑上安装数据库了。

Prisma：下一代的ORM

它是什么

ORM全称是：Object Relational Mapping(对象关系映射)，其主要作用是在编程中，把面向对象的概念跟数据库中表的概念对应起来

举个栗子🌰 例如我想插入一条数据在user表内 我可以直接写SQL语句
INSERT INTO user1(name) VALUES(“the5fire”);
但这样太麻烦了，为什么不简单点 直接把sql语句变成对象一样操作
user.save()

这里放一张官方的图，来大致了解下Prisma和ORM、SQL、Query Builder的能力比较：
image.png

设置Prisma

安装：
npm install --save-dev prisma
npm install @prisma/client
初始化
npx prisma init --datasource-provider mysql

数据库建表

本地配置数据库账号密码

  1. // 根目录下 .env文件 也可以在vercel设置环境变量 然后就可以 gitignore .env文件了
  2. DATABASE_URL="mysql://<username>:<password>@<host | localhost>:<port>/<database_name>"

读取数据库并自动生成schema
npx prisma db pull
生成客户端
npx prisma generate

拉取数据库生成 prisma schema

npx prisma db pull
执行完以上步骤后你会发现在本地多了一个prisma文件夹下面还有一个chema.prisma文件

连接数据库
在开发环境中，我们不想每次进行代码修改时都关闭并完全重新启动服务，但问题是我们每次代码更改时都会重新连接数据库，并最终占满连接次数上限

  1. // app/utils/db.server.ts
  2. import { PrismaClient } from "@prisma/client";
  4. let db: PrismaClient;
  6. declare global {
  7.   var __db: PrismaClient | undefined;
  8. }
  10. if (process.env.NODE_ENV === "production") {
  11.   db = new PrismaClient();
  12.   db.$connect();
  13. } else {
  14.   if (!global.__db) {
  15.     global.__db = new PrismaClient();
  16.     global.__db.$connect();
  17.   }
  18.   db = global.__db;
  19. }
  21. export { db };

mutations

身份验证

意料之外的错误

意料之中的错误

SEO和meta标签

静态资源路由

客户端是否需要加载JavaScript文件

部署

总结