4、SPA单页应用开发

2019-03-22 本文已影响64人 97271f60249a

应用开发角色总结

1、场景——中后台管理系统

技术栈：SpringBoot、vue-cli SPA、npm、ElementUI
推荐使用的IDE：VS code、WS、HB

2、场景——H5前端开发

技术栈：vue-cli、SPA、npm、建议自己布局手写样式
推荐使用的IDE： WS、VS code、HB

3、场景——跨端APP开发

技术栈：uni-app、Flutter、RM、cordova（调用底层api）
推荐使用的IDE：HB、打包成可安装的APP

后端配置跨域

1、在pom.xml文件中添加swagger依赖

<dependency>
           <groupId>com.spring4all</groupId>
           <artifactId>swagger-spring-boot-starter</artifactId>
           <version>1.8.0.RELEASE</version>
       </dependency>

2、项目结构，config包下放入一个配置类

image.png
WebMvcConfigurer类

package com.springboot.mybatis.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfigurer extends WebMvcConfigurerAdapter {
    //跨域配置
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重写父类提供的跨域请求处理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路径
                registry.addMapping("/**")
                        //放行哪些原始域
                        .allowedOrigins("*")
                        //是否发送Cookie信息
                        .allowCredentials(true)
                        //放行哪些原始域(请求方式)
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        //放行哪些原始域(头部信息)
                        .allowedHeaders("*")
                        //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                        .exposedHeaders("Header1", "Header2");
            }
        };
    }
}

配置文件加注解：@Configuration

3、主类开启注解

@EnableSwagger2Doc

小知识1：尺寸单位——upx和px的关系

uni-app upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明：

1. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117upx。
1. 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400upx。