node+express+vue搭建工程

Mr_houzi 發布于2019-08-26 13:31 / 2065人閱讀

摘要：安裝環境度娘創建前端項目創建基于搭建項目收發請求請求第三方準備模塊引入使用設置請求頭地址獲取的參數是字符串轉整數接口數據請求成功接口數據返回數據請求獲取請求需要模塊準備使用

1、安裝node環境（度娘）
2、vue-cli創建前端項目
3、創建node

基于[http://www.expressjs.com.cn/][1]搭建node項目

4、node收發請求

get請求第三方api：

準備：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等靜態資源

云服務器 GPU云服務器 Vue+Express Node_Express node_express數據庫 webrtc node 搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108963.html

vue+node+mysql搭建個人博客（一）

摘要：其中用來完成請求，將添加的原型上后就不需要再在每個需要使用它的頁面引入了每個頁面都相當于一個組件，文件以結尾，第一次啟動成功時看到的頁面就是組件，路徑。學習筆記...在線地址：cl8023.com github 數據庫已改為mongodb 快速搭建 node 后端服務Github-quick-node-server 準備工作安裝node，這是必須的新版node自帶npm...

peixn 2019-08-21 17:48 評論0 收藏0
webpack4.x升級摘要

摘要：以為例，編寫來幫助我們完成重復的工作編譯壓縮我只要執行一下就可以檢測到文件的變化，然后為你執行一系列的自動化操作，同樣的操作也發生在這些的預處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發展很久以前，互聯網行業有個職位叫做軟件開發工程師在那個時代，大家可能...

levinit 2019-08-23 18:11 評論0 收藏0
multipages-generator今日發布?！媽媽再也不用擔心移動端h5網站搭建了！

摘要：本文適合的讀者現在在手淘，京東，今日頭條，美柚等過億用戶的手機中的，都常見網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個的例子手淘，美柚。本文適合的讀者??????? 現在在手淘，京東，今日頭條，美柚等過億用戶的手機app中的，都常見h5網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個h5的例子：（手淘，美柚）。這些app中都嵌者數以百計，千計的...

xavier 2019-08-02 10:04 評論0 收藏0
multipages-generator今日發布?！媽媽再也不用擔心移動端h5網站搭建了！

摘要：本文適合的讀者現在在手淘，京東，今日頭條，美柚等過億用戶的手機中的，都常見網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個的例子手淘，美柚。本文適合的讀者??????? 現在在手淘，京東，今日頭條，美柚等過億用戶的手機app中的，都常見h5網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個h5的例子：（手淘，美柚）。這些app中都嵌者數以百計，千計的...

Kerr1Gan 2019-08-30 14:19 評論0 收藏0