Node.js實戰—Node.js+MySQL+RESTful

由於菜，因此學習。由於生活，因此熱愛。

寄語：長風破浪會有時，直掛雲帆濟滄海。 本文已收錄至github.com/likekk/-Blo…歡迎你們star，共同窗習，共同進步。若是文章有錯誤的地方，歡迎你們指出。後期將在將GitHub上規劃前端學習的路線和資源分享。

前言

最近學習了一下Node.js相關的內容，在這裏初步作個小總結，說實話關於本篇博客的相關內容，本身好久以前就已經有過學習，可是你懂的，「好記性不如爛筆筒」，學過的東西不作筆記的話，很容易就會忘記的一乾二淨，每每的結果就是本身又要重頭開始學習，這是一個很是痛苦的過程。沒有辦法，爲了從新撿起本身曾經學過的內容，決定寫下這篇博客來回顧本身所學的知識

本章目標

Node.js後端

• 學會使用node.js操做MySQL實現簡單的增刪查改
• 學會使用RESTful風格定義接口

web前端

• 學會使用vue2整合Ajax
• 學會使用vue2整合axios

項目搭建

MySQL數據庫

數據庫腳本

建立鮮花信息表，添加鮮花編號，鮮花名稱，鮮花價格，鮮花用途，鮮花花材，鮮花花語等字段。在這裏咱們就直接使用SQL腳原本建立數據表和添加一些測試數據。

CREATE table flowerinfo
(  fid BIGINT auto_increment PRIMARY key not NULL COMMENT"編號",  fname varchar(20) not null COMMENT"名稱",  fprice DECIMAL(16,2) COMMENT"價格",  fsituation varchar(20) not null COMMENT"使用節日",  fuse varchar(20) not null COMMENT"鮮花用途",  fhc varchar(20) not null COMMENT"鮮花花材",  fword varchar(50) COMMENT"花語" )COMMENT"鮮花信息表"  INSERT into flowerinfo(fname,fprice,fhc,fuse,fsituation,fword) VALUES("一輩子一世",200,"玫瑰,香檳","愛情鮮花","情人節","你是我一輩子一世惟一的愛人,我會好好珍惜你"), ("祝福你",300,"玫瑰,香檳","愛情鮮花","情人節,母親節,父親節","我把我最真誠的祝福送給你,祝你每天開心"), ("一輩子一世",200,"玫瑰,香檳","愛情鮮花","情人節","你是我一輩子一世惟一的愛人,我會好好珍惜你"), ("祝福你",300,"玫瑰,香檳","愛情鮮花","情人節,母親節,父親節","我把我最真誠的祝福送給你,祝你每天開心") 複製代碼

結果：

Node.js後端項目搭建

一、搭建node.js項目

搭建node.js項目的過程我就直接省略了，具體如何搭建node.js項目你們能夠自行百度或者後期我會添加相關內容的博客方便你們學習。搭建好的項目結構以下：

二、安裝mysql依賴

既然咱們須要操做mysql，那麼咱們確定須要安裝相關的依賴，在這裏介紹三種方法安裝mysql依賴。

方式一：

npm install cnpm --registry=https://registry.npm.taobao.org 
cnpm install mysql //使用淘寶鏡像依賴mysql 複製代碼

方式二：

npm install mysql --save    // 當前項目安裝mysql依賴
複製代碼

方式三：

npm install mysql -g    //全局安裝mysql依賴
複製代碼

選擇任意以上一種方法安裝均可以，安裝完成以後，咱們確認一下是否真的安裝成功，找到目錄node_modules,這裏是查看咱們安裝的全部依賴，能夠看到mysql依賴成功了。

三、編寫RESTful風格的接口

找到目錄結構routes，新建flowerRouter.js文件。目錄結構以下：

1、創建node.js和mysql數據庫的鏈接

let express=require('express'); // 引入express依賴
let mysql=require('mysql') // 引入mysql依賴 let router=express.Router(); let connection=mysql.createConnection({  host: 'localhost', //主機名  user:'root', //帳號  password:'123456', //密碼  database:'flower' //鏈接的數據庫名稱 }); connection.connect(); //創建鏈接 複製代碼

