Vue.js 학습 노트의 셋째: 서버와의 데이터 상호작용

9574 단어
이전02_toDoList에 치명적인 결함이 있었다는 것은 명백하다.그것은 브라우저에만 존재하는 데이터입니다. 사용자가 페이지를 닫거나 다시 불러오면, 프로그램에 가입한 데이터는 모두 잃어버리고, 모든 것은 프로그램의 초기 상태로 회복됩니다.이 문제를 해결하려면 웹 응용 프로그램의 전단이 적당한 시간에 얻은 입력 데이터를 백엔드 서버에 저장한 다음에 필요할 때 서버에서 이 데이터를 가져와야 한다.이 부분의 노트는 Vue를 어떻게 활용하는지 기록할 것이다.js 프레임워크는 웹 응용 프로그램의 전단과 후단 간의 상호작용을 완성합니다.이번에도 저는'메모장'응용을 구축함으로써 전체 학습 과정을 관통시킬 것입니다.
우선 code 디렉터리에서 순서대로 npm install express body-parser knex와 npm install sqlite3@ 명령을 실행하고 다음에 웹 서비스를 만드는 데 필요한 백엔드 구성 요소를 설치해야 한다(주의해야 할 것은 여기에 설치된 sqlite3는 knex 설치 후의 알림에 따라 해당하는 버전을 선택해야 한다는 것이다).다음에 code 디렉터리에 03_Message라는 디렉터리를 만들고 이 디렉터리에서 npm init -y 명령을 실행하여 Node로 초기화합니다.js 프로젝트.여기에서 서비스 측에서 필요로 하는 구성 요소를 프로젝트 디렉터리의 상급 디렉터리에 설치한 것은 프로젝트 디렉터리에 전방 구성 요소를 설치하고 브라우저에 접근해야 하기 때문에 전후 측에서 필요로 하는 구성 요소를 분리해서 저장하는 것이 가장 좋다.
이제 Express 프레임워크를 기반으로 웹 서비스를 만들겠습니다.구체적인 방법은 code/03_Message 디렉토리에 index.js라는 서버 측 스크립트 파일을 만들고 다음 코드를 입력하는 것입니다.
const path = require('path');
const express = require('express')
const bodyParser = require('body-parser');
const knex = require('knex');
const port = 8080;

//        
const app = express();

//    public   ，         
app.use('/', express.static(path.join(__dirname, 'public')));
//    node_modules   ，         
app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));

//   body-parser    ，     POST     。
app.use(bodyParser.urlencoded({ extended : false}));
app.use(bodyParser.json());

//          ：
const appDB = knex({
    client: 'sqlite3', //           
    connection: {      //           
        filename: path.join(__dirname, 'data/database.sqlite')
    },
    debug: true,       //        debug   ，true     
    pool: {            //            ，   {min: 2, max: 10}
        min: 2,
        max: 7
    },
    useNullAsDefault: true
});

appDB.schema.hasTable('notes')  //              notes  
.then(function(exists) {
    if(exists == false) { //    notes         
        appDB.schema.createTable('notes', function(table) {
            //    notes  ：
            table.increments('uid').primary();//   uid           ，       。
            table.string('userName');         //   userName            。
            table.string('noteMessage');      //   notes            。
    });
  }
})
.then(function() {
    //     
    //       
    app.get('/', function(req, res) {
        res.redirect('/index.htm');
    });

    //           GET   
    app.get('/data/get', function(req, res) {
        appDB('notes').select('*')
        .then(function(data) {
            console.log(data);
            res.status(200).send(data);
        }).catch(function() {
            res.status(404).send('       ');
        });
    });

    //           POST   
    app.post('/data/delete', function(req, res) {
        appDB('notes').delete()
        .where('uid', '=', req.body['uid'])
        .catch(function() {
            res.status(404).send('      ');
        });
        res.send(200);
    });

    //           POST   
    app.post('/data/add', function(req, res) {
        console.log('post data');
        appDB('notes').insert(
            {
                userName : req.body['userName'],
                noteMessage : req.body['noteMessage']
            }
        ).catch(function() {
            res.status(404).send('      ');
        });
        res.send(200);
    });

    //    8080   
    app.listen(port, function(){
        console.log(`   http://localhost:${port}/，  Ctrl+C     ！`);
    });
})
.catch(function() {
    //        ，    appDB   
    appDB.destroy();
});

Vue 때문에.js 프레임워크의 특징은 전방에서 백엔드에서 제공하는 서비스가 지정한 HTML과 자바스크립트 파일을 가져오는 것을 제외하고 주로 데이터베이스에 대한 삭제와 수정 작업을 해야 하기 때문에 위의 서비스에서 public, node_modules 디렉터리를 전체적으로 탐색기 측에 개방하는 것을 제외하고 GET 요청을 바탕으로 하는 데이터 조회 서비스를 제공한다.및 POST 요청에 기반한 두 개의 데이터 추가 및 삭제 작업
이어서 나는 앞부분의 구축을 시작할 수 있다.우선 code/03_Message 디렉터리에서 npm install vue axios 명령을 실행하고 다음에 사용할 전단 구성 요소를 설치해야 한다(이 명령은 자동으로 node_modules 디렉터리를 생성하고 위에서 말한 바와 같이 이 디렉터리는 서버 스크립트에 의해 브라우저에 전체적으로 개방된다).그런 다음 계속해서 같은 디렉토리에 public 디렉토리를 만들고 그 안에 다음과 같은 코드의 index.htm라는 파일을 만듭니다.



    
    
    
    
    
    
       


    

        
   

        

            {{ note.userName }}  ：{{ note.noteMessage }} 
            
        

        

            
   ：

