资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/打造属于你自己的instagram!全栈项目

打造属于你自己的instagram!全栈项目

王岩威 / 1026人阅读

摘要：简介小伙伴们，如果觉得本文还不错，记得点个赞或者给个，你们的赞和是我编写更多更丰富开源项目的动力地址技术栈全家桶前后端分离开发模式，前端项目与后端项目属于不同的工程前端工程后端工程注此项目纯属个人瞎搞，与无任何关系。

简介

Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！GitHub 地址

</>复制代码 
  1. 技术栈

react全家桶

typescript

ant design

egg.js

mysql

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

</>复制代码 
  1. // instagram/client 前端工程
  2. // instagram/service 后端工程

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

部分功能截图 
</>复制代码 
  1. 登录

"

</>复制代码 
  1. 关注

</>复制代码 
  1. 发帖

</>复制代码 
  1. 点赞、评论、搜索

</>复制代码 
  1. 修改个人信息

运行项目

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

git clone https://github.com/zhoushaw/I...

cd Instagram

</>复制代码 
  1. 运行后端项目

请确保本地已装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连接数据库信息

</>复制代码 
  1. // 前往service/config/config.local.ts，配置你的数据库信息
  2. config.sequelize = {
  3.     dialect: "mysql",
  4.     host: "127.0.0.1",
  5.     port: 3306,
  6.     database: "learn",
  7.     username: "", 
  8.     password: "", 
  9.     operatorsAliases: false
  10. };

配置七牛云上传鉴权信息

</>复制代码 
  1. // 前往/service/app/service/qiniu.ts，配置你的七牛云获取token信息
  2. export default class qiniuService extends Service {
  3.     // 前往七牛云的个人面板=>秘钥管理查看
  4.     private accessKey: string = ""; // 秘钥
  5.     private secretKey: string = ""; // 秘钥
  6.     private publicBucketDomain = ""; // 外链默认域名
  7.     private options: qiniuOptioin = {
  8.         scope: "", // 上传空间
  9.         expires: 7200
  10.     }
  11.     // ....
  12. }
  13. // 七牛云存储空间区设置，前往/client/src/components/upload/index.js，配置上传区
  14. class Upload extends React.Component{
  15.     uploadFn = async () => {
  16.         // ...
  17.         var config = {
  18.             region: qiniu.region.z0 // 所属区，可前往七牛云文档查看
  19.         };
  20.         // ...
  21. }

在/service文件下

npm install

npm run dev

</>复制代码 
  1. 运行前端项目

cd client

npm install

npm start

目标功能

[X] 登录、注册 -- 完成

[X] 修改个人信息 --完成

[X] 关注 -- 完成

[X] 评论 -- 完成

[X] 点赞 -- 完成

[X] 搜索帖子 -- 完成

[X] 上传头像 -- 完成

[X] 发帖 -- 完成

[X] 收藏 -- 未完成

后记：小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！GitHub 地址

GPU云服务器 云服务器 squid打造自己的cdn 打造自己的云服务器 如何搭建属于自己的网站赚钱 idc机房托管属于什么类型的项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114322.html

相关文章

  • 打造属于你自己的instagram!全栈项目

    摘要：简介小伙伴们，如果觉得本文还不错，记得点个赞或者给个，你们的赞和是我编写更多更丰富开源项目的动力地址技术栈全家桶前后端分离开发模式，前端项目与后端项目属于不同的工程前端工程后端工程注此项目纯属个人瞎搞，与无任何关系。 简介 Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！GitHub 地址 技术栈 rea...

    levius 评论0 收藏0

  • 打造属于你自己的instagram! 全栈项目(react + egg.js)

    摘要：简介小伙伴们，如果觉得本文还不错，记得点个赞或者给个，你们的赞和是我编写更多更丰富开源项目的动力地址技术栈全家桶前后端分离开发模式，前端项目与后端项目属于不同的工程前端工程后端工程注此项目纯属个人瞎搞，与无任何关系。 简介 Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！GitHub 地址 技术栈 rea...

    scq000 评论0 收藏0

  • Oracle APEX 系列文章2：在阿里云上打造属于你自己的APEX完整开发环境 (准备工作)

    摘要：本系列文章使用的是阿里云的云服务器，仅仅是因为在国内用阿里云的人比较多而已。在这里我们采用将单独部署到上运行的方式完成安装，这也是比较推荐的方式。 本文是钢哥的Oracle APEX系列文章中的其中一篇，完整 Oracle APEX 系列文章如下： Oracle APEX 系列文章1：Oracle APEX, 让你秒变全栈开发的黑科技 Oracle APEX 系列文章2：在阿里云上打...

    MAX_zuo 评论0 收藏0

发表评论

登陆后可评论

0条评论

王岩威

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<