一.前台部分

---

1.概述

环境准备： node
     npm 包管理工具（node自带）

推荐工具： vscode

vs配置： 1.下载插件 settings sync

         2.ctrl+alt+d 同步配置


项目地址: 项目模板

2.文件结构

1587975094230.png

3.文件结构说明

|-- vue-cli2.0脚手架文件说明
    |-- public                             项目所有静态文件
    |   |-- index.html                     入口html文件
    |   |-- js                             全局配置文件
    |   |   |-- config.js   
    |   |   |-- uino.js
    |   |-- static                         字体图标、字体、视频等不需要打包的静态文件
    |   |   |-- SourceHanSansCN-Light.otf
    |   |   |-- font
    |   |   |   |-- iconfont.css
    |   |   |   |-- iconfont.eot
    |   |   |-- svg
    |   |       |-- ad.svg
    |   |-- vendor                          第三方库、插件
    |       |-- cesiumWorkerBootstrapper.js
    |       |-- createVerticesFromHeightmap.js
    |-- src
    |   |-- App.vue                        程序入口组件
    |   |-- main.js                        程序入口文件，创建vue实例，引入各种插件
    |   |-- router.js                      路由文件
    |   |-- store.js                       全局状态管理文件
    |   |-- assets                         需要打包的静态文件 图片 公共css样式等
    |   |   |-- img       
    |   |   |-- style
    |   |       |-- reset.css
    |   |-- common                          项目公用的js文件
    |   |   |-- http
    |   |       |-- http.js
    |   |-- components                      vue组件库，所有vue组件分模块
    |   |   |-- index
    |   |       |-- Index.vue
    |   |-- plugins                         项目所用插件 一般为全局引入
    |   |   |-- animejs.js
    |   |-- views                           单个路由入口文件
    |       |-- Home.vue
    |
    |-- .eslintignore                       忽略eslint语法检测的配置文件
    |-- .eslintrc.js                        eslint语法检测配置
    |-- .gitignore                          忽略git提交的文件
    |-- .stylelintignore                    忽略stylelint样式检查的配置文件
    |-- .stylelintrc.js                     stylint样式检查的配置文件
    |-- package-lock.json                   项目依赖包详细版本配置
    |-- package.json                        项目依赖包大版本配置
    |-- README.md                           项目说明文档
    |-- vue.config.js                       项目全局配置和webpack打包配置

4. npm常用命令

npm install -g cnpm --registry=https://registry.npm.taobao.org   安装淘宝镜像            
npm/cnpm install  下载依赖包
npm/cnpm run serve 启动服务
npm/cnpm run build 项目打包

5.第三方库

UI框架
    Element-UI   
    Layui     
动画库
    animate.css
    animejs

6.效果

1587975322452.png

二：后台部分

---

1.跨域配置（可修改配置为允许特定IP可访问）

@Configuration
public class CorsConfig extends WebMvcConfigurationSupport {
    /**
     * 解决 swagger静态资源无法访问的问题
     * @param registry
     */
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
        registry.addResourceHandler("swagger-ui.html")
                .addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**")
                .addResourceLocations("classpath:/META-INF/resources/webjars/");
        super.addResourceHandlers(registry);
    }
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("*")
                .maxAge(3600);
    }
}

2.接口文档（swagger2）

导入依赖

e.g：

        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.7.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.7.0</version>
        </dependency>

swagger配置

e.g：

@Configuration
@EnableSwagger2
public class SwaggerConfig {

    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .pathMapping("/")
                .select() // 选择那些路径和api会生成document
                .apis(RequestHandlerSelectors.any())// 对所有api进行监控
                //不显示错误的接口地址
                .paths(Predicates.not(PathSelectors.regex("/error.*")))//错误路径不监控
                .paths(PathSelectors.regex("/.*"))// 对根下所有路径进行监控
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder().title("智慧园区接口文档 V1.0")
                .licenseUrl("http://www.apache.org/licenses/LICENSE-2.0.html")
                .version("v1.0")
                .build();
    }

3.统一数据返回格式

e.g:

{
    "success": true,
    "code": 200,
    "data": {
        "id": "111",
        "name": "lili",
        "age": 20
    },
    message: null
}

4.路由返回错误页面处理

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

//    解决history路由模式访问不到页面的问题,将页面重定向到index.html
    @Bean
    public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer(){
        return factory -> {
            ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
            factory.addErrorPages(error404Page);
        };
    }
}

4.效果

1587975607770.png 1587975627009.png

三：部署

1.jar包方式

将前端打包的文件复制到static文件夹下

1588035694544.png

2.nginx部署

nginx配置

 server {
        listen       9997;
        server_name  localhost;
        location / {
            root   html;
            try_files $uri $uri/  /index.html; // 解决history路由不能跳转的问题
        }
}

1588038207177.png