vue2+springboot2前后端分离

2023-11-09 10:56 小罗世界阅读(97) 评论(0) 收藏举报

后端布局：

config文件夹两个文件

CorsConfig.java代码：解决前端请求接口跨域问题

package com.example.springboot.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 CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
//        corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置访问源地址
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

Corsconfig

MybatisPlusConfig.java代码：Mybatisplus框架写接口,注意：

@MapperScan("com.example.springboot.mapper")//写sql文件com.example.springboot.mapper

package com.example.springboot.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
@MapperScan("com.example.springboot.mapper")//写sql文件com.example.springboot.mapper
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));//如果配置多个插件,切记分页最后添加
        //interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); 如果有多数据源可以不配具体类型 否则都建议配上具体的DbType
        return interceptor;
    }
}

MybatisPlusConfig

controller文件是对接口方法的操作：

UserController代码如下：实现对数据进行增删改查，使用Mybatis-plus

package com.example.springboot.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.springboot.entity.User;
import com.example.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import com.example.springboot.mapper.UserMapper;

import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Objects;

@RequestMapping("/user") //起服务统一访问地址http://localhost:8090/user
@RestController
public class UserController {
    @Autowired //注入其他类的注解
    private UserMapper userMapper;
    @Resource
    private UserService userService;
//    @GetMapping("/")    //访问地址http://localhost:8090/user/
//查询所有数据
    @GetMapping        //访问地址http://localhost:8090/user
    public List<User> index(){ //查询所有数据
//        List<User> all= userMapper.findAll(); //mybatis 写法
//        return all;
        return  userService.list();
    }
//新增和修改方法
    @PostMapping//一般数据库新增东西请求 接口路径：http://localhost:8090/user/
    public boolean saveData(@RequestBody User user){   //@RequestBody 可以吧json数据映射成User对象
        return userService.savedata(user);  //新增或者更新
    }
//删除数据方法接口
    @DeleteMapping("/{id}")   //传参，id /{id}和@PathVariable Integer id必须是一致的
    public boolean delete(@PathVariable Integer id){  //访问地址http://localhost:8090/user/1   注：1为传入的参数
//        return userMapper.deleteById(id);
        return userService.removeById(id);
    }
//@PostMapping("/delete") //删除接口路由http://localhost:8090/user/delete?id=1
//public boolean delete(@RequestParam Integer id){
//        return userService.removeById(id);
//}
    //批量删除，通过id
    @PostMapping("/del/batch")   //传一个数组，里面是id值 ids:[1,2,3],通过这些id去删除
    public boolean delete(@RequestBody List<Integer> ids){  //访问地址http://localhost:8090/user/del/batch   注：1为传入的参数
//        return userMapper.deleteById(id);
        return userService.removeBatchByIds(ids);
    }
    //分页查询 mybatis写法
    //@RequestParam 接受数据的页数和数据数量 pageNum=1和pageSize=10
    //接口路径/user/page?pageNum=1&pageSize=10
    //SELECT * from sys_user limit 0,5  分页查询limit第一个参数是从地几行开始查询第二个参数5是查询五条数据
    //得出公式pageNum=第一页-1乘以查询数据条数，即 pageNum=(0-1)*5 从第几行开始查询
//    @GetMapping("/page")  //访问地址是http://localhost:8090/user/page   接口路径/user/page?pageNum=1&pageSize=10
//    public Map<String, Object> findPage(
//            @RequestParam Integer pageNum ,
//            @RequestParam Integer pageSize,
//            @RequestParam String username
//    ){ // @RequestParam映射对应的页数和页数数据量
//        pageNum = (pageNum-1)* pageSize;
//        List<User> data = userMapper.selectPage(pageNum,pageSize,username);
//        Integer total = userMapper.selectTotal(username);
//        Map<String, Object> res = new HashMap<>();
//        res.put("data",data);
//        res.put("total",total);
//        return  res ;//传入页数和页数据条数参数
//    }

//分页查询 mybatis-plus写法
    @GetMapping("/page")  //访问地址是http://localhost:8090/user/page   接口路径/user/page?pageNum=1&pageSize=10
    public IPage<User> findPage(
            @RequestParam Integer pageNum ,
            @RequestParam Integer pageSize,
            @RequestParam(defaultValue = "") String username,
            @RequestParam(defaultValue = "") String nickname,
            @RequestParam(defaultValue = "") String address
    ){ // @RequestParam映射对应的页数和页数数据量
        IPage<User> page=new Page<>(pageNum,pageSize);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        if(!"".equals(username)){
            queryWrapper.like("username",username);  // 模糊查询
        }
       if (!"".equals(nickname)){
           queryWrapper.like("nickname",nickname);
       }
       if (!"".equals(address)){
           queryWrapper.like("address",address);
       }
        queryWrapper.orderByDesc("id");//通过id 排序
        return userService.page(page,queryWrapper);
    }
}

