簡介
Hello 小夥伴們,如果覺得本文還不錯,記得點個贊或者給個 star,你們的贊和 star 是我編寫更多更豐富開源項目的動力!GitHub 地址
技術棧
- react全家桶
- typescript
- ant design
- egg.js
- mysql
前後端分離開發模式,前端項目與後端項目屬於不同的工程
// instagram/client 前端工程
// instagram/service 後端工程
注:此項目純屬個人瞎搞,與instagram無任何關係。
部分功能截圖
登錄
"
關注
發帖
點贊、評論、搜索
修改個人信息
運行項目
因前後端不同端口原因,爲解決跨域。前端工程啓動了devServer,需先啓動後端工程
- git clone https://github.com/zhoushaw/I...
- 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
目標功能
- [X] 登錄、註冊 -- 完成
- [X] 修改個人信息 --完成
- [X] 關注 -- 完成
- [X] 評論 -- 完成
- [X] 點贊 -- 完成
- [X] 搜索帖子 -- 完成
- [X] 上傳頭像 -- 完成
- [X] 發帖 -- 完成
- [X] 收藏 -- 未完成
後記:小夥伴們,如果覺得本文還不錯,記得點個贊或者給個 star,你們的贊和 star 是我編寫更多更豐富開源項目的動力!GitHub 地址