參數	描述
host	主機地址 （默認：localhost）
user	用戶名
password	密碼
port	端口號 （默認：3306）
database	數據庫名稱
charset	鏈接字符集（默認：'UTF8_GENERAL_CI'，注意字符集的字母都要大寫）
localAddress	此IP用於TCP鏈接（可選）
socketPath	鏈接到unix域路徑，當使用 host 和 port 時會被忽略
timezone	時區（默認：'local'）
connectTimeout	鏈接超時（默認：不限制；單位：毫秒）
stringifyObjects	是否序列化對象
typeCast	是否將列值轉化爲本地JavaScript類型值 （默認：true）
queryFormat	自定義query語句格式化方法
supportBigNumbers	數據庫支持bigint或decimal類型列時，須要設此option爲true （默認：false）
bigNumberStrings	supportBigNumbers和bigNumberStrings啓用 強制bigint或decimal列以JavaScript字符串類型返回（默認：false）
dateStrings	強制timestamp,datetime,data類型以字符串類型返回，而不是JavaScript Date類型（默認：false）
debug	開啓調試（默認：false）
multipleStatements	是否許一個query中有多個MySQL語句 （默認：false）
flags	用於修改鏈接標誌
ssl	使用ssl參數（與crypto.createCredenitals參數格式一至）或一個包含ssl配置文件名稱的字符串，目前只捆綁Amazon RDS的配置文件

具體參數信息請前往：mysql配置信息

2、完整代碼：

let express=require('express'); // 引入express依賴
let mysql=require('mysql') // 引入mysql依賴 let router=express.Router(); let connection=mysql.createConnection({  host: 'localhost', //主機名  user:'root', //帳號  password:'123456', //密碼  database:'flower' //鏈接的數據庫名稱 }); connection.connect(); //創建鏈接 // 查詢所有鮮花信息 router.get('/getAllFlower',(req,res,next)=>{  connection.query('select * from flowerinfo',(err,result)=>{  if(err){  throw err;  return;  }  res.send(result);  }) }); // 添加鮮花信息 router.post('/addFlower',(req,res,next)=>{  let fname=req.body.fname; //名稱  let fprice=req.body.fprice;// 價格  let fsituation=req.body.fsituation; //節日  let fuse=req.body.fuse; // 用途  let fhc=req.body.fhc; // 花材  let fword=req.body.fword; //花語  let addsql="insert into flowerinfo(fid,fname,fprice,fsituation,fuse,fhc,fword)values(0,?,?,?,?,?,?)";  let addsqlParams=[fname,fprice,fsituation,fuse,fhc,fword];  connection.query(addsql,addsqlParams,(err,result)=>{  if(err){  throw err;  return;  }  res.send('添加成功!');  }) }) // 根據鮮花編號查詢鮮花信息 router.get('/findFlowerById',(req,res,next)=>{  let id=req.query.id;  let selectsql='select * from flowerinfo where fid=?';  let selctParams=[id];  connection.query(selectsql,selctParams,(err,result)=>{  if (err){  throw err  }  res.send(result);  }) }) // 修改鮮花信息 router.put('/updateFlower',(req,res,next)=>{  let id=req.body.fid;  let fname=req.body.fname; //名稱  let fprice=req.body.fprice;// 價格  let fsituation=req.body.fsituation; //節日  let fuse=req.body.fuse; // 用途  let fhc=req.body.fhc; // 花材  let fword=req.body.fword; //花語  let updatesql='update flowerinfo set fname=?,fprice=?,fsituation=?,fuse=?,fhc=?,fword=? where fid=?';  let updatesqlParams=[fname,fprice,fsituation,fuse,fhc,fword,id]  connection.query(updatesql,updatesqlParams,(err,result)=>{  if (err){  throw err;  return false  }  res.send('修改爲功!');  }) }) // 刪除鮮花信息 router.delete('/deleteFlower',(req,res,next)=>{  let id=req.body.id;  let deletesql="delete from flowerinfo where fid=?";  let deletesqlParams=[id];  connection.query(deletesql,deletesqlParams,(err,result)=>{  if(err){  throw err;  return false;  }  res.send('刪除成功!');  }) }) module.exports=router; 複製代碼

這裏有個重大的bug，就是咱們鏈接完以後沒有關閉鏈接，這樣就會資源的浪費，佔用cpu。這裏你們能夠想辦法去解決，因爲咱們這裏是測試的，因此沒有設置關閉鏈接。

注意：

結尾必定要寫module.exports=router

四、註冊router和設置跨域請求

找到目錄結構下的app.js文件註冊路由和跨域請求設置。

app.js文件代碼

var createError = require('http-errors');
var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan');  var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); var productRouter=require('./routes/product'); var flowerRouter=require('./routes/flowerRouter') var app = express();  // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs');  app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); // 設置跨域請求 app.all('*', function(req, res, next) {  res.header("Access-Control-Allow-Origin", "*");  res.header("Access-Control-Allow-Headers", "content-type");  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");  res.header("X-Powered-By", ' 3.2.1');  res.header("Content-Type", "application/json;charset=utf-8");  if(req.method == "OPTIONS") {  res.send("200");  } else {  next();  } }); app.use('/', indexRouter); app.use('/users', usersRouter); app.use('/product',productRouter); app.use('/flower',flowerRouter);   // catch 404 and forward to error handler app.use(function(req, res, next) {  next(createError(404)); });  // error handler app.use(function(err, req, res, next) {  // set locals, only providing error in development  res.locals.message = err.message;  res.locals.error = req.app.get('env') === 'development' ? err : {};   // render the error page  res.status(err.status || 500);  res.render('error'); });  module.exports = app; 複製代碼

