Node.js實操練習(一)之Node.js+MySQL+RESTful

阿新 • • 發佈：2020-01-28

前言

最近學習了一下node.js相關的內容，在這裡初步做個小總結，說實話關於本篇部落格的相關內容，自己很久之前就已經有過學習，但是你懂的，“好記性不如爛筆筒”，學過的東西不做筆記的話，很容易就會忘記的一乾二淨，往往的結果就是自己又要重頭開始學習，這是一個非常痛苦的過程。沒有辦法，為了重新撿起自己曾經學過的內容，決定寫下這篇部落格來回顧自己所學的知識。

本章目標

Node.js後端

學會使用node.js操作MySQL實現簡單的增刪查改
學會使用RESTful風格定義介面

前端

學會使用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後端專案搭建

1、搭建node.js專案

搭建node.js專案的過程我就直接省略了，具體如何搭建node.js專案大家可以自行百度或者後期我會新增相關內容的部落格方便大家學習。搭建好的專案結構如下：

2、安裝mysql依賴

既然我們需要操作mysql，那麼我們肯定需要安裝相關的依賴，在這裡介紹三種方法安裝mysql依賴。

方式一：

cnpm install mysql　　//使用淘寶映象依賴mysql

方式二：

npm install mysql --save    //　當前專案安裝mysql依賴

方式三：

npm install mysql -g　　　　//全域性安裝mysql依賴

選擇任意以上一種方法安裝都可以，安裝完成之後，我們確認一下是否真的安裝成功，找到目錄node_modules,這裡是檢視我們安裝的所有依賴，可以看到mysql依賴成功了。

3、編寫RESTful風格的介面

找到目錄結構routes，新建flowerRouter.js檔案。目錄結構如下：

一、建立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();   //建立連線

第一步的話主要式建立起node.js和mysql之間的橋樑。部分引數說明如下：

引數	描述
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的配置檔案

具體引數資訊請前往：https://github.com/mysqljs/mysql

二、新增資料介面和SQL語句

//  新增鮮花資訊
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('新增成功!');
    })
})

三、修改資料介面和SQL語句

//  修改鮮花資訊
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('修改成功!');
    })
})

四、查詢全部資料介面和SQL語句

//  查詢全部鮮花資訊
router.get('/getAllFlower',(req,res,next)=>{
    connection.query('select * from flowerinfo',(err,result)=>{
        if(err){
            throw  err;
            return;
        }
        res.send(result);
    })
});

五、查詢單條資料介面和SQL語句

//  根據鮮花編號查詢鮮花資訊
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);
    })
})

六、刪除資料介面和SQL語句

//  刪除鮮花資訊
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;

七、全部程式碼：

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

4、註冊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();
    }
});

前端

前端方面主要使用兩種方法操作資料，一種是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) {    //根據編號查詢鮮花資訊

          },
            deleteFlower:function (id) {    //刪除鮮花資訊

            },
            addFlower:function () {         //  新增鮮花資訊

            },
            updateFlower:function (id) {      //  修改鮮花資訊

            },
            findAllFlower:function () { //  查詢全部鮮花資訊
                $.ajax({
                    url:'http://localhost:3000/flower/getAllFlower',
                    type:"GET",
                    dataType:"json"
                }).done((data)=>{
                    this.flowerArray=data;
                })
            }
        },
    })

</script>
</body>
</html>

二、根據條件查詢鮮花資訊

<!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) {    //刪除鮮花資訊

            },
            addFlower:function () {         //  新增鮮花資訊

            },
            updateFlower:function (id) {      //  修改鮮花資訊

            },
            findAllFlower:function () { //  查詢全部鮮花資訊
                $.ajax({
                    url:'http://localhost:3000/flower/getAllFlower',
                    type:"GET",
                    dataType:"json"
                }).done((data)=>{
                    this.flowerArray=data;
                })
            }
        },
    })

</script>
</body>
</html>

三、新增鮮花資訊

<!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) {    //根據編號查詢鮮花資訊

          },
            deleteFlower:function (id) {    //刪除鮮花資訊

            },
            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) {      //  修改鮮花資訊

            },
            findAllFlower:function () { //  查詢全部鮮花資訊
                $.ajax({
                    url:'http://localhost:3000/flower/getAllFlower',
                    type:"GET",
                    dataType:"json"
                }).done((data)=>{
                    this.flowerArray=data;
                })
            }
        },
    })

</script>
</body>
</html>

四、修改鮮花資訊

<!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) {    //刪除鮮花資訊

            },
            addFlower:function () {         //  新增鮮花資訊
              
            },
            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>

五、刪除鮮花資訊

