SpringBoot2 仿B站高性能前端+后端项目(完结)

qwerty · · 19 次点击 · · 开始浏览    

获课:789it.top/5044/

获取ZY↑↑方打开链接↑↑

Spring Boot 2 前端 + 后端开发指南

1. 项目概述

本文将介绍如何使用Spring Boot 2构建一个简单的前后端分离的应用。前端使用HTML/CSS/JavaScript,后端使用Spring Boot提供RESTful API。通过这个项目,你将学习如何搭建一个基本的Web应用,并理解前后端交互的基本原理。

2. 环境准备

  • Java Development Kit (JDK):确保安装JDK 8或更高版本。
  • Maven:用于项目依赖管理和构建。
  • IDE:推荐使用IntelliJ IDEA或Eclipse。
  • Node.js(可选):用于前端开发工具(如Webpack、Babel等)。

3. 创建Spring Boot项目

3.1 使用Spring Initializr创建项目

  • 访问Spring Initializr。
  • 选择项目类型为Maven Project,语言为Java,Spring Boot版本选择2.x。
  • 添加依赖:Spring Web(用于构建Web应用)、Spring Data JPA(用于数据库操作)、H2 Database(内存数据库,用于开发测试)。
  • 生成项目并下载。

3.2 导入项目

  • 解压下载的项目文件,并使用IDE导入Maven项目。

4. 后端开发

4.1 创建实体类

  • 定义一个简单的实体类,例如User。

java

复制

package com.example.demo.entity;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;@Entitypublic class User {    @Id    @GeneratedValue(strategy = GenerationType.IDENTITY)    private Long id;    private String name;    private String email;    // Getters and Setters    public Long getId() {        return id;    }    public void setId(Long id) {        this.id = id;    }    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }    public String getEmail() {        return email;    }    public void setEmail(String email) {        this.email = email;    }}

4.2 创建Repository接口

  • 创建一个继承JpaRepository的接口,用于数据库操作。

java

复制

package com.example.demo.repository;import com.example.demo.entity.User;import org.springframework.data.jpa.repository.JpaRepository;public interface UserRepository extends JpaRepository {}

4.3 创建Service层

  • 创建一个Service类,处理业务逻辑。

java

复制

package com.example.demo.service;import com.example.demo.entity.User;import com.example.demo.repository.UserRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.util.List;@Servicepublic class UserService {    @Autowired    private UserRepository userRepository;    public List getAllUsers() {        return userRepository.findAll();    }    public User getUserById(Long id) {        return userRepository.findById(id).orElse(null);    }    public User createUser(User user) {        return userRepository.save(user);    }    public User updateUser(Long id, User userDetails) {        User user = userRepository.findById(id).orElse(null);        if (user != null) {            user.setName(userDetails.getName());            user.setEmail(userDetails.getEmail());            return userRepository.save(user);        }        return null;    }    public void deleteUser(Long id) {        userRepository.deleteById(id);    }}

4.4 创建Controller层

  • 创建一个Controller类,提供RESTful API。

java

复制

package com.example.demo.controller;import com.example.demo.entity.User;import com.example.demo.service.UserService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.*;import java.util.List;@RestController@RequestMapping("/api/users")public class UserController {    @Autowired    private UserService userService;    @GetMapping    public List getAllUsers() {        return userService.getAllUsers();    }    @GetMapping("/{id}")    public User getUserById(@PathVariable Long id) {        return userService.getUserById(id);    }    @PostMapping    public User createUser(@RequestBody User user) {        return userService.createUser(user);    }    @PutMapping("/{id}")    public User updateUser(@PathVariable Long id, @RequestBody User userDetails) {        return userService.updateUser(id, userDetails);    }    @DeleteMapping("/{id}")    public void deleteUser(@PathVariable Long id) {        userService.deleteUser(id);    }}

4.5 配置H2数据库

  • 在application.properties中配置H2数据库。

properties

复制

spring.datasource.url=jdbc:h2:mem:testdbspring.datasource.driverClassName=org.h2.Driverspring.datasource.username=saspring.datasource.password=passwordspring.jpa.database-platform=org.hibernate.dialect.H2Dialectspring.h2.console.enabled=true

5. 前端开发

5.1 创建HTML文件

  • 在src/main/resources/static目录下创建index.html文件。

html

复制

                    

User Management

Name: Email: Save

IDNameEmailActions <script> document.getElementById('userForm').addEventListener('submit', function(event) { event.preventDefault(); const userId = document.getElementById('userId').value; const name = document.getElementById('name').value; const email = document.getElementById('email').value; const user = { name, email }; if (userId) { updateUser(userId, user); } else { createUser(user); } }); function fetchUsers() { fetch('/api/users') .then(response => response.json()) .then(users => { const tbody = document.querySelector('#userTable tbody'); tbody.innerHTML = ''; users.forEach(user => { const row = document.createElement('tr'); row.innerHTML = ` ${user.id} ${user.name} ${user.email} Edit Delete `; tbody.appendChild(row); }); }); } function createUser(user) { fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user) }).then(() => { fetchUsers(); document.getElementById('userForm').reset(); }); } function updateUser(id, user) { fetch(`/api/users/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user) }).then(() => { fetchUsers(); document.getElementById('userForm').reset(); document.getElementById('userId').value = ''; }); } function deleteUser(id) { fetch(`/api/users/${id}`, { method: 'DELETE' }).then(() => { fetchUsers(); }); } function editUser(id) { fetch(`/api/users/${id}`) .then(response => response.json()) .then(user => { document.getElementById('userId').value = user.id; document.getElementById('name').value = user.name; document.getElementById('email').value = user.email; }); } fetchUsers(); </script>

运行 HTML

6. 运行项目

  • 启动Spring Boot应用:在IDE中运行DemoApplication类,或使用命令行mvn spring-boot:run。
  • 访问前端页面:打开浏览器,访问http://localhost:8080,即可看到用户管理页面。

7. 总结

通过本文,你学习了如何使用Spring Boot 2构建一个简单的前后端分离的应用。后端使用Spring Boot提供RESTful API,前端使用HTML/CSS/JavaScript进行页面展示和交互。这个项目为你进一步学习和开发更复杂的Web应用打下了坚实的基础。

19 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传