vue+SpringBoot（前后端交互）

阅读提示读者水平要有前端基础vue)了解数据库后端可以是初学者。文章重点我这里只是讲述前后端交互vuespringboot重点是后端需要做什么。最后彩蛋数据访问层和业务层相关技术感觉很混乱我整理了一下当然如果全部整理出来的话就太多了我就简单介绍一下。闲谈我之前主要用的是node.js,最近才开始学习springboot所以是讲的比较基础。如果你们有什么springboot的见解欢迎讨论。我个人是可以接受批评的大佬们可以讲讲自己的看法。起而行之共勉演示效果前后端一、前端vue前端相对简单就给大家显示部分代码就好了主要是script部分# 创建Vue项目自己设置项目名vue-frontend npm create vuelatest vue-frontend # 进入项目目录 cd vue-frontend # 安装依赖 npm install # 启动开发服务器 npm run dev二、后端SpringBoot2.1创建项目依赖根据你的需求添加后面也可以在项目pom.xml添加依赖值得注意的是版本问题2.2数据库2.3创建相关文件2.3.1文件结构解析model实体类根据你的数据中表的字段创建相关类因为只是演示数据库中就一张表所以就创建了一个类。这里用了lombok可以自动生成getset……方法。如果是初学者建议自己写一下Idea快捷键Alt Insert(Windows/Linux)mapper映射文件因为我是用来注解方式来处理数据所以在这里没有用xml方式。如果你要用xml方式的话需要在 SQL 中使用 resultMap处理复杂SQL多表查询)。有感兴趣的同志可以了解一下。columnusername数据库字段名propertyusernameJava 实体类属性名Dao数据访问层我这里用了注解方式简单直观适合简单SQL还有几种方法XML 配置方式推荐复杂SQL、MyBatis-Plus 方式继承BaseMapper……有机会大家可以了解一下MyBatis-Plussevice业务逻辑、事务管理正常来说业务层包括业务接口、业务实现类我这个比较简单就没过多讲究。这里提一个好的方法就是IService是 MyBatis-Plus 提供的通用 Service接口ServiceImpl是 MyBatis-Plus 提供的通用 Service实现类我这里虽然没有使用但还是很有必要去了解。写到这里突然想到了分页查询后面有机会可以写相关的文章。初学者后面可以了解controller用户控制器前后端交互的入口层config我这里进行了CORS配置处理跨域问题具体配置要根据具体情况WebTestApplication.java启动类application.properties配置文件我这里只进行了基础的配置复杂的项目肯定是要配置更多的。三、彩蛋知识拓展这里讲述了主要技术目前比较流行还有很多技术值得去了解我这里只是冰山一角。3.1数据访问层DAO层MyBatis-Plus最推荐特点 单表CRUD零代码开发效率最高Mapper public interface UserDao extends BaseMapperUser { // 无需编写任何代码自动拥有以下方法 // insert(), deleteById(), updateById(), selectById(), selectList() // 只需编写复杂查询 Select(SELECT * FROM stu WHERE username LIKE CONCAT(%, #{name}, %)) ListUser selectByName(String name); }MyBatis传统方案特点SQL完全可控适合复杂查询注解方式Mapper public interface UserDao { Select(SELECT * FROM stu WHERE id #{id}) User selectById(Integer id); }XML方式!-- UserMapper.xml -- mapper namespacecom.example.dao.UserDao select idselectByCondition resultTypeUser SELECT * FROM stu where if testusername ! null AND username LIKE CONCAT(%, #{username}, %) /if if testminAge ! null AND age #{minAge} /if /where /select /mapperSpring Data JPA / Hibernate特点 全自动ORM方法名即SQLRepository public interface UserRepository extends JpaRepositoryUser, Integer { // 方法名自动生成SQL ListUser findByUsername(String username); ListUser findByUsernameContaining(String keyword); ListUser findByAgeBetween(Integer start, Integer end); // 自定义JPQL查询 Query(SELECT u FROM User u WHERE u.username LIKE %:name%) ListUser searchByName(Param(name) String name); }3.2业务层简单介绍Spring Sevice基础// 最基础的Service Service public class UserService { Autowired private UserDao userDao; public User findById(Long id) { return userDao.selectById(id); } }MyBatis-Plus 增强版推荐// 1. Service接口继承IService public interface UserService extends IServiceUser { // 自定义业务方法 ListUser searchByName(String name); User login(String username, String password); } // 2. Service实现继承ServiceImpl Service Transactional(rollbackFor Exception.class) public class UserServiceImpl extends ServiceImplUserDao, User implements UserService { // 基础CRUD方法由父类提供无需编写 // 实现自定义方法 Override public ListUser 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(); } }事务管理声明式事务常用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; } }编程式事务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; } }); } }