48.大数据之旅——java分布式项目09-前台系统搭建_java 项目添加一个前台展示页面-CSDN博客

本文链接：https://blog.csdn.net/qq_39188039/article/details/86604208

前台系统搭建

搭建步骤：
1.创建jt-web Maven web工程，并更改三项环境参数
2.让jt-web 继承 jt-parent 工程，并依赖jt-common
3.修改jt-web pom.xml文件，添加tomcat7插件，并设置端口号
4.引入前台的静态文件，js,css，jpg等资源
5.引入Spring 及SpringMVC等配置文件，因为前台系统不直接和数据库做交互，所以不需要配置Mybatis的配置文案
6.配置web.xml
7.配置debug configuration
8.配置nginx反向代理
配置示例：

server {
   
listen       80;
server_name  www.jt.com;
#charset koi8-r;
#access_log  logs/host.access.log  main;
 
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host; #代理头信息，tomcat中就可以获取访问的域名
 
location / {
   
       proxy_pass http://127.0.0.1:8082;
       proxy_connect_timeout 600;
       proxy_read_timeout 600;
}
}

9.配置hosts文件（可以通过SwitchHosts工具类配置）

10.启动前台服务器，输入地址进行访问

www.jt.com/index.html

web.xml配置代码：

<servlet-mapping>
<servlet-name>springmvc-web</servlet-name>
<!-- 为什么配置*.html？因为前台的页面都是静态页面（也可能是伪静态页面），静态页面一般以htm,html为扩展名。
静态网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，
静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。
           静态网页比较稳定，所以容易被搜索引擎检索（爬虫）。
           
           爬虫一般来说它只爬html静态页面，它会检查url，并仅对html,htm结尾的文件发送资源请求，如果是静态网页，爬虫会下载网页，
           并对页面进行处理，处理完之后，爬虫把下载到的网页资源放到大型数据里存储，并建立索引。比如Google索搜引擎，至今存储了30亿个web页面
          
           所以，我们在用搜索引擎搜索某一个网页时，实际上先到搜索引擎的数据库里，根据用户输入的关键字，在配合数据库的索引找到符合条件的页面，
            然后搜索引擎会根据排名算法，向用户展示搜索结果，当用户点击某一个页面时，才真正去访问某个具体的服务网站，比如淘宝，京东。
           这样能够避免爬到哪些数据频繁变动且不真正存在的动态页面文件。
    
           此外，网站本身也会做一些搜索优化，SEO，常见的优化措施就是设置网站标题和关键字
    
           爬虫个人也可以开发，但是想象一下，如果有1000万个个人爬虫同时去爬京东网站，爬虫在爬目标网站的时候，肯定是要发送资源请求的，
           相当于造成10000万的高并发，这个威力比用户并发访问的压力还有大，所以会导致网络或者服务器阻塞，所以网站都会设置相关机制来屏蔽个人爬虫。
   -->
