vue.js 기반 도서 관리 플랫폼 구축

Vue.js 는 현재 매우 핫 한 JavaScript MVVM(Model-View-View Model)라 이브 러 리 로 데이터 구동 과 구성 요소 화 된 사상 으로 구축 되 었 다.Angular.js 에 비해 Vue.js 는 더욱 간결 하고 이해 하기 쉬 운 API 를 제공 하여 빠 른 속도 로 Vue.js 를 사용 할 수 있 습 니 다.
지난 호 에 vue 의 기본 문법 을 간단하게 설명 했다.이번에 우 리 는 작은 프로젝트 를 해서 간단 한 도서 관리 플랫폼 을 구축 하면 우 리 는 이 언어의 묘 미 를 더욱 깊이 이해 할 수 있다.
1.데모 스타일
우선 우 리 는 간단 한 demo 스타일 을 구축 해 야 합 니 다.boottstrap 을 사용 하면 선명 하고 간결 한 페이지 를 신속하게 만 들 수 있 습 니 다.
제 코드 를 공유 해 드 리 겠 습 니 다.　　

<div class="container">
  <div class="col-md-6 col-md-offset-3">
  <h1>Vue demo</h1>
   
  <div id="app">
   <table class="table table-hover ">
    <caption></caption>
   <thead>
    <tr>
    <th>  </th>
    <th>  </th>
    <th>  </th>
    <th>  </th>
    <th>  </th>
    </tr>
   </thead>
   </table>
   
   <div id="add-book">
   <legend>    </legend>
   <div class="form-group">
    <label for="group">  </label>
    <input type="text" class="form-control" id="group">
   </div>
   <div class="form-group">
    <label for="author">  </label>
    <input type="text" class="form-control" id="author">
   </div>
   <div class="form-group">
    <label for="price">  </label>
    <input type="text" class="form-control" id="price">
   </div>
   <button class="btn btn-primary btn-block">  </button>
   <button class="btn btn-primary btn-block">  </button>
   </div>
   
   <div id="update-book">
   <legend>    </legend>
   <div class="form-group">
    <label for="group1">  </label>
    <input type="text" class="form-control" id="group1">
   </div>
   <div class="form-group">
    <label for="author1">  </label>
    <input type="text" class="form-control" id="author1">
   </div>
   <div class="form-group">
    <label for="price1">  </label>
    <input type="text" class="form-control" id="price1">
   </div>
   <button class="btn btn-primary btn-block">  </button>
   </div>
  </div>
  </div>
 </div>

boottstrap 의 격자 시스템 과 간단 한 구성 요 소 를 사용 하여 간단 하고 빠 를 뿐만 아니 라 자동 으로 응답 식 을 실현 할 수 있 습 니 다.
그리고 효과 도 못 생기 지 않 고 깔끔 해 요.
초 반 의 효과 도 를 보 여 드 리 겠 습 니 다.

이 CSS 프레임 에 대해 잘 모 르 신다 면 직접 스타일 링 을 써 보 셔 도 됩 니 다.
2.vue 인 스 턴 스 생 성
다음은 JS 파일 을 가 져 와 vue 인 스 턴 스 를 만 듭 니 다.

new Vue({
 el: '#app',
 data: {
 book: {
  id: 0,
  author: '',
  name: '',
  price: ''
 },
 books: [{
  id: 1,
  author: '   ',
  name: '   ',
  price: 32.0
 }, {
  id: 2,
  author: '   ',
  name: '   ',
  price: 30.0
 }, {
  id: '3',
  author: '   ',
  name: '    ',
  price: 24.0
 }, {
  id: 4,
  author: '   ',
  name: '   ',
  price: 20.0
 }]
 }
 });

data 는 초기 데이터 로 마음대로 작성 할 수 있 습 니 다.
3.각종 명령 을 HTML 에 추가
vue 의 핵심 은 보기 층 에 초점 을 맞 추 므 로 명령 이 가장 중요 한 단계 라 고 말 했 습 니 다.우 리 는 조금씩 말 합 니 다.
그러나 명령 의 분포 가 비교적 어 지 러 워 서 모든 코드 를 직접 첨부 한 후에 나 는 하나씩 설명 했다.

