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

canopus4u 发布于2019-08-05 15:38 / 2614人阅读

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

简介

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

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/58664.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
打造属于你自己的instagram! 全栈项目(react + egg.js)

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

scq000 2019-08-23 13:50 评论0 收藏0
Oracle APEX 系列文章2：在阿里云上打造属于你自己的APEX完整开发环境 (准备工作)

摘要：本系列文章使用的是阿里云的云服务器，仅仅是因为在国内用阿里云的人比较多而已。在这里我们采用将单独部署到上运行的方式完成安装，这也是比较推荐的方式。本文是钢哥的Oracle APEX系列文章中的其中一篇，完整 Oracle APEX 系列文章如下： Oracle APEX 系列文章1：Oracle APEX, 让你秒变全栈开发的黑科技 Oracle APEX 系列文章2：在阿里云上打...

hightopo 2019-08-06 14:15 评论0 收藏0
Oracle APEX 系列文章2：在阿里云上打造属于你自己的APEX完整开发环境 (准备工作)

摘要：本系列文章使用的是阿里云的云服务器，仅仅是因为在国内用阿里云的人比较多而已。在这里我们采用将单独部署到上运行的方式完成安装，这也是比较推荐的方式。本文是钢哥的Oracle APEX系列文章中的其中一篇，完整 Oracle APEX 系列文章如下： Oracle APEX 系列文章1：Oracle APEX, 让你秒变全栈开发的黑科技 Oracle APEX 系列文章2：在阿里云上打...

MAX_zuo 2019-07-25 14:16 评论0 收藏0