UserControllter

entity文件夹数据库表：表User代码如下

package com.example.springboot.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.Data;

@Data
@TableName(value = "sys_user")//我们数据库本地表名
public class User {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String username;
    @JsonIgnore  //不给前端展示密码，操作数据库，也不会对password进行操作
    private String password;
    private String email;
    private String nickname;
    private String phone;
    private String address;

}

User

mapper文件夹是对写sql语句，UserMapper代码如下：使用Mybatis-plus,写法，直接继承接口

package com.example.springboot.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.springboot.entity.User;
import org.apache.ibatis.annotations.*;

import javax.jws.soap.SOAPBinding;
import java.util.List;
//@Mapper

public interface UserMapper extends BaseMapper<User> {   //UserMapper继承BaseMapper接口 mybatis-plus写法

    //mybatis 写法
//    @Select("select * from sys_user")
//    List<User> findAll();
//
//    @Insert("INSERT INTO sys_user(username,password,nickname,email,phone,address)" +
//            "VALUES(#{username},#{password},#{nickname},#{email},#{phone},#{address})")
//    int insert(User user);
//    int update(User user);
//
//    @Delete("delete from sys_user where id=#{id}")  //{id}和@Param("id") id必须是一致，可以和Integer id中id不一样
//    Integer deleteById(@Param("id") Integer id);  //@Param("id")传参数
//
//    @Select("select * from sys_user where username like concat('%',#{username},'%') limit #{pageNum},#{pageSize}")
//     List<User> selectPage(Integer pageNum, Integer pageSize,String username);
//
//
//    @Select("select count(*) from sys_user where username like concat('%',#{username},'%')")
//    Integer selectTotal(String username);
}

UserMapper

service文件夹是写服务的方法：UserService代码如下：

package com.example.springboot.service;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.springboot.mapper.UserMapper;
import org.apache.catalina.realm.UserDatabaseRealm;
import org.springframework.stereotype.Service;
import com.example.springboot.entity.User;

import javax.annotation.Resource;

@Service
//mybatis 写法
//public class UserService {
//    @Resource
//    private UserMapper userMapper;
//   public int savedata(User user){
//       if (user.getId() == null){ ///如果id 不存在直接新增
//           return userMapper.insert(user); //
//       }else {
//           return userMapper.update(user); //如果id 不存在直接新增
//       }
//
//   }
//
//}


//mybatis-plus写法，直接继承框架

public  class UserService extends ServiceImpl<UserMapper,User>{
    public boolean savedata(User user){
        //更新或报村成功会返回true 或者false
//        if(user.getId()==null){
//            return save(user);
//        }else {
//            return updateById(user);
//        }
        return  saveOrUpdate(user);
    }
}

UserService

新建项目时会新建resources文件，里面主要存放静态资源和配置文件，我这里没有使用Mybatis,所以UserMappers.xml不用，重要的是application.yml配置文件

server:
  port: 8090

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/ldh?serverTimezone=GMT%2b8&useUnicode=true&characterEncoding=UTF-8
    username: root
    password: GZCSNT5885

mybatis:
  mapper-locations: classpath:mapper/*.xml
#  configuration:
#    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

application.yml

最外层以来包配置：

pom.xml代码如下，配置之后需要通过maven刷新

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.16</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>springboot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot</name>
    <description>springboot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.3.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter-test</artifactId>
            <version>2.3.1</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

pom.xml

前端vue2只需npm install 安装依赖包，npm run dev运行， npm run build 打包

前后端分离demo整代码 https://i.cnblogs.com/files

刷新页面返回顶部

小罗世界程序员