<url-pattern>*.html</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>springmvc-web</servlet-name>
<url-pattern>/service/*</url-pattern>
</servlet-mapping>

为什么配置以*.html为后缀的拦截路径呢？
前台页面一般都是以静态页面来展示的（html,htm)为后缀的页面
静态网页有什么特点：
1.静态网页一经发布到web服务器上，无论是否有用户访问，每个静态页面页面都保存在网站服务器上，也就是静态网页是真正存在的。
2.静态网页比较稳定，有利于被搜索引擎收录。

爬虫，爬虫是搜索引擎的重要组成部分，它是一个自动获取网页内容的程序。爬虫，只爬静态静态，只怕以htm,html为扩展名的网页
动态网页，jsp,.net,php等都不爬，还有网页地址里带？的都不爬。

爬虫会先先查url是否合法，并仅对静态文件发送请求，如果是静态文件，爬虫会下载网页，对网页进行处理后，把网页资源存在大型数据库里存储，并建立
索引。比如Google，至今存储了30多亿的web页面。

当用户通过搜索引擎，输入关键字查找网页时，搜索引擎会调用全文检索技术以及网页排名算法（比如Google的pageRank,百度的pageByPrice)把网页展示给用户。

web.xml的配置说明

<servlet-mapping>
<servlet-name>springmvc-web</servlet-name>
<!-- 以html为后缀（扩展名）的文件，是一个静态页面
静态页面的特点：
1.静态页面是真正存在服务上的文件，动态页面不真正存在
2.静态页面，html，htm.
3.静态页面会被搜索引擎收录。
 
搜索引擎，只收录静态页面。搜索引擎有一个重要的组成部分，叫爬虫。
爬虫是一个抓取网页的程序，爬虫会判断url的合法性，然后对以html,htm为扩展名的url发送请求
发现是静态页面，就把这个静态页面下载下来，然后做一些处理，存在大型数据库里，比如Google
存储了将近30亿个web页面。
 
用户通过搜索引擎来搜索页面，用户通过关键字，搜索引擎根据关键字，做全文检索，配合非常博大的算法，
再结合排名算法（比如Google的pageRank,比如百度的pageByprice)展示给用户。
 
现在京淘，配置的url-pattren 是*.html
前台页面的首页位置WEB-INF/views/index.jsp
需要通过后台Controller转发过来，转发的前提示，Controller收到一个url请求
当 在url地址里输入：http://localhost:8082/index.html,后台controller才能收到
 
这么配置的目的，是为了把我们的页面伪装成一个html静态页面，便于搜索引擎的收录。
不配置 / 的原因是为了 做一个更严格的集中控制，即前天所有的页面，都以html为结尾，都变成
静态页面，让搜索引擎收录到。
 
体现了一个思想，就是想办法和搜索引擎的关系变得更亲密，即让搜索引擎能够抓到更多网站上的内容。
这个SEO优化。
 
SEO优化手段措施之一，就是页面的静态化。
SEO优化手段措施之二，为网站设置标题和关键字。
 -->
<url-pattern>*.html</url-pattern>
</servlet-mapping>

SEO与伪静态

首先要明确一点，就是之所以要静态（伪静态）页面，目的就是为了SEO，搜索引擎优化。

什么是URL伪静态?

最开始，没有动态语言的时候，比如jsp,php,asp。做静态页面是都手工做的，比如做好之后，给这个静态页面编个名，比如 12324.html，然后发布到服务器上，用户就可以访问到了。这种方式，效率相当低，比如更换图片，文字信息等，还得重新得编辑静态页面，替换，发布。特别的麻烦

后来出现了动态语言asp/jsp，和数据库一结合，交互性很强的网站就出现了，访问地址的形式就变成了带有？，向后台传参数，然后数据库根据参数来查询信息。这就是我们所说的动态页面。

后来动态页面技术产生了，这样就可以根据数据库的信息，动态的生成页面了，解放了前台人员的双手，但是搜索引擎不会收录动态页面，还不会收录带？url地址。爬虫去爬这样的地址，很容易陷入死循环，爬不出来，一般我们把这个叫做 “机器人爬虫陷阱”,如果进去爬不出来，只能重启爬虫服务器。所以搜索引擎不会爬动态页面。

有的网站为了避免恶意爬虫，会添加信赖地址，比如google 和百度允许，其他的不允许。
爬虫会设置一个爬页面的频率，这个频率不能太高，也不能太低。太高会提高网站的访问压力。

因为搜索引擎不会收录动态页面，所以早期，人们都是把生成的动态页面，再转换成以html结尾的静态页面，存在服务器上，这些页面是真的静态页面。但是有很严重的问题，随着数据量越来越大，服务器上存储的静态页面越来越多，对网站的访问速度会造成严重的影响，于是，伪静态技术就出现了，伪静态技术解决了三个问题：一是把动态页面转换成html结尾的静态页面，二是可以实时更新数据，三是避免了大量真静态页面的产生

即伪静态技术带来以下几点好处：
真正的静态页面空间存储量大，进行删除或者更新html文件会造成大量文件碎片，动态页面虽然可以实时更新，但对搜索引擎不友好。

伪静态实现原理：
一般用404错误处理机制来实现
比如用户或蜘蛛发送一个静态地址的请求，比如：
http://网址XXX/12345.html时(12345为文章在数据库的ID). 这个页面不存在，所以触发了404错误。但是这个404错误不会给用户和蜘蛛看到，而是会触发伪静态代码
如果是用asp动态技术来实现的话：
404错误出现后，转向index.asp，在index.asp里添加下面的代码：
CurrDomain=Request.ServerVariables(“HTTP_HOST”) '当前访问域名
CurrURL=Replace(Request.ServerVariables(“QUERY_STRING”),“404;http://”&CurrDomain&":80") '当前访问URL
此时的CurrURL应该是：12345.html
如果用java后台程序来做的话：
就是用RESTFUL的接参方式来接，也能拿到12345这个id号

有了文章或商品的ID号(12345)就好办了，从数据库里抓数据，把商品的各项信息，比如商品图片，参数信息，价格填进页面模板里，然后输出到页面里，就OK了。
这样。用户或蜘蛛看到的URL还是他访问的URL，而我们对内容的处理上也用到了动态技术。这就是我们想要的结果。说得简单了一些。但是基本思路就是这样了。

伪静态的好处
1.伪静态生成的页面是以静态页面来展示的，便于SEO优化，搜索引擎能够收录
2.伪静态生成的页面，是不存在的，这样能够避免过多的真静态页面生成，便于维护管理，降低服务器空间的占用率。

跨域问题及解决办法

实验一：在manage.jt.com域下，建立两个文件 test.htm和test.json(放在webapp目录下即可）：
test.html代码:

<!doctype html>
<html>
 <head>
 </head>
 <body>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
//这段js代码的含义就是，当页面被请求时，会利用js去请求http://manage.jt.com/test.json这个文件
//然后利用js函数，把test.json里的json数据拿到，并解析key对应的value值
$(function(){
    
$.get("http://manage.jt.com/test.json",function(data){
    
alert(data.key);
});
});
 
</script>
 
 </body>
</html>
test.json代码（是一个json串）：
{
"key":123
}

当访问 http://manage.jt.com/test.htm 时，页面会弹出 “123”；证明请求的数据已拿到。注意test.htm请求数据的方式，是通过javaScript访问了 http://manage.jt.com/test.json （jquery是对javaScript的封装和扩展，本质上也是javaScript）

实验二:在jt.com域下，把这两个文件拷贝过来，测试看是否能拿到数据
结果：拿不到数据，打开F12开发人员工具，发现出现如下提示：
在这里插入图片描述
JavaScript出于安全方面的考虑，禁止了跨域访问。

JSONP

Jsonp是一种使用模式，用于解决浏览器跨域数据访问的问题。利用

举例说明：
假设客户期望返回JSON数据：{“id”:“1”,“name”:"}
而这个数据由服务端返回，服务端的地址所在域是：http://www.jt.manage.com
那客户就可以发送一个跨域调用：http://www.yiwuku.com/callback?

那么服务端收到这个请求后，发现有callback参数，一般来讲，callback就代表是一个跨域调用，这是约定俗称的一个习惯。
知道是跨域调用后，我们就要组织相应的json格式数据，并用 aaa（callback参数值）将要返回的json格式数据包裹起来（这样就形成了一个js函数），即如下形式：
aaa({“id”:“1”,“name”:"})

页面分析：
在这里插入图片描述

前台页面商品类目展示

在这里插入图片描述

商场首页分类实现

在这里插入图片描述
WebItemCatController类代码：

/**
 * 这个类是用于响应前台页面的商品类目展示
 * @author ysq
 *
 */
@Controller
public class WebItemCatController {
   
 
@Autowired
private ItemCatService itemCatService;
 
private static final ObjectMapper MAPPER=new ObjectMapper();
 
@RequestMapping("/web/itemcat/all")
public void queryItemCatJsonp(String callback,HttpServletResponse resp){
   
ItemCatResult result=itemCatService.queryItemJsonp();
try {
   
String dataJson=MAPPER.writeValueAsString(result);
String jsonData=callback+"("+dataJson