집 > 기사 > 웹 프론트엔드 > nginx+vue.js에서 프런트엔드와 백엔드 분리를 달성하는 방법

nginx+vue.js에서 프런트엔드와 백엔드 분리를 달성하는 방법

亚连원래의: 2018-06-06 09:43:453011검색

이 글에서는 프론트엔드와 백엔드 분리를 구현하기 위한 nginx+vue.js의 샘플 코드를 주로 소개합니다. 이제 참고용으로 공유하겠습니다.

1.nginx는 고성능 HTTP 및 역방향 프록시 서버로 분산 서버 관리에 자주 사용됩니다.

로드 밸런싱에 자주 사용됩니다(여러 서버를 호출하여 달성됨)

정적 리소스 출력이 더 빨라지고 리소스 gzip으로 압축하여 출력할 수 있습니다(이 기사가 정적 리소스 액세스에 이를 사용하는 중요한 이유이기도 합니다)

교차 도메인 문제 및 역방향 프록시 해결에 적합합니다(아무도 이 도메인 이름 아래의 다른 리소스에 대한 액세스를 보고 싶어하지 않기 때문) ) 도메인 이름이 발생하면 크로스 도메인은 CSRF 공격으로 이어질 수 있으며 이것이 이 기사에서 이를 사용하는 두 번째 이유입니다.)

메모리를 덜 차지하고 몇 초 만에 시작되며 노드를 빠르게 전환하여 다운타임을 방지할 수 있습니다

2 .es6은 ECMAScript Six 버전의 세 번째 버전입니다. vue.js와 같은 js 프레임워크를 잘 배우고 싶다면 꼭 배워야 할 언어입니다. http://es6.ruanyifeng. com/

3.vue.js 는 프론트엔드 템플릿 렌더링 엔진은 jsp, beetl 등의 백엔드 템플릿 엔진과 유사합니다. 물론, 와 결합하면 백엔드 렌더링으로도 사용할 수 있습니다. (공식 홈페이지에서 지원하고 있습니다.)

위에서 언급한 몇 가지 이유에 대해 답변해 드리겠습니다.
1. 프론트엔드와 백엔드 분리를 구현하면 어떤 이점이 있나요? 시나리오?
2. 왜 백엔드 템플릿 엔진을 사용하고, 왜 여전히 프론트엔드 템플릿 엔진을 사용합니까?
3. 바뀔까?

긴 구분선을 생각해 본 후… 요청 대부분은 상태 저장형입니다. 이제 우리는 종종 많은 모바일 프로젝트를 갖고 있으며 대부분의 동일한 앱은 기본 페이지와 임베디드 페이지의 조합으로 구성되어 있습니다.

2. 여전히 이전 접근 방식을 따르면 첫 번째 문제는 여러 도메인 간 요청을 조정하는 문제를 해결하는 데 jsonp만 사용할 수 있다는 것입니다. 구현하기에는 너무 중복됩니다. 동일한 기능에 대해 앱 측과 PC 측에서 두 가지 다른 작성 방법이 있을 가능성이 높습니다. 그리고 대역폭은 매우 비싼 것입니다. 클라이언트는 항상 서버로 이동하여 정적 리소스를 요청하므로 속도가 느려집니다. 동적 및 정적 분리는 정적 리소스와 동적 리소스의 별도 획득을 실현할 수 있으며 서버는 동적 및 정적 리소스를 분리하여 대역폭 문제를 효과적으로 해결할 수도 있습니다.

3. 백엔드 개발자는 프런트엔드만큼 CSS와 JS에 능숙하지 않을 수 있습니다. 예를 들어 JSP를 사용하여 데이터를 채울 때 백엔드 개발자는 종종 스타일을 조정하고 JS를 작성해야 합니다. 개발 효율성이 낮다.

4. 프런트엔드 템플릿 렌더링을 사용하면 서버 측의 부담을 일부 줄일 수 있으며 프런트엔드 템플릿 엔진은 백엔드보다 더 많은 기능을 지원합니다. 예를 들어 vue를 사용하여 구성 요소, 확인 방법을 맞춤 설정할 수 있습니다. , 심층 그라디언트 등 기능이 더 풍부해야 합니다.

