Vue安装axios,前后端分离，跨越

1.Vue组件

<template>
​
     html
​
</template>
​
<script>
    脚本  new Vue({
​
})
</script>
​
<style>
    样式
</style>
​

2.自定义端口号:

在vue.config.js文件中加上

 

3.使用ui

npm i element-ui

4.安装axios

npm install axios

5.前后端分离

前端:

安装axios 引入axios 发出请求

因为现在前端和后端是属于不同的服务器，所以在使用的时候需要进行跨域

6.跨域的配置

1. 加注解

@CrossOrigin

2. 配置文件的方式

@Configuration
public class CrossConfig {
  @Bean
  public CorsFilter corsFilter() {
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration corsConfiguration = new CorsConfiguration();
//     corsConfiguration.setAllowCredentials(true);
    corsConfiguration.addAllowedHeader("*");  // 允许所有的头
    corsConfiguration.addAllowedOrigin("*");  //
    corsConfiguration.addAllowedMethod("*");  // * get  put delete head post
    source.registerCorsConfiguration("/**", corsConfiguration); // 所有的路由都能够进行跨域
    return new CorsFilter(source);
  }
}

7.注册全局的axios

使用：

8.自动生成代码

public class MyTest {
    public static void main(String[] args) {
        //
        FastAutoGenerator.create("jdbc:mysql://localhost:3306/qq","xxxxx","xxxxx")
                // 全局配置
                .globalConfig((scanner, builder) -> builder
                        .author("qzh")
                        .outputDir("D:\\Code\\spring-project\\Vue\\src\\main\\java")
                )
                // 包配置
                .packageConfig(
                        (scanner, builder) ->
                                builder
                                        .parent("com.aaa")
                                        .pathInfo(Collections.singletonMap(OutputFile.xml, "D:\\Code\\spring-project\\Vue\\src\\main\\resources\\mapper")))
                // 策略配置
                .strategyConfig((scanner, builder) -> builder.addInclude(getTables(scanner.apply("请输入表名，多个英文逗号分隔？所有输入 all")))
                        .controllerBuilder().enableRestStyle().enableHyphenStyle()
                        .entityBuilder().enableLombok().addTableFills(
                                new Column("create_time", FieldFill.INSERT)
                        ).build())
                /*
                    模板引擎配置，默认 Velocity 可选模板引擎 Beetl 或 Freemarker
                   .templateEngine(new BeetlTemplateEngine())
                   .templateEngine(new FreemarkerTemplateEngine())
                 */
                .execute();
// 处理 all 情况

    }
    
    protected static List<String> getTables(String tables) {
        return "all".equals(tables) ? Collections.emptyList() : Arrays.asList(tables.split(","));
    }
}

9.application.properties 

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/yfbank
spring.datasource.username=root
spring.datasource.password=123456
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
spring.jackson.serialization.write-date-keys-as-timestamps=false
logging.level.com.baomidou.ant.test.dao=debug
mybatis-plus.configuration.map-underscore-to-camel-case=true
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
mybatis-plus.mapper-locations=classpath:/mapper/*.xml
mybatis-plus.global-config.db-config.logic-not-delete-value=0
mybatis-plus.global-config.db-config.logic-delete-value=1