上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

【Remix教程翻译】开发者博客(三)

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    633

    主题

    5173

    回帖

    6052

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6052

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-11-27 19:34:46 | 显示全部楼层 | 阅读模式

    从数据库中提取数据

    在India Stack模板项目中,我们已经设置并配置了一个Sqlite数据库,所以让我们在Sqlite中更新我们的数据库,我们使用Prisma与数据库进行交互,Prisma是Nodejs的Orm,具有良好的Typescript支持,如果你有更多的兴趣可以参阅官网
    https://www.prisma.io/
    如果你没什么性趣也可以继续往下看
    因为我会对几乎所有Prisma的命令做进一步的补足
    并且使用 Remix 时不必使用 Prisma。Remix 可与您当前使用的任何现有数据库或数据持久性的服务来配合使用


    Prisma 将负责更新我们的数据库以匹配我们的结构(以及生成和运行迁移所需的 SQL 命令)
    首先,我们需要更新我们的 Prisma 模式:
    在prisma\schema.prisma
    补充:我们可以在对应的IDE来寻找Prisma Schema插件来做更好的语法支持和检查
    文件下方添加
    这是Prisma的专属结构
    我们声明该结构与数据库进行交互
    model表示这是Prisma的数据模型
    slug title等表示字段
    String表示是字符类型
    DateTime 是时间类型
    @id表示该字段是这个数据模型的唯一标识,用于找到每行的数据
    @default代表默认提交什么属性,now()表示当前时间
    @updatedAt默认自动存储上次更新记录的时间。

    model Post {
      slug     String @id
      title    String
      markdown String
    
      createdAt DateTime @default(now())
      updatedAt DateTime @updatedAt
    }

    现在让我们使用Prisma来更新数据库以及生成TS类型支持来匹配最新的数据模型
    调用命令npx prisma db push来完成上诉的操作
    输入会提示

    Environment variables loaded from .env
    Prisma schema loaded from prisma\schema.prisma
    Datasource "db": SQLite database "data.db" at "file:./data.db?connection_limit=1"
    
    The database is already in sync with the Prisma schema.
    
    ✔ Generated Prisma Client (4.6.1 | library) to .\node_modules\@prisma\client in 47ms

    The database is already in sync with the Prisma schema.
    数据库已经与Prisma的schema同步并已经生成Prisma Client用于我们Js来操作数据库
    现在让我们来设置几篇文章来为数据库播种,播种类似于数据库初始化数据,允许我们在数据库始终创建相同的数据,用于启动程序的时候填充所需的数据,如默认语言或者货币,或开发环境验证数据以及使用应用程序的基本数据。
    更详细可以参考
    https://www.prisma.io/docs/guides/database/seed-database
    我们开始尝试播种
    打开prisma\seed.ts
    在上方写入posts数据
    图片.png

    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(),
      },
    ];

    然后在console.log(Database has been seeded. 🌱)上方写下
    用于调用prisma插入每条数据,如果因为调用的是upsert同时里面用where判断了是否存在
    所以如果存在则会更新,如果不存在则会直接插入
    注意
    根据测试按照官方输入可能有时候数据库不会出现Posts表,同时存在类型错误提示,这个时候请重新运行一遍npx prisma db push命令
    关于数据库的查看请使用Navicat软件

      for (const post of posts) {
        await prisma.post.upsert({
          where: { slug: post.slug },
          update: post,
          create: post,
        });
      }

    写好代码后调用npx prisma db seed,将会为数据库插入数据
    图片.png
    然后生成一个数据库迁移文件,如果需要部署到线上,而不是仅仅在本地开发,这是必须的,我们需要运行
    npx prisma migrate dev命令
    该命令会生成迁移文件的历史记录,并且在sql的开发和部署中起作用
    保证数据库模式随着Prisma同步变化,并且随着其发展维护数据库中现有数据的作用
    如果你对迁移命令有更多兴趣可以参考
    https://www.prisma.io/docs/concepts/components/prisma-migrate/migration-histories
    https://www.prisma.io/docs/concepts/components/prisma-migrate
    你也可以在创建迁移文件的时候使用名称,在以后的日子里来回顾自己所作的更改,所以可以使用名称create-post-model来为迁移文件命名
    现在让我们来更改app/models/post.server.ts,让他从Sqlite来读取文章数据
    将文件修改为

    import { prisma } from "~/db.server";
    
    export async function getPosts() {
      return prisma.post.findMany();
    }
    

    prisma为调用~/db.server导出的prisma,post为找到post表,之后调用findMany来找到所有的数据。
    我们在这个时候没有提供TS类型了,因为Prisma会在model生成后自动生成Ts类型,减少我们的手动输入,并且提供更多的类型安全!
    这里的~/db.server导入的是app/db.server.ts,其中~是app目录的别名,因此并不需要考虑使用多少个../../
    现在Prisma已经出现更新,我们需要重新启动服务器,关闭目前的启动,然后重新调用npm run dev
    我们只需要在更改prisma的model以及更新prisma的client-js文件的时候才需要重新启动,并不需要在开发的过程中重新启动开发服务器,这是十分让人开心的!
    服务再次启动并且运行的时候,可以访问http://localhost:3000/posts,这个时候帖子依然存在,但是现在他们已经从数据库中读取了!

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    6 天前
  • 签到天数: 119 天

    [LV.6]常住居民II

    29

    主题

    598

    回帖

    535

    积分

    专家

    积分
    535

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-11-27 20:45:56 | 显示全部楼层
    哥哥我原来性趣很浓能打自己肚皮的那种
    这咋文章越读越吃力了,有点跟不上
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    633

    主题

    5173

    回帖

    6052

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6052

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-11-27 21:08:53 | 显示全部楼层
    脚本体验师001 发表于 2022-11-27 20:45
    哥哥我原来性趣很浓能打自己肚皮的那种
    这咋文章越读越吃力了,有点跟不上 ...

    哥哥哪里没看懂我继续补充一下
    我照着官方看的一开始也没看懂...
    最后参考了很多资料和文档才理解的= =
    搞了两三篇文章其实翻译第一篇一半不到...
    本质上来说它的这个文章就是介绍怎么前后端用remix一起合起来
    (吐槽:第一篇号称15分钟入门

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    633

    主题

    5173

    回帖

    6052

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6052

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-11-27 21:13:38 | 显示全部楼层
    脚本体验师001 发表于 2022-11-27 20:45
    哥哥我原来性趣很浓能打自己肚皮的那种
    这咋文章越读越吃力了,有点跟不上 ...

    这玩应一篇聚合了ssr+ts+prism+react....
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    6 天前
  • 签到天数: 119 天

    [LV.6]常住居民II

    29

    主题

    598

    回帖

    535

    积分

    专家

    积分
    535

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-11-27 22:34:14 | 显示全部楼层
    这玩意聚合的知识太多,哥哥继续往前走,弟弟们慢慢跟就是了
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    290

    主题

    3881

    回帖

    3797

    积分

    管理员

    积分
    3797

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-11-28 00:12:31 | 显示全部楼层
    ggnb!高产似母猪!
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表