第四阶段08-基于element-ui的vue2.0脚手架(续)

42. VUE脚手架项目嵌套路由

在配置路由（配置/src/router/index.js）时，如果配置的路由对象是routes常量的直接数组元素，则此路由配置的视图会显示在App.vue的<router-view/>中。

在设计视图时，可能会出现<router-view/>的嵌套，以本次菜单的设计为例，菜单所在的视图HomeView.vue是显示在App.vue的<router-view/>中的（下图中红色边框的区域），而HomeView本身也使用了<router-view/>使得页面的主要区域由其它视图组件来显示（下图中绿色边框的区域）：

一旦出现了<router-view/>的嵌套，在配置子级<router-view/>的显示的视图组件时，就需要配置嵌套路由！

子级路由的配置，需要在父级路由对象上添加children的属性，例如，以上是HomeView.vue使用了<router-view/>，就在HomeView.vue对应的路由对象上添加children属性，此属性的类型、配置方式与routes常量相同！例如：

另外，配置了children的视图组件都是使用了<router-view/>的，也就说明这个视图组件是不完整的（某些区域需要使用其它视图组件来显示）！这种视图组件应该不允许直接显示，所以，还应该在此视图组件的路由配置上添加redirect属性，表示“重定向”，即：访问此视图组件时，直接重定向（可以理解为：跳转页面）到另一个视图组件，例如：

43. Element UI的菜单与路由

在VUE脚手架项目中，使用Element UI的菜单时，应该在每个<el-menu-item>上配置index属性，且属性值就是此菜单项对应的视图的URL，例如：

然后，在<el-menu>标签上，添加router属性，即可实现根据index跳转URL，例如：

关于router属性（Element UI官网的介绍）：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

需要注意：如果手动修改浏览器的地址栏中的URL（包括刷新页面），视图的显示一般是没有问题的，但是，默认激活的菜单项可能不是你想要的！

在<el-menu>标签上，有default-active属性，表示默认激活的菜单项，应该将此属性配置为当前显示的视图的URL，则配置为：

44. 在VUE脚手架项目安装axios

在项目文件夹下，通过以下命令执行安装axios：

npm i axios -S

例如：

安装完成后，需要在main.js中添加配置：

import axios from 'axios';Vue.prototype.axios = axios;

例如：

至此，当前项目中的任何视图组件中都可以使用axios！

45. 处理跨域访问的错误

当客户端向服务器端提交跨域（提交请求的、被请求的，不在同一台服务器，或不是同一个服务器同一端口）**的异步请求时，默认情况下，服务器端都是不支持的，所以，在客户端的浏览器的控制台会提示以下错误，例如使用Chrome时：

Access to XMLHttpRequest at 'http://localhost:9080/albums/add-new' from origin 'http://localhost:9000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

使用FireFox时：

已拦截跨源请求：同源策略禁止读取位于 http://localhost:9080/albums/add-new 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。状态码：200。

要解决这个问题，服务器端必须允许跨域访问！

在基于Spring MVC的项目中，需要自定义配置类，实现WebMvcConfigurer接口，重写其中的addCorsMappings()方法，在其中配置允许跨域的访问。

在csmall-product项目中，在项目的根包下，创建config.WebMvcConfiguration配置类，通过此类配置允许跨域访问：

package cn.tedu.csmall.product.config;import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Slf4j
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowedHeaders("*").allowedMethods("*").allowCredentials(true).maxAge(3600);}}

完成后，重启服务器端项目，客户端再次提交请求，在浏览器的控制台中可以看到，不再出现跨域的错误信息。

46. 关于@RequestBody注解

当客户端提交请求时，使用整个对象（this.ruleForm）作为请求参数，如果服务器端处理请求的方法的参数之前没有使用@RequestBody，将接收不到客户端提交的请求参数，即：对于服务器端而言，各请求参数均是null值！

**提示：**当请求参数上添加了@RequestBody后，在Knife4j的API文档中，调试界面将不再提供各请求参数的输入框，而是需要自行组织JSON格式的请求参数进行调试！

当服务器端没有在请求参数之前添加@RequestBody时，客户端提交的请求参数必须是FormData格式的，例如：

let fromData = 'name=' + this.ruleForm.name+ '&description=' + this.ruleForm.description+ '&sort=' + this.ruleForm.sort;

总结：

• 当服务器端在请求参数之前添加了@RequestBody时，客户端提交的请求参数必须是对象格式的

  • 如果提交的请求参数是FormData格式，在服务器端的控制台会提示异常信息：

    org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported
    

• 当服务器端在请求参数之前没有添加@RequestBody时，客户端提交的请求参数必须是FormData格式的

  • 如果提交的请求参数是对象格式，服务器端将无法接收到任何请求参数，在服务器端的各参数值为null

