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

時間 2020-01-29

標籤 node.js node 操練 node.js+mysql+restful mysql restful 欄目 Node.js 简体版

原文原文鏈接

前言

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

本章目標

Node.js後端

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

前端

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

項目搭建

MySQL數據庫

數據庫腳本

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

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

結果：前端

Node.js後端項目搭建

一、搭建node.js項目

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

二、安裝mysql依賴

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

方式一：node

cnpm install mysql　　//使用淘寶鏡像依賴mysql

方式二：mysql

npm install mysql --save    //　當前項目安裝mysql依賴

方式三：jquery

npm install mysql -g　　　　//全局安裝mysql依賴

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

三、編寫RESTful風格的接口

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

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

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

第一步的話主要式創建起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

2、添加數據接口和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('添加成功!'); }) })

3、修改數據接口和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('修改爲功!'); }) })

4、查詢所有數據接口和SQL語句

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

5、查詢單條數據接口和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); }) })

6、刪除數據接口和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;

7、所有代碼：

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

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

注意：結尾必定要寫module.exports=router

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

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

app.js文件代碼

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

紅色標註的表示新增的路由註冊和添加的跨域請求。

跨域代碼：

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

前端

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

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

vue2整合ajax

1、查詢所有鮮花信息

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

2、根據條件查詢鮮花信息

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

3、添加鮮花信息

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

4、修改鮮花信息

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

5、刪除鮮花信息

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

6、所有代碼

<!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的相關文章，能夠參考個人這一篇博客http://www.javashuo.com/article/p-qijfpnol-eq.html，這裏面涉及關於axios的使用大部分講解的都很是詳細。歡迎你們評論和提出問題。

1、查詢所有鮮花信息

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

2、根據條件查詢鮮花信息

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

3、添加鮮花信息

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

4、修改鮮花信息

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

5、刪除鮮花信息

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

6、所有代碼

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。