node+express+vue建設工事

2853 ワード
1、node環境をインストールします。2、vue-cliは先端項目を作成します。3、nodeを作成します。
  [http://www.expressjs.com.cn/][1]  node
4、node送受信要求
  • getは、サードパーティappiを要求する。準備：requestモジュール
       1、 npm install request --save-dev
   2、 app.js    var request = require('request');
    使用：
       var options = {
       url: '',
       headers: {//     
           "content-type": "application/json"
       }, 
       json: true
   };
   app.get('/jobs', function (req, res, next) {
  
       var proxy_url = 'api  ';
       options.url = proxy_url;
       var status = +req.query.status //   url?id=     +       
       function callback(error, response, data) {
           // console.log('------    ------',data);
           if (!error && response.statusCode == 200) { //     
               // console.log('------    ------',data);
               let obj = {
                   code: 0,
                   message: 'ok',
                   data: data.filter(item => {return item.status === status})
               }
               res.json(obj); //     
           }
       }
       request(options,callback)
   })
  • post要求
         post      ：body-parser
     ： npm install body-parser--save-dev
     ：app.use(bodyParser.urlencoded({extended: false}));
   
   app.post('/addApplication', function(req, res, next) {
       let params = req.body; //   post    
       //      
       var  addSql = 'INSERT INTO table_name(name,ip,business,priority) VALUES(?,?,?,?)';
       var  addSqlParams = [params.name,params.ip.join(','),params.business,params.priority];
       // 
       connection.query(addSql,addSqlParams,function (err, result) {
           if(err){
               console.log('[INSERT ERROR] - ',err.message);
               let obj = {
                   code: 1,
                   message: err.message
               }
               res.json(obj);
               return;
           }        
           let obj = {
               code: 0,
               message: 'ok',
               data: result
           }
           res.json(obj);
       });
  })
    • 5、mysqlデータベースに接続する
      ：npm install mysql --save-dev
  ：var mysql = require('mysql')
     var connection = mysql.createConnection({
        host     : '',
        user     : '',
        password : '',
        database : ''
     });
     connection.connect();
         4，     、 、 、
    6、nodeに静的資源をロードする
       Express       
  ：1、  path var path = require('path')
      2、app.use(express.static(path.join(__dirname, 'static')))
      'static'              ，  index.html，css，js, image
    WTRL入門(3)---ツールバーとステータスバー
    Selectドロップボックスonchangeイベントは、optionのvalue値を取得します。