简介

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 地点