blog-front

概述

本项目是全栈博客应用的前端部分

服务端地址

在线预览

Vue实现（开发ing）

项目地址

Vue实现线上地址

关于全栈博客

该项目是一个web全栈应用，前后端分离，是笔者第一次进入服务端（node）领域的尝试。集成前端React(Vue)，后端Node，数据库Mysql，缓存Redis，消息推送，文件上传，密码加密，数据存储，性能监控等功能或模块，涵盖开发、mock、proxy、生产部署、线上监控等流程，适合有一定基础的前端er入门node，体验下web全栈开发，如果能帮助到你再好不过了，希望顺手点个star哈😄。

前端主要技术栈：

• react
• dva
• umi
• webpack
• es6+
• axios
• antd/material-ui

主要模块和实现：

• 文章模块：写文章、看文章、文章管理（编辑和删除等）和文章搜索
• 用户模块：用户注册和登录，个人中心（管理个人事务），个人主页（对外展示）
• 圈子模块：用户聚集的圈子，管理员可对圈子和成员进行管理
• 社交功能：可对文章进行评论，对评论和回复进行回复；对文章进行打赏；可在反馈页面反馈问题，提交建议，所用用户可以进行讨论
• 消息模块：收到新消息（文章评论和回复、反馈讨论等）、需要同意/审批的流程进度更新时（申请加入圈子等），用户可以实时收到消息推送，便于及时处理

Quick Start

开始使用

安装依赖

cnpm i

本地开发

npm start

如果没有报错，项目就会运行在 127.0.0.1:8080

目录结构

.
├── README.md
├── config                      // 配置文件
│   ├── config.js                  - 构建配置
│   ├── menu.config.js             - 菜单配置
│   ├── plugin.config.js           - 插件配置
│   ├── project.config.js          - 项目相关信息配置
│   └── router.config.js           - 路由配置
├── lib                         // 引用的相对独立的库
│   └── iconFont.js                - 自定义的图标字体库（基于阿里的iconfont）
├── package-lock.json
├── package.json
├── src
│   ├── app.ts                  // 前端入口
│   ├── common                  // 通用代码
│   ├── components              // 原则上无状态的组件
│   ├── global.css              // 全局样式
│   ├── layouts                 // 布局模式
│   ├── models                  // 状态管理
│   ├── pages                   // 页面路由组件
│   ├── services                // 负责与API的交互
│   └── utils                   // 通用工具
├── tsconfig.json               // ts配置文件
├── tslint.yml                  // tslint配置文件
└── typings.d.ts                // ts声明文件

前后端流程

• 1、浏览器访问页面URL
• 2、前端渲染路由组件
• 3、状态管理(models) 、与后台交互，发起请求等（services）
• 4、nginx过滤、转发等
• 5、后台监听收到请求（router）
• 6、根据路由映射调用处理函数（controller）
• 7、与数据库交互（service）、业务处理
• 8、返回结果（controller）
• 9、前端接收后处理(models)
• 10、前端UI更新

生产部署

先安装deploy-tool到本地

npm i @ifun/deploy -g

deploy-tool说明

在项目根目录创建部署配置文件deploy.config.js，为了方便可能会将密码等敏感信息放入此文件，建议将此文件移出git管理

/**
 * 部署配置，配合@ifun/deploy@2.x
 */
module.exports = {
  dev: {
    web: '88.88.88.88' // 部署到的服务器地址
  },
}

# cd到项目根目录，部署前端项目
deploy app <scheme>

# 示例
deploy app dev