大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说SpringBoot+Vue3+Element Plus 打造分布式存储系统,希望您对编程的造诣更进一步.

SpringBoot+Vue3+Element Plus 打造分布式存储系统

核心代码，注释必读

// download：3w ukoou com

分布式存储系统是一种将大量数据存储在多台计算机上的存储系统，它可以将数据拆分成多个部分存储在不同的计算机上，从而达到数据备份、负载均衡、容错和灵活扩展等目的。

该系统的作用有以下几个方面：

数据备份：分布式存储系统可以将数据存储在多台计算机上，当其中某一个计算机发生故障时，备份的数据可以被用来恢复数据，保证数据的安全性。
负载均衡：在传统的单个存储设备中，数据存储的容量有限，当数据量过大时，就需要将数据存储在多个设备上。分布式存储系统可以实现数据的自动分配，避免出现某个节点过载的情况，保证数据存储的平衡性。
容错性：分布式存储系统可以通过多个节点的数据备份和冗余存储，当某个主节点故障时，备份节点可以接管服务，从而实现数据的无误恢复，保证存储系统的高可用性。

分布式存储系统的意义十分重大，它为大规模数据的存储和管理提供了新的思路，有效地解决了传统存储系统中遇到的数据管理难题，同时也为云计算、大数据等技术的发展提供了支持和保障，可以说是当前技术领域的一项重要基础设施。

SpringBoot+Vue3+ElementPlus开发分布式存储系统后台

首先，我们需要明确这个项目的基本结构，这个项目是由后端、前端、数据层三部分构成的，我们将采用前后端分离的方式，前端使用Vue3和ElementPlus进行开发，后端使用SpringBoot进行开发，数据库使用MySQL进行操作。

第一步：项目搭建

1.1 创建SpringBoot项目

我们首先需要创建一个SpringBoot项目。使用IDEA，新建一个SpringBoot项目，选择Maven类型的项目，并打开Spring Initializr，根据我们的需要选择需要的模块，包括Web、JPA、MySQL、Druid等。然后，点击Generate按钮，项目就建好了。

1.2 搭建前端环境

进入前端工程目录下，使用命令vue create 创建 Vue3 项目模板，并添加 Element Plus 框架依赖。

vue create vue3-elementplus-demo
cd vue3-elementplus-demo
npm install element-plus --save

1.3 搭建后端环境

在 Spring Boot 工程中，修改 application.properties 配置文件信息，加入对 MySQL 和 Druid 的配置。在 pom.xml 文件中添加对相关依赖的配置，如下：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
</dependency>

<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>druid-spring-boot-starter</artifactId>
  <version>1.1.16</version>
</dependency>

以上配置完成后，我们就基本构建好了项目的基本结构。

第二步：开发后台接口

2.1 创建数据模型

在 src/main/java 目录下创建一个名为 com.example.demo.entity 的包，用于存放实体类。在这个包下创建一个名为 User.java 的类，表示用户的基本信息，包含 用户名 和 密码。

@Entity
@Table(name = "user")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;

    // getter和setter方法省略
}

2.2 创建数据访问层

在 src/main/java 目录下创建一个名为 com.example.demo.repository 的包，用于存放数据访问层的代码，即持久层。在这个包下创建一个名为 UserRepository.java 的接口，继承JpaRepository接口，并添加一个按照用户名查询用户信息的方法。

@Repository
public interface UserRepository extends JpaRepository<User, Long>{
    User findByUsername(String username);
}

2.3 创建服务层

在 src/main/java 目录下创建一个名为 com.example.demo.service 的包，用于存放服务层的代码，即业务层。在这个包下创建一个名为 UserService.java 的类，用于处理用户相关的业务逻辑，包括登录、注册、修改密码等等。

@Service
public class UserService{
    @Autowired
    private UserRepository userRepository;

    public User checkUser(String username, String password) {
        User user = userRepository.findByUsername(username);
        if (user != null && password.equals(user.getPassword())) {
            user.setPassword(null);
            return user;
        }
        return null;
    }

    // 添加其他业务逻辑方法（例如：注册、修改密码等等）

}

2.4 创建控制层

在 src/main/java 目录下创建一个名为 com.example.demo.controller 的包，用于存放控制层的代码，即接口层。在这个包下创建一个名为 LoginController.java 的类，用于处理用户登录相关的请求。

@RestController
@RequestMapping("/api")
public class LoginController {
    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public Result login(@RequestBody User user) {
        String username = user.getUsername();
        String password = user.getPassword();

        User u = userService.checkUser(username, password);
        if (u == null) {
            return ResultFactory.buildFailResult("用户名或密码错误！");
        } else {
            return ResultFactory.buildSuccessResult(u);
        }
    }
}

第三步：开发前端页面

3.1 创建登录页面

我们需要创建一个登录页面，让用户输入用户名和密码，然后提交到后台进行验证。我们使用 Element Plus 中的表单组件来添加输入框，用到了 el-form、el-form-item、el-input、el-button。

