授权声明：本篇文章授权活动官方亚马逊云科技文章转发、改写权，包括不限于在 Developer Centre, 知乎，自媒体平台，第三方开发者媒体等亚马逊云科技官方渠道
前言
一年一度的双十一到来了，经过这几年的发展，几个头部的电商公司，已经把双十一打造成了一个购物狂欢节了。在这一天，人们会纷纷跑到一些电商购物网站，比如淘宝、京东等购物网站，去进行购物。因为这一天，电商公司都会推出很多活动，比如满减优惠，一些商家对商品进行大降价或者给到购物者一些优惠券。在这一天购物，折扣非常多，优惠力度非常大，吸引了大量的人们去购物。
当然，我也免不了被这些优惠所吸引。今年到京东上面，我也购买了不少东西，比如手机、电脑等商品。
在逛京东的时候，我就想着，我要不要自己打造一个京东商城？
当然可以，正好可以利用自己所学到知识和技术，来完成这件事情。下面就开始介绍一下怎么打造一个京东商城吧。
前端项目开发
关于前端项目开发，我是采用react的技术栈来开发的。我对react还是有一点了解的，使用react开发项目的话，没有特别大的问题。
在react的官方文档里，有告诉我们怎么创建一个react项目。
我们进入到react的官网，然后点击文档，进入到文档页面。点击右侧菜单栏，创建新的react应用
官方文档里，给出了文档说明，我们按照这个说明，去创建项目即可。
在cmd里运行命令
npx create-react-app my-app
运行命令后，按照步骤提示安装即可。
安装的时候，由于需要安装依赖，所以需要等待一会。
而关于ui组件库部分，我在想：要不要使用组件库来开发呢？
平时使用vue或者react开发项目时，我都是使用组件库来开发。使用组件库开发，对开发项目来说，确实挺方便的，可以加速项目的开发进度。
但是，这是我自己的项目，进度对我来说不是很重要。那就不用组件库，采用原生的方式进行开发吧。
页面开发，我主要是开发一个首页。
首页里，主要有这几部分：
- 搜索
- banner
- 金刚区
- 秒杀
- banner
- 猜你喜欢
搜索模块代码
let Search = React.createClass({
getInitialState: function() {
return {
bg: "transparent",
}
},
componentDidMount: function() {
window.onscroll = (event) => {
let realHeight = document.documentElement.scrollTop || document.body.scrollTop;
let optatic = 0.8 * (realHeight/142);
if(optatic <= 0.8 ) {
this.setState({
bg: `rgba(234, 44, 44, ${optatic})`,
})
}
}
},
render: function() {
let bColor = this.state.bg ? this.state.bg : 'transprent';
return (
<div id="search" className="pf" style={{ background: bColor }}>
<div className="search pr">
<div className="sl pa">
<i></i>
</div>
<div className="frc pr">
<span className="searchicon pa"></span>
<form>
<input placeholder="全场畅饮，部分低至99减50" type="text"/>
</form>
</div>
<div className="sub pa">
<span>登录</span>
</div>
</div>
</div>
);
}
})
banner模块代码
let Header = React.createClass({
getInitialState: function() {
return {
imgUrls: [],
};
},
componentDidMount: function() {
jsonp(this.props.source, "", "callback", (data) => {
if(data.status) {
//如果组件渲染到了 DOM 中，isMounted() 返回 true。
//可以使用该方法保证 setState() 和 forceUpdate()
//在异步场景下的调用不会出错。
if(this.isMounted()) {
this.setState({
imgUrls: data.data,
})
new Swiper ('#header .swiper-container', {
loop: true,
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay : 3000,
autoplayDisableOnInteraction : false,
})
}
}else {
alert(data.msg);
}
});
},
render: function () {
let countId = 0;
return (
<div id="header">
<div className="swiper-container">
<div className="swiper-wrapper">
{
this.state.imgUrls.map((url) => {
return <div className="swiper-slide" key={"header" + countId++} >
<img className="img" src={url} />
</div>
})
}
</div>
<div className="swiper-pagination"></div>
</div>
</div>
);
}
})
模块的开发，主要是基于组件的形式开发的。
同时页面的开发，大家可以参考一下京东的首页来进行开发。这里，就不带大家详细开发页面内容了。
等待项目开发完成，开始进入到项目部署阶段。
服务器部署
前端项目开发好之后，就可以进行服务器部署了。
要进行服务器部署，首先你得有服务器。随着云服务的推广和普及，现在，我们可以非常方便地就拥有一台云服务器了。
云服务器的厂商有很多，这里我选择了亚马逊云服务器。亚马逊云服务器是亚马逊公司推出的云服务器，大公司推出来的产品，我相信它。
好了，介绍这么多，我们开始到服务器里，部署项目吧。
登录亚马逊云服务器后，进入服务器控制台页面。我们在顶部搜索栏里，搜索EC2。
我们可以查看到搜索结果，点击EC2，进入EC2的控制台页面。
进入EC2控制台之后，我们点击启动实例按钮。
点击启动实例，进入到实例创建页面
这里，我给实例起了一个名字，叫做myserser。当然，你可以自己起一个别的名字。
下面的操作系统，我选择的是亚马逊的一个linux系统。
对，没错，服务器里我使用的是linux系统。如果你对linux系统不熟悉的话，也可以安装其它系统，比如windows系统。
关于安装其它系统，这里就不介绍了。
下面还有一些其它配置项
不过这些配置项，我们暂时使用不到，先保持默认即可。如果后面想要修改，还是可以修改的。
不过注意，有一个密钥对，是必须要配置的。一会实例创建好了，我们需要使用这个密钥对去登录的。
点击创建新密钥对按钮
这里我给密钥对命名为myserver，和我实例名字一样，方便记忆。
点击创建密钥对，密钥对就创建好了。
整个实例的配置项，都配置好了，我们点击右侧的启动实例按钮，就可以把实例启动了。
实例正在创建
我们等待一会。
实例启动成功了，我们就可以连接实例了，点击中间的连接到实例按钮。
我们选择第一种方式就好了，它是基于浏览器的网页形式，显示命令行窗口的。有了命令行窗口，我们就可以在里面输入命令行，执行命令了。
我们进入到命令行窗口了，和实例建立了连接
在服务器上部署项目，我是打算使用nginx来进行部署的。
要想使用nginx，当然需要先安装nginx了
在安装前，我们先查看一下源里是否有nginx
在控制台执行下面命令
yum list nginx
我们可以查看到nginx的版本信息了，源里面有nginx，我们可以安装nginx了。
在控制台执行下面命令
yum install nginx
等待一会，nginx就安装好了。nginx安装好了，我们还需要安装其它工具–git。
执行命令
sudo yum install git -y
之所以安装git，是因为一会我们要从git仓库，把代码拉下来。
等待一会，git就安装好了。在云服务器里，安装这些工具，还是挺快的。
从git仓库拉取代码
git clone https:xxxxx
把你的仓库代码拉下来之后，进入到你的项目里。
我们通过cd命令，进入你的项目文件夹，通过ls命令查看文件
ls
查看之后，我们的html文件，都下载下来了。不过我们现在是在**~目录下拉取代码的，我们应该在local**目录下拉取代码的。
现在就有两种选择了
- 到local文件夹里，重新从git仓库里拉取代码
- 不用重新拉取代码，把拉取的代码，拷贝到local文件夹里
我就不重新拉取代码了，毕竟已经把代码拉取下来了。我选择第二种方式，把代码拷贝到local文件夹里。
通过cd命令进入到仓库文件夹里，执行下面的命令
cp -r * /local/dist
这个命令的意思是，把当前文件夹里的所有文件，都拷贝到/local/dist目录里，即dist文件夹里。
拷贝完之后，我们就可以启动项目了。不过启动之前，还需要修改一下nginx的配置。
因为我们的静态资源文件，不是放在nginx的html目录下。而nginx启动的时候，默认的静态资源目录是在它的html文件夹的。现在我们的html文件，都是放在/local/dist目录里。
我们需要把nginx的配置文件里的root，修改为我们的html文件所在的目录。
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /local/dist;
index index.html index.htm;
}
修改之后，就可以使用nginx启动了，
在控制台执行命令
systemctl start nginx
等待一会，nginx就启动了。
项目启动了，由于我们是使用80这个端口的。
而在实例的安全组里面，80端口是默认就给放开了。所以我们不用配置实例的安全组，网站也能够访问
在浏览器里，输入我们的公网ip。打开网站不需要携带端口号，因为网站的默认端口就是80了。
在浏览器里，可以看到我们的京东商城首页了。一眼看过去，是不是和京东商城很相似。如果我没有告诉你，这是我自己开发的京东商城页面，你会看的出来，是我开发的，还是京东官方的吗？
完结
文章最后，我们已经介绍完如何使用react来打造一个京东商城了。
看完本篇文章，如果你也想打造一个京东商城，当然不一定是京东商城。这里我打造的是京东商城，你也可以打造一些其它的电商商城。
可以参考一下本篇文章，自己尝试开发部署一下。
扫一扫
1733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
