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

zhoushaw發表於2018-12-01
原文網址 : https://flycode.co/archives/43657
全棧ReactJS

簡介

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

技術棧

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

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

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

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

部分功能截圖

登入

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

關注

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

發帖

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

點贊、評論、搜尋

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

修改個人資訊

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

執行專案

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

執行後端專案

  • 請確保本地已裝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 地址

相關文章