山维空间

标签： redis

  • 【视频】Nuxt3+Vercel+Serverless 全栈开发（5）：部署到 Vercel+开发统计功能

    【视频】Nuxt3+Vercel+Serverless 全栈开发（5）：部署到 Vercel+开发统计功能

    课程继续。仍然结合近期的开发经验，分享最近我比较喜欢的全栈+高效+免费+云原生技术方案。

    https://www.bilibili.com/video/BV16h411N762/ （请 B 站有号的同学帮忙点赞）

    本次课程内容：

    • 将作品部署到 Vercel
    • 使用自定义域名保障国内访问
    • 开发统计功能页面

    终于讲到部署环节了。其实 Vercel 对现代化 Web 全栈开发是非常重要的组成部分，它自带的 Serverless 功能是实现服务器端渲染（SSR）的关键，而且我们也需要使用 Serverless 来完成数据交互。部署到 Vercel 非常简单，点几下就能完成。

    Vercel 官方网站 vercel.com 在中国大陆可以无障碍访问，但是免费提供的二级域名 *.vercel.app 不行。解决方案很简单，自己注册一个域名，然后 CNAME 过去即可。注册域名的选项很多，各大云平台如阿里云、腾讯云均可。自己的小域名如果不提供大规模服务，不备案也可以用。价格大概一年十几块吧。

    然后讲解制作统计页面，主要涉及 Redis 的操作和前后端数据交互。之前埋下的数据结构设计，在此可以更好的演示。

    至此，这个系列基本连载完成。从技术选型、到项目搭建、到前后端开发、到最终部署上线，都覆盖到了。其它想讲的内容还有很多，不过都属于锦上添花，对于有开发经验的同学来说，相信现在已经可以动手。未来当然会继续深入，把统计功能加强一些，把关系型数据库也纳入进来。进阶课也在规划中，比如面对内容更庞大的网站，这个项目中太过简单的数据交互、缓存处理、SEO 都不够用，需要进阶强化。敬请期待吧。

    本周正好端午节，休息一周，周三（6月21日）晚上直播答疑，欢迎围观。

    这期视频也剪得很细，还做了字幕，希望大家能学到东西。

    如果你有任何问题、建议，欢迎留言讨论。请 b 站有号的同学帮忙分享完播一键三连，谢谢大家。

    另外，我也在 YouTube 上上传了一份，大家有空的话，麻烦帮忙关注下我的油管频道，感谢感谢。肉山全栈小课堂 – YouTube

  • 【视频】Nuxt3+Vercel+Serverless 全栈开发（4）：投票接口+数据处理+了解服务器端渲染

    【视频】Nuxt3+Vercel+Serverless 全栈开发（4）：投票接口+数据处理+了解服务器端渲染

    课程继续。仍然结合近期的开发经验，分享最近我比较喜欢的全栈+高效+免费+云原生技术方案。

    本次课程内容：

    • 创建 Post 接口，完成投票
    • 显示投票结果数据
    • 了解服务器端渲染

    我们先利用 Nuxt3 的路由机制，创建 /api/rate.post.ts 接口，用来处理用户投票，将数据记录进入 Redis 数据库的动作。

    为了保证数据安全，我每次会写入两次数据，一个键值是 $$$_{uid}，主 key，用来日常显示；另一个键值是 {uid}_{小时}，用来备份。这样假如某些情况下我们的投票系统被攻击，也能快速会滚到最近一小时的数据。并且这个备份频率也可以按需调整。

    然后我们在前端使用 $fetch 方法调用接口完成投票。并介绍了计算成绩的逻辑。

    最后介绍了 SSR 的结果，这样就能解释，为什么我们要使用 Nuxt3 内建的 useAsyncData、useFetch 而不是平时常见的远程请求库手动请求。

    这期视频也剪得很细，还做了字幕，希望大家能学到东西。

    如果你有任何问题、建议，欢迎留言讨论。请 b 站有号的同学帮忙分享完播一键三连，谢谢大家。

    另外，我也在 YouTube 上上传了一份，大家有空的话，麻烦帮忙关注下我的油管频道，感谢感谢。肉山全栈小课堂 – YouTube

  • 【视频】Nuxt3+Vercel+Serverless 全栈开发（3）：实现投票效果，使用 Redis

    【视频】Nuxt3+Vercel+Serverless 全栈开发（3）：实现投票效果，使用 Redis

    课程继续。仍然结合近期的开发经验，分享最近我比较喜欢的全栈+高效+免费+云原生技术方案。

    本次课程内容：

    • CSS 里使用 ~ 兄弟选择器实现投票效果
    • 使用 Upstash Redis
    • 使用 Nuxt3 风格的加载方法读取数据

    打分组件，我们需要用到 ~ 选择器选择某个节点后面的所有弟弟节点，配合蒙版属性 mask-* 可以实现我们要的打分效果。

    接下来我们开始接触远程数据的操作。Vercel 免费版 Redis 每天只有 1k 的请求数，不太够用；如果升级付费版，也没法针对某个部分单独升级。所以很明显，Upstash 这样专门的服务商更合适。

    Nuxt3 为实现 SSR，对远程请求进行了封装，提供 useFetch、useLazyFetch、useAsyncData、useLazyAsyncData 这 4 个新方法。其中前两者可以视作后两者的封装。在本节课里，我们先实现了读取数据的 API，然后用 useFetch 加载数据，实现服务器端渲染。

    这期视频也剪得很细，还做了字幕，希望大家能学到东西。

    如果你有任何问题、建议，欢迎留言讨论。请 b 站有号的同学帮忙分享完播一键三连，谢谢大家。

    另外，我也在 YouTube 上上传了一份，大家有空的话，麻烦帮忙关注下我的油管频道，感谢感谢。肉山全栈小课堂 – YouTube