【无标题】

配置路由404

1.在views中写一个404.vue文件

<template>
    <div class="404">
      <h1>404 找不到页面</h1>
    </div>
  </template>
  

2.在index.js中写入（*通配符）

{
    path:"*",
    component: () => import(/* webpackChunkName: "test" */ '../views/404.vue')
  }

 结果如下，任意一个找不到页面都会显示

vue整合spring boot（前后端分离）

前端: node   （使用vscode）

后端:tomcat    (使用IDEA)

Tomcat  单体项目

跨域只能写一次

后端

spring boot jar包如下

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
        </dependency>
        <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>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.33</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.2</version>
        </dependency>

 使用如下代码生成所需表的controler,mapper,entity,等

package com.aaa.demo7;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.generator.FastAutoGenerator;
import com.baomidou.mybatisplus.generator.config.OutputFile;
import com.baomidou.mybatisplus.generator.fill.Column;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
public class MyTest {
    public static void main(String[] args) {
        FastAutoGenerator.create("jdbc:mysql://localhost:3306/qq","root","123456")
                // 全局配置
                .globalConfig((scanner, builder) -> builder
                        .author("xiaowu")
                       .outputDir("D:\\BaiduNetdiskDownload\\js\\demo7\\src\\main\\java")
                )
                // 包配置
                .packageConfig(
                        (scanner, builder) ->
                                builder
                                        .parent("com.aaa")
                                        .pathInfo(Collections.singletonMap(OutputFile.xml, "D:\\BaiduNetdiskDownload\\js\\demo7\\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(","));
    }
}

跨域的配置:(建config包，写)

package com.aaa.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@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 post delete put
        source.registerCorsConfiguration("/**", corsConfiguration); // 所有的路径都允许跨域
        return new CorsFilter(source);
    }

}

查询数据库的controler

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

}

成功

前端

1.写一个vue组件

<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          prop="deptno"
          label="编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="dname"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="loc"
          label="哈哈"
          width="120">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
   
  },
  created() {
    axios.get("http://localhost:8080/dept").then(res=>{
      this.tableData=res.data;
    })
   
  }
}
</script>

2.配置路由（在index.js中）

{
    path: '/main',
    name: 'main',
    component: () => import(/* webpackChunkName: "main" */ '../views/main.vue'),
   children:[{
      path: '/test',
      name: 'test',
      component: () => import(/* webpackChunkName: "test" */ '../views/test.vue')
    }
  ]
  }

前后端启动，测试