47. 关于qs框架

在前端项目中，可以使用qs框架轻松的将对象转换成FormData格式的字符串。

在第1次使用之前，需要先安装qs框架，命令为：

npm i qs -S

例如：

然后，在main.js中添加配置：

import qs from 'qs';Vue.prototype.qs = qs;

例如：

至此，当前项目中的任何视图组件中都可以使用qs！

在使用时，调用qs对象的stringify()即可将对象转换成FormData格式的字符串，例如：

let formData = this.qs.stringify(this.ruleForm);

48. 关于前端程序中的this

在VUE脚手架项目中，this关键字指的就是Vue对象，需要通过this关键字调用的有：

• 在main.js中，通过Vue.prototype.xxx声明的属性，需要通过this.xxx进行调用
  • 例如项目中使用的this.axios、this.qs等
• 在JavaScript程序中，通过export default {}中的data()的return {}中声明的属性
  • 例如项目中使用的this.ruleForm等
• 在JavaScript程序中，通过export default {}中的methods属性中声明的函数
  • 例如项目中使用的this.resetForm(formName);等
• 其它的固定用法，通常是由VUE或某些特定框架注册到Vue对象中的属性
  • 例如项目中使用到的this.$message.error(responseBody.message);

49. 添加属性模板

49.1. 开发流程

建议的开发流程仍是：Mapper层 > Service层 > Controller层 > 前端

**注意：**每层开发完成后，都应该及时测试，Mapper层、Service层都可以通过测试类中的测试方法进行测试，Controller层可以通过API文档的调试功能进行测试。

49.2. 关于Mapper层

添加属性模板的本质是向“属性模板表”中插入数据，此前已经完成此功能。

如果制定的业务规则包括“属性模板的名称必须唯一”，在插入数据之前，还应该检查此名称有没有被占用，可以通过“根据属性模板名称统计数据的数量”来实现检查，此前已经完成此功能。

49.3. 关于Service层

49.3.1. 创建必要的POJO类型

添加数据或修改数据大多需要创建对应的POJO类型。

在项目的根包下创建pojo.dto.AttributeTemplateAddNewDTO类，在类中声明客户端提交请求时必须提交的参数对应的属性：

49.3.2. 创建必要的业务接口，并声明抽象方法

在项目的根包下创建service.IAttributeTemplateService接口，并在接口中声明抽象方法：

public interface IAttributeTemplateService {void addNew(AttributeTemplateAddNewDTO attributeTemplateAddNewDTO);
}

49.3.3. 创建必要的业务实现类，并重写业务方法（抽象方法）

在项目的根包下创建service.impl.AttributeTemplateServiceImpl类，实现以上接口，在类上添加@Service注解，在类的内部自动装配AttributeTemplateMapper类型的属性：

@Service
public class AttributeTemplateServiceImpl implements IAttributeTemplateService {@Autowiredprivate AttributeTemplateMapper attributeTemplateMapper;@Overridepublic void addNew(AttributeTemplateAddNewDTO attributeTemplateAddNewDTO) {}
}

关于业务方法的实现：

@Override
public void addNew(AttributeTemplateAddNewDTO attributeTemplateAddNewDTO) {// 从参数对象中取出“属性模板的名称”// 调用Mapper对象的“根据名称统计数量”执行统计// 判断统计结果是否大于0// 是：表示名称已经被占用，则抛出异常（ERR_CONFLICT）// 创建AttributeTemplate实体类的对象// 通过BeanUtils.copyProperties()方法将参数对象中的属性值复制到实体类型对象中// 调用Mapper对象的“插入数据”方法
}

49.3.4. 创建必要的测试类，编写并执行测试方法

在src/test/java下的根包下创建service.AttributeTemplateServiceTests测试类，在类上添加@Slf4j和@SpringBootTest注解，在类中自动装配IAttributeTemplateService接口类型的属性：

@Slf4j
@SpringBootTest
public class AttributeTemplateServiceTests {@AutowiredIAttributeTemplateService service;}

然后，编写并执行测试方法：

@Test
void addNew() {AttributeTemplateAddNewDTO attributeTemplate = new AttributeTemplateAddNewDTO();attributeTemplate.setName("测试数据001");try {service.addNew(attributeTemplate);log.debug("测试通过！");} catch (ServiceException e) {log.debug(e.getMessage());}
}

AddNewDTO attributeTemplate = new AttributeTemplateAddNewDTO();
attributeTemplate.setName(“测试数据001”);

try {service.addNew(attributeTemplate);log.debug("测试通过！");
} catch (ServiceException e) {log.debug(e.getMessage());
}