跨域代碼：

// 設置跨域請求
app.all('*', function(req, res, next) {  res.header("Access-Control-Allow-Origin", "*");  res.header("Access-Control-Allow-Headers", "content-type");  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");  res.header("X-Powered-By", ' 3.2.1');  res.header("Content-Type", "application/json;charset=utf-8");  if(req.method == "OPTIONS") {  res.send("200");  } else {  next();  } }); 複製代碼

web前端

前端方面主要使用兩種方法操做數據，一種是ajax，另外一種是axios，將所須要用到的插件引入。目錄結構以下：

在這裏咱們引入的vue.js，axios，jQuey，以及新建兩個html文件，爲了方便命名上已經規定了。接下來就是數據操做了。

vue2整合ajax

<!DOCTYPE html>
<html lang="en"> <head>  <meta charset="UTF-8">  <title>ajax和vue操做mysql</title> </head> <body> <div id="app">  <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0">  <tr>  <td>編號</td>  <td>名稱</td>  <td>價格</td>  <td>使用節日</td>  <td>鮮花用途</td>  <td>鮮花花材</td>  <td>花語</td>  <td>操做</td>  </tr>  <template v-for="(item,index) of flowerArray">  <tr>  <td>{{index+1}}</td>  <td>{{item.fname}}</td>  <td>{{item.fprice}}</td>  <td>{{item.fsituation}}</td>  <td>{{item.fuse}}</td>  <td>{{item.fhc}}</td>  <td>{{item.fword}}</td>  <td>  <input type="button" :data-id="item.fid" value="刪除" @click="deleteFlower(item.fid)">  <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)">  </td>  </tr>  </template>  </table>  <form>  名稱：  <input type="text" v-model="fname"><br>  價格：  <input type="text" v-model="fprice"><br>  節日：  <input type="text" v-model="fsituation"><br>  用途：  <input type="text" v-model="fuse"><br>  花材：  <input type="text" v-model="fhc"><br>  花語：  <input type="text" v-model="fword"><br>  <span style="color: red">{{result}}</span><br>  <input type="button" @click="addFlower" value="添加鮮花">  <input type="button" @click="updateFlower" value="修改鮮花">  </form> </div> <script src="javascripts/jquery-3.3.1.min.js"></script> <script src="javascripts/vue.js"></script> <script>  var vm=new Vue({  el:'#app',  data:{  fid:'',  fname:'',  fprice:'',  fsituation:'',  fuse:'',  fhc:'',  fword:'',  result:'',  flowerArray:[],  },  mounted(){  this.findAllFlower();  },  methods:{  findFlowerById:function (id) { //根據編號查詢鮮花信息  this.fid=id;  $.ajax({  url:'http://localhost:3000/flower/findFlowerById',  type:'GET',  data:{id:id}  }).done((data)=>{  this.fname=data[0].fname;  this.fprice=data[0].fprice;  this.fsituation=data[0].fsituation;  this.fuse=data[0].fuse;  this.fhc=data[0].fhc;  this.fword=data[0].fword;  })  },  deleteFlower:function (id) { //刪除鮮花信息  $.ajax({  url:'http://localhost:3000/flower/deleteFlower',  type:"DELETE",  data:{  id:id  },  }).done((data)=>{   })  },  addFlower:function () { // 添加鮮花信息  $.ajax({  url:'http://localhost:3000/flower/addFlower',  type:'POST',  data:{  fname:this.fname,  fprice:this.fprice,  fsituation:this.fsituation,  fuse:this.fuse,  fhc:this.fhc,  fword:this.fword,  }  }).done((data)=>{  })  },  updateFlower:function (id) { // 修改鮮花信息  $.ajax({  url:'http://localhost:3000/flower/updateFlower',  type:'PUT',  data:{  fid:this.fid,  fname:this.fname,  fprice:this.fprice,  fsituation:this.fsituation,  fuse:this.fuse,  fhc:this.fhc,  fword:this.fword,  },  }).done((data)=>{   })  },  findAllFlower:function () { // 查詢所有鮮花信息  $.ajax({  url:'http://localhost:3000/flower/getAllFlower',  type:"GET",  dataType:"json"  }).done((data)=>{  this.flowerArray=data;  })  }  },  })  </script> </body> </html> 複製代碼

vue2整合axios

爲了更加方便的實現功能和理解，在這裏我分步驟爲你們講解。爭取有一個好的效果。vue整合axios其實和vue整合ajax差很少，若是想學習axios的相關文章，能夠參考個人這一篇博客axios參考筆記，這裏面涉及關於axios的使用大部分講解的都很是詳細。歡迎你們評論和提出問題。

<!DOCTYPE html>
<html lang="en"> <head>  <meta charset="UTF-8">  <title>axios和vue操做mysql</title> </head> <body> <div id="app">  <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0">  <tr>  <td>編號</td>  <td>名稱</td>  <td>價格</td>  <td>使用節日</td>  <td>鮮花用途</td>  <td>鮮花花材</td>  <td>花語</td>  <td>操做</td>  </tr>  <template v-for="(item,index) of flowerArray">  <tr>  <td>{{index+1}}</td>  <td>{{item.fname}}</td>  <td>{{item.fprice}}</td>  <td>{{item.fsituation}}</td>  <td>{{item.fuse}}</td>  <td>{{item.fhc}}</td>  <td>{{item.fword}}</td>  <td>  <input type="button" :data-id="item.fid" value="刪除" @click="deleteFlower(item.fid)">  <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)">  </td>  </tr>  </template>  </table>  <form>  名稱：  <input type="text" v-model="fname"><br>  價格：  <input type="text" v-model="fprice"><br>  節日：  <input type="text" v-model="fsituation"><br>  用途：  <input type="text" v-model="fuse"><br>  花材：  <input type="text" v-model="fhc"><br>  花語：  <input type="text" v-model="fword"><br>  <span style="color: red">{{result}}</span><br>  <input type="button" @click="addFlower" value="添加鮮花">  <input type="button" @click="updateFlower" value="修改鮮花">  </form> </div> <script src="javascripts/vue.js"></script> <script src="javascripts/axios.js"></script> <script>  var vm=new Vue({  el:'#app',  data:{  fid:'',  fname:'',  fprice:'',  fsituation:'',  fuse:'',  fhc:'',  fword:'',  result:'',  flowerArray:[],  },  mounted(){  this.findAllFlower();  },  methods:{  findFlowerById:function (id) { //根據編號查詢鮮花信息  this.fid=id;  axios({  url:'http://localhost:3000/flower/findFlowerById',  type:'GET',  params:{id:id}  }).then((data)=>{  console.log(data.data[0].fname);  this.fname=data.data[0].fname;  this.fprice=data.data[0].fprice;  this.fsituation=data.data[0].fsituation;  this.fuse=data.data[0].fuse;  this.fhc=data.data[0].fhc;  this.fword=data.data[0].fword;  })  },  deleteFlower:function (id) { //刪除鮮花信息  axios({  url:'http://localhost:3000/flower/deleteFlower',  method:"DELETE",  data:{  id:id  },  }).then((data)=>{  this.result=data.data;  })  },  addFlower:function () { // 添加鮮花信息  axios({  url:'http://localhost:3000/flower/addFlower',  method:'POST',  data:{  fname:this.fname,  fprice:this.fprice,  fsituation:this.fsituation,  fuse:this.fuse,  fhc:this.fhc,  fword:this.fword,  }  }).then((data)=>{  this.result=data.data;  })  },  updateFlower:function (id) { // 修改鮮花信息  axios({  url:'http://localhost:3000/flower/updateFlower',  method:'PUT',  data:{  fid:this.fid,  fname:this.fname,  fprice:this.fprice,  fsituation:this.fsituation,  fuse:this.fuse,  fhc:this.fhc,  fword:this.fword,  },  }).then((data)=>{  this.result=data.data;  })  },  findAllFlower:function () { // 查詢所有鮮花信息  axios({  url:'http://localhost:3000/flower/getAllFlower',  method:"GET",  dataType:"json"  }).then((data)=>{  this.flowerArray=data.data;  })  }  },  })  </script> </body> </html> 複製代碼

結尾

若是以爲本篇文章對您有用的話，能夠麻煩您給筆者點亮那個點贊按鈕。

對於楊戩這個暖男來講：真的真的很是有用，您的支持將是我繼續寫文章前進的動力，咱們下篇文章見。

【原創】|二郎神楊戩

原創不易，莫要白嫖。 二郎神楊戩，一個在互聯網前端苟且偷生的划水程序員，專一於前端開發，善於技術分享。 如需轉載，請聯繫做者或者保留原文連接，微信公衆號搜索二郎神楊戩或者掃描下方的二維碼更加方便。

一塊兒來見證二郎神楊戩的成長吧！更多好文、技術分享盡在下方這個公衆號。歡迎關注。