2024/01/05-vue2 前后端分离

前置准备

        修改node的端口号，如果和后端的端口号一样，后端可能会启动失败

        在vue.config.js中添加框选内容

        使用ui，这里使用都是elementui

npm i element-ui

       完整引入elementui：在 main.js 中写入以下内容（添加备注的那三行是真正要添加的，其余的是main.js本身自带的）

import Vue from 'vue'
import ElementUI from 'element-ui'; //1
import 'element-ui/lib/theme-chalk/index.css';//2
import App from './App.vue'
import router from './router'

Vue.use(ElementUI);//3

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

         安装axios

 npm install axios

        引入axios ,在script中写入以下内容

import ax from 'axios'

 回到idea生成后端代码

        创建springboot项目，配置mybatiesPlus以及其他需要的jar包

//添加在任意地方即可（不要添加到别的标签里面）

    org.springframework.boot
    spring-boot-starter-parent
    2.7.17





//添加在标签内

      org.springframework.boot
      spring-boot-starter-web
      2.7.17
    

    
    
      mysql
      mysql-connector-java
      5.1.47
    

    
    
      com.baomidou
      mybatis-plus-boot-starter
      3.5.3
    

    
    
      com.baomidou
      mybatis-plus-generator
      3.5.3
    

    
    
      org.apache.velocity
      velocity-engine-core
      2.3
    

    
      org.freemarker
      freemarker
    

    

    
      org.projectlombok
      lombok
      1.18.6
    

        创建自动生成类

public class MyTest {
    public static void main(String[] args) {
        //
        FastAutoGenerator.create("jdbc:mysql:///project","root","123456")
                // 全局配置
                .globalConfig((scanner, builder) -> builder
                        .author("瑕光")
                        .outputDir("D:\\IDEA\\IDEA\\IDEA\\File\\test_20240105\\src\\main\\java")
                )
                // 包配置
                .packageConfig(
                        (scanner, builder) ->
                                builder
                                        .parent("org.aaa")
                                        .pathInfo(Collections.singletonMap(OutputFile.xml, "D:\\IDEA\\IDEA\\IDEA\\File\\test_20240105\\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 getTables(String tables) {
        return "all".equals(tables) ? Collections.emptyList() : Arrays.asList(tables.split(","));
    }
}

         需要修改的如下图所示

         运行自动生成的类

 

        编辑启动类

@SpringBootApplication
@MapperScan("org.aaa.mapper")
public class App 
{
    public static void main( String[] args )
    {
        SpringApplication.run(App.class);
    }
}

        编写常规配置文件 application.properties ，记得修改数据库的相关配置

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql:///project?useSSL=false&serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=123456
#  时间   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

 

        配置跨域

        配置跨域有两种方法

        1.加注解，此方法只有该类可以跨域

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

}

        运行启动类

    前后端分离

        引入axios

        到达引入的页面查看

        返回数据即为成功 

        在elementui中找到一个表格，进行修改便可得到

 

        但在开发中我们会写很多页面，所以可以在main.js中进行设置来引用并使用axios

 

        之后将上面页面的axios引入进行一些修改

         如果我们后端的端口号发生变化，那便要修改axios的路径，如果请求多会导致非常麻烦，所以在main.js设置baseURL

        再对上面页面的axios引入进行一些修改

        vue中界面的跳转

this.$router.push("")

push中的即是你要跳转的组件的地址

        嵌套路由，当我们想要实现点击侧边栏使主要内容出现页面的话

        先绑定路由

        先在main中添加

        添加子路由

 

便可实现该功能 

        编写一个当路由不存在时跳转的界面

        先写组件

 配置路由，一定要写在routes的最后面