1. Toy模板网首页
  2. > Toy博客

Springboot2+vue2整合项目

7月前 作者：Will凸^-^凸 分类：Toy博客 阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了Springboot2+vue2整合项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端

https://blog.csdn.net/m0_37613503/article/details/128961447

数据库

1.用户表

CREATE TABLE `x_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `status` int(1) DEFAULT NULL,
  `avatar` varchar(200) DEFAULT NULL,
   `deleted` INT(1) DEFAULT 0,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;


insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('1','admin','123456','super@aliyun.com','18677778888','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('2','zhangsan','123456','zhangsan@gmail.com','13966667777','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('3','lisi','123456','lisi@gmail.com','13966667778','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('4','wangwu','123456','wangwu@gmail.com','13966667772','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('5','zhaoer','123456','zhaoer@gmail.com','13966667776','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('6','songliu','123456','songliu@gmail.com','13966667771','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');

2.角色表

CREATE TABLE `x_role` (
  `role_id` int(11) NOT NULL AUTO_INCREMENT,
  `role_name` varchar(50) DEFAULT NULL,
  `role_desc` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`role_id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;


insert into `x_role` (`role_id`, `role_name`, `role_desc`) values('1','admin','超级管理员');
insert into `x_role` (`role_id`, `role_name`, `role_desc`) values('2','hr','人事专员');
insert into `x_role` (`role_id`, `role_name`, `role_desc`) values('3','normal','普通员工');

3.菜单表

