SPA,单页应用和（一级路由）脚手架程序的构建

1场景

1.1后台管理系统

1.1.1、技术栈

• SpringBoot、vue-cli SPA、npm、ElementUI

1.1.2、IDE

• WB、VS code、HB

1.2 H5前端开发

1.2.1、技术栈

• vue-cli、npm、建议自己布局手写样式

1.2.2、IDE

• WB、VS code、HB

1.3 跨端APP开发

1.3.1、技术栈

• uni-app、Flutter、RN、cordova(调用底层API)

1.3.2、IDE

• HB、打包可安装的APP

后端配置跨域

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

           com.spring4all
           swagger-spring-boot-starter
           1.8.0.RELEASE
       

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

  

  image

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

2、一个Vue单页应用（一级路由）脚手架程序的构建

• 进入某个目录如：D：\VueStudy

• 通过命令创建项目:vue init webpack vue-router-demo1（后几项都选择N）

• cd进入vue-router-demo1目录

  

  image

• 安装依赖：npm install

• 运行npm run dev

• 更改config目录下的Index.js文件，将端口号改成80

• 进行一级路由配置
  AppVue
  router文件夹的index.js文件
  components文件夹建立相应的软件
  1.Index.vue
  2.Message.vue
  改造

• index.js文件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    mode:"history",
   routes: [
    {
        //我的班课
      path: '/',
      name: 'Index',
      component: resolve => require(['../components/Index.vue'],resolve)
    },
    {
        //消息
        path:'/task',
        name:'Task',
        component: resolve => require(['../components/Task.vue'],resolve)
    },
    {
        //库管理
        path:'/lib',
        name:'Lib',
        component: resolve => require(['../components/Lib.vue'],resolve)
    },
    {
        //个人中心
        path:'/ucenter',
        name:'UCenter',
        component: resolve => require(['../components/UCenter.vue'],resolve)
    },
    {
        //新建班课
        path:'/new_course',
        name:'NewCourse',
        component: resolve => require(['../components/NewCourse.vue'],resolve)
    },
    {
        //班课详情
        path: '/course/:id',
        name: 'CourseDetail',
        component: resolve => require(['../components/CourseDetail.vue'], resolve)
    }
  ]
})

• components文件夹建立相应的组件