内容简介:打造属于你自己的instagram!技术栈
打造属于你自己的instagram!
技术栈
- react全家桶
- typescript
- ant design
- egg.js
- mysql
前后端分离开发模式,前端项目与后端项目属于不同的工程
// instagram/client 前端工程 // instagram/service 后端工程 复制代码
注:此项目纯属个人瞎搞,与instagram无任何关系。
部分功能截图
登录
关注
发帖
点赞、评论、搜索
修改个人信息
运行项目
因前后端不同端口原因,为解决跨域。前端工程启动了devServer,需先启动后端工程
- git clone github.com/zhoushaw/In…
- 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
以上所述就是小编给大家介绍的《打造属于你自己的instagram!》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 打造属于自己的underscore系列(六)- 洗牌算法
- RTX 2080时代,如何打造属于自己的深度学习机器
- 从今天开始,拿起VuePress打造属于自己的专属博客
- 学习 axios 源码整体架构,打造属于自己的请求库
- 学习 vuex 源码整体架构,打造属于自己的状态管理库
- 使用 CodeMirror 打造属于自己的在线代码编辑器 荐
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。