打造屬於你自己的instagram! 全棧專案(react + egg.js)

簡介

Hello 小夥伴們，如果覺得本文還不錯，記得點個贊或者給個 star，你們的贊和 star 是我編寫更多更豐富開源專案的動力！GitHub 地址

技術棧

• react全家桶
• typescript
• ant design
• egg.js
• mysql

前後端分離開發模式，前端專案與後端專案屬於不同的工程

// instagram/client 前端工程// instagram/service 後端工程複製程式碼

注：此專案純屬個人瞎搞，與instagram無任何關係。

部分功能截圖

登入

關注

發帖

點贊、評論、搜尋

修改個人資訊

執行專案

因前後端不同埠原因，為解決跨域。前端 工程啟動了devServer，需先啟動後端工程

• git clone github.com/zhoushaw/In…
• cd Instagram

執行後端專案

• 請確保本地已裝mysql，並配置全域性變數
• mysql -u root -p 並輸入資料庫密碼
• create database learn;
  建立learn資料庫
• use learn;
  切換資料庫
• source learn.sql的路徑;
  例如：source /Users/shawzhou/Desktop/learning/instagram/db/learn.sql;
• 配置egg.js連線資料庫資訊

// 前往service/config/config.local.ts，配置你的資料庫資訊config.sequelize = { 
   dialect: 'mysql',    host: '127.0.0.1',    port: 3306,    database: 'learn',    username: '',     password: '',     operatorsAliases: false
  };
複製程式碼

• 配置七牛雲上傳鑑權資訊

// 前往/service/app/service/qiniu.ts，配置你的七牛雲獲取token資訊export default class qiniuService extends Service { 
   // 前往七牛雲的個人皮膚=>
祕鑰管理檢視    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 run dev

執行前端專案

• cd client
• npm install
• npm start

目標功能

• 登入、註冊 — 完成
• 修改個人資訊 –完成
• 關注 — 完成
• 登入、註冊 — 完成
• 修改個人資訊 –完成
• 關注 — 完成
• 點贊 — 完成
• 搜尋帖子 — 完成
• 上傳頭像 — 完成
• 發帖 — 完成
• 收藏 — 未完成

後記：小夥伴們，如果覺得本文還不錯，記得點個贊或者給個 star，你們的贊和 star 是我編寫更多更豐富開源專案的動力！GitHub 地址

來源：https://juejin.im/post/5c0256a751882550d05cba11#comment