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 團隊! ^_^