《Node.js教程系列》—Node.js+MySQL+RESTful

本文轉載自查看原文 2020-01-28 20:27 746 Node.js文章系列

前言

最近學習了一下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,
                        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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Node.js & RESTful API 安裝Node.js教程 Node.js連接Mysql Node.js實現RESTful api,express or koa? Linux 安裝node.js和npm教程 Node.js安裝詳細教程 node.js 安裝詳細步驟教程 node.js 安裝詳細步驟教程 node.js零基礎詳細教程(4)：node.js事件機制、node異步IO操作 node.js之mysql npm包學習