打造屬于你自己的instagram! 全棧項目(react + egg.js)

scq000 發布于2019-08-23 13:50 / 2668人閱讀

摘要：簡介小伙伴們，如果覺得本文還不錯，記得點個贊或者給個，你們的贊和是我編寫更多更豐富開源項目的動力地址技術棧全家桶前后端分離開發模式，前端項目與后端項目屬于不同的工程前端工程后端工程注此項目純屬個人瞎搞，與無任何關系。

簡介

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機房托管屬于什么類型的項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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