个人博客 2.0 FE：技术栈升级，拥抱前后端分离

前端

2023-12-13 16:12:59

个人博客 2.0 FE：以 React 和 Node 拥抱前后端分离

回顾我的第一个博客网站，诞生于 2018 年 3 月，它是由 Bootstrap 和 Django 携手打造的。虽然它陪伴我走过了一段难忘的旅程，但我一直渴望在它身上融入更多自己的思想火花。

于是，个人博客 2.0 FE 应运而生。它基于 React 和 Node 技术栈，拥抱了当下流行的前后端分离架构。前后端分离带来的好处显而易见：

更佳的用户体验： 前后端分离允许独立开发和部署前端和后端代码，从而实现更快的页面加载速度和更流畅的交互体验。
更高的开发效率： 开发者可以专注于各自擅长的领域，前端工程师专注于用户界面，后端工程师专注于业务逻辑，提高了开发效率。
更强的可维护性： 前后端代码解耦，修改和维护变得更加容易。

在技术实现方面，我采用了以下技术：

前端： React、Redux、ES6、Webpack
后端： Node.js、Express.js、MongoDB
部署： GitHub Pages、Netlify

为了帮助大家更好地理解前后端分离的优势，我提供了以下示例代码：

// 前端（React）
import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

// 后端（Node.js）
const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});