为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第6天...

【金秋打卡】第6天 Next.js+React+Node系统实战,搞定SSR服务器渲染

2022.11.15 21:02 55浏览

课程名称:Next.js+React+Node系统实战,搞定SSR服务器渲染
章节名称:第1~3章
讲师姓名:Tomas

课程内容

前三章内容是基本的课程介绍、项目的初始化、开发环境配置和基本页面layout写法。

初始化配置

创建项目:npx create-next-app@latest —typescript
启动项目:npm run dev或者yarn dev
访问项目:http://localhost:3000

申请好GitHub账号

  • 把公钥贴到GitHub上
  • 设置user.email和user.name
  • 配置仓库
  • my-blog

配置VSCode + ESLint + StyleLint + Prettier工程环境

  • ESLint:主要用于代码校验,能够在开发阶段发现很多潜在问题,强烈建议配置
  • StyleLint:主要用于对CSS样式进行代码格式化,强烈建议配置
  • Prettier:主要用于代码格式化,可以让大家的代码风格趋于统一,方便后续维护迭代,强烈建议配置

ESLint在VS code里装插件,ESLint
已经有.eslintrc.json文件,不用创建文件
添加eslint官方推荐的扩展: eslint:recommended

yarn add eslint -D

StyleLint在VS code中安装插件,Stylelint

yarn add stylelint stylelint-config-standard-scss -D

创建文件 .stylelintrc.json
Setting中的设置,Editor:Code Actions On Save中把source.fixAll.stylelint为true
Prettier在VS code中安装插件,Prettier - Code formatter

在真实的工作场景中,前后端工作基本都是并行的,一般都是互相约定好接口API后,分别进入开发。所以需要我们能够根据接口API自行模拟Mock数据,方便我们进行页面开发。

Mock常见有3中方式:

  • 直接写死数据在项目中,使用setTimeout模拟接口延时
  • 本地起一个Node服务,配合mock.js生产假数据,自己实现接口API
  • 使用已经搭建好的在线Mock服务,比如Postman、EasyMock等
    情况
  • 第一种方式最简单,但是会导致脏代码比较多
  • 第2种方式最灵活,但是开发工作量比较大;
  • 第3中比较快速,并且更接近于实际开发场景,但是配置数据不是很灵活。

Next.js由于已经内置了提供API服务的能力,所以这里我们选用第2种方式,使用mock.js来生产Mock数据,并且不用自己搭建Node服务了。

yarn add mockjs
yarn add @types/mockjs -D

课程收获

学习到了格式化工具的使用,还有利用Next.js的服务搭建mock请求。

截图

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
3
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消