Vue & springboot

Sun_Set.

已于 2024-01-11 15:16:19 修改

阅读量330

点赞数 8

于 2024-01-10 14:40:25 首次发布

本文链接：https://blog.csdn.net/Sunseted/article/details/135503064

版权

1.Vue组件

<template></template>里面主要写的是html代码，里面只能有一个跟标签

<script></script>里面是脚本例如：new Vue({ })；

<style></style>就是样式

2.自定义端口号

没有修改之前默认是8080

打开创建的项目，在vue.config.js里面配置

然后重新启动就是

3.使用element-ui和axios

首先通过命令把element-ui和axios安装上

npm  i  element-ui

安装完成之后，在项目下的package.json里面显示

4.创建springboot

配置pom.xml文件

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.7.12</version>
  </parent>
 
  <dependencies>
    <!-- Mybatis plus-->
    <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>5.1.49</version>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.13</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  </dependencies>

配置自动加载的类

package com.aaa.test;
 
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;
 
/**
 * @ fileName:MyTest
 * @ description:
 * @ author:
 * @ createTime:2024/1/5 上午 11:35
 * @ version:1.0.0
 */
 
public class MyTest {
    public static void main(String[] args) {
        //MySQL的路径和账号密码
        FastAutoGenerator.create("jdbc:mysql:///qq", "root", "root")
                // 全局配置
                .globalConfig((scanner, builder) -> builder
                        .author("lw")
                        .outputDir("D:\\idea\\Ideaproject\\springboot2\\src\\main\\java")
                )
                // 包配置
                .packageConfig(
                        (scanner, builder) ->
                                builder
                                        .parent("com.aaa")
                                        .pathInfo(Collections.singletonMap(OutputFile.xml, "D:\\idea\\Ideaproject\\springboot2\\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(","));
    }
}

运行就能自动创建，输入你数据库中的表名，如果要创建多个就表名中间用英文状态下的逗号隔开，创建所有的话输入all就行了。

如果创出来的实体类和其他文件的注释出现乱码的情况

配置application.properties

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql:///qq?useSSL=false&serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
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层，然后开始使用，这里需要跨域使用

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

package com.aaa.controller;
 
import com.aaa.entity.Dept;
import com.aaa.service.IDeptService;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import javax.annotation.Resource;
import java.util.List;
 
/**
 * <p>
 * 前端控制器
 * </p>
 *
 * @author lw
 * @since 2024-01-05
 */
@RestController
@CrossOrigin   //主要用于跨域使用
@RequestMapping("/dept")
public class DeptController {
    //查询所有的部门的信息
 
    @Resource
    private IDeptService deptService;
 
    @GetMapping
    public List<Dept> findAll() {
        List<Dept> list = deptService.list();
        return list;
    }
}

注解方式的跨域，只能当前类或者当前方法可以跨域，还有一种方式，通过配置文件进行跨域的操作。

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  put delete head post
        source.registerCorsConfiguration("/**", corsConfiguration); // 所有的路由都能够进行跨域
        return new CorsFilter(source);
    }
 
}

在前端引入axios发出请求