<div id="app">
   <table class="table table-hover ">
    <caption></caption>
   <thead>
    <tr>
    <th>  </th>
    <th>  </th>
    <th>  </th>
    <th>  </th>
    <th>  </th>
    </tr>
   </thead>
   <tbody>
    <tr v-cloak v-for="book in books"> 
    <td>{{book.id}}</td>
    <td>{{book.name}}</td>
    <td>{{book.author}}</td>
    <td>{{book.price}}</td>
    <template v-if="book.id%2==0">
     <td class="text-left">
     <button type="button" class="btn btn-success" @click="delBook(book)" class="del">  </button>
     <button type="button" class="btn btn-success" @click="updateBook(book)">  </button>
     </td>
    </template>
    <template v-else>
     <td class="text-left">
     <button type="button" class="btn btn-danger" @click="delBook(book)" class="del">  </button>
     <button type="button" class="btn btn-danger" @click="updateBook(book)">  </button>
     </td>
    </template>
    </tr>
   </tbody>
   </table>
   
   <div id="add-book">
   <legend>    </legend>
   <div class="form-group">
    <label for="group">  </label>
    <input type="text" class="form-control" id="group" v-model="book.name">
   </div>
   <div class="form-group">
    <label for="author">  </label>
    <input type="text" class="form-control" id="author" v-model="book.author">
   </div>
   <div class="form-group">
    <label for="price">  </label>
    <input type="text" class="form-control" id="price" v-model="book.price">
   </div>
   <button class="btn btn-primary btn-block" v-on:click="addBook()">  </button>
   <button class="btn btn-primary btn-block" v-on:click="searchBook()">  </button>
   </div>
   
   <div id="update-book">
   <legend>    </legend>
   <div class="form-group">
    <label for="group1">  </label>
    <input type="text" class="form-control" id="group1" v-model="book.name">
   </div>
   <div class="form-group">
    <label for="author1">  </label>
    <input type="text" class="form-control" id="author1" v-model="book.author">
   </div>
   <div class="form-group">
    <label for="price1">  </label>
    <input type="text" class="form-control" id="price1" v-model="book.price">
   </div>
   <button class="btn btn-primary btn-block" v-on:click="updatesBook()">  </button>
   </div>
  </div>

우선,id 가 app 인 vue 인 스 턴 스 를 DOM 노드 에 마 운 트 합 니 다.이러한 기본 내용 에 대해 잘 모 르 면 제 지난 블 로 그 를 보고 vue 에 관 한 기초 지식 을 상세 하 게 소개 할 수 있 습 니 다.
아래 표 는 tr 에서 v-for 순환 을 통 해 vue 인 스 턴 스 data 의 데 이 터 를 모두 표 에 불 러 옵 니 다.
세심 한 독자 들 은 내 가 v-for 앞에서 v-cloak 을 썼 는데 이것 은 무엇 을 하 는 것 입 니까?
angular,vue 라 는 프레임 워 크 를 사용 한 사람 은 모두 알 고 있 을 것 입 니 다.{}}으로 데 이 터 를 연결 할 때 페이지 가 새로 고침 되 는 순간 반 짝 이 는 원본 코드 를 볼 수 있 습 니 다.
정 보 량 이 비교적 많 을 때 이런 체험 은 의심 할 여지없이 매우 열악 하 다.이때 v-cloak 이라는 명령 은 관련 실례 가 끝 날 때 까지 요소 에 유지 된다.
CSS 규칙[v-cloak] { display: none }과 함께 사용 할 때 이 명령 은 인 스 턴 스 준비 가 끝 날 때 까지 컴 파일 되 지 않 은 Mustache 탭 을 숨 길 수 있 습 니 다.
이렇게 하면 새로 고침 하 는 순간 페이지 에 대량의 난 장 판 이 발생 하 는 상황 을 해결 할 수 있다.
아래 의 v-if 와 v-else 는 여러 가지 명령 을 연습 하기 위해 서 입 니 다.우리 의 버튼 이 생 성 될 때 두 가지 색 을 번갈아 생 성 할 수 있 습 니 다~
v-model 은 input 에 내용 을 입력 할 때 입력 한 내용 을 동적 으로 가 져 올 수 있 도록 합 니 다.
아니면 그 말?
v-on:click 바 인 딩 함수 들 은 잠시 후에 상세 하 게 설명 하고 지금 효 과 를 살 펴 보 겠 습 니 다.
　　
괜 찮 죠~이제 함수 별로 얘 기해 볼 게 요.　　