이 페이지는 주로 두 부분으로 나뉘는데 첫 번째 부분은 notes의 데이터에 따라 v-for 명령을 사용하여 데이터베이스에 추가된 메시지를 반복적으로 표시하고 지정한 메시지를 삭제하기 위한 단추를 제공한다v-on 명령을 사용하여 이벤트 처리 함수를 귀속시킨다).두 번째 부분은 에 사용되는 입력 인터페이스인데 여기v-model 명령을 사용하여 사용자가 입력해야 하는 userName와 Message 데이터를 얻었다.이제 Vue 객체 인스턴스를 만들어야 합니다. 이를 위해 방금 작성한 public 디렉토리 아래에 js 디렉토리를 만들고 그 안에 main.js라는 사용자 정의 프런트엔드 스크립트 파일을 만듭니다. 코드는 다음과 같습니다.
//     ： Message
//     ：
//   1.    axios     
//   2.               

const app = new Vue({
    el: '#app',
    data:{
        userName: '',
        Message: '',
        notes: []
    },
    created: function() {
        that = this;
        axios.get('/data/get')
        .then(function(res) {
            that.notes = res.data;
        })
        .catch(function(err) {
            console.error(err);
        });
    },
    methods:{
        addNew: function() {
            if(this.userName !== '' && this.Message !== '') {
                that = this;
                axios.post('/data/add', {
                    userName: that.userName,
                    noteMessage: that.Message
                }).catch(function(err) {
                    console.error(err);
                });
                this.Message = '';
                this.userName = '';
                axios.get('/data/get')
                .then(function(res) {
                    that.notes = res.data;
                })
                .catch(function(err) {
                    console.error(err);
                });
            }
        },
        remove: function(id) {
            if(uid > 0) {
                that = this;
                axios.post('/data/delete', {
                    uid : id
                }).catch(function(err) {
                    console.error(err);
                });
                axios.get('/data/get')
                .then(function(res) {
                    that.notes = res.data;
                })
                .catch(function(err) {
                    console.error(err);
                });
            }
        }
    }
});

이 Vue 인스턴스는 이전에 작성한 것과 크게 다르지 않으며 주로 다음 네 명의 멤버로 구성됩니다.
  • el 구성원: CSS 선택기로 Vue 실례에 대응하는 요소 용기를 지정하는 데 사용합니다. 여기서 제가 지정한 것은
    。

  • data 구성원입니다. 페이지에 연결된 데이터를 설정하는 데 사용되며 다음과 같은 세 가지 데이터 변수를 설정합니다.

  • notes: 이것은 추가된 메시지 기록을 저장하는 데 사용되는 그룹 변수입니다.
  • userName: 사용자 이름 데이터를 가져오는 문자열 변수입니다.
  • Message: 이것은 문자열 변수로 '메시지' 데이터를 가져오는 데 사용됩니다.

  • created 구성원: 프로그램을 불러올 때 초기화하는 데 사용됩니다. 여기서 서버로부터 추가된 메시지 기록을 읽고 notes 변수에 불러왔습니다.
  • methods 구성원: 페이지에 연결된 이벤트 처리 함수를 정의하는 데 사용되며 다음 두 가지 이벤트 처리 함수를 정의합니다.
  • addNew: 새로운 메모 기록을 추가하고 notes의 데이터를 동시 업데이트하는 데 사용합니다.
  • remove: 지정한 메모 기록을 삭제하고 업데이트notes의 데이터를 동기화하는 데 사용됩니다.


    • 통상적으로 우리는 Vue에 있다.js 프레임워크에서 axios와 같은 제3자 구성 요소를 사용하여 요청을 보내고 응답 데이터를 받는 작업을 처리하고 이 구성 요소를 도입하는 방식과 Vue를 도입한다.js 프레임워크의 방식은 똑같습니다. 위와 같이 로컬에 다운로드한 다음에 라벨을 사용해서 도입할 수도 있고 CDN 방식으로 직접 라벨을 사용해서 도입할 수도 있습니다. 이렇게 합니다.

    주의해야 할 것은 이 인용 탭이 HTML 페이지에 있는 위치는 자바스크립트 스크립트 파일 (즉 main.js 의 인용 탭을 사용자 정의하기 전에 해야 한다는 것이다.물론 저는 상기 코드에서 axios.get와 axios.post 두 가지 가장 자주 사용하는 방법의 기본적인 사용법만 보여 드렸습니다. 이 구성 요소는 Promise 대상으로 되돌아오는 것을 지원하기 때문에 우리는 then 방법으로 체인을 호출하여 응답 데이터와 이상 상황을 처리할 수 있습니다.axios 구성 요소에 대한 더 많은 사용 방법은 관련 문서를 참고할 수 있습니다 (http://www.axios-js.com/zh-cn/docs/).
    Jersey 프레임 워 크 1: Jersey RESTful WebService 프레임 워 크 소개
    JS 로 배경 json 데 이 터 를 html 페이지 에 포맷 합 니 다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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