打造屬於你自己的instagram!
摘要：
專案地址
打造屬於你自己的instagram!
技術棧
react全家桶
typescript
ant design
egg.js
mysql
前後端分離開發模式，前端專案與後端專案屬於不同的工程
// instagram/clie...
Instagram" rel="nofollow,noindex">專案地址
打造屬於你自己的instagram!
技術棧
- 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