Code Monkey home page Code Monkey logo

instagram's Introduction

简介

打造属于你自己的instagram!

技术栈

  • react全家桶
  • ant design
  • egg.js
  • mysql

�前后端分离开发模式,前端项目与后端项目属于不同的工程

// instagram/client 前端工程
// instagram/service 后端工程

注:此项目纯属个人瞎搞,与instagram无任何关系。

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ^_^

部分功能截图

登录

关注

发帖

点赞、评论、搜索

修改个人信息

运行项目

因前后端不同端口原因,为解决跨域。前端�工程启动了devServer,需先启动后端工程

运行后端项目

  • 请确保本地已装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" 支持一下 谢谢! ^_^

instagram's People

Contributors

zhoushaw avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.