node vue 프로젝트 개발 전후 단 분리 실전 기록

머리말
본 고 는 주로 node vue 전후 단 분리 에 관 한 자 료 를 소개 하고 참고 학습 을 제공 하 며 다음은 편집장 에 따라 함께 공부 합 시다.
node vue 프로젝트 개발
최근 에 일주일 동안 vue 개발 을 봤 는데 많은 감명 을 받 았 습 니 다.저 는 예전 에 react,angular 를 접 한 적 이 있어 서 유명한 vue 를 배우 고 싶 습 니 다.반나절 을 공부 한 후에 접 하 는 것 이 많아 졌 습 니 다.공부 하기 가 쉽 습 니 다.vue 의 명령 은 저 는 angular 의 명령 을 연상 할 수 있 습 니 다.vue 구성 요소 화 디자인 은 react 와 유사 한 구성 요소 화 디자인 입 니 다.일부 router 의 설정 과 react 의 경로 또는 nodejs 의 경로 가 많 지 않 습 니 다.vuex 는 redux,flux 에 따라 고 쳤 습 니 다.비록 저 는 어떻게 사용 하 는 지 잘 모 르 겠 지만 vue 의 템 플 릿 렌 더 링 은 expres 렌 더 링 ejb 와 큰 차이 가 없습니다.vue 를 사용 하면 jq 에서 완전히 벗 어 날 수 있 습 니 다.비록 저 는 jq 를 사용 하지 않 아 도 신기 한 발 길 을 재촉 하 는 것 을 느끼 지 못 했 지만 이런 양 방향 데이터 연결 이 매우 편리 하 다 고 생각 합 니 다.이 문 서 는 제 가 vue 를 배 우 는 새로운 지식 과 생각 을 기록 하 는 데 사 용 됩 니 다.
지령

v-bind 는 주로 동적 으로 DOM 요소 속성 을 연결 하 는 데 사 용 됩 니 다.즉,요소 속성의 실제 값 은 vm 인 스 턴 스 의 data 속성 이 제공 합 니 다.

v-model 은 주로 표 요소 에 대해 양 방향 데이터 바 인 딩 을 하고 표 요소 의 값 을 수정 할 때 인 스 턴 스 vm 에 대응 하 는 vm 의 속성 도 동시에 업데이트 합 니 다.

v-if,v-show,v-else 라 는 몇 가지 명령 은 템 플 릿 과 데이터 간 의 논리 적 관 계 를 설명 한다.
v-if 와 v-else 의 역할 은 수치 에 따라 이 dom 요 소 를 출력 할 지,그리고 포 함 된 하위 요 소 를 판단 하 는 것 입 니 다.
eg:<div v-if="yes">yes</div>vm 인 스 턴 스 의data.yes=true시 템 플 릿 엔진 은 이 dom 노드 를 컴 파일 합 니 다.출력<div>yes</div>은 v-else 가 v-if 를 따라 가 야 합 니 다.그렇지 않 으 면 역할 을 하지 않 습 니 다.
v-show 와 v-if 의 효과 가 많 지 않 습 니 다.모두 진 위 를 판단 하여 내용 을 표시 합 니 다.유일 하 게 다른 것 은 v-show 가 표시 되 지 않 을 때display:none,즉 dom 노드 를 보류 하지만 v-if 는 그렇지 않 습 니 다.

v-for 는 목록 렌 더 링 에 사용 되 며 배열 과 대상 을 순환 적 으로 옮 겨 다 닐 수 있 습 니 다.주의v-for="b in 10"는 현재 1-10 의 교체

를 말 합 니 다.

v-on 이벤트 바 인 딩,약자@:

v-text <p v-text="msg"><p>는 innerText 에 해당 하 며{{msg}}에 비해 반 짝 이 는 문 제 를 피 했다.

v-HTML 은 innerHTML 과 유사 하고 플래시 도 피 할 수 있다

v-el 이 명령 은 dom 요소 에 색인 을 추가 하 는 것 과 같 습 니 다.예 를 들 어<div v-el="demo">this is a test </div>현재 dom 의 값 을 얻 으 려 면vm.$els.demo.innerText 가능 합 니 다.주의:html 는 대소 문 자 를 구분 하지 않 고 낙타 봉 식 의 쓰기 가 자동 으로 소문 자로 바 뀌 며-방식 으로 대문자 로 바 꿀 수 있 습 니 다.

v-ref 와 v-el 유사 통과vim.$refs방문

v-pre 가 이 요 소 를 컴 파일 하 는 것 을 건 너 뛰 었 습 니 다

v-cloak 은 소 용이 없 을 것 같 아

v-once 에 내 장 된 명령 을 추가 하여 요소 나 구성 요 소 를 표시 하 는 데 한 번 만 렌 더 링 합 니 다.

템 플 릿 렌 더 링
1.v-for 는 주로 목록 렌 더 링 에 사 용 됩 니 다.받 은 배열 에 따라 v-for 로 연 결 된 dom 요소 와 내부 하위 요 소 를 반복 적 으로 렌 더 링 하고 별명 을 설정 하 는 방식 으로 배열 내 데 이 터 를 노드 에 렌 더 링 할 수 있 습 니 다.
eg:

 <ul v-for="item in items">
 <li>{{item.title}}</li>
 <li>{{item.description}}</li>
 </ul>

