宁波市江北区庄桥街道工程建设领域网站,网站页面数量,网站建设后期需要后期做的,视频网站建站免费42. VUE脚手架项目嵌套路由
在配置路由#xff08;配置/src/router/index.js#xff09;时#xff0c;如果配置的路由对象是routes常量的直接数组元素#xff0c;则此路由配置的视图会显示在App.vue的router-view/中。
在设计视图时#xff0c;可能会出现ro…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;charsetUTF-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());
}
