前后端分离的个人网站：React + Egg.js实战

在当今的Web开发中，前后端分离已成为一种主流的开发模式。这种模式可以提高开发效率、降低维护成本，并且有利于团队的分工合作。React和Egg.js是两个非常流行的前端和后端框架，它们可以很好地配合使用，实现一个高效、稳定的前后端分离个人网站。
一、项目结构
首先，我们需要搭建项目的整体结构。在React项目中，我们可以使用create-react-app脚手架快速创建一个新的项目。而在Egg.js项目中，我们需要先安装Egg.js，然后创建一个新的Egg.js应用。
在Egg.js中，一个项目通常包含以下几个目录：app、config、controller、egg、model、service、view。其中，app目录用于存放应用的入口文件，config目录用于存放应用的配置文件，controller目录用于存放应用的控制器文件，egg目录用于存放Egg.js的核心代码，model目录用于存放应用的模型文件，service目录用于存放应用的服务文件，view目录用于存放应用的视图文件。
二、数据交互
前后端分离的个人网站中，数据交互是非常重要的一环。在React中，我们可以使用axios等HTTP客户端库向Egg.js服务器发送请求，获取数据。而在Egg.js中，我们可以使用Koa等Web框架来处理这些请求，并将数据返回给React。
下面是一个简单的例子，展示了如何在React中使用axios向Egg.js服务器发送GET请求：

import axios from 'axios';
axios.get('/api/user')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});

而在Egg.js中，我们可以创建一个UserController来处理这些请求：

// app/controller/user.js
const Controller = require('egg').Controller;
class UserController extends Controller {
async getUser() {
const user = await this.ctx.model.User.findOne({});
this.ctx.body = user;
}
}
module.exports = UserController;

三、权限控制
在前后端分离的个人网站中，权限控制也是一个重要的环节。Egg.js提供了丰富的权限控制插件和中间件，可以帮助我们实现权限控制。例如，我们可以使用Egg.js的权限插件egg-passport来实现用户的登录和权限验证。在React中，我们可以使用像Ant Design Pro这样的UI框架提供的权限控制组件来实现前端权限控制。
下面是一个简单的例子，展示了如何在Egg.js中使用egg-passport插件实现用户登录：
首先，我们需要安装egg-passport插件：

npm install egg-passport --save

然后，在config/plugin.js文件中启用egg-passport插件：

exports.passport = {
enable: true, // 启用插件
package: 'egg-passport', // 指定插件的包名或者目录名或者git仓库地址，若使用私有包或者版本不固定请参考 https://github.com/eggjs/egg-plugin-template#%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E5%85%B3%E9%93%BE%E6%8E%A5%E7%9A%84%E6%89%8B%E5%8A%A8
};

最后，我们可以在controller中创建一个AuthController来处理登录请求：
// app/controller/auth.js