打造屬於你本身的instagram! 全棧項目(react + egg.js)

時間 2021-08-14

標籤 javascript 前端 java mysql react git github sql typescript 數據庫欄目 React 简体版

原文原文鏈接

配套教學視頻

感謝@旅夢開發團,特別爲此錄製的教學視頻javascript

簡介

Hello 小夥伴們，若是以爲本文還不錯，記得點個贊或者給個 star，大家的贊和 star 是我編寫更多更豐富開源項目的動力！ GitHub 地址前端

技術棧java

react全家桶
typescript
ant design
egg.js
mysql

先後端分離開發模式，前端項目與後端項目屬於不一樣的工程mysql

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

注：此項目純屬我的瞎搞，與instagram無任何關係。react

部分功能截圖

登陸git

關注github

發帖sql

點贊、評論、搜索typescript

修改我的信息數據庫

運行項目

因先後端不一樣端口緣由，爲解決跨域。前端工程啓動了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 // 所屬區，可前往七牛雲文檔查看
        };
        // ...
}
複製代碼