react + midway 实现instagram全栈项目!

前段时间了解到阿里的 Midway 框架 (基于 eggjs 的 Ioc 框架,拥有类似Spring的开发体验), 所以结合业务体验一下 Midway , 重写了项目后台部分, 安利一波Midway ~ ●ω● ~

说明

此项目并非原创, 源码来自于 zhoushaw , 感谢 zhoushaw 的开源 ;)

GitHub 地址

原项目文章: 打造属于你自己的instagram! 全栈项目(react + egg.js)

原项目地址: github.com/zhoushaw/In…

我本身是React,Ts前端, 以后再有机会希望能再结合react hooks实现前台逻辑

简介

打造属于你自己的 instagram!

技术栈

• react 全家桶
• ant design
• midway.js
• mysql

前后端分离开发模式，前端项目与后端项目属于不同的工程

// instagram-midway-react/client 前端工程
// instagram-midway-react/service 后端工程
复制代码

注：此项目与 instagram 无任何关系。

部分功能截图

登录

关注

发帖

点赞、评论、搜索

修改个人信息

运行项目

因前后端不同端口原因，为解决跨域。前端 工程启动了 devServer，需先启动后端工程

• git clone github.com/anthhub/ins…
• cd instagram-midway-react

运行后端项目

• 请确保本地已装 mysql，并配置全局变量
• mysql -u root -p 并输入数据库密码
• create database learn; 创建 learn 数据库
• use learn; 切换数据库
• source learn.sql 的路径; 例如：source /Users/ThinkPad/Desktop/learning/instagram/db/learn.sql;
• 配置 midway.js 连接数据库信息

// 前往service/src/config/config.default.ts，配置你的数据库信息
config.sequelize = {
  dialect: "mysql",
  host: "127.0.0.1",
  port: 3306,
  database: "learn",
  username: "",
  password: "",
  operatorsAliases: false
};
复制代码

• 配置七牛云上传鉴权信息

// 前往/service/src/lib/service/qiniu/qiniu.ts，配置你的七牛云获取token信息
export class QiniuService {
    // 前往七牛云的个人面板=>秘钥管理查看
    private accessKey: string = ''; // 秘钥
    private secretKey: string = ''; // 秘钥
    private publicBucketDomain = ''; // 外链默认域名

    private options: qiniuOptioin = {
        scope: '', // 上传空间
        expires: 7200
    }

    // ....
}

// 七牛云存储空间区设置，前往/client/src/components/upload/index.js，配置上传区
class Upload extends React.Component{


    uploadFn = async () => {
        // ...
        var config = {
            region: qiniu.region.z0 // 所属区，可前往七牛云文档查看
        };
        // ...
}
复制代码

运行后端项目

• 在/service 文件下

• npm install

• npm start

• 在/client 文件下

• npm install

• npm start

目标功能

• 登录、注册 -- 完成
• 修改个人信息 --完成
• 关注 -- 完成
• 评论 -- 完成
• 点赞 -- 完成
• 搜索帖子 -- 完成
• 上传头像 -- 完成
• 发帖 -- 完成
• 收藏 -- 未完成

GitHub 地址

再次感谢原作者 zhoushaw 和 Midway 团队! ^_^