vue+SpringBoot（前后端交互）

阅读提示：

读者水平：要有前端基础（vue)，了解数据库，后端可以是初学者。

文章重点：我这里只是讲述前后端交互（vue+springboot），重点是后端需要做什么。

最后彩蛋：数据访问层和业务层相关技术感觉很混乱，我整理了一下，当然如果全部整理出来的话就太多了，我就简单介绍一下。

闲谈：我之前主要用的是node.js,最近才开始学习springboot，所以是讲的比较基础。如果你们有什么springboot的见解，欢迎讨论。我个人是可以接受批评的，大佬们可以讲讲自己的看法。

起而行之，共勉

演示效果：

前后端

一、前端（vue）

前端相对简单，就给大家显示部分代码就好了（主要是script部分）

java 复制代码

# 创建Vue项目，自己设置项目名（vue-frontend）
npm create vue@latest vue-frontend

# 进入项目目录
cd vue-frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

二、后端（SpringBoot）

2.1创建项目

依赖根据你的需求添加，后面也可以在项目pom.xml添加依赖，值得注意的是版本问题

2.2数据库

2.3创建相关文件

2.3.1文件结构解析

model

实体类，根据你的数据中表的字段创建相关类，因为只是演示，数据库中就一张表，所以就创建了一个类。
这里用了lombok，可以自动生成get，set......方法。如果是初学者，建议自己写一下，Idea快捷键Alt + Insert (Windows/Linux)

mapper

映射文件，因为我是用来注解方式来处理数据，所以在这里没有用xml方式。如果你要用xml方式的话，需要在 SQL 中使用 resultMap处理复杂SQL（多表查询)。有感兴趣的同志可以了解一下。
column="username"： 数据库字段名
property="username"： Java 实体类属性名

Dao

数据访问层，我这里用了注解方式，简单直观，适合简单SQL
还有几种方法，XML 配置方式（推荐复杂SQL）、MyBatis-Plus 方式（继承BaseMapper）......有机会大家可以了解一下MyBatis-Plus

sevice

业务逻辑、事务管理
正常来说，业务层包括业务接口、业务实现类，我这个比较简单就没过多讲究。
这里提一个好的方法就是IService 是 MyBatis-Plus 提供的通用 Service 接口，ServiceImpl 是 MyBatis-Plus 提供的通用 Service 实现类，我这里虽然没有使用，但还是很有必要去了解。
写到这里突然想到了分页查询，后面有机会可以写相关的文章。（初学者，后面可以了解）

controller

用户控制器，前后端交互的入口层

config

我这里进行了CORS配置，处理跨域问题
具体配置要根据具体情况

WebTestApplication.java

启动类

application.properties

配置文件
我这里只进行了基础的配置，复杂的项目肯定是要配置更多的。

三、彩蛋（知识拓展）

这里讲述了主要技术（目前比较流行），还有很多技术值得去了解，我这里只是冰山一角。

3.1数据访问层（DAO层）

MyBatis-Plus（最推荐）

特点：单表CRUD零代码，开发效率最高

java 复制代码

@Mapper
public interface UserDao extends BaseMapper<User> {
    // 无需编写任何代码，自动拥有以下方法：
    // insert(), deleteById(), updateById(), selectById(), selectList()
    
    // 只需编写复杂查询
    @Select("SELECT * FROM stu WHERE username LIKE CONCAT('%', #{name}, '%')")
    List<User> selectByName(String name);
}

MyBatis（传统方案）

特点**：** SQL完全可控，适合复杂查询

注解方式

java 复制代码

@Mapper
public interface UserDao {
    @Select("SELECT * FROM stu WHERE id = #{id}")
    User selectById(Integer id);
}

XML方式

XML 复制代码

<!-- UserMapper.xml -->
<mapper namespace="com.example.dao.UserDao">
    <select id="selectByCondition" resultType="User">
        SELECT * FROM stu
        <where>
            <if test="username != null">
                AND username LIKE CONCAT('%', #{username}, '%')
            </if>
            <if test="minAge != null">
                AND age >= #{minAge}
            </if>
        </where>
    </select>
</mapper>

Spring Data JPA / Hibernate

特点：全自动ORM，方法名即SQL

java 复制代码

@Repository
public interface UserRepository extends JpaRepository<User, Integer> {
    // 方法名自动生成SQL
    List<User> findByUsername(String username);
    List<User> findByUsernameContaining(String keyword);
    List<User> findByAgeBetween(Integer start, Integer end);
    
    // 自定义JPQL查询
    @Query("SELECT u FROM User u WHERE u.username LIKE %:name%")
    List<User> searchByName(@Param("name") String name);
}

3.2业务层（简单介绍）

Spring Sevice基础

java 复制代码

// 最基础的Service
@Service
public class UserService {
    @Autowired
    private UserDao userDao;
    
    public User findById(Long id) {
        return userDao.selectById(id);
    }
}

MyBatis-Plus 增强版（推荐）

java 复制代码

// 1. Service接口继承IService
public interface UserService extends IService<User> {
    // 自定义业务方法
    List<User> searchByName(String name);
    User login(String username, String password);
}

// 2. Service实现继承ServiceImpl
@Service
@Transactional(rollbackFor = Exception.class)
public class UserServiceImpl extends ServiceImpl<UserDao, User> 
                              implements UserService {
    
    // 基础CRUD方法由父类提供，无需编写
    
    // 实现自定义方法
    @Override
    public List<User> searchByName(String name) {
        return this.lambdaQuery()
                   .like(User::getUsername, name)j
                   .list();
    }
    
    @Override
    public User login(String username, String password) {
        return this.lambdaQuery()
                   .eq(User::getUsername, username)
                   .eq(User::getUserPwd, password)
                   .one();
    }
}

事务管理

声明式事务（常用）

java 复制代码

@Service
@Transactional(rollbackFor = Exception.class)  // 类级别：所有方法都启用事务
public class UserServiceImpl implements UserService {
    
    // 继承类级别事务配置
    @Override
    public boolean save(User user) {
        return userDao.insert(user) > 0;
    }
    
    // 覆盖类级别配置
    @Override
    @Transactional(readOnly = true)  // 只读事务，性能优化
    public User findById(Integer id) {
        return userDao.selectById(id);
    }
    
    // 指定回滚异常
    @Override
    @Transactional(rollbackFor = {BusinessException.class, RuntimeException.class})
    public boolean updateWithException(User user) {
        userDao.updateById(user);
        if (someCondition) {
            throw new BusinessException("业务异常，触发回滚");
        }
        return true;
    }
}

编程式事务

java 复制代码

@Service
public class UserServiceImpl implements UserService {
    
    @Autowired
    private TransactionTemplate transactionTemplate;
    
    @Override
    public boolean saveWithTransaction(User user) {
        return transactionTemplate.execute(status -> {
            try {
                userDao.insert(user);
                userDao.insertLog(user);
                return true;
            } catch (Exception e) {
                status.setRollbackOnly();  // 手动回滚
                return false;
            }
        });
    }
}