<template>
  <div class="login-container">
    <el-form ref="form" :model="form" :rules="rules" class="form-container">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <div class="form-btn-container">
        <el-button type="primary" @click="handleSubmit('form')">登录</el-button>
        <el-button>重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script> export default { name: "Login", data() { return { form: { username: "", password: "", }, rules: { username: [ { required: true, message: "请输入用户名", trigger: "blur" }, ], password: [ { required: true, message: "请输入密码", trigger: "blur" }, ], }, }; }, methods: { async handleSubmit(formName) { const { data: res } = await this.$axios.post("/api/login", this.form); if (res.code === 200) { this.$message.success("登录成功！"); this.$router.push({ name: "dashboard" }); } else { this.$message.error(res.message); } }, }, }; </script>

其中，form 对象是用来存放用户输入的用户名和密码，rules 对象是用来定义输入框的校验规则，handleSubmit 方法是用来提交登录表单的，提交成功后跳转到 dashboard 页面。

3.2 创建主页

我们需要创建一个主页，用来展示后台的各种功能。这里我们使用 Element Plus 中的布局组件来创建一个基本的页面布局，用到了 el-container、el-aside、el-header、el-container、el-main、el-menu、el-submenu、el-menu-item 等组件。

<template>
  <div class="dashboard-container">
    <el-container style="height: 100%">
      <el-header style="height: 50px;">
        <div class="dashboard-title">后台管理系统</div>
        <el-button class="logout-btn" @click="handleLogout">退出登录</el-button>
      </el-header>
      <el-container style="height: calc(100% - 50px);">
        <el-aside style="width: 200px; padding: 10px;">
          <el-menu default-active="1" background-color="#333" text-color="#fff" active-text-color="#ffd04b" class="el-menu-vertical-demo" :collapse.sync="isCollapse" >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">导航一</span>
              </template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
              </template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">导航三</span>
              </template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main style="padding:10px;">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script> export default { name: "Dashboard", data() { return { isCollapse: false, }; }, methods: { handleLogout() { this.$router.push({ name: "login" }); }, }, }; </script>

其中，我们使用了 el-menu 组件来添加导航菜单，用到了 default-active、background-color、text-color、 active-text-color、 collapse.sync 等属性来定义菜单的基本属性。

第四步：将前后端连接起来

我们需要让前后端进行连接，即前端向后端发送请求，后端返回数据给前端。这里我们使用 Axios 来发送 HTTP 请求，并使用 SpringBoot 提供的 @RestController 注解来处理请求。

4.1 配置跨域

在 Spring Boot 中，我们需要先配置跨域，否则前端将无法请求后台。打开 com.example.demo 下的 CorsConfig.java 文件，添加跨域配置信息：

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 允许任何头
        corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 对所有接口路径进行跨域设置
        return new CorsFilter(source);
    }
}

4.2 处理请求

在前面的代码中，我们已经创建了一个 LoginController类来处理用户登录请求。我们还需要创建一些其他的控制层代码，如退出登录、用户信息管理等等。这里就不一一赘述了，下面是一个样例代码，你可以参考一下：

@RestController
@RequestMapping("/api")
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public Result register(@RequestBody User user) {
        User u = userService.checkUser(user.getUsername());
        if (u != null) {
            return ResultFactory.buildFailResult("用户名已被注册！");
        } else {
            // 添加相关业务逻辑，省略
        }
    }

    @PostMapping("/updatePassword")
    public Result updatePassword(@RequestBody User user) {
        User u = userService.checkUser(user.getUsername());
        if (u == null) {
            return ResultFactory.buildFailResult("用户不存在！");
        } else {
            // 添加相关业务逻辑，省略
        }
    }
    // 其他相关请求处理方法，省略
}

4.3 发送请求

在前端中，我们使用 axios 来发送请求。config.js 文件是我们的请求地址的配置文件。登录页面将用户输入的信息打包成请求体发送到后台接口 /api/login 进行验证，并根据后台返回的数据判断登录是否成功。

import axios from "axios";
import { message } from "ant-design-vue";
import { getToken } from "./auth";

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000, // request timeout
});

// request interceptor
service.interceptors.request.use(
  (config) => {
    // do something before request is sent
    if (getToken()) {
      config.headers["Authorization"] = "Bearer " + getToken();
    }
    return config;
  },
  (error) => {
    // do something with request error
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// response interceptor
service.interceptors.response.use(
  /** * If you want to get http information such as headers or status * Please return response => response */

  /** * Determine the request status by custom code * Here is just an example * You can also judge the status by HTTP Status Code */
  (response) => {
    const res = response.data;

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      message.error(res.message || "Error");
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  (error) => {
    console.log("err" + error); // for debug
    message.error(error.message);
    return Promise.reject(error);
  }
);

export const login = (data) => {
  return service({
    url: "/api/login",
    method: "post",
    data,
  });
};

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13326.html

SpringBoot+Vue3+Element Plus 打造分布式存储系统

SpringBoot+Vue3+Element Plus 打造分布式存储系统

SpringBoot+Vue3+ElementPlus开发分布式存储系统后台

相关推荐

发表回复