SpringBoot+Vue 练习01

目录

Vue配置 

Vue自定义端口号

​编辑使用element-ui

使用axios 

 Mp+SpringBoot

建立项目

pom.xml 

自动生成代码

resources中加入配置文件 application.properties

补充controller

跨域 

1.注解

2.配置文件

 测试后端代码

 实现前后端分离

 布局与嵌套路由

初始页修改 

 菜单绑定路由​编辑

嵌套路由 

 建立自己的404

---

Vue配置 

Vue自定义端口号

使用element-ui

安装

npm i element-ui

在main.js中引入element-ui 

使用axios 

安装

npm i axios 

main.js中配置axios 注册全局axios

 Mp+SpringBoot

建立项目

pom.xml 

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.7.12</version>
  </parent>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.33</version>
    </dependency>

    <!-- mp-->
    <dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-boot-starter</artifactId>
      <version>3.5.3</version>
    </dependency>

    <!-- 自动生成代码-->
    <dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-generator</artifactId>
      <version>3.5.3</version>
    </dependency>

    <!--模板-->
    <dependency>
      <groupId>org.apache.velocity</groupId>
      <artifactId>velocity-engine-core</artifactId>
      <version>2.3</version>
    </dependency>

    <dependency>
      <groupId>org.freemarker</groupId>
      <artifactId>freemarker</artifactId>
    </dependency>

    <!--lombok-->

    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.6</version>
    </dependency>

  </dependencies>

自动生成代码

public class MyTest {
    public static void main(String[] args) {
        //
        FastAutoGenerator.create("jdbc:mysql://localhost:3306","root","root")
                // 全局配置
                .globalConfig((scanner, builder) -> builder
                        .author("LL")
                        .outputDir("D:\\project\\sb-v001\\src\\main\\java")
                )
                // 包配置
                .packageConfig(
                        (scanner, builder) ->
                                builder
                                        .parent("org.example")
                                        .pathInfo(Collections.singletonMap(OutputFile.xml, "D:\\project\\sb-v001\\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(","));
    }
}

resources中加入配置文件 application.properties

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/172
spring.datasource.username=root
spring.datasource.password=root
#  ??  ???    java.util
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 my_name   myName
mybatis-plus.configuration.map-underscore-to-camel-case=true
# ??sql ??
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#mybatis-plus.configuration.log-impl=
mybatis-plus.mapper-locations=classpath:/mapper/*.xml
#????   ???????0  ???1
mybatis-plus.global-config.db-config.logic-not-delete-value=0
mybatis-plus.global-config.db-config.logic-delete-value=1

补充controller

@RestController
@CrossOrigin
@RequestMapping("/dept")
public class DeptController {
      @Resource
      private IDeptService service;
      @GetMapping
      public List<Dept> gets(){
            return service.list();
      }
}

跨域 

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);
    }

}

 测试后端代码

成功 

 实现前后端分离

 

 布局与嵌套路由

初始页修改 

main.js 中可以修改初始页 

或利用App.vue的组件容器来显示login.vue

 菜单绑定路由

路由组件容器 

 

嵌套路由 

路由坐标 

 建立自己的404

路由由上到下匹配，利用这个原理用path:'*' 的路由兜底实现功能

去没有定义的路径：