前后端分离

1.什么是前后端分离:

前后端分离是一种现代的web开发模式，它将传统的“前后端混合”的开发模式进行分离，让前端和后端各自独立开发和部署，通过接口（APIs）进行数据交互。

以下是前后端分离的几个关键点：

1. 职责划分：

   • 前端：负责用户界面和用户体验的部分。使用HTML、CSS和JavaScript等技术，以及框架如React、Vue、Angular等，构建用户界面。
   • 后端：负责数据处理和业务逻辑的部分。通常使用Java、Python、PHP、Node.js等编程语言，以及相应的框架如Spring Boot、Django、Express等。

2. 独立开发：

   • 前后端开发者可以相对独立地进行开发和测试，互不干扰。前端开发者可以模拟后端数据（Mock数据），而后端开发者可以专注于业务逻辑的实现和数据处理。

2.前后端分离,怎么使用:

2.1:登录界面:

2.2:vue中登录方法代码

 methods: {
    //登录功能
    login() {
      //js获取对象属性的写法
      //this.$refs.loginFormRef
      //this.$refs["loginFormRef"]
      this.$refs["loginFormRef"].validate((valid) => {
        //校验失败
        if (!valid) return;
        console.log(this.loginForm);

        // post("users/login", this.loginForm).then((resp) => {
        //   console.log(resp);
        // });
        login(this.loginForm).then((resp) => {
          console.log(resp);
          //消息提示弹出
          ElMessage({
            message: "登录成功",
            type: "success",
          });
          window.sessionStorage.setItem("token", resp.data);
          this.$router.push("/index");
        });
        //校验成功 发送请求 axios
      });
    },

2.3:在src中建立api文件夹,user.js文件,用于管理发送数据的地址

import { del, form, get, post, put } from "@/utils/request";
// 查询用户列表
export function listUser(query) {
  return get("/adv/" + query.currentPage + "/" + query.pageSize, query);
}

// 查询用户详细
export function getUser(userId) {
  return get("/users/" + userId);
}

// 删除用户
export function delUser(userId) {
  return del("/users/" + userId);
}

// 修改用户
export function updateUser(data) {
  return put("/users", data);
}

//上传头像
export function upload(data) {
  return form("/fileupload/image", data);
}

//登录功能
export function login(data) {
  return post("/users/login", data);
}

2.4:点击登录后,会访问users/login地址,只需要后端idea中有这个地址的方法,就可以访问但是这是跨域请求,需要做拦截处理

package com.fs.config;

import org.springframework.boot.SpringBootConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootConfiguration
public class MyWebmvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
//                .allowedOrigins("*")
                .allowedOriginPatterns("*")
                .allowedMethods("POST", "GET", "PUT", "DELETE", "OPTIONS")
                .maxAge(50000)
                .allowCredentials(true)
                .allowedHeaders("*");
//        WebMvcConfigurer.super.addCorsMappings(registry);
    }
}

2.5:登录成功:

用户管理界面:通过查询所有方法,将查询的数据渲染到组件当中