企业WEB开发前台工程搭建,ajax跨域的解决


阅读数: 次   

概述

本文将介绍分布式环境下前台系统架构和一步一步搭建的过程，接着通过首页商品类目展示来详解ajax跨域的解决。

一、前台系统系统架构

前台系统和后台系统是分开的，只在数据库层面有关系。都是同一个数据库。

首页：

img

传统架构

image-20200522221143335

分层的方式来架构系统

img

前台系统分为两部分，一部分是服务层web工程，功能就是发布服务

另外一部分：表现层，展示页面，没有业务逻辑。所有业务逻辑就是调用服务层的服务。

采用分层架构有利于系统的维护，系统的扩展。这其实就是系统的可维护性和可扩展性。分层就是按照功能把系统切分细分，细分之后就能分布式部署，就能引入伸缩性，就能提高性能。

优点：

1、前台系统和服务层可以分开，降低系统的耦合度。

2、开发团队可以分开，提高开发效率

3、系统分开可以灵活的进行分布式部署。

缺点：服务之间通信使用接口通信，开发工作量提高。

二、搭建服务系统

服务形式：对外提供rest形式的服务，供其他系统调用。使用http协议传递json数据。

1.创建工程

img

2.配置文件

2.1pom.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>com.taotao</groupId>
		<artifactId>taotao-parent</artifactId>
		<version>0.0.1-SNAPSHOT</version>
	</parent>
	<groupId>com.taotao</groupId>
	<artifactId>taotao-rest</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<dependencies>
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-manager-mapper</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aspects</artifactId>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jsp-api</artifactId>
			<scope>provided</scope>
		</dependency>
	</dependencies>
</project>

