打造属于你自己的instagram!

栏目: 数据库 · 发布时间: 5年前

内容简介:打造属于你自己的instagram!技术栈

项目地址

打造属于你自己的instagram!

技术栈

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

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

// instagram/client 前端工程
// instagram/service 后端工程
复制代码

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

部分功能截图

登录

打造属于你自己的instagram!

关注

打造属于你自己的instagram!

发帖

打造属于你自己的instagram!

点赞、评论、搜索

打造属于你自己的instagram!

修改个人信息

打造属于你自己的instagram!

运行项目

因前后端不同端口原因,为解决跨域。前端工程启动了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

以上所述就是小编给大家介绍的《打造属于你自己的instagram!》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

马云:未来已来

马云:未来已来

阿里巴巴集团 / 红旗出版社 / 2017-4-1 / CNY 49.00

阿里巴巴集团:全球主要的互联网公司之一,由马云带领其他17个创始人,于1999年在中国杭州创立。阿里巴巴集团经营多元化的互联网业务,以“让天下没有难做的生意”为使命,致力于为创业者和消费者提供全球化的商业平台,打造开放、协同、繁荣的电子商务生态系统。自成立以来,阿里巴巴集团建立了领先的消费者电子商务、网上支付、B2B网上交易市场及云计算业务,并积极开拓无线应用、手机操作系统和互联网电视等领域。一起来看看 《马云:未来已来》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试