GAS로 웹 앱 "영화 감상 기록"만들기 ⑤/Vue.js에서 대화 상자 표시 (전편)

12250 단어 Vue.js웹Bootstrapgas

이번에 할 일



지금까지 본 앱의 기능을 Bootstrap과 jQuery로 실현했습니다만, Vue.js로 변경합니다.

클라이언트측(화면 표시)의 변경이 되므로, 서버측(GAS)의 수정은 없습니다.
변경은 다음의 항목에 따라서 실시합니다만, 이번은 「서버로부터…」까지에 대응합니다.
  • Vue.js 소개
  • 서버에서 얻은 데이터 처리 변경
  • 대화 상자 변경

    • 이번에 추가하는 파일은 Vuejs.html뿐입니다.

    Vue.js 소개



    Index.html



    Vue.js를 사용할 수 있도록하려면 다음 참조를 추가하기 만하면됩니다.
    ◆ 참고 사이트 「Vue.js 공식 사이트」／설치 #CDN
      <!-- Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    불필요하게 된 Bootstrap과 jQuery의 기술은 삭제합니다.
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    　다음의 스타일 시트만 남겨 둡니다.
      <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    서버에서 얻은 데이터의 처리 변경



    javascript.html


    searchResults() (서버로부터 데이터를 취득하는 처리)의 실행이 성공한 후에 실행되는 drawTable() 를, 이하와 같이 수정합니다.
    이전의 처리에서는, HTML을 의식하고 있었기 때문에 복잡했습니다만, Vue.js를 사용하는 것에 의해 굉장히 간단하게 되었습니다.
    물론, HTML 파일측에서는 의식할 필요가 있습니다만, Javascript에서는 데이터나 처리를 의식하는 것만으로 좋기 때문에 알기 쉽게 되었다고 생각합니다.app.records 는, 후술의 Vuejs.html 에 정의되고 있습니다.
      function drawTable(data) {
    let records = JSON.parse(data)
    app.records = records;
  }

    이전 코드
      function drawTable(data) {
    var records = JSON.parse(data)
    var tag = '';
    for(var i = 0; i < records.length; i++) {
      tag += '<tr data-toggle="modal" data-target="#exampleModal" data-processing-type="記録更新" data-data-id="' + records[i][0] + '" ';
      tag += 'data-viewing-date="' + records[i][1] + '" data-movie-name="' + records[i][2] + '" data-first-look="' + records[i][3] + '" ';
      tag += 'data-viewing-type="' + records[i][4] + '" data-theater-name="' + records[i][5] + '">';
      tag += '<td class="col01">'+ records[i][0] + '</td>';      
      tag += '<td class="col02">'+ convDate(records[i][1]) + '</td>';
      tag += '<td class="col03">'+ records[i][2] + '</td>';
      tag += '<td class="col04">'+ records[i][3] + '</td>';
      tag += '<td class="col05">'+ records[i][4] + '</td>';
      tag += '<td class="col06">'+ records[i][5] + '</td>';
      tag += '</tr>';
    }
    $('#resultList tbody').html(tag);
  }

    Vuejs.html



    Vue.js의 간이 되는 코드입니다.
    Vue.js에 대한 자세한 설명은 다른 사이트 및 책을 참조하십시오.
  • 「감상일」의 표시 변환에 사용하고 있던 convDate(date) 를, javascript.html 로부터 filters: 로 이동합니다.
  • 페이지 표시시의 searchResults() 의 실행을, javascript.html 로부터 mounted: 로 이동합니다.

    • ◆ 참고 서적 사이트 '기초부터 배우는 Vue.js' mio의 C&R 연구소
    <script>  
var app = new Vue({
  el: '#app',
  data: {
    message: 'テスト',
    records: []
  },
  mounted: function() {
    searchResults();
  },
  filters: {
    convDate: function(date) {
      let day = moment(date);
      let res = (day.month() + 1) + '/' + day.date();
      return res;
    }
  }
})
</script>

    이전 코드
      $(document).ready(function() {
    searchResults();
  });

    Index.html



    　다음의 수정을 실시합니다.
  • <body> 안 전체를 <div id="app"> 로 묶습니다.
  • <tbody> 를 수정합니다.<tr v-for="(record, index) in records"… 의 records 는,Vuejs.html 의 records 를 참조하고 있습니다.records (2차원 배열의 데이터)를 반복 처리함으로써 테이블을 작성합니다.record 에 1행분의 데이터가 세트 됩니다.index 에 배열 첨자가 설정됩니다. 사용하지 않는 경우에는 작성할 필요가 없습니다.v-bind:key="…" 는 고유 값을 설정합니다.<td class="col02">{{ record[1] | convDate }}</td> convDate 는 Vue.js 필터에서 Vuejs.html convDate 엔티티입니다.
  • 이번에 작성한 Vuejs.html의 캡처를 맨 아래에 추가합니다. 
    •   <body>
    <div id="app">
    <p></p>
    <div class="container-fluid">
    <table id="resultList" class="table-striped table-bordered table-headerfixed">
        ：
      <tbody class="scrollBody">
        <tr v-for="(record, index) in records" v-bind:key="record[0]">
          <td class="col01">{{ record[0] }}</td>
          <td class="col02">{{ record[1] | convDate }}</td>
          <td class="col03">{{ record[2] }}</td>
          <td class="col04">{{ record[3] }}</td>
          <td class="col05">{{ record[4] }}</td>
          <td class="col06">{{ record[5] }}</td>
        </tr>
      </tbody>
    </table>
    </div>
      ：
      ：
  <?!= HtmlService.createHtmlOutputFromFile('Vuejs').getContent(); ?>

  </body>

    이전 설명
      <body>
    <p></p>
    <div class="container-fluid">
    <table id="resultList" class="table-striped table-bordered table-headerfixed">
        ：
      <tbody class="scrollBody"></tbody>
    </table>
    </div>

    결과



    　 일람 표시가 완성되었습니다.



    ◆ 이전 기사 GAS로 웹 앱 "영화 감상 기록"을 만드는 ④
    ◆ 다음 기사 GAS로 웹 앱 "영화 감상 기록"을 만드는 ⑥

    ◆ 색인 GAS로 웹 앱 "영화 감상 기록"을 만드는 "색인"
    bootstrap 화면 Layout 예 (초보자 지금 들리지 않는 몇 가지)
    로그인 및 게시 기능 만들기(PHP+MySQL)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage