how2j.cn

相关下载
文件名 文件大小
tomcat_with_jdk_hsqldb_springboot.rar 371m

16分
本视频采用html5方式播放,如无法正常播放,请将浏览器升级至最新版本,推荐火狐,chrome,360浏览器 如果装有迅雷,播放视频呈现直接下载状态,请调整 迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)

步骤 1 : 下载并运行   
步骤 2 : 访问地址   
步骤 3 : nginx   
步骤 4 : nginx.conf 配置文件   
步骤 5 : 启动nginx   
步骤 6 : 访问测试   
步骤 7 : 动静分离测试   

步骤 1 :

下载并运行

学习一个项目,首先要确保这个项目是可以跑得起来的,这样有助于建立学习的信心。 不然像百度那样,收到很多的教程,跑都跑不起来,那不是耽搁时间嘛。
同时,也为了方便同学观看演示效果,准备了一个无需安装JDK,无需配置TOMCAT,无需安装配置数据库的可运行演示。
how2j 模仿天猫整站 springboot版本地演示启动思路:
1. 因为springboot 版用到了 redis 和 elasticsearch,所以启动过程,请务必按照顺序启动
2. 不同软件之间存在兼容问题,如果您本机已经装有了 redis或者 elasticsearch 或者 kibana, 但是版本不对,请暂停本机版本,使用我提供的版本
3. 启动顺序请按照批处理前的序号,依次启动
3.1 1-redis.bat
3.2 2-elasticsearch.bat
3.3 3.kibana.bat
3.4 4-tomcat.bat
下载并运行
步骤 2 :

访问地址

考虑到同学的机器上已经有tomcat,可能已经占用了80,8080端口,所以这个Tomcat是用了9090端口,避免和其他端口冲突。
请访问如下地址:
前台演示:

http://127.0.0.1:9090/tmall_springboot/home

后台管理:

http://127.0.0.1:9090/tmall_springboot/admin_category_list

虽然看上去和how2j 的官网演示:

http://how2j.cn/tmall
http://how2j.cn/tmall/admin

用户感受上一样,但是在技术上是不一样的,其中一个重要改动是做了前后端分离,数据都是通过 axios.js 封装 ajax 到服务端取的数据,然后再由 vue.js 把数据展示开。
访问地址
步骤 3 :

nginx

接下来进行 nginx 的配置和启动。
为什么不像其他几个步骤一样搞一个 5-nginx.bat 呢?
因为 nginx 要做动静分离,必须配置路径才可以使用。 不像其他几个步骤,站长已经做了铺垫,直接点击就可以用了。
这里使用 nginx 主要做两件事:
1. nginx 采用80端口,反向代理到上述tomcat的9090端口。 这样用户访问的时候,就 访问80端口
2. 动静分离,对于图片,css,js 等等一系列静态资源,都直接走 nginx, 而不再通过 tomcat了。
步骤 4 :

nginx.conf 配置文件

打开nginx目录下的 nginx.conf 配置文件。
1. 反向代理配置。 这个已经配置好了,无需改动

proxy_pass http://127.0.0.1:9090;

2. 动静分离, 这个动静分离我提供的路径是:

location ~\.(css|js|png|ttf|woff|woff2|eot|svg|map|jpg|gif)$ {
root E:/project/tomcat_with_jdk_hsqldb_springboot/tomcat-8.5.23/webapps;
}

这个路径,每个学习的同学都不一样,所以要根据自己情况,把它修改为自己的路径,一定要是 tomcat的 webapp目录哦。
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { proxy_pass http://127.0.0.1:9090; } location ~\.(css|js|png|ttf|woff|woff2|eot|svg|map|jpg|gif)$ { root E:/project/tomcat_with_jdk_hsqldb_springboot/tomcat-8.5.23/webapps; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
步骤 5 :

启动nginx

启动方式: 从控制台切换到 nginx 所在目录:

e:
E:\project\tomcat_with_jdk_hsqldb_springboot\nginx

启动命令:

start nginx
步骤 6 :

访问测试

访问地址使用80,也就无需显示指定端口号了:
前台演示:

http://127.0.0.1/tmall_springboot/home

后台管理:

http://127.0.0.1/tmall_springboot/admin_category_list
访问测试
步骤 7 :

动静分离测试

比如访问地址:

http://127.0.0.1/tmall_springboot/img/category/83.jpg

可以看到图片,但是并不能确定,这个图片到底是 nginx 直接访问到的,还是tomcat 那里来的。
这个时候,关闭9090端口的 tomcat, 再访问这个地址,发现依然可以访问,说明静态资源都是从 nginx 这里访问的了。
当然,关闭 9090 端口的tomcat之后,也就只有静态资源可以访问了,其他的业务数据就没法用了。
动静分离测试


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-11-03 在 本地演示 环节,启动Nginx后网页无法正常显示
huangruihhu



在 本地演示 环节,启动Nginx后,http://127.0.0.1/tmall_springboot/home 的界面如图所示

							

							


1 个答案

how2j 答案时间:2018-11-04
那说明你的静态资源部分配置错了,所以看不到图片,看看我在视频里是如何配置的




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-10-31 Nginx启动失败
李芮从
在控制台执行启动Nginx命令后一闪而过,是不是端口被占用了








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到








提问之前请登陆
关于 实践项目-天猫整站Springboot-本地演示 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图