打造属于你自己的instagram! 全栈项目(react + egg.js)

zhoushaw

2018-12-01 47,054 阅读2分钟

配套教学视频

感谢@旅梦开发团,特别为此录制的教学视频

简介

Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！ GitHub 地址

技术栈

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

目标功能

登录、注册 -- 完成
修改个人信息 --完成
关注 -- 完成
登录、注册 -- 完成
修改个人信息 --完成
关注 -- 完成
点赞 -- 完成
搜索帖子 -- 完成
上传头像 -- 完成
发帖 -- 完成
收藏 -- 未完成

后记：小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！ GitHub 地址

友情链接：