Javascript의 ssm+vue 프런트엔드 및 백엔드 분리 프레임워크 통합 구현

머리말

이 글에서는 ssm 및 vue 별도로 프로젝트 구성은 이 기사의 초점이 아니지만 둘 사이의 상호 작용의 핵심 사항이 강조됩니다.

관련 학습 권장 사항: javascript 비디오 튜토리얼

SSM

프로젝트 구조

지침
프로젝트는 서비스와 웹의 두 가지 하위 프로젝트로 구성됩니다. , 그 중 웹은 주로 서비스에 의존하며, 서비스는 서비스 레이어에 해당하며, 서비스 프로젝트에는 스프링 구성 파일이 배치됩니다. 제어 계층과 서비스 계층을 두 개의 하위 프로젝트로 분리하는 것은 프로젝트 유지 관리에 도움이 됩니다. ” 요점은 프런트엔드와 백엔드 상호 작용입니다. 프런트엔드가 백엔드 인터페이스에 액세스하고 백엔드에서 반환한 데이터를 성공적으로 수신할 수 있다는 것입니다. 구성 프로세스 중에 두 가지 사항에 주의해야 합니다. 하나는 백엔드 인터페이스 주소 구성이고 다른 하나는 도메인 간 문제입니다.

백엔드 인터페이스 주소 구성

vue에서 axios는 ajax 요청을 보내고 백그라운드와 상호작용하는 데 사용됩니다. main.js에서 axios 기본 액세스 주소를 구성해야 합니다.
src/main.js 파일에

// 引用axios，并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = "http://127.0.0.1:8080/blog/api"
//设置全局，每次ajax请求携带cookies
// axios.defaults.withCredentials = true
// 将API方法绑定到全局
Vue.prototype.$axios = axios

를 추가합니다. http://127.0.0.1:8080/blog/api를 모든 axios의 기본 요청 주소로 구성합니다. 여기서 백그라운드 포트 번호는 8080이고 기본값입니다. vue 프로젝트의 포트 번호도 8080이므로 vue 프로젝트의 기본 액세스 포트 번호를 8090으로 수정해야 합니다(백그라운드 포트와 충돌하지 않음).

수정

config/index.js의 테스트 코드:

created:function(){
  var data = Qs.stringify({});
  this.$axios
  .post('/check', data)
  .then(successResponse => {
   this.responseResult = JSON.stringify(successResponse.data)
   if (successResponse.data.code === 200) {
    this.$notify({
     title: '成功',
     message: successResponse.data.message,
     type: 'success'
    });
   }else{
    this.$notify({
     title:"失败",
     message:successResponse.data.message,
     type:'error'
    })
   }
  })
  .catch(failResponse => {})
 }

구성 후 프로젝트를 실행해 보니 프런트 엔드가 여전히 백엔드 인터페이스에 액세스할 수 없는 것으로 확인되었으며 다음과 같은 오류가 발생했습니다. 크로스 도메인 문제가 있음을 알 수 있습니다.

교차 도메인 문제 해결

교차 도메인 문제의 경우 SpringMVC는 이 문제를 처리하기 위해 @CrossOrigin 주석을 제공합니다(@CrossOrigin이 무엇을 하는지 알고 싶다면 Spring @CrossOrigin으로 이동하세요) 주석 원칙), 해당 인터페이스에 @CrossOrigin만 추가하면 됩니다(전역 구성을 통해서도 설정할 수 있으며 여기서는 소개하지 않습니다).

MainController.java:

package com.blog.web.controller;


import com.blog.common.Result;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
@RequestMapping("/blog/api")
public class MainController {

  private Logger logger = Logger.getLogger ( MainController.class );
  @RequestMapping ( value = "/check", method = RequestMethod.POST )
  @ResponseBody
  @CrossOrigin
  public Result check () {
    logger.info("MainController run");
    Result result = new Result();
    result.setMessage("SSM vue前后端框架搭建成功");
    return result;
  }

}

프로젝트를 다시 시작하고 올바른 결과를 반환하세요.

소스 코드

백엔드 코드: SSMDemo

프런트엔드 코드: VueDemo이 글은 ssm+vue 프런트엔드 및 백엔드 분리 프레임워크(소스 코드 포함)의 통합 구현에 대한 내용입니다. .

위 내용은 Javascript의 ssm+vue 프런트엔드 및 백엔드 분리 프레임워크 통합 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!