2.v-for 에$index 변 수 를 내장 하고 v-for 를 호출 할 때 호출 할 수 있 습 니 다.예 를 들 어<li v-for="(index,item) in items">{{index}}-{{$index}}</li>3.데이터 수정
배열 을 직접 수정 하면 데 이 터 를 바 꿀 수 있 습 니 다.
배열 의 상황 을 직접 바 꿀 수 없습니다.
     1.vm.items[0]={} ,이 경우 수정 할 수 없 음,해결:vm.item.$set(0,{})또는vm.$set('item[0]',{})     2. vm.item.length=04.v-for 대상 을 옮 겨 다 니 며(key,value)형식 으로 key 변 수 를 사용자 정의 할 수 있 습 니 다.

<li v-for="(key,value)" in objectDemo>
 {{key}}---{{$key}}:{{vue}}
</li>

5.template 태그
템 플 릿 렌 더 링 과 노드 로 사용 되 지만 렌 더 링 은 이 노드 가 존재 하지 않 습 니 다.
이벤트 귀속 및 감청
v-on 은 인 스 턴 스 속성 methods 의 방법 을 이벤트 프로세서 로 연결 할 수 있 습 니 다.v-on:다음 에는 모든 네 이 티 브 이벤트 이름 을 받 아들 일 수 있 습 니 다.

약자@:

methods 함 수 를 연결 할 수 있 고 내 연 js 도 지원 하지만 한 문장 만 제한 합 니 다.

바 인 딩 methods 함수 와 내 연 js 는 모두 원생 dom 요소,event 를 얻 을 수 있 습 니 다.

여러 사건 을 연결 할 때 순서대로 실행 합 니 다.

ui 구성 요소배 고 파?
사용 안내서
설치 하 다.

npm install cnpm install element-ui --save-dev

파일 main.js 가 져 오기

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small' })

쓰다
components 폴 더 아래 에 새 페이지 를 만 듭 니 다.배 고 파?에서 자신 이 좋아 하 는 구성 요 소 를 찾 습 니 다.예 를 들 어 주마등Carousel.vue 에서 코드 를 이 페이지 로 복사 합 니 다.
필요 한 이 구성 요소 의 파일 아래,예 를 들 어 APP.vue 에서

import Carousel from './components/Carousel'
export default {
 name: 'app',
 components: { //components s
 Carousel: Carousel
 }
}

템 플 릿 에 구성 요소 불 러 오기

<template>
<div id="app">
 <Carousel></Carousel>
 <img src="./assets/logo.png">
 <router-view/>
</div>
</template>

이렇게 하면 운행 할 수 있다.
앞 뒤 분리
node 로 스 택 개발 에 익숙 해 졌 습 니 다.지금 은 vue-webpack 으로 전단 개발 을 하고 node 가 백 엔 드 개발 을 하 는 것 도 시원 하 며 앞 뒤 가 분리 되 었 습 니 다.
시작 백 엔 드 인터페이스

cd back
cnpm install
npm run dev

전단 서버 시작

cd front
cnpm install
npm start

로그 인 페이지 에 들 어가 서 로그 인 을 누 르 면 콘 솔 에서 성공 적 인 정 보 를 인쇄 하고 helloworld 페이지 로 성공 적 으로 이동 합 니 다.
전후 단 통신
vue-resource
vue-resource 를 설치 하고 main.js 에서 참조 합 니 다.

import VueResource from 'vue-resource'
Vue.use(VueResource)

config/index.js 에 proxy Table 프 록 시 서버 설정

proxyTable: {
 '/api/**': {
 target: 'http://localhost:3000',
 pathRewrite: {
 '^/api': '/api'
 }
 }
}

쓰다

this.$http.get('api/apptest')
 .then((response) => {
  //       
  console.log(response)
 }).catch(e => {
  //       
  console.log(e)
 })
 }

단점:개발 환경 에 서 는 문제 가 없 지만 생산 환경 에서 백 엔 드 인 터 페 이 스 를 요청 하 는 데 성공 하지 못 했다.
axios
우선 axios 를 설정 하고 src 아래 http.js 를 새로 만 듭 니 다.

import axios from ‘axios'
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
export default axios

main.js 에 도입

import axios from './http'
Vue.prototype.axios = axios
new Vue({
 el: '#app',
 router,
 axios,
 template: '<App/>',
 components: { App }
})

쓰다
get 방법

login () {
 //         
 this.axios.get('/apptest')
 .then((response) => {
 //       
 console.log(response)
 // this.$router.go({name: 'main'})//    
 this.$router.push({name: 'HelloWorld'})
 }).catch(e => {
 //       
 console.log(e)
 })
}

post 방법

register () {
 console.log(this)
 //         
 let params = {
 user: this.userinfo.account,
 password: this.userinfo.password,
 directionId: this.userinfo.directionId
 }
 this.axios.post('/signup', params)
 .then((response) => {
 //       
 console.log(response)
 }).catch(e => {
 //       
 console.log(e)
 })
}

생산 환경 경로 문제
생산 환경 에서 포장 후 경로 가 잘못 되 었 음 을 발견 하고 config 의 index.js 를 수정 합 니 다.

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),

 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './', //    assetsPublicPath: '/'

원본 위치:https://gitee.com/react-module/node-vue
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.