从 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 开发环境目前还不稳定,本项目依然处于开发和维护阶段,后期可考跟进和优化。

相关推荐
Mr_Mao34 分钟前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜052 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~3 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.4 小时前
serviceWorker缓存资源
前端
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo5 小时前
ES6笔记2
开发语言·前端·javascript
yanlele5 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
ai小鬼头5 小时前
Ollama+OpenWeb最新版0.42+0.3.35一键安装教程,轻松搞定AI模型部署
后端·架构·github
萧曵 丶6 小时前
Rust 所有权系统:深入浅出指南
开发语言·后端·rust
中微子6 小时前
React状态管理最佳实践
前端