4. 우리의 솔루션은 다음과 같습니다

1. 클라이언트가 시작합니다. 요청하면 서버가 응답하고 일련의 작업 후에 동적 데이터가 생성되고 동적 데이터가 백엔드로 전달됩니다. 렌더링 후 최종 템플릿 엔진이 프런트 엔드로 전달됩니다.

2. method

클라이언트가 요청을 시작하고 nginx가 이를 가로챕니다. 정적 리소스인 경우 파일 서버에서 직접 압축하여 프런트 엔드로 전송합니다. 동적 데이터는 다음을 통해 생성됩니다. 동적 리소스 서버를 json 형식으로 반환하고 vue.js로 렌더링하여 표시합니다.

5. vue.js 버전 2.x

1의 주요 기능에 대한 설명입니다. 구조, 스타일로 동적으로 바인딩하는 방법, 자주 사용되는 모니터링 이벤트는 무엇인가요1. 기본 렌더링

    //html结构
    <p id="app">
     {{ message }}
    </p>

    //js模块
    var app = new Vue({
    //会检索绑定的id 如果是class 则是.class即可绑定
       el: &#39;#app&#39;,
       data: {
        message: &#39;Hello Vue!&#39;
       }
    })

2. 클래스 및 스타일 바인딩

<p class="static"
  v-bind:class="{ active: isActive, &#39;text-danger&#39;: hasError }">
</p>

 data: {
     isActive: true,
     hasError: false
    }

渲染结果为:<p class="static active"></p>

3. 자주 사용되는 바인딩 이벤트

 //输出html
<p v-html="rawHtml"></p>
//绑定id或class
<p v-bind:id="dynamicId"></p>
//绑定herf
<a v-bind:href="url" rel="external nofollow" ></a>
//绑定onclick
<a v-on:click="doSomething"></a>

2. server

여기서 axios를 사용하여 서버에 요청한 다음 요청한 데이터를 vue.js에 넘겨 처리하는 것을 권장합니다.

axios 사용 예제의 링크 주소에 대해

3. 확인 사용자 정의 지침

 //if 语句
 <h1 v-if="ok">Yes</h1>

 //for 循环语句
 <ul id="example-1">
 <li v-for="item in items">
  {{ item.message }}
 </li>
 </ul>

데이터 확인 및 양식 제어 바인딩 링크 주소 (https://cn.vuejs.org/v2/guide/forms.html)

다음 4가지 사항은 공식 웹사이트 api를 참조하므로 더 이상 소개하지 않습니다.

4. 심층 응답성을 구현하는 방법(첫 번째 페이지 초기화 후 값을 입력한 후 변경 사항이 발생하면 어떻게 해야 합니까?)

5. 사용자 정의 구성 요소 응용 프로그램 및 Render를 사용하여 Html 구조를 만듭니다.

6. 라우팅 사용

7. 실제 예제

1.nginx 정적 리소스 구성

 server {
    listen    4000;
    server_name www.test.com;
    charset utf-8;
    index /static/index.html;//配置首页

    //这边可使用正则表达式,拦截动态数据的请求,从而解决跨域问题
    location = /sellingJson.html {
      proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
    }

    #配置Nginx动静分离，定义的静态页面直接从static读取。
    location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
    { 
    root /static/;
    #expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以   节省带宽和缓解服务器的压力
    expires   7d; 
    }  
  }

2. 백엔드 요청은 json 데이터를 반환합니다(java를 예로 사용).프런트엔드의 예 Calling vue

  @RequestMapping("/vueHelpSellingcar.html")
  public void vueHelpSellingcar(HttpServletRequest request,HttpServletResponse response) {
    //若干操作后,返回json数据
    JSONObject resultJson = new JSONObject();

    resultJson.put("carbrandList", carbrandList);
    resultJson.put("provinceList", provinceList);

    //进行序列化,返回值前端
    try {
      byte[] json =resultJson.toString().getBytes("utf-8");
      response.setHeader("Content-type", "text/html;charset=UTF-8");
      response.getOutputStream().write(json);
    } catch (Exception e) {
      e.printStackTrace();
    }

  }

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

nginx+vue.js에서 프런트엔드와 백엔드 분리를 달성하는 방법

관련 기사