接下来我将对该项目进行大致的使用说明，后续也会写一份更为详细的免费的《Node全栈开发——带你从零开发前后端分离的个人网站》教程，带你从零开发到部署上线的全过程，敬请期待。您现在看的这个项目只是网站的前端项目，服务端项目地址请点击服务端

该项目采用React+antd+umi+dva技术栈进行实现。查看demo，测试账号和密码都是[email protected]

注意： 接下来的说明都只针对该前端项目的说明。因为是前后端分离。所以启动是需要前后端一起启动的。服务端项目请移步博客网站服务端

下面是一些主要功能的效果图。请君参考。

首页详情页

写文章

管理页

$ git clone https://github.com/immisso/blog-web

$ npm install

或者

$ yarn

$ npm run start

或

$ yarn start

启动成功后，然后再浏览器上打开http://localhost:8888即可！ 虽然此时可以我们可以成功启动，但是还不能上传文件到阿里云，因为我们还需要一些配置。在src/目录下创建config文件夹，然后创建一个secret.js文件。改文件内容如下:

module.exports = {
  accessKeyId: '', // 阿里云Keyid
  accessKeySecret: '', // 阿里云Key secret
  bucket: '', // Oss bucket 名字
  ENCRYPT_KEY: '' // localStorage加密Key
}

这样配置好，就可以成功上传文件了！

当然你要和服务端同时启用。

这个项目虽然不大，但是功能还算齐全。大体来说分为主网站和管理系统两部分。目前已经实现主要功能如下：

• 登录
• 注册
• 文章列表
• 点赞
• 评论
• markdown写文章
• 阿里云上传图片
• 保存草稿
• 发表文章
• 个人信息更新

• 分类管理（分类列表、添加、删除）
• 标签管理（标签列表、添加、删除）
• 文章管理（文章列表、删除）
• 评论管理（评论列表、删除）

该网站采用前后端分离技术，前端采用React+antd+umi+dva开发，服务端采用Node开发。主要功能模块包括

• react
• antd
• umi
• dva
• react-markdown
• highlight.js

该项目会长期更新。会逐步完善其他许多功能。如果写教程功能、邮件提醒、用户管理、主题风格、代码风格等。欢迎长期关注。