Next.js+Node+MySQL+TypeScript+React实现个人博客【前置知识与环境配置】

flying__fish
1,545 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

一、准备阶段

01、初始化next.js环境

使用Next.js初始化项目及工程配置

  • 创建项目：(后面跟两个点表示已经创建好文件目录,这里选择创建一个新目录,选择创建TS项目)

    npx create-next-app@latest --typescript my_blog

  • 启动项目：

    npm run dev
or
yarn dev

  • 默认访问地址 http://localhost:3000

  • 了解更多可参照Next.js中文官网

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

  • ESLint：**主要用于代码校验，能避免开发按阶段发现很多潜在的问题

    1. VSCode 安装Eslint插件

    2. 安装依赖

      yarn add eslint -D

    3. 配置文件--.eslintc.json

      {
  "extends": [
    // eslint 自带拓展校验
    "next/core-web-vitals",
    // 官方推荐校验
    "eslint:recommended"
  ]
}

  • StyleLint：主要用于对CSS样式进行代码格式化

    1. VSCode 安装Stylelint插件

    2. 安装依赖

      yarn add stylelint stylelint-config-standard -D

    3. 配置文件--.stylelintrc.json

      {
  "extends":"stylelint-config-standard-scss"
}

    4. 配置vscode实现自动修复

      • 设置 --> 搜索 editor Code Action On Save --> settings.json -->

        --settings.json
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  • Prettier：主要用于代码格式化，可以让代码风格趋于统一，方便后续维护迭代

    1. VSCode 安装prettier插件

    2. 配置文件-- .prttierrc.json

      //常用配置项
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "parser": "babel"
}
​

    3. 配置vscode

      • 设置 --> 搜索Editor Format On Save --> 勾选

        Format On Save

        Enable Preview

02、搭建Mock Server

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

Mock数据常见三种方式

  • 直接写死，使用setTimeout模拟接口延时

    • 简单，但是藏代码比较多

  • 本地起一个Node服务，配合mock.js生产假数据，自己实现接口API

    • 灵活，工作量较大

  • 使用已经搭建好的在线Mock服务，比如Postman、EsatMoock、Apifox等

    • 快速，比较接近实际开发场景，但是配置数据不是很灵活
    • 值得一提的是Apifox作为一款新的产品，其作为集API 文档、API 调试、API Mock、API 自动化测试与一体的自动化平台，值得去了解并学习如何使用。

使用Next.js结合第二种方式（即使用node）

理由：其内部已经内置了提供API服务的能力，所以使用mock.js来产生Mock数据，无需搭建Node服务

Mock.js使用

//mock依赖
yarn add mockjs
//当项目 为TS项目是需要安装开发依赖
yarn add @types/mockjs -D

二、相关模块

01、导航栏

  • 了解路由

  • 清除默认代码：清除创建项目自带的样式，默认html、logo等

  • 配置alias

    Alias的作用是能够快速阴图不同路径的代码文件，避免反复的写相对路径，提高开发效率，不用以“../../”的形式去查找

    • 参考
    • // tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
    • 重启项目

  • 组件库的引入

    Ant Design

使用Next.jsAPI路由开发登录注册模式

​编辑

  • 登录弹窗封装（或者登录页面）

  • 登录验证码接入平台（可以免费体验、用来测试够用了）

    官网

    帮助文档

    时间戳转换依赖

    yarn add date-fns

    md5加密依赖

    yarn add md5
yarn add @types/md5 -D

    base64依赖

    yarn add js-base64

  • 设置服务端

  • 安装mysql数据库

  • 安装数据管理依赖npm地址

    npm install typeorm --save
npm install reflect-metadata --save
npm install mysql2 --save

  • 配置可以支持装饰器

//tsconfig.json
compilerOptions选项中添加
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,

//bable的配置
npm add 
@babel/core 
@babel/plugin-proposal-decorators 
@babel/plugin-proposal-class-properties
babel-plugin-transform-typescript-metadata -D

.abbelrc
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-class-properties"
  ]
}
  • 验证码自动登录功能实现

mobx全局状态管理

安装

npm add mobx-react-lite
npm add mobx

使用cookie实现全局登录

  • 安装next-cookie

    npm add next-cookie

  • 设置cookie，保证刷新页面登录信息不丢失

  • 退出登录

说明：依赖安装后如何使用可以直接再npm 官网搜索对应的依赖查看使用说明

使用第三方登录

  • github登录
  • GitHub OAuth 第三方登录示例教程
  • 忽略ssL验证
  • const result = await axios.post(
    `https://${url}/login`,
    body,
    {
      httpsAgent: new https.Agent({
        rejectUnauthorized: false
      })
    }
  )

实现写文章

SSR渲染文章列表

文章详情

  • 依赖：markdown-to-txt

    npm add markdown-to-txt
npm add markdown-to-jsx

  • 图片解析

  • // next.config.js

const nextConfig = {
  images: {
    images: {
      domains: ['assets.acme.com'],
    },
  },
}

  • 编辑文章

  • 文章添加评论

  • 添加评论更新页面

部署与上线

线上免费数据库

db4free

remoteMySQL  ​​​​​​​

需要填写问卷调查，可能是个人的信息不符合或者填写有问题，试过多次，还是不让建数据库，可能是方式没找对 我的评价是：创建失败、体验不好（因人而异，感兴趣可自行尝试）

AQLPub

......

部署项目没有服务器？使用vercel.com/

我的感觉是：由于是国外的网站，所以不是很稳定，如果需要寻找免费的网站来部署项目，不妨去各大云服务厂商领取免费的服务器来玩玩，体验时间结束后再考虑要不要去购买自己服务器、域名等。

总结

收获：

  • next.js的基本使用
  • 代码书写环境配置，帮助规范开发
  • TypeScript、React的一些运用
  • Mock Server模拟数据
  • 创建数据库、连接数据库、基于node简单操作数据库
  • 基于next、node结合MySQL的短信验证
  • 部署项目知识

痛点：

  • 文档的阅读与吸收能力需要提高，通过文档不能和好的理解作者思想，导致在实际运用时频频出现问题
  • TypeScript、React还需深入学习，否侧要花大量的时间去解决各种报错
  • 项目打包，与之对应的时webpack、babel相关知识的欠缺
avatar
文章
阅读
粉丝