自己电脑做网站服务器小工具,wordpress enter,建设网站企业邮箱网站建设服务,住建厅电子证书的查询方式文章目录 前言项目简介环境准备第一步#xff1a;初始化前端项目登录页面任务管理页面 第二步#xff1a;初始化后端项目数据库配置数据库表结构实体类和Mapper服务层和控制器 第三步#xff1a;连接前后端总结 #x1f389;欢迎来到架构设计专栏~探索Java中的静态变量与实… 文章目录 前言项目简介环境准备第一步初始化前端项目登录页面任务管理页面 第二步初始化后端项目数据库配置数据库表结构实体类和Mapper服务层和控制器 第三步连接前后端总结 欢迎来到架构设计专栏~探索Java中的静态变量与实例变量 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒✨博客主页IT·陈寒的博客该系列文章专栏架构设计其他专栏Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习文章作者技术和水平有限如果文中出现错误希望大家能指正 欢迎大家关注 ❤️ 前言
随着互联网技术的迅速发展前后端分离已经成为现代Web开发的主流模式。这种模式不仅提高了开发效率还使得前端和后端各自独立便于维护和升级。本文将详细介绍如何使用Vue、Element、Spring Boot、MyBatis和MySQL实现一个简单的前后端分离项目。通过本文的学习你将能在20分钟内掌握这种开发模式的基本实现方法。 项目简介
我们的项目是一个简单的任务管理系统包含以下功能
用户注册和登录任务的增删改查
项目结构如下
前端Vue.js Element UI后端Spring Boot MyBatis数据库MySQL
环境准备
在开始之前请确保你已经安装了以下工具
Node.js建议使用LTS版本Vue CLIJava JDK 8或以上MavenMySQL
第一步初始化前端项目
首先我们使用Vue CLI初始化一个Vue项目。
vue create task-manager选择默认配置后进入项目目录并安装Element UI。
cd task-manager
vue add element然后创建一个简单的登录页面和任务管理页面。
登录页面
在src/views目录下创建Login.vue文件
templatediv classloginel-form :modelform submit.native.preventhandleLoginel-form-item label用户名el-input v-modelform.username/el-input/el-form-itemel-form-item label密码el-input typepassword v-modelform.password/el-input/el-form-itemel-form-itemel-button typeprimary clickhandleLogin登录/el-button/el-form-item/el-form/div
/templatescript
export default {data() {return {form: {username: ,password: }};},methods: {handleLogin() {// 调用后端API进行登录验证}}
};
/script任务管理页面
在src/views目录下创建TaskManager.vue文件
templatediv classtask-managerel-table :datatasksel-table-column propid labelID/el-table-columnel-table-column propname label任务名/el-table-columnel-table-column propstatus label状态/el-table-columnel-table-column label操作template slot-scopescopeel-button clickeditTask(scope.row)编辑/el-buttonel-button clickdeleteTask(scope.row.id)删除/el-button/template/el-table-column/el-tableel-button clickcreateTask创建任务/el-button/div
/templatescript
export default {data() {return {tasks: []};},methods: {fetchTasks() {// 调用后端API获取任务列表},createTask() {// 创建任务逻辑},editTask(task) {// 编辑任务逻辑},deleteTask(id) {// 删除任务逻辑}},mounted() {this.fetchTasks();}
};
/script第二步初始化后端项目
使用Spring Initializr生成一个Spring Boot项目选择以下依赖
Spring WebMyBatisMySQL Driver
将生成的项目导入你的IDE并进行以下配置。
数据库配置
在application.properties文件中添加MySQL配置
spring.datasource.urljdbc:mysql://localhost:3306/task_manager?useSSLfalseserverTimezoneUTC
spring.datasource.usernameroot
spring.datasource.passwordroot
mybatis.mapper-locationsclasspath:mappers/*.xml数据库表结构
在MySQL中创建一个数据库并初始化表结构
CREATE DATABASE task_manager;USE task_manager;CREATE TABLE user (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50) NOT NULL,password VARCHAR(100) NOT NULL
);CREATE TABLE task (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(100) NOT NULL,status VARCHAR(20) NOT NULL,user_id INT,FOREIGN KEY (user_id) REFERENCES user(id)
);实体类和Mapper
创建实体类User和Task
public class User {private Integer id;private String username;private String password;// getters and setters
}public class Task {private Integer id;private String name;private String status;private Integer userId;// getters and setters
}创建Mapper接口和对应的XML映射文件
public interface UserMapper {User findByUsername(String username);void insert(User user);
}public interface TaskMapper {ListTask findByUserId(Integer userId);void insert(Task task);void update(Task task);void delete(Integer id);
}在resources/mappers目录下创建UserMapper.xml和TaskMapper.xml
!-- UserMapper.xml --
mapper namespacecom.example.demo.mapper.UserMapperselect idfindByUsername resultTypecom.example.demo.entity.UserSELECT * FROM user WHERE username #{username}/selectinsert idinsertINSERT INTO user (username, password) VALUES (#{username}, #{password})/insert
/mapper!-- TaskMapper.xml --
mapper namespacecom.example.demo.mapper.TaskMapperselect idfindByUserId resultTypecom.example.demo.entity.TaskSELECT * FROM task WHERE user_id #{userId}/selectinsert idinsertINSERT INTO task (name, status, user_id) VALUES (#{name}, #{status}, #{userId})/insertupdate idupdateUPDATE task SET name #{name}, status #{status} WHERE id #{id}/updatedelete iddeleteDELETE FROM task WHERE id #{id}/delete
/mapper服务层和控制器
创建服务层和控制器实现用户注册、登录和任务管理功能。
Service
public class UserService {Autowiredprivate UserMapper userMapper;public User findByUsername(String username) {return userMapper.findByUsername(username);}public void register(User user) {userMapper.insert(user);}
}Service
public class TaskService {Autowiredprivate TaskMapper taskMapper;public ListTask findByUserId(Integer userId) {return taskMapper.findByUserId(userId);}public void createTask(Task task) {taskMapper.insert(task);}public void updateTask(Task task) {taskMapper.update(task);}public void deleteTask(Integer id) {taskMapper.delete(id);}
}RestController
RequestMapping(/api)
public class UserController {Autowiredprivate UserService userService;PostMapping(/login)public ResponseEntity? login(RequestBody User user) {User foundUser userService.findByUsername(user.getUsername());if (foundUser ! null foundUser.getPassword().equals(user.getPassword())) {return ResponseEntity.ok(foundUser);}return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(Invalid credentials);}PostMapping(/register)public ResponseEntity? register(RequestBody User user) {userService.register(user);return ResponseEntity.ok(User registered successfully);}
}RestController
RequestMapping(/api/tasks)
public class TaskController {Autowiredprivate TaskService taskService;GetMapping(/{userId})public ResponseEntity? getTasks(PathVariable Integer userId) {return ResponseEntity.ok(taskService.findByUserId(userId));}PostMappingpublic ResponseEntity? createTask(RequestBody Task task) {taskService.createTask(task);return ResponseEntity.ok(Task created successfully);}PutMappingpublic ResponseEntity? updateTask(RequestBody Task task) {taskService.updateTask(task);return ResponseEntity.ok(Task updated successfully);}DeleteMapping(/{id})public ResponseEntity? deleteTask(PathVariable Integer id) {taskService.deleteTask(id);return ResponseEntity.ok(Task deleted successfully);}
}第三步连接前后端
在前端项目中配置Axios以便与后端API通信。在src/main.js中添加如下代码
import axios from axios;axios.defaults.baseURL http://localhost:8080/api;
Vue.prototype.$http axios;然后在登录页面和任务管理页面中调用后端API
methods: {handleLogin(){this.$http.post(/login, this.form).then(response {// 保存用户信息并跳转到任务管理页面}).catch(error {console.error(error);alert(登录失败);});}
}methods: {fetchTasks() {this.$http.get(/tasks/${this.userId}).then(response {this.tasks response.data;}).catch(error {console.error(error);alert(获取任务列表失败);});},createTask() {this.$http.post(/tasks, { name: 新任务, status: 未完成, userId: this.userId }).then(response {this.fetchTasks();}).catch(error {console.error(error);alert(创建任务失败);});},editTask(task) {// 编辑任务逻辑},deleteTask(id) {this.$http.delete(/tasks/${id}).then(response {this.fetchTasks();}).catch(error {console.error(error);alert(删除任务失败);});}
}总结
通过本文的介绍我们快速搭建了一个基于Vue、Element、Spring Boot、MyBatis和MySQL的前后端分离项目。我们实现了用户注册、登录和任务管理的基本功能展示了如何使用这些技术进行高效的Web开发。希望本文能对你有所帮助欢迎在实际项目中灵活运用这些技术。 结尾 ❤️ 感谢您的支持和鼓励 您可能感兴趣的内容 【Java面试技巧】Java面试八股文 - 掌握面试必备知识目录篇【Java学习路线】2023年完整版Java学习路线图【AIGC人工智能】Chat GPT是什么初学者怎么使用Chat GPT需要注意些什么【Java实战项目】SpringBootSSM实战打造高效便捷的企业级Java外卖订购系统【数据结构学习】从零起步学习数据结构的完整路径
