最近在JavaScriptWeekly上看到Remix.run（以下简称Remix），准备开源1.0版本。不到两天时间，Remix就飙升至GithubTrending趋势榜首。感觉已经很流行了。不知道以后跟Next.js比起来怎么样。不过看起来也不算太复杂，封装了很多东西，语法也很轻量。于是准备学习，顺便做一些学习笔记。创建项目从npm下载最新版本的remix并生成项目。npxcreate-remix@latest？你想在哪里创建你的应用程序？my-cv我要做一个网页应用，用来展示简历，动态展示项目经历。这个还是有点需求，不然就是demo了。毕竟没有需求。不能好好学习。而且SSR（ServerSideRender）的特性方便SEO，最适合展示动态数据的应用。将其命名为my-cv。？你想部署在哪里？如果您不确定，请选择Remix，更改部署目标很容易。RemixAppServerExpressServerArchitect(AWSLambda)Fly.ioNetlifyVercelCloudflareWorkers当然选择原始的RemixAppServer？TypeScript还是JavaScript？TypeScriptJavaScript我选择了TypeScript。其实我个人的项目一般不会选择TypeScript，但是这次还是需要学习以下内容，所以我尝试比较正式的模拟一下。对于个人开发者来说，TypeScript弊大于利。虽然可以有效减少错误和发现错误的时间成本，但是在开始项目时需要花费更多的时间来准备定义类型等。还有一些不支持TS的冷门库很难找到。风险。？你想让我运行npminstall吗？Y最后安装它。启动项目进入项目目录cdmy-cv启动看到这里npmrundevNodeversion12会报错，16没问题。“找不到@remix-run/serve。请确认您已安装它以使用dev命令。”您可以访问http://localhost:3000。直接有一个Demo，展示了路由的各种状态，比如404、401、带参数的路由。您可以保留它以供参考或将其删除。创建页面的demo样式还可以，我就保留了。反正自己写风格对于学习Remix意义不大。于是我把导航改成了中文，然后把第二个页面改成新的路由，以后可以新建用来展示简历。然后第三个Github连接改成自己的。

• 首页
• 简历
• GitHub

然后，创建相应的页面。mkdirapp/routes/resumetouchapp/routes/resume/index.tsx并填写一些静态文本、名称和描述。还有技巧，这个可以通过加载动态数据来实现，先做前端部分，直接从字面量返回。使用useLoaderData返回数据。从“remix”导入类型{LoaderFunction}；从“remix”导入{useLoaderData，json}；类型ResumeData={skills：Array<{name：string}>；}；导出constloader：LoaderFunction=()=>{const数据：ResumeData={skills:['JavaScript','CSS/HTML','React','Remix']};returnjson(data);}exportdefaultfunctionResumeIndex(){constresume=useLoaderData();return(

张铮铮

全栈开发者，高级顾问，自由职业者。

{resume.skills.map((skill,index)=>({index!==0?',':''}{skill.name}))}

);}注意：这里的loader是在结束API之后hookuseLoaderData被调用，所以我看不到使用。我还为页面的动态数据定义了ResumeData类型，其中包含技能。使用数据库ORM下一步就是找一个ORM，把数据完整的放到数据库里。我选择了Prisma，npminstall--save-devprismanpminstall@prisma/client来初始化ORMnpxprismainit--datasource-providermysql我选择了mysql，可以直接使用SQLLitenpxprismainit--datasource-providersqlite。然后设置DATABASE_URLmysql://:@:/在添加的.env文件中执行npxprismadbpull读取数据库并自动生成schema。然后执行npxprismagenerate生成客户端。这样ORM可以与以下代码一起使用。import{PrismaClient}from'@prisma/client'constprisma=newPrismaClient()建表我是提前建好技能表的，所以刚才拉的时候，prisma/schema.prisma文件里面有模型。模型技能{idInt@id@default(autoincrement())nameString?@db.VarChar(30)}如果数据库中没有表，先把modelschema写到这里，然后执行npxprismadbpush在数据库中创建表，在中创建对应的表。记得在.gitignore中添加.env。如果使用SQLite，还有/prisma/xxx.db。插入数据为初始数据创建prisma/seed.ts文件。从“@prisma/client”导入{PrismaClient}；让db=newPrismaClient()；asyncfunctionseed(){awaitPromise.all(getSkills().map(joke=>{returndb.skills.create({data:笑话});}));}seed();functiongetSkills(){return[{name:'JavaScript'},...]}安装ts-node包并执行种子。npminstall--save-devts-node为了方便，在package.json中添加"prisma":{"seed":"ts-nodeprisma/seed.ts"}，然后执行seednpxprismadbseed在app中使用数据目录下创建utils目录，文件utils/db.server.tsimport{PrismaClient}from"@prisma/client";letdb:PrismaClient;declareglobal{var__db:PrismaClient|undefined;}if(process.env.NODE_ENV==="production"){db=newPrismaClient();db.$connect();}else{if(!global.__db){global.__db=newPrismaClient();global.__db.$connect();}db=global.__db;}出口{分贝};与开发环境不同的是连接实例被缓存了，这样每次重启就不会在之前的resume/index.tsx页面中使用了。import{db}from"~/utils/db.server";~默认配置在Remix模板中的tsconfig.json中，代表app目录。更新加载器方法exportconstloader:LoaderFunction=async()=>{constdata:ResumeData={skills:awaitdb.skills.findMany()};returndata;}这样基本的Remix过程就可以完成。从数据库到页面。此外，我还更换了原来的标志。GoogleDrawings非常容易用于制作svg。代码放在Github上，后面会继续，可能和正文有出入。