从 0 开始用 Remix 开发一个全栈官网项目

一、前言

本项目实战 Remix 全栈框架，目标是企业官网项目。难度 🌟🌟。本项目在持续更新中。

二、技术栈

Remix/Vite(目前还不稳定)
TailwindCSS 前端样式
Antd/ProComponents UI 管理端
Prisma/Sqlite 本地数据库
Vitest 单元测试
使用 Remix Session/Cookie 进行授权认证

三、模块设计

Remix 全栈可以让我们在一个项目里面，写两个端，管理端和PC端代码可以放在一起。

首页
登录/注册
新闻模块
产品模块
系统管理模块

ruby 复制代码

├── $.tsx
├── login.tsx
├── logout.tsx
├── register.tsx
├── test.icons.tsx
├── test.tsx
├── upload.tsx
├── _a.admin.dashboard.tsx
├── _a.admin.news.create.tsx
├── _a.admin.news.edit.$id.tsx
├── _a.admin.news.list.tsx
├── _a.admin.production.create.tsx
├── _a.admin.production.edit.$id.tsx
├── _a.admin.production.list.tsx
├── _a.admin.profile.tsx
├── _a.admin.system.menu.tsx
├── _a.admin.system.role.tsx
├── _a.admin.system.user.tsx
├── _a.tsx
├── _main.about.tsx
├── _main.culture.tsx
├── _main.join.tsx
├── _main.news.tsx
├── _main.news_.$id.tsx
├── _main.pattern.tsx
├── _main.production.tsx
├── _main.production_.$id.tsx
├── _main.tsx
└── _main._index.tsx

四、程序设计

本项目目前阶段注重全栈，UI 设计不是重点，程序设计才是重点。

基于 Remix 全栈设计与实战
基于角色的程序设计：User -> Role -> Menu 用户与角色相关联，角色与菜单关联。不同的用户有不同过的角色。

五、前端

前端的特点是利用 Remix + SSR 的特性，配合TailWindCSS 快速的页面构造。

首页
新闻/详情
产品/详情
关于我们
企业文化
加入我们
合作伙伴

六、管理端

Remix（ClientOnly） + Antd 快速构建管理端接口

登录/注册
dashboard 管理页
系统管理（管理员）: 菜单/角色/用户
新闻相关: 列表/添加/修改
产品相关: 列表/添加/修改
个人信息

七、数据库与 ORM

数据库为了简单起见采用 SQLite 作为数据库，使用 Prisma 作为 SQLite 数据库的 ORM。

Prisma CLI操作

Prisma 操作数据库：

初始化
迁移
种子文件

sh 复制代码

npx prisma init --datasource-provider sqlite

npx prisma migrate dev

pnpm run seed # 种子文件

Prisma ORM 设计

模型关联
模型子关联
菜单处理

八、测试

本项目预计使用 Vitest/@testing-library/react，目前暂时没有考虑使用 e2e，如果需要 e2e 可以考虑cypress。

Remix 测试： @remix-run/testing
单元测试：UI 组件测试（包含 UI 快照测试）
工具函数测试

九、地址

🚀Github 仓库地址：remix-website

🚀Gitee 仓库地址：remix-website

十、小结

本项目主旨是快速的开始一个 Remix 的全栈企业官网项目，打通前后端。要学习本项目要求读者对 React/Remix 有一定的了解。对 SQLite 数据库基本操作和 Prisma 有一定的了解。由于 Remix 的 Vite 开发环境目前还不稳定，本项目依然处于开发和维护阶段，后期可考跟进和优化。