CREATE TABLE `x_menu` (
  `menu_id` int(11) NOT NULL AUTO_INCREMENT,
  `component` varchar(100) DEFAULT NULL,
  `path` varchar(100) DEFAULT NULL,
  `redirect` varchar(100) DEFAULT NULL,
  `name` varchar(100) DEFAULT NULL,
  `title` varchar(100) DEFAULT NULL,
  `icon` varchar(100) DEFAULT NULL,
  `parent_id` int(11) DEFAULT NULL,
  `is_leaf` varchar(1) DEFAULT NULL,
  `hidden` tinyint(1) DEFAULT NULL,
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4;


insert  into `x_menu`(`menu_id`,`component`,`path`,`redirect`,`name`,`title`,`icon`,`parent_id`,`is_leaf`,`hidden`) values (1,'Layout','/user','/user/list','userManage','用户管理','userManage',0,'N',0),(2,'user/user','list',NULL,'userList','用户列表','userList',1,'Y',0),(3,'user/role','role',NULL,'roleList','角色列表','role',1,'Y',0),(4,'user/permission','permission',NULL,'permissionList','权限列表','permission',1,'Y',0);

4.用户角色映射表

CREATE TABLE `x_user_role` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `role_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;


insert into `x_user_role` (`id`, `user_id`, `role_id`) values('1','1','1');

5.角色菜单映射表

CREATE TABLE `x_role_menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `role_id` int(11) DEFAULT NULL,
  `menu_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;

后端

1、创建springboot项目2.6.13

2、pom依赖

 <!-- web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- mysql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!-- mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.2</version>
        </dependency>
        <!-- freemarker -->
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
        </dependency>
        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>

3.yml

server:
  port: 9999

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/xdb?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT
  redis:
    port: 6379
    host: localhost

logging:
  level:
    com.zhu: debug

2、Mybatis-plus代码生成

1.编写代码生成器

package com.zhu;

import com.baomidou.mybatisplus.generator.FastAutoGenerator;
import com.baomidou.mybatisplus.generator.config.OutputFile;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;

import java.util.Collections;

public class CodeGenerator {
    public static void main(String[] args) {
        String url = "jdbc:mysql://localhost:3306/xdb?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT";
        String username = "root";
        String password = "123456";
        String moduleName = "sys";
        String mapperLocation = "E:\\Intellij IDEA\\项目\\x-admin\\src\\main\\resources\\mapper\\"+ moduleName;
        String tables = "x_user,x_menu,x_role,x_role_menu,x_user_role";
        FastAutoGenerator.create(url, username, password)
                .globalConfig(builder -> {
                    builder.author("zhutieyang") // 设置作者
                            //.enableSwagger() // 开启 swagger 模式
                            .fileOverride() // 覆盖已生成文件
                            .outputDir("E:\\Intellij IDEA\\项目\\x-admin\\src\\main\\java"); // 指定输出目录
                })
                .packageConfig(builder -> {
                    builder.parent("com.zhu") // 设置父包名
                            .moduleName(moduleName) // 设置父包模块名
                            .pathInfo(Collections.singletonMap(OutputFile.xml, mapperLocation)); // 设置mapperXml生成路径
                })
                .strategyConfig(builder -> {
                    builder.addInclude(tables) // 设置需要生成的表名
                            .addTablePrefix("x_"); // 设置过滤表前缀
                })
                .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
                .execute();
    }
}

Springboot2+vue2整合项目

2、启动类加注解

因为自动生成的时候没有@mapper

Springboot2+vue2整合项目

3、测试

Springboot2+vue2整合项目

3、公共响应类

package com.zhu.common;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result<T> {
    private Integer code;
    private String message;
    private T  data;

    public static <T> Result<T> success(){
        return new Result<>(20000,"success",null);
    }

    public static <T> Result<T> success(T data){
        return new Result<>(20000,"success",data);
    }

    public static <T> Result<T> success(T data,String message){
        return new Result<>(20000,message,data);
    }

    public static <T> Result<T> success(String message){
        return new Result<>(20000,message,null);
    }
    public static<T>  Result<T> fail(){
        return new Result<>(20001,"fail",null);
    }

    public static<T>  Result<T> fail(Integer code){
        return new Result<>(code,"fail",null);
    }

    public static<T>  Result<T> fail(Integer code, String message){
        return new Result<>(code,message,null);
    }

    public static<T>  Result<T> fail( String message){
        return new Result<>(20001,message,null);
    }

}

Springboot2+vue2整合项目
Springboot2+vue2整合项目

4.登录相关接口

4.1、登录

Springboot2+vue2整合项目

controller

@PostMapping("/login")
    public Result<Map<String,Object>> login(@RequestBody User user){

        Map<String,Object>  data = userService.login(user);
        if(data !=null){
            return Result.success(data);
        }

        return Result.fail(20002,"用户名或密码错误");

    }

service

package com.zhu.sys.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.zhu.config.MyRedisConfig;
import com.zhu.sys.entity.User;
import com.zhu.sys.mapper.UserMapper;
import com.zhu.sys.service.IUserService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.omg.CORBA.TIMEOUT;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import java.util.concurrent.TimeUnit;

/**
 * <p>
 *  服务实现类
 * </p>
 *
 * @author zhutieyang
 * @since 2024-04-06
 */
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {

    @Autowired
    private RedisTemplate redisTemplate;


    @Override
    public Map<String, Object> login(User user) {
        // 根据用户名和密码去查询
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,user.getUsername());
        wrapper.eq(User::getPassword,user.getPassword());
        User loginUser = this.baseMapper.selectOne(wrapper);

        // 结果不为空，则生成token,并将用户信息存入redis
        if(loginUser !=null){
            // 暂时用UUID,终极方案是jwt
           String key ="user:"+ UUID.randomUUID();

           // 存入redis
            loginUser.setPassword(null);
            redisTemplate.opsForValue().set(key,loginUser,30, TimeUnit.MINUTES);

            // 返回数据
            Map<String, Object> data = new HashMap<>();
            data.put("token",key);
            return data;
        }


        return null;
    }
}

4.1.2、整合redis

1.pom

<!-- redis -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

2.yml

spring:
  redis:
    host: localhost
    port: 6379

3.配置类

package com.zhu.config;


import com.fasterxml.jackson.annotation.JsonAutoDetect;
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonTypeInfo;
import com.fasterxml.jackson.annotation.PropertyAccessor;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.MapperFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import com.fasterxml.jackson.databind.jsontype.impl.LaissezFaireSubTypeValidator;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.StringRedisSerializer;
import org.springframework.stereotype.Controller;

import javax.annotation.Resource;
import java.text.SimpleDateFormat;
import java.util.TimeZone;

@Configuration
public class MyRedisConfig {

    @Resource
    private RedisConnectionFactory factory;

    @Bean
    public RedisTemplate redisTemplate(){
        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
        redisTemplate.setConnectionFactory(factory);

        redisTemplate.setKeySerializer(new StringRedisSerializer());

        Jackson2JsonRedisSerializer serializer = new Jackson2JsonRedisSerializer<Object>(Object.class);
        redisTemplate.setValueSerializer(serializer);

        ObjectMapper om = new ObjectMapper();
        om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
        om.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
        om.setTimeZone(TimeZone.getDefault());
        om.configure(MapperFeature.USE_ANNOTATIONS, false);
        om.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
        om.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false);
        om.activateDefaultTyping(LaissezFaireSubTypeValidator.instance ,ObjectMapper.DefaultTyping.NON_FINAL, JsonTypeInfo.As.PROPERTY);
        om.setSerializationInclusion(JsonInclude.Include.NON_NULL);
        serializer.setObjectMapper(om);



        return redisTemplate;
    }
}

4.2、获取用户信息

Springboot2+vue2整合项目

controller

@GetMapping("/info")
    public Result<?> getUserInfo(@Param("token") String token){
        Map<String,Object> data = userService.getUserInfo(token);
        if(data != null){
            return Result.success(data);
        }
        return Result.fail(20003,"用户信息获取失败");
    }

service

public Map<String, Object> getUserInfo(String token) {
    // 从redis查询token
    Object obj = redisTemplate.opsForValue().get(token);
    // 反序列化
    User user = JSON.parseObject(JSON.toJSONString(obj),User.class);
    if(user != null){
        Map<String, Object> data =  new HashMap<>();
        data.put("name",user.getUsername());
        data.put("avatar",user.getAvatar());
        List<String> roleList = this.getBaseMapper().getRoleNamesByUserId(user.getId());
        data.put("roles", roleList);
        return data;
    }
    return null;
}

mapper.xml

<select id="getRoleNamesByUserId" parameterType="Integer" resultType="String">
    SELECT
    b.role_name
    FROM x_user_role a,x_role b
    WHERE a.`user_id` = #{userId}
    AND a.`role_id` = b.`role_id`
</select>

4.3、注销

Springboot2+vue2整合项目

controller

@PostMapping("/logout")
public Result<?> logout(@RequestHeader("X-Token") String token){
    userService.logout(token);
    return Result.success("注销成功");
}

service

public void logout(String token) {
    redisTemplate.delete(token);
}

5、跨域处理

记得打开redis

package com.zhu.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 MyCorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        //添加CORS配置信息
        CorsConfiguration configuration = new CorsConfiguration();
        //允许的域,不要写*，否则cookie就无法使用了
        configuration.addAllowedOrigin("http://localhost:8888");//这里填写请求的前端服务器

        //是否发送Cookie信息
        configuration.setAllowCredentials(true);
        //允许的请求方式
        configuration.addAllowedMethod("*");

        // 4）允许的头信息
        configuration.addAllowedHeader("*");


        // 添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",configuration);

        //返回新的CorsFilter
        return new CorsFilter(urlBasedCorsConfigurationSource);

    }
}

6、用户管理接口

Springboot2+vue2整合项目文章来源地址https://www.toymoban.com/news/detail-849028.html

6.1、查询用户列表

1、controller

 @GetMapping("/list")
    public Result<Map<String,Object>> getUserList(@RequestParam(value = "username",required = false) String username,
                                              @RequestParam(value = "phone",required = false) String phone,
                                              @RequestParam(value = "pageNo") Long pageNo,
                                              @RequestParam(value = "pageSize") Long pageSize){

        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(StringUtils.hasLength(username),User::getUsername,username);
        wrapper.eq(StringUtils.hasLength(phone),User::getPhone,phone);

        Page<User> page = new Page<>(pageNo,pageSize);
        userService.page(page,wrapper);

        Map<String,Object> data = new HashMap<>();
        data.put("total",page.getTotal());
        data.put("rows",page.getRecords());

        return Result.success(data);

2、分页拦截器

@Configuration
public class MpConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

到了这里，关于Springboot2+vue2整合项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • springboot2.7整合springSecurity

    springboot2.7整合springSecurity

    本着前人栽树，后人乘凉的这种思想，自己花了一些时间，用心的整理了一套springboot整合springsecurity的教程。 该教程是基于springboot2.7.3版本开发的，在2.7以上版本中，springSecurity已经废弃了WebSecurityConfigurerAdapter，而是使用 bean 注入的方式，详情可参阅官方文档：https://spring

    2023年04月21日
    浏览(44)
  • 6、SpringBoot2之整合Mybatis

    6、SpringBoot2之整合Mybatis

    创建名为springboot_mybatis的新module，过程参考3.1节 注意：虽然本文使用的是 spring boot 2.7.18 和 MySQL 5.7 ，但是出于可移植性、可扩展性和兼容性方面的考虑， druid 的启动器使用的是 spring boot 3 版本的，MySQL 的驱动使用的是 MySQL 8 版本的。 注意：@MapperScan 注解的作用是将指定位置

    2024年02月03日
    浏览(46)
  • 5、SpringBoot2之整合Durid

    5、SpringBoot2之整合Durid

    创建名为springboot_druid的新module，过程参考3.1节 注意：虽然本文使用的是 spring boot 2.7.18 和 MySQL 5.7 ，但是出于可移植性、可扩展性和兼容性方面的考虑， druid 的启动器使用的是 spring boot 3 版本的，MySQL 的驱动使用的是 MySQL 8 版本的。 注意：在 spring boot 2 中，类似 spring.datas

    2024年02月04日
    浏览(39)
  • springboot整合vue2-uploader文件分片上传、秒传、断点续传

    springboot整合vue2-uploader文件分片上传、秒传、断点续传

    vue-simple-uploader 是基于 simple-uploader.js 封装的vue上传插件。它的优点包括且不限于以下几种： 支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传 可暂停、继续上传 错误处理 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传” 分片上传 支持进度、预估

    2024年02月06日
    浏览(61)
  • 7、SpringBoot2之整合事务及AOP

    7、SpringBoot2之整合事务及AOP

    本文在SpringBoot2之整合Mybatis的基础上进行 注意：只要引入 spring-boot-starter-jdbc 启动器（详见6.1节），spring boot 便会自动配置好 DataSourceTransactionManager ； 因此，只需在方法（或者类）加上 @Transactional 注解，即可进行事务管理。 测试前的数据 测试时发生异常 测试后的数据没变

    2024年02月03日
    浏览(48)
  • java SpringBoot2.7整合Elasticsearch(ES)7 进行文档增删查改

    java SpringBoot2.7整合Elasticsearch(ES)7 进行文档增删查改

    首先 我们在 ES中加一个 books 索引 且带有IK分词器的索引 首先 pom.xml导入依赖 application配置文件中编写如下配置 spring.elasticsearch.hosts: 172.16.5.10:9200 我这里是用的yml格式的 告诉它指向 我们本地的 9200服务 然后 我们在启动类同目录下 创建一个叫 domain的包 放属性类 然后在这个包

    2024年02月19日
    浏览(47)
  • ❤ 全面解析若依框架vue2版本（springboot-vue前后分离--前端部分）

    ❤ 全面解析若依框架vue2版本（springboot-vue前后分离--前端部分）

    一般在vue项目public文件夹下命名为“favicon.ico” ❤ 处理步骤 第1步：将图标重命名为“favicon.ico”，并放在项目根目录 下。 第2步：然后在index.html中引入，title中修改页面标题。 第3步：修改build文件夹下 webpack .dev.conf.js和webpack.prod.conf.js文件中的内容。 第五步：重新已经成功

    2024年02月12日
    浏览(56)
  • Vue2实现仿小米商城练手项目前端篇(2-首页实现)

    Vue2实现仿小米商城练手项目前端篇(2-首页实现)

    去年寒假里学习了 Vue.js ，开学后想做一个完整的练手项目实战一下，最后决定模仿小米手机官网做一个网站项目，具体参考了Github上一位作者的项目。 现在已经基本完成了，分享在CSDN作为学习记录。 技术支持 ：该项目采用前后端分离的设计结构，使用 Vue2 + Vue-Router + Vue

    2024年02月09日
    浏览(81)
  • SpringBoot+vue2前后端项目配置ssl证书

    SpringBoot+vue2前后端项目配置ssl证书

    1.首先进入阿里云服务器，搜索ssl证书，免费申请， dns会自动解析该证书，所以不用设置  2.下载tomcat和nginx服务器类型的证书 3.将tomcat服务器类型的文件解压，打开，获得pfx文件，放入项目的resources文件中 4.打开yml配置文件，进行SSL配置,并将http重定向到https   这里注意，

    2024年02月15日
    浏览(58)
  • vue2项目导出操作实现（后端接口导出、前端直接做导出）

    vue2项目导出操作实现（后端接口导出、前端直接做导出）

    实现效果：导出列表数据 导出的内容： 后台相对来说比较简单一点，只要后端配合写接口即可 代码：放在导出事件里进行调整即可完成导出效果 效果如上：个人认为调接口导出的表格更美观一点 操作如下： 首先安装我们需要的xlxs库： 接着在我们项目文件夹/src/assets/js创建

    2024年04月11日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包