nuxt+axios 해결 전후 단 분리 SSR 의 예시 코드

배경:백 엔 드 프로그램 원숭이 는 보통 CSS,JS 에 대해 잘 파악 하지 못 하기 때문에 일반적인 개발 모델 은 UI 가 정적 html 를 프로그램 원숭이 에 게 맡 기 고 프로그램 원숭이 가 개발 하 며 정적 html 를 동적 으로 바 꿀 때 여러 가지 스타일 이 어 지 러 운 문제 가 자주 발생 하 며 상사 의 하루 에 세 번 스타일 수요 에 맞 춰 전후 단 으로 분리 하기 로 결정 했다.사이트 의 홍 보 를 고려 하여 반드시 SEO 를 해 야 한다.프론트 프레임 워 크 는 VUE 를 선택 하고 SSR 을 해결 하 는 동시에 nuxt.js 를 선 택 했 습 니 다.이것 이 배경 입 니 다.
준비 작업
1.nodejs 설치
2.vuejs 설치
3.vue-cli 설치
4.설치 nuxt
2.nuxt 프로젝트 를 만 들 고 설정 합 니 다.
좋아 하 는 디 렉 터 리 를 찾 습 니 다.워 크 스페이스 로 서 명령 을 사용 하여 nuxt 프로젝트 를 만 듭 니 다.
1.프로젝트 생 성
이 디 렉 터 리 에서 shift 를 누 르 는 동시에 마우스 우 클릭 으로 명령 행 에 들 어 갑 니 다.
생 성 명령 실행:vue init nuxt/starter[firstVue]firstVue 를 프로젝트 이름 으로 합 니 다.
다음은 프로젝트 이름,프로젝트 설명 등 정 보 를 확인 하 겠 습 니 다.프로젝트 이름 은 대문자 가 지원 되 지 않 기 때문에 저 는 다시 만 드 는 과정 에서 수정 을 했 습 니 다.마지막 으로 다음 과 같은 그림 입 니 다.

2、실행 install
생 성 완료 후 이 디 렉 터 리 에 들 어가 npm install 을 실행 하고 의존 하 는 모든 것 을 다운로드 합 니 다.이 과정 은 네트워크 환경 에 따라 몇 분 이 걸 릴 수 있 습 니 다.차 를 마시고 화장실 에 갈 수 있 습 니 다.아래 그림 과 같다.

3.실행 후 IDE(개인 은 자바 개발 을 동시에 해 야 하기 때문에 아이디어,플러그 인 을 사용 하 는 것 이 더 편리 합 니 다)로 열 수 있 습 니 다.프로젝트 디 렉 터 리 는 그림 과 같 습 니 다.

4.운행
아이디어 가 자체 적 으로 가지 고 있 는 터미널 명령 행 으로 npm run dev 를 실행 하고 시작 이 성공 할 때 까지 기 다 립 니 다.오류 가 발생 하지 않 으 면 방문http://localhost:3000다음 그림 이 나타 나 면 프로젝트 생 성 이 완 료 됩 니 다.

3.Axios 와 협조 하여 SEO 해결
1.index.vue 를 열 고 더 세척 하기 위해 템 플 릿 내용 은 다음 과 같 습 니 다.

메모:이 곳 의 section 태그 와 container 는 반드시 남 겨 두 어야 합 니 다.그렇지 않 으 면 어떤 내용 이 렌 더 링 되 지 않 습 니 다.
이 두 파일 에 중점 을 둔 api.js 가 있 습 니 다.제 모든 인터페이스 와 Axios 설정 이 이 안에 있 습 니 다.api 의 통일 설정 을 제공 합 니 다.
1️⃣、index.vue 스 크 립 트 의 asyncData 입 니 다.이 설정 은 페이지 렌 더 링 전에 호출 되 며,렌 더 링 페이지 는 되 돌아 오 는 데이터 로 렌 더 링 할 수 있 습 니 다.
2️⃣、api.js,많이 말 하면 무익 하 다,show code

import axios from 'axios'
import qs from 'qs'
// axios   
axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.baseURL = 'https://api.nashi8.com/'

// POST     
axios.interceptors.request.use((config) => {
 if (config.method === 'post') {
  config.data = qs.stringify(config.data)
 }
 return config
}, (error) => {
 return Promise.reject(error)
})
//       
axios.interceptors.response.use((res) => {
 if (res.status === 200) {
  return res
 } else {
  return Promise.reject(res)
 }
}, (error) => {
 return Promise.reject(error)
})

export function fetch (url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, params)
   .then(res => {
    resolve(res.data)
   })
   .catch((error) => {
    reject(error)
   })
 })
}
export default {
 /**
  *       
  */
 getAds (params) {
  return fetch('/api/ad/queryADs', params)
 },
 getAreas (params) {
  return fetch('/api/area/getAll', params)
 }
}

3.index 에서 getAreas 를 호출 하면 콘 솔 에서 결 과 를 출력 할 수 있 습 니 다.페이지 렌 더 링 은 다음 과 같 습 니 다.
이 가능 하 다,~할 수 있다,...

이 때 페이지 원본 코드 는 서버 에서 되 돌아 오 는 데 이 터 를 볼 수 있 습 니 다.SSR 문 제 는 OK 입 니 다.
원본 코드 다운로드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.