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依赖
<dependency>
<groupId>com.spring4all</groupId>
<artifactId>swagger-spring-boot-starter</artifactId>
<version>1.8.0.RELEASE</version>
</dependency>
-
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文件夹建立相应的组件
