最新公告
  • 欢迎您光临IT之窗网，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！立即加入我们
    • 10年
    专注IT行业优质资源论坛共享
    开通会员
    升级SVIP

    前端全栈进阶 Nextjs打造跨框架SaaS应用(完结)

    2024-05-15 admin 前端开发 已售74次 关注165次 已收录
    前端全栈进阶 Nextjs打造跨框架SaaS应用(完结) 最后编辑:2024-09-08
    演示地址

    前端全栈进阶 Nextjs打造跨框架SaaS应用
    Nextjs + Tailwind + Trpc + DrizzleORM + Serverless， 从构思到部署 ，助你完成开发者到服务提供者的蜕变

    快速晋级“高薪”前端工程师，你准备好了吗？本课程将引领你使用Nextjs、Tailwind、Trpc、Drizzle ORM、Serverless等前沿技术，亲手打造稳健的云服务图片管理Saas应用。你将亲历从产品构思到实战开发、部署，再到盈利构思、线上优化全周期。多维度掌握全栈架构设计、跨框架组件开发、容器化部署管理、缓存服务、性能优化等高薪技能，助力你实现从开发者到服务提供者的进阶！成为行业急需的高薪人才！

    适合人群
    期望提升全栈能力、突破职场壁垒的开发者
    技术储备
    了解React基础 （如果有丰富的其他框架开发经验也可）
    了解 Node js基础
    熟悉数据库基本操作

    目录大纲：

    第1章 课程介绍
    4 节｜37分钟

    展开

    •  

      视频：
      1-1 快速晋级“高薪”前端工程师，你准备好了吗？
      试看
      09:51

    •  

      视频：
      1-2 为什么选择这个课题？因为全栈是前端的未来
      09:28

    •  

      视频：
      1-3 一个能完整展现全栈技术的SaaS项目
      08:52

    •  

      视频：
      1-4 实例调研，看看真实运行着的Saas系统
      08:14
    第2章 项目和技术介绍
    9 节｜89分钟

    收起

    •  

      视频：
      2-1 课程项目展示，通过这个项目你能学到什么？
      10:42

    •  

      视频：
      2-2 前端全栈技术选型梗概，你有哪些选择？
      10:59

    •  

      视频：
      2-3 Nextjs核心亮点技术剖析，为什么Nextjs能有这么多的使用量？
      14:07

    •  

      视频：
      2-4 新时代的Nextjs技术体验
      试看
      16:01

    •  

      视频：
      2-5 Saas的一大特征，第三方集成我们如何实现？
      05:13

    •  

      视频：
      2-6 为什么要考虑跨框架组件开发？我们有哪些选择
      09:28

    •  

      视频：
      2-7 样式方案选择，为什么Tailwind会是最后的赢家？
      14:39

    •  

      视频：
      2-8 其他技术选型梗概
      06:55

    •  

      图文：
      2-9 【知识图解】开发环境搭建
    第3章 创建项目搭建基础设施
    17 节｜263分钟

    收起

    •  

      视频：
      3-1 通过create next app命令来创建项目
      05:00

    •  

      视频：
      3-2 Shadcn ui + radix primitives，如何打造超强用户体验的组件
      18:47

    •  

      视频：
      3-3 第一个页面，创建App，如何利用TW的生态快速搭建
      09:00

    •  

      视频：
      3-4 通过docker安装数据库 ，更轻松搭建本地开发环境
      08:00

    •  

      视频：
      3-5 Why drizzle, Node ORM生态介绍（上）
      12:12

    •  

      视频：
      3-6 Why drizzle, Node ORM生态介绍（下）
      10:46

    •  

      视频：
      3-7 如何通过drizzle orm连接数据库？
      20:23

    •  

      视频：
      3-8 Auth是个麻烦的事情，next auth帮我们解决问题
      12:32

    •  

      视频：
      3-9 账号密码不安全？把gitlab ouath并集成到next auth（上）
      13:37

    •  

      视频：
      3-10 账号密码不安全？把gitlab ouath并集成到next auth（下）
      12:03

    •  

      视频：
      3-11 如何通过next auth保护你的特定路由？
      20:22

    •  

      视频：
      3-12 如何在Nextjs中实现API
      试看
      19:32

    •  

      视频：
      3-13 保证安全!用zod来做API校验
      16:44

    •  

      视频：
      3-14 zod+drizzle，无需重复声明的schema
      13:46

    •  

      视频：
      3-15 Trpc引入，全栈typesafe是怎么做到的
      25:16

    •  

      视频：
      3-16 TRPC context如何帮助我们管理服务
      18:46

    •  

      视频：
      3-17 TRPC在client端的集成
      26:01
    第4章 核心业务文件上传功能实现
    10 节｜124分钟

    展开

    •  

      视频：
      4-1 什么是云存储？AWS S3服务体验学习
      17:47

    •  

      视频：
      4-2 AWS不好申请？用腾讯云COS代替
      08:39

    •  

      视频：
      4-3 上传也是个麻烦事，Uppy如何帮我们解决核心逻辑？
      13:19

    •  

      视频：
      4-4 让我们开发一个基础的文件上传组件
      15:03

    •  

      视频：
      4-5 如何安全地在客户端上传文件到云服务？presigned url上传文件到COS
      18:57

    •  

      视频：
      4-6 上传的图片数据如何存储到数据库
      13:00

    •  

      视频：
      4-7 图片列表功能实现，直接预览内容
      14:07

    •  

      视频：
      4-8 上传变得更cool，如何通过拖拽来选择要上传的文件？
      16:05

    •  

      视频：
      4-9 更cool，如何通过复制粘贴来选择要上传的文件？
      07:03

    •  

      图文：
      4-10 【动手实践】学习aws sdk使用，修改presigned url生成参数看效果
    第5章 图片上传dashboard优化
    13 节｜177分钟

    展开

    •  

      视频：
      5-1 美化上传按钮，符合我们的调性
      05:25

    •  

      视频：
      5-2 引入dialog，用于上传前预览文件信息
      10:16

    •  

      视频：
      5-3 提升用户体验，让用户在上传前预览文件
      14:45

    •  

      视频：
      5-4 乐观UI的强大，上传完成实时更新图片列表
      14:06

    •  

      视频：
      5-5 停一停，整理一下代码
      13:51

    •  

      视频：
      5-6 提取预览文件组件
      12:04

    •  

      视频：
      5-7 无限滚动翻页，全栈角度带你看清实现细节-part2
      27:50

    •  

      视频：
      5-8 API支持后，如何在客户端实现无限滚动
      20:25

    •  

      视频：
      5-9 支持不同的排序规则
      13:43

    •  

      视频：
      5-10 针对单个图片的操作
      19:22

    •  

      视频：
      5-11 优化操作反馈
      05:17

    •  

      视频：
      5-12 图片访问优化功能，让你的图片可以定制并且快速访问
      19:16

    •  

      图文：
      5-13 【动手实践】支持查看被删除的图片
    第6章 文件管理功能实现
    11 节｜157分钟

    展开

    •  

      视频：
      6-1 功能讲解和界面设计
      03:37

    •  

      视频：
      6-2 nextjs parallel routes实现导航和内容分离
      15:33

    •  

      视频：
      6-3 如何确保只有当前用户能看到自己上传的文件
      07:14

    •  

      视频：
      6-4 更好得管理文件，让用户可以创建多个APP
      11:20

    •  

      视频：
      6-5 创建个表单还要写API？server action帮你轻松搞定
      13:03

    •  

      视频：
      6-6 如何处理server action报错的情况？
      12:47

    •  

      视频：
      6-7 点创建就要跳转页面？intercepting routes实现路由插入，帮你解决问题
      17:11

    •  

      视频：
      6-8 既然创建了这么多app，那么我们来切换一下吧
      12:57

    •  

      视频：
      6-9 用户需要管理自己得云存储，给他这个机会
      20:18

    •  

      视频：
      6-10 新建云存储，react-hook-form表单校验做起来（上）
      21:57

    •  

      视频：
      6-11 新建云存储，react-hook-form表单校验做起来（下）
      20:29
    第7章 成为Saas，开放给第三方服务
    9 节｜116分钟

    展开

    •  

      视频：
      7-1 我们可以为外界提供什么样的服务？
      03:02

    •  

      视频：
      7-2 第三方服务接入，生成API Key作于校验
      28:25

    •  

      视频：
      7-3 通过请求的API Key header来创建进行权限校验
      11:55

    •  

      视频：
      7-4 如何使用生成的API Key？让我们创建一个nuxt项目来试一试
      22:04

    •  

      视频：
      7-5 如何用pnpm mono repo来管理对外发布的package？
      12:20

    •  

      视频：
      7-6 在nuxt项目中集成api包
      08:17

    •  

      视频：
      7-7 在页面上发请求，修改cors
      07:55

    •  

      视频：
      7-8 客户端请求如何保证安全？signed token帮你解决
      21:07

    •  

      图文：
      7-9 【动手实践】将create presigned url改成使用sdk
    第8章 通用组件开发
    9 节｜135分钟

    展开

    •  

      视频：
      8-1 preact介绍，为什么preact很适合共享类组件
      06:26

    •  

      视频：
      8-2 创建一个最基础的upload button组件
      17:12

    •  

      视频：
      8-3 在vue里面使用preact组件？太神奇了吧！一个函数帮你解决.mp4
      21:23

    •  

      视频：
      8-4 上传业务逻辑接入，uppy封装
      17:36

    •  

      视频：
      8-5 把uppy和组件整合在一起，完成upload button组件
      13:24

    •  

      视频：
      8-6 再来一个dropzone组件练练手
      10:42

    •  

      视频：
      8-7 把dropzone组件也集成到nuxt项目中
      25:34

    •  

      视频：
      8-8 优化nuxt项目样式，完成一个像样地demo
      22:27

    •  

      图文：
      8-9 【动手实践】尝试把组件集成到其他技术栈的项目中
    第9章 优化功能
    9 节｜94分钟

    展开

    •  

      视频：
      9-1 打开一个不存在的app怎么处理？
      10:45

    •  

      视频：
      9-2 跳转登录之后回跳到dashboard页面
      03:58

    •  

      视频：
      9-3 暗黑色调主题切换
      11:07

    •  

      视频：
      9-4 优化dashboard排版，看起来更专业
      07:26

    •  

      视频：
      9-5 配置页面导航优化，增加返回按钮
      10:45

    •  

      视频：
      9-6 storage新增按钮完善
      01:28

    •  

      视频：
      9-7 配置页面样式优化
      20:37

    •  

      视频：
      9-8 让我们来定制一张图片的不同尺寸旋转
      27:36

    •  

      图文：
      9-9 【动手实践】没有上传文件时显示一个无文件提醒
    第10章 服务收费
    9 节｜94分钟

    展开

    •  

      视频：
      10-1 思考，一个合格的Saas是如何收费
      08:08

    •  

      视频：
      10-2 为用户增加plan字段
      11:33

    •  

      视频：
      10-3 限制免费用户的可上传文件数量
      14:03

    •  

      视频：
      10-4 想白嫖？plan升级弹框安排上
      11:16

    •  

      视频：
      10-5 限制免费用户可以创建的app数量
      06:30

    •  

      视频：
      10-6 Stripe介绍以及为什么选择Stripe
      05:11

    •  

      视频：
      10-7 接入Stripe来升级用户的plan
      05:20

    •  

      视频：
      10-8 检测用户付款结果来完成订单
      18:02

    •  

      视频：
      10-9 完成订单操作回调页面
      13:40
    第11章 项目部署
    5 节｜61分钟

    展开

    •  

      视频：
      11-1 各种计算服务的区别和选择
      14:42

    •  

      视频：
      11-2 各种数据库提供商的选择
      07:59

    •  

      视频：
      11-3 Neon云数据库介绍以及集成
      10:52

    •  

      视频：
      11-4 Vercel介绍及其Devops体验
      13:33

    •  

      视频：
      11-5 完成Vercel部署
      13:23
    本课程已完结

    IT之窗网 » 前端全栈进阶 Nextjs打造跨框架SaaS应用(完结)

    常见问题FAQ

    视频课程的格式是什么？
    视频不加密,网盘在线学习,课程免费更新,持续更新
    购买后怎么如何下载资源？
    点击下载按钮，会跳转到百度网盘链接或者阿里云盘链接【链接如失效点击网站右侧联系客服】
    有些资源没更新完结怎么办？
    本站资源包更新至完结，后续可以点击链接获取
    有问题不懂想咨询怎么办？
    点击右侧微信客服发起咨询。
    分享到：
    • 2024-05-15Hi,初次和大家见面了,请多关照！
    • 230会员总数(位)
    • 1513资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1718稳定运行(天)

    提供最优质的资源集合

    开通VIP 网站主页
    升级SVIP尊享更多特权立即升级