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

scq000 发布于2019-08-23 13:50 / 2671人阅读

摘要：简介小伙伴们，如果觉得本文还不错，记得点个赞或者给个，你们的赞和是我编写更多更丰富开源项目的动力地址技术栈全家桶前后端分离开发模式，前端项目与后端项目属于不同的工程前端工程后端工程注此项目纯属个人瞎搞，与无任何关系。

简介

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

GPU云服务器云服务器 squid打造自己的cdn 打造自己的云服务器如何搭建属于自己的网站赚钱 idc机房托管属于什么类型的项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99658.html

打造属于你自己的instagram!全栈项目

摘要：简介小伙伴们，如果觉得本文还不错，记得点个赞或者给个，你们的赞和是我编写更多更丰富开源项目的动力地址技术栈全家桶前后端分离开发模式，前端项目与后端项目属于不同的工程前端工程后端工程注此项目纯属个人瞎搞，与无任何关系。简介 Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！GitHub 地址技术栈 rea...

levius 2019-08-23 13:50 评论0 收藏0
打造属于你自己的instagram!全栈项目

摘要：简介小伙伴们，如果觉得本文还不错，记得点个赞或者给个，你们的赞和是我编写更多更丰富开源项目的动力地址技术栈全家桶前后端分离开发模式，前端项目与后端项目属于不同的工程前端工程后端工程注此项目纯属个人瞎搞，与无任何关系。简介 Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！GitHub 地址技术栈 rea...

王岩威 2019-08-29 17:26 评论0 收藏0
EggBorn.js：一款顶级Javascript全栈开发框架

摘要：是什么是一款顶级全栈开发框架。渐进式开发由于模块的高度内聚，可以将业务以模块的形式沉淀，在多个项目中重复使用，既可贡献到开源社区，也可部署到公司内部私有仓库。模块发布当项目中的模块代码稳定后，可以将模块公开发布，贡献到开源社区。 EggBorn.js是什么 EggBorn.js是一款顶级Javascript全栈开发框架。 EggBorn.js是采用Javascript进行全栈开发的最佳...

dayday_up 2019-08-21 17:17 评论0 收藏0
Cabloy.js：基于EggBorn.js开发的一款顶级Javascript全栈业务开发框架

摘要：文档官网文档演示是什么是一款顶级全栈开发框架。不重复造轮子，而是采用业界最新的开源技术，进行全栈开发的最佳组合。渐进式开发由于模块的高度内聚，可以将业务以模块的形式沉淀，在多个项目中重复使用，既可贡献到开源社区，也可部署到公司内部私有仓库。文档官网 && 文档演示 PC：https://admin.cabloy.com Mobile： showImg(https://seg...

tomlingtm 2019-08-22 18:47 评论0 收藏0