2.2web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="taotao" version="2.5">
	<display-name>taotao-manager</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
	<!-- 加载spring容器 -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:spring/applicationContext-*.xml</param-value>
	</context-param>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	<!-- 解决post乱码 -->
	<filter>
		<filter-name>CharacterEncodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>utf-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>CharacterEncodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	<!-- springmvc的前端控制器 -->
	<servlet>
		<servlet-name>taotao-manager</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<!-- contextConfigLocation不是必须的， 如果不配置contextConfigLocation， springmvc的配置文件默认在：WEB-INF/servlet的name+"-servlet.xml" -->
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring/springmvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>taotao-manager</servlet-name>
		<url-pattern>/rest/*</url-pattern>
	</servlet-mapping>
</web-app>

2.3框架整合

由于用到的技术有Mybatis、Spring、Springmvc，所以之前taotao-manager-web下整合的直接拿过来就行了

2.4Tomcat插件配置

修改pom.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<build>
    <!-- 配置插件 -->
    <plugins>
        <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <configuration>
                <port>8081</port>
                <path>/</path>
            </configuration>
        </plugin>
    </plugins>
</build>

2.5安装taotao-manager到本地仓库

因为我们需要和数据库交互，所以我们需要依赖pojo和mapper包，需要将taotao-manager安装到本地仓库

Maven命令：install -DskipTests（这里有ftp连接图片服务器会自动测试，我们跳过测试）

三、门户系统搭建

广义上的门户就是将各种应用系统、数据资源和互联网资源集成到一个信息管理平台之上，并以统一的用户界面提供给用户，并建立企业对客户、企业对内部员工和企业对企业的信息通道。

简单来说就是网站的入口。

1.使用到的技术

1、Spring

2、Springmvc

3、Jstl、jQuery

4、httpClient（使用java代码模拟浏览器）

2.创建工程

img

3.配置文件

3.1pom.xml

依赖common包，其他的根据用到的技术配置即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<dependency>
       <groupId>com.taotao</groupId>
       <artifactId>taotao-common</artifactId>
       <version>0.0.1-SNAPSHOT</version>
   </dependency>
   <!-- JSP相关 -->
   <dependency>
       <groupId>jstl</groupId>
       <artifactId>jstl</artifactId>
   </dependency>
   <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>servlet-api</artifactId>
       <scope>provided</scope>
   </dependency>
   <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>jsp-api</artifactId>
       <scope>provided</scope>
   </dependency>

3.2web.xml

修改前端控制器截取的路径

1
2
<!-- 伪静态化 -->
<url-pattern>*.html</url-pattern>

这里伪静态化是指我们虽然是个动态页面，但是我们可以通过restful风格伪装成静态界面，有助于搜索引擎排名靠前，因为静态界面符合搜索引擎喜好

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

3.3框架整合

img

3.4Tomcat配置

端口设置为8083

4. 显示欢迎页Controller

1
2
3
4
5
6
7
8
9
@Controller
public class PageController {

	@RequestMapping("/index")
	public String showIndex() throws Exception {
		return "index";
	}
	
}

为什么/index就能访问主页？

我们在前端控制器上设置了*.html，然后web.xml中配置了地址后面没有值优先访问index.html，被Springmvc拦截，去RequestMapping中找/index

四、首页商品类目展示

首页左侧有一个商品分类。当鼠标分类上，需要展示出此分类下的子分类。当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求，请求json数据包含分类信息，得到json数据后初始化分类菜单，展示。

1. Json数据的格式

image-20200522223242817

image-20200522223312029

2.Ajax跨域请求

2.1跨域问题

js是不能跨域请求。出于安全考虑，js设计时不可以跨域。

img

什么是跨域：

1、域名不同时。

2、域名相同，端口不同。

只有域名相同、端口相同时，才可以访问。 可以使用jsonp解决跨域问题。

2.2什么是jsonp

Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

image-20200522223535689

3.服务实现

3.1创建pojo

1
2
3
4
5
6
7
8
9
10
11
public class ItemCat {
	//转换成json数据时使用u作为key
	@JsonProperty("u")
	private String url;
	
	@JsonProperty("n")
	private String name;
	
	@JsonProperty("i")
	private List<?> item;
}
1
2
3
public class CatResult {
	private List<?> data;
}

3.2Service层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@Service
public class ItemCatServiceImpl implements ItemCatService{
	
	@Autowired 
	private TbItemCatMapper itemCatMapper;

	@Override
	public CatResult getItemCatList() {
		CatResult catResult = new CatResult();
		//使用递归实现,这样可以动态随便多少层
		catResult.setData(getCatList(0));
		return catResult;
	}
	
	//查询分类列表
	private List<?> getCatList(long parentId){
		TbItemCatExample example = new TbItemCatExample();
		Criteria criteria = example.createCriteria();
		criteria.andParentIdEqualTo(parentId);
		List<TbItemCat> list = itemCatMapper.selectByExample(example);
		List resultList = new ArrayList<>();
		int count=0;
		for (TbItemCat tbItemCat : list) {
			//判断是否为父节点
			if(tbItemCat.getIsParent()) {
				CatNode node = new CatNode();
				if(parentId==0) {
					node.setName("<a href='/products/"+tbItemCat.getId()+".html'>"+tbItemCat.getName()+"</a>");
					count++;
					if(count>=14)break;
				}else {
					node.setName(tbItemCat.getName());
				}
				node.setUrl("/products/"+tbItemCat.getId()+".html");
				node.setItem(getCatList(tbItemCat.getId()));
				resultList.add(node);
			}else {
//				是叶子节点
				resultList.add("/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName());
			}
		}
		return resultList;
	}
}

3.3Controller层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Controller
public class ItemCatController {

	@Autowired
	private ItemCatService itemCatService;
	
	@RequestMapping(value="/itemcat/list",produces=MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")//解决乱码问题
	@ResponseBody
	public String getItemCatList(String callback) {
		CatResult catResult = itemCatService.getItemCatList();
		//把pojo转换成字符串
		String json = JsonUtils.objectToJson(catResult);
		//拼装返回值
		String result = callback + "(" + json + ");";
		return result;
	}
}

还有一种springmvc4.1后新增的解决乱码的方案

1
2
3
4
5
6
7
8
9
10
//使用MappingJacksonValue对象包装返回结果，并设置jsonp的回调方法。
public MappingJacksonValue queryAll(String callback) throws Exception {
    //查询分类列表
    ItemCatResult result = itemCatService.queryAllCategory();
    //包装jsonp
    MappingJacksonValue jacksonValue = new MappingJacksonValue(result);
    //设置包装的回调方法名
    jacksonValue.setJsonpFunction(callback);
    return jacksonValue;
}

成品：

image-20200522224046411

结语

(=^･ｪ･^=)
(つ と)
∪ひ∪

(=^･ｪ･^=)
(つ∩と)
∪ ω ∪

(>﹏<)
⊃∩⊂
(￣▽￣)
╰ひ╯

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家