Supporting teaching video

Thank you @Traveldream development Group for recording this educational video

Introduction to the

If you think this article is good, please remember to give me a “like” or “star”. Your “like” and “star” are my motivation to write more and richer open source projects!Making the address

Technology stack

  • The react buckets
  • typescript
  • ant design
  • egg.js
  • mysql

The front-end and back-end projects belong to different projects

// Instagram/Client front-end engineering
// Instagram /service back-end project
Copy the code

Note: This project is purely personal and has nothing to do with Instagram.

Screenshots of some functions

The login

Focus on

Posting

Like, comment, search

Modifying personal Information

Run the project

Different ports at the front and back ends are used to resolve cross-domain problems. If devServer is started in the front-end engineering, the back-end engineering must be started first

  • Git clone github.com/zhoushaw/In…
  • cd Instagram

Run the back-end project

  • Ensure that mysql is installed locally and global variables are configured
  • Mysql -u root -p And enter the database password
  • create database learn; Create the Learn database
  • use learn; Switching databases
  • Source learn. SQL; For example, the source/Users/shawzhou/Desktop/learning/sets/db/learn. SQL;
  • Configure egg.js to connect to database information
/ / to the service/config/config. Local, ts, configure your database information
config.sequelize = {
    dialect: 'mysql'.host: '127.0.0.1'.port: 3306.database: 'learn'.username: ' '.password: ' '.operatorsAliases: false
};
Copy the code
  • Configure seven Niuyun to upload authentication information

/ / to/service/app/service/qiniu ts, configure your seven NiuYun token information
export default class qiniuService extends Service {
    // Go to the personal panel of qiniuyun => View the key management
    private accessKey: string = ' '; / / the secret key
    private secretKey: string = ' '; / / the secret key
    private publicBucketDomain = ' '; // External link default domain name

    private options: qiniuOptioin = {
        scope: ' '.// Upload space
        expires: 7200
    }

    / /...
}

/ / seven NiuYun storage area is set to/client/SRC/components/upload/index. The js, upload configuration area
class Upload extends React.Component{


    uploadFn = async() = > {// ...
        var config = {
            region: qiniu.region.z0 // Where you belong, you can go to qniuyun document to view
        };
        // ...
}
Copy the code
  • In the /service file
  • npm install
  • npm run dev

Running front-end projects

  • cd client
  • npm install
  • npm start

The target function

  • Login, register — done
  • Modifying personal information — done
  • Focus — Finish
  • Login, register — done
  • Modifying personal information — done
  • Focus — Finish
  • Like — done
  • Search for posts — done
  • Upload profile picture — done
  • Post — Done
  • Collection – Unfinished

Postscript: Friends, if you think this article is good, remember to give a like or star, your like and star is my motivation to write more and richer open source projects!Making the address