简介
Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！
技术栈
- react全家桶
- typescript
- ant design
- egg.js
- mysql
前后端分离开发模式，前端项目与后端项目属于不同的工程
// instagram/client 前端工程// instagram/service 后端工程复制代码
注：此项目纯属个人瞎搞，与instagram无任何关系。
部分功能截图
登录
关注
发帖
点赞、评论、搜索
修改个人信息
运行项目
因前后端不同端口原因，为解决跨域。前端工程启动了devServer，需先启动后端工程
- git clone
- 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
目标功能
- 登录、注册 -- 完成
- 修改个人信息 --完成
- 关注 -- 完成
- 登录、注册 -- 完成
- 修改个人信息 --完成
- 关注 -- 完成
- 点赞 -- 完成
- 搜索帖子 -- 完成
- 上传头像 -- 完成
- 发帖 -- 完成
- 收藏 -- 未完成
后记：小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！