addBook: function() {
  //    id
  this.book.id = this.books.length + 1;
  this.books.push(this.book);
  // input      
  this.book = {};
 }

이것 은 함 수 를 추가 하 는 것 입 니 다.위 에 가서 vue 인 스 턴 스 의 data 안의 코드 를 볼 수 있 습 니 다.
사실은 이 몇 줄 의 코드 일 뿐 vue 의 강 함 은 이미 남김없이 보 여 주 었 다.
입력 상자 에 v-model 을 연결 하기 때문에 입력 한 내용 은 북 이라는 대상 과 동적 으로 동기 화 됩 니 다.
이 함수 의 원 리 는 북 대상 의 id 에 값 을 부여 한 다음 에 v-model 을 통 해 입력 상자 에 동적 으로 연결 하 는 데이터 입 니 다.즉,우리 가 입력 한 데이터 입 니 다.push 는 books 의 배열 에 들 어 갑 니 다.
마지막 으로 북 대상 을 비 웠 습 니 다.즉,우리 의 입력 상 자 를 비 웠 습 니 다.
3 줄 코드 만 있 으 면 정보 입력 이 완 료 됩 니 다.신기 하 죠?
아 참,vue 인 스 턴 스 에서 this 가 가리 키 는 것 은 바로 그 자체 의 vue 인 스 턴 스 입 니 다.대상 을 대상 으로 하 는 개념 에 대해 잘 모 르 면 바 이 두 에 게 this 가 가리 키 는 문 제 를 건의 합 니 다.
삭제

delBook: function(book) {
  var blength = this.books.length;
  this.books.splice(book.id-1, 1);
  for( var i = 0; i < blength ; i++) {
  if(book.id < this.books[i].id) { 
   this.books[i].id -= 1;
  }
  } 
 }

삭제 의 원 리 는 현재 books 배열 의 길 이 를 가 져 오 는 것 입 니 다.현재 선택 한 아래 표 지 는 id-1 입 니 다.splice 방법 으로 삭제 합 니 다.
그리고 순환 을 통 해 삭 제 된 데이터 보다 큰 항목 의 id 를 1 로 줄 이 고 번호 의 연속 을 유지 합 니 다.
그리고 수정.

updateBook: function(book) {
  $("#add-book").css("display","none");
  $("#update-book").css("display","block");
  id = book.id;
 },
 updatesBook:function(book) {
  this.book.id = id;
  this.books.splice(id-1,1,this.book);
  $("#add-book").css("display","block");
  $("#update-book").css("display","none");
  this.book = {};

첫 번 째 함 수 는 수정 상 자 를 꺼 내 서 추 가 된 상 자 를 숨 기 고 수정 해 야 할 id 를 전역 변수 에 연결 하 는 것 입 니 다~
그리고 첫 번 째 함수 가 진정한 수정 명령 입 니 다.
방금 연 결 된 전역 변 수 를 현재 id 에 할당 한 다음 splice 방법 으로 입력 한 내용 으로 원래 의 내용 을 교체 합 니 다~
그리고 똑 같 습 니 다.북 대상,즉 입력 상 자 를 비 웁 니 다.
엔 딩
이러한 간단 한 정 보 를 플랫폼 에 입력 하면 완 성 됩 니 다.코드 가 많 지 않 지만 vue 의 강 함 을 깊이 느 낄 수 있 습 니 다.
미래 페이지 의 발전 추 세 는 반드시 이런 디자인 방향 을 돌 릴 수 없 을 것 이다.
상기 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 vue.js 를 바탕 으로 도서 관리 플랫폼 을 신속하게 구축 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 여러분 에 게 답 할 것 입 니 다!