<!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) {    //根據編號查詢鮮花資訊

          },
            deleteFlower:function (id) {    //刪除鮮花資訊
                $.ajax({
                    url:'http://localhost:3000/flower/deleteFlower',
                    type:"DELETE",
                    data:{
                        id:id
                    },
                }).done((data)=>{

                })
            },
            addFlower:function () {         //  新增鮮花資訊

            },
            updateFlower:function (id) {      //  修改鮮花資訊
            },
            findAllFlower:function () { //  查詢全部鮮花資訊
                $.ajax({
                    url:'http://localhost:3000/flower/getAllFlower',
                    type:"GET",
                    dataType:"json"
                }).done((data)=>{
                    this.flowerArray=data;
                })
            }
        },
    })

</script>
</body>
</html>

六、全部程式碼

<!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的相關文章，可以參考我的這一篇部落格https://www.cnblogs.com/jjgw/p/12079892.html，這裡面涉及關於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) {    //根據編號查詢鮮花資訊

            },
            deleteFlower:function (id) {    //刪除鮮花資訊

            },
            addFlower:function () {         //  新增鮮花資訊

            },
            updateFlower:function (id) {      //  修改鮮花資訊
                
            },
            findAllFlower:function () { //  查詢全部鮮花資訊
                axios({
                    url:'http://localhost:3000/flower/getAllFlower',
                    method:"GET",
                    dataType:"json"
                }).then((data)=>{
                    this.flowerArray=data.data;
                })
            }
        },
    })

</script>
</body>
</html>

二、根據條件查詢鮮花資訊

<!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)=>{
                    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) {    //刪除鮮花資訊

            },
            addFlower:function () {         //  新增鮮花資訊

            },
            updateFlower:function (id) {      //  修改鮮花資訊

            },
            findAllFlower:function () { //  查詢全部鮮花資訊
                axios({
                    url:'http://localhost:3000/flower/getAllFlower',
                    method:"GET",
                    dataType:"json"
                }).then((data)=>{
                    this.flowerArray=data.data;
                })
            }
        },
    })

</script>
</body>
</html>

三、新增鮮花資訊

<!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) {    //根據編號查詢鮮花資訊

            },
            deleteFlower:function (id) {    //刪除鮮花資訊

            },
            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) {      //  修改鮮花資訊

            },
            findAllFlower:function () { //  查詢全部鮮花資訊
                axios({
                    url:'http://localhost:3000/flower/getAllFlower',
                    method:"GET",
                    dataType:"json"
                }).then((data)=>{
                    this.flowerArray=data.data;
                })
            }
        },
    })

</script>
</body>
</html>

四、修改鮮花資訊

<!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)=>{
                    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) {    //刪除鮮花資訊

            },
            addFlower:function () {         //  新增鮮花資訊

            },
            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>

五、刪除鮮花資訊

<!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) {    //根據編號查詢鮮花資訊

            },
            deleteFlower:function (id) {    //刪除鮮花資訊
                axios({
                    url:'http://localhost:3000/flower/deleteFlower',
                    method:"DELETE",
                    data:{
                        id:id
                    },
                }).then((data)=>{
                    this.result=data.data;
                })
            },
            addFlower:function () {         //  新增鮮花資訊

            },
            updateFlower:function (id) {      //  修改鮮花資訊

            },
            findAllFlower:function () { //  查詢全部鮮花資訊
                axios({
                    url:'http://localhost:3000/flower/getAllFlower',
                    method:"GET",
                    dataType:"json"
                }).then((data)=>{
                    this.flowerArray=data.data;
                })
            }
        },
    })

</script>
</body>
</html>

六、全部程式碼

<!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,

Node.js實操練習(一)之Node.js+MySQL+RESTful

前言

本章目標

Node.js後端

前端

專案搭建

MySQL資料庫

資料庫指令碼

Node.js後端專案搭建

1、搭建node.js專案

2、安裝mysql依賴

3、編寫RESTful風格的介面

一、建立node.js和mysql資料庫的連線

二、新增資料介面和SQL語句

三、修改資料介面和SQL語句

四、查詢全部資料介面和SQL語句

五、查詢單條資料介面和SQL語句

六、刪除資料介面和SQL語句

七、全部程式碼：

4、註冊router和設定跨域請求

前端

vue2整合ajax

一、查詢全部鮮花資訊

二、根據條件查詢鮮花資訊

三、新增鮮花資訊

四、修改鮮花資訊

五、刪除鮮花資訊

六、全部程式碼

vue2整合axios

一、查詢全部鮮花資訊

二、根據條件查詢鮮花資訊

三、新增鮮花資訊

四、修改鮮花資訊

五、刪除鮮花資訊

六、全部程式碼

相關推薦