先点赞后关注，防止会迷路
寄语：没有一个冬天不会过去，没有一个春天不会到来。
前言
最近学习了一下Node.js相关的内容，在这里初步做个小总结，说实话关于本篇博客的相关内容，自己很久之前就已经有过学习，但是你懂的。
"好记性不如烂笔筒"
学过的东西不做笔记的话，很容易就会忘记的一干二净，往往的结果就是自己又要重头开始学习，这是一个非常痛苦的过程。没有办法，为了重新捡起自己曾经学过的内容，决定写下这篇博客来回顾自己所学的知识。
本章目标
Node.js后端
- 学会使用node.js操作MySQL实现简单的增删查改
- 学会使用RESTful风格定义接口
WEB前端
- 学会使用vue2整合Ajax
- 学会使用vue2整合axios
项目搭建
MySQL数据库
数据库脚本
创建鲜花信息表，添加鲜花编号，鲜花名称，鲜花价格，鲜花用途，鲜花花材，鲜花花语等字段。在这里我们就直接使用SQL脚本来创建数据表和添加一些测试数据。
1CREATE table flowerinfo 2( 3 fid BIGINT auto_increment PRIMARY key not NULL COMMENT"编号", 4 fname varchar(20) not null COMMENT"名称", 5 fprice DECIMAL(16,2) COMMENT"价格", 6 fsituation varchar(20) not null COMMENT"使用节日", 7 fuse varchar(20) not null COMMENT"鲜花用途", 8 fhc varchar(20) not null COMMENT"鲜花花材", 9 fword varchar(50) COMMENT"花语"10)COMMENT"鲜花信息表"1112INSERT into flowerinfo(fname,fprice,fhc,fuse,fsituation,fword)13VALUES("一生一世",200,"玫瑰,香槟","爱情鲜花","情人节","你是我一生一世唯一的爱人,我会好好珍惜你"),14("祝福你",300,"玫瑰,香槟","爱情鲜花","情人节,母亲节,父亲节","我把我最真诚的祝福送给你,祝你天天开心"),15("一生一世",200,"玫瑰,香槟","爱情鲜花","情人节","你是我一生一世唯一的爱人,我会好好珍惜你"),16("祝福你",300,"玫瑰,香槟","爱情鲜花","情人节,母亲节,父亲节","我把我最真诚的祝福送给你,祝你天天开心")结果：
Node.js后端项目搭建
一、搭建node.js项目
搭建node.js项目的过程我就直接省略了，具体如何搭建node.js项目大家可以自行百度或者后期我会添加相关内容的博客方便大家学习。搭建好的项目结构如下：
二、安装mysql依赖
既然我们需要操作mysql，那么我们肯定需要安装相关的依赖，在这里介绍三种方法安装mysql依赖。
方式一：
cnpm install mysql //使用淘宝镜像依赖mysql
方式二：
npm install mysql --save // 当前项目安装mysql依赖
方式三：
npm install mysql -g //全局安装mysql依赖
选择任意以上一种方法安装都可以，安装完成之后，我们确认一下是否真的安装成功，找到目录node_modules,这里是查看我们安装的所有依赖，可以看到mysql依赖成功了。
三、编写RESTful风格的接口
找到目录结构routes，新建flowerRouter.js文件。目录结构如下：
建立node.js和mysql数据库的连接
1let express=require('express'); // 引入express依赖 2let mysql=require('mysql') // 引入mysql依赖 3let router=express.Router(); 4let connection=mysql.createConnection({ 5 host: 'localhost', //主机名 6 user:'root', //账号 7 password:'123456', //密码 8 database:'flower' //连接的数据库名称 9});10connection.connect(); //建立连接具体参数信息请前往：github地址
添加数据接口和SQL语句
1// 添加鲜花信息 2router.post('/addFlower',(req,res,next)=>{ 3 let fname=req.body.fname; //名称 4 let fprice=req.body.fprice;// 价格 5 let fsituation=req.body.fsituation; //节日 6 let fuse=req.body.fuse; // 用途 7 let fhc=req.body.fhc; // 花材 8 let fword=req.body.fword; //花语 9 let addsql="insert into flowerinfo(fid,fname,fprice,fsituation,fuse,fhc,fword)values(0,?,?,?,?,?,?)";10 let addsqlParams=[fname,fprice,fsituation,fuse,fhc,fword];11 connection.query(addsql,addsqlParams,(err,result)=>{12 if(err){13 throw err;14 return;15 }16 res.send('添加成功!');17 })18})修改数据接口和SQL语句
1// 修改鲜花信息 2router.put('/updateFlower',(req,res,next)=>{ 3 let id=req.body.fid; 4 let fname=req.body.fname; //名称 5 let fprice=req.body.fprice;// 价格 6 let fsituation=req.body.fsituation; //节日 7 let fuse=req.body.fuse; // 用途 8 let fhc=req.body.fhc; // 花材 9 let fword=req.body.fword; //花语10 let updatesql='update flowerinfo set fname=?,fprice=?,fsituation=?,fuse=?,fhc=?,fword=? where fid=?';11 let updatesqlParams=[fname,fprice,fsituation,fuse,fhc,fword,id]12 connection.query(updatesql,updatesqlParams,(err,result)=>{13 if (err){14 throw err;15 return false16 }17 res.send('修改成功!');18 })19})查询全部数据接口和SQL语句
1// 查询全部鲜花信息 2router.get('/getAllFlower',(req,res,next)=>{ 3 connection.query('select * from flowerinfo',(err,result)=>{ 4 if(err){ 5 throw err; 6 return; 7 } 8 res.send(result); 9 })10});查询单条数据接口和SQL语句
1// 根据鲜花编号查询鲜花信息 2router.get('/findFlowerById',(req,res,next)=>{ 3 let id=req.query.id; 4 let selectsql='select * from flowerinfo where fid=?'; 5 let selctParams=[id]; 6 connection.query(selectsql,selctParams,(err,result)=>{ 7 if (err){ 8 throw err 9 }10 res.send(result);11 })12})删除数据接口和SQL语句
1// 删除鲜花信息 2router.delete('/deleteFlower',(req,res,next)=>{ 3 let id=req.body.id; 4 let deletesql="delete from flowerinfo where fid=?"; 5 let deletesqlParams=[id]; 6 connection.query(deletesql,deletesqlParams,(err,result)=>{ 7 if(err){ 8 throw err; 9 return false;10 }11 res.send('删除成功!');12 })13})14module.exports=router;完整代码：
1let express=require('express'); // 引入express依赖 2let mysql=require('mysql') // 引入mysql依赖 3let router=express.Router(); 4let connection=mysql.createConnection({ 5 host: 'localhost', //主机名 6 user:'root', //账号 7 password:'123456', //密码 8 database:'flower' //连接的数据库名称 9});10connection.connect(); //建立连接11// 查询全部鲜花信息12router.get('/getAllFlower',(req,res,next)=>{13 connection.query('select * from flowerinfo',(err,result)=>{14 if(err){15 throw err;16 return;17 }18 res.send(result);19 })20});21// 添加鲜花信息22router.post('/addFlower',(req,res,next)=>{23 let fname=req.body.fname; //名称24 let fprice=req.body.fprice;// 价格25 let fsituation=req.body.fsituation; //节日26 let fuse=req.body.fuse; // 用途27 let fhc=req.body.fhc; // 花材28 let fword=req.body.fword; //花语29 let addsql="insert into flowerinfo(fid,fname,fprice,fsituation,fuse,fhc,fword)values(0,?,?,?,?,?,?)";30 let addsqlParams=[fname,fprice,fsituation,fuse,fhc,fword];31 connection.query(addsql,addsqlParams,(err,result)=>{32 if(err){33 throw err;34 return;35 }36 res.send('添加成功!');37 })38})39// 根据鲜花编号查询鲜花信息40router.get('/findFlowerById',(req,res,next)=>{41 let id=req.query.id;42 let selectsql='select * from flowerinfo where fid=?';43 let selctParams=[id];44 connection.query(selectsql,selctParams,(err,result)=>{45 if (err){46 throw err47 }48 res.send(result);49 })50})51// 修改鲜花信息52router.put('/updateFlower',(req,res,next)=>{53 let id=req.body.fid;54 let fname=req.body.fname; //名称55 let fprice=req.body.fprice;// 价格56 let fsituation=req.body.fsituation; //节日57 let fuse=req.body.fuse; // 用途58 let fhc=req.body.fhc; // 花材59 let fword=req.body.fword; //花语60 let updatesql='update flowerinfo set fname=?,fprice=?,fsituation=?,fuse=?,fhc=?,fword=? where fid=?';61 let updatesqlParams=[fname,fprice,fsituation,fuse,fhc,fword,id]62 connection.query(updatesql,updatesqlParams,(err,result)=>{63 if (err){64 throw err;65 return false66 }67 res.send('修改成功!');68 })69})70// 删除鲜花信息71router.delete('/deleteFlower',(req,res,next)=>{72 let id=req.body.id;73 let deletesql="delete from flowerinfo where fid=?";74 let deletesqlParams=[id];75 connection.query(deletesql,deletesqlParams,(err,result)=>{76 if(err){77 throw err;78 return false;79 }80 res.send('删除成功!');81 })82})83module.exports=router;这里有个重大的bug，就是我们连接完之后没有关闭连接，这样就会资源的浪费，占用cpu。这里大家可以想办法去解决，由于我们这里是测试的，所以没有设置关闭连接。
注意：结尾一定要写module.exports=router
四、注册router和设置跨域请求
找到目录结构下的app.js文件注册路由和跨域请求设置。
app.js文件代码
1var createError = require('http-errors'); 2var express = require('express'); 3var path = require('path'); 4var cookieParser = require('cookie-parser'); 5var logger = require('morgan'); 6 7var indexRouter = require('./routes/index'); 8var usersRouter = require('./routes/users'); 9var productRouter=require('./routes/product');10var flowerRouter=require('./routes/flowerRouter')11var app = express();1213// view engine setup14app.set('views', path.join(__dirname, 'views'));15app.set('view engine', 'ejs');1617app.use(logger('dev'));18app.use(express.json());19app.use(express.urlencoded({ extended: false }));20app.use(cookieParser());21app.use(express.static(path.join(__dirname, 'public')));22// 设置跨域请求23app.all('*', function(req, res, next) {24 res.header("Access-Control-Allow-Origin", "*");25 res.header("Access-Control-Allow-Headers", "content-type");26 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");27 res.header("X-Powered-By", ' 3.2.1');28 res.header("Content-Type", "application/json;charset=utf-8");29 if(req.method == "OPTIONS") {30 res.send("200");31 } else {32 next();33 }34});35app.use('/', indexRouter);36app.use('/users', usersRouter);37app.use('/product',productRouter);38app.use('/flower',flowerRouter);394041// catch 404 and forward to error handler42app.use(function(req, res, next) {43 next(createError(404));44});4546// error handler47app.use(function(err, req, res, next) {48 // set locals, only providing error in development49 res.locals.message = err.message;50 res.locals.error = req.app.get('env') === 'development' ? err : {};5152 // render the error page53 res.status(err.status || 500);54 res.render('error');55});5657module.exports = app;跨域代码：
1// 设置跨域请求 2app.all('*', function(req, res, next) { 3 res.header("Access-Control-Allow-Origin", "*"); 4 res.header("Access-Control-Allow-Headers", "content-type"); 5 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); 6 res.header("X-Powered-By", ' 3.2.1'); 7 res.header("Content-Type", "application/json;charset=utf-8"); 8 if(req.method == "OPTIONS") { 9 res.send("200");10 } else {11 next();12 }13});前端
前端方面主要使用两种方法操作数据，一种是ajax，另一种是axios，将所需要用到的插件引入。目录结构如下：
在这里我们引入的vue.js，axios，jQuey，以及新建两个html文件，为了方便命名上已经规定了。接下来就是数据操作了。
Vue2整合Ajax
一、查询全部鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>ajax和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/jquery-3.3.1.min.js"></script> 55<script src="javascripts/vue.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 76 }, 77 deleteFlower:function (id) { //删除鲜花信息 78 79 }, 80 addFlower:function () { // 添加鲜花信息 81 82 }, 83 updateFlower:function (id) { // 修改鲜花信息 84 85 }, 86 findAllFlower:function () { // 查询全部鲜花信息 87 $.ajax({ 88 url:'http://localhost:3000/flower/getAllFlower', 89 type:"GET", 90 dataType:"json" 91 }).done((data)=>{ 92 this.flowerArray=data; 93 }) 94 } 95 }, 96 }) 97 98</script> 99</body>100</html>二、根据条件查询鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>ajax和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/jquery-3.3.1.min.js"></script> 55<script src="javascripts/vue.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 this.fid=id; 76 $.ajax({ 77 url:'http://localhost:3000/flower/findFlowerById', 78 type:'GET', 79 data:{id:id} 80 }).done((data)=>{ 81 this.fname=data[0].fname; 82 this.fprice=data[0].fprice; 83 this.fsituation=data[0].fsituation; 84 this.fuse=data[0].fuse; 85 this.fhc=data[0].fhc; 86 this.fword=data[0].fword; 87 }) 88 }, 89 deleteFlower:function (id) { //删除鲜花信息 90 91 }, 92 addFlower:function () { // 添加鲜花信息 93 94 }, 95 updateFlower:function (id) { // 修改鲜花信息 96 97 }, 98 findAllFlower:function () { // 查询全部鲜花信息 99 $.ajax({100 url:'http://localhost:3000/flower/getAllFlower',101 type:"GET",102 dataType:"json"103 }).done((data)=>{104 this.flowerArray=data;105 })106 }107 },108 })109110</script>111</body>112</html>三、添加鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>ajax和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/jquery-3.3.1.min.js"></script> 55<script src="javascripts/vue.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 76 }, 77 deleteFlower:function (id) { //删除鲜花信息 78 79 }, 80 addFlower:function () { // 添加鲜花信息 81 $.ajax({ 82 url:'http://localhost:3000/flower/addFlower', 83 type:'POST', 84 data:{ 85 fname:this.fname, 86 fprice:this.fprice, 87 fsituation:this.fsituation, 88 fuse:this.fuse, 89 fhc:this.fhc, 90 fword:this.fword, 91 } 92 }).done((data)=>{ 93 }) 94 }, 95 updateFlower:function (id) { // 修改鲜花信息 96 97 }, 98 findAllFlower:function () { // 查询全部鲜花信息 99 $.ajax({100 url:'http://localhost:3000/flower/getAllFlower',101 type:"GET",102 dataType:"json"103 }).done((data)=>{104 this.flowerArray=data;105 })106 }107 },108 })109110</script>111</body>112</html>四、修改鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>ajax和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/jquery-3.3.1.min.js"></script> 55<script src="javascripts/vue.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 this.fid=id; 76 $.ajax({ 77 url:'http://localhost:3000/flower/findFlowerById', 78 type:'GET', 79 data:{id:id} 80 }).done((data)=>{ 81 this.fname=data[0].fname; 82 this.fprice=data[0].fprice; 83 this.fsituation=data[0].fsituation; 84 this.fuse=data[0].fuse; 85 this.fhc=data[0].fhc; 86 this.fword=data[0].fword; 87 }) 88 }, 89 deleteFlower:function (id) { //删除鲜花信息 90 91 }, 92 addFlower:function () { // 添加鲜花信息 93 94 }, 95 updateFlower:function (id) { // 修改鲜花信息 96 $.ajax({ 97 url:'http://localhost:3000/flower/updateFlower', 98 type:'PUT', 99 data:{100 fid:this.fid,101 fname:this.fname,102 fprice:this.fprice,103 fsituation:this.fsituation,104 fuse:this.fuse,105 fhc:this.fhc,106 fword:this.fword,107 },108 }).done((data)=>{109110 })111 },112 findAllFlower:function () { // 查询全部鲜花信息113 $.ajax({114 url:'http://localhost:3000/flower/getAllFlower',115 type:"GET",116 dataType:"json"117 }).done((data)=>{118 this.flowerArray=data;119 })120 }121 },122 })123124</script>125</body>126</html>五、删除鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>ajax和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/jquery-3.3.1.min.js"></script> 55<script src="javascripts/vue.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 76 }, 77 deleteFlower:function (id) { //删除鲜花信息 78 $.ajax({ 79 url:'http://localhost:3000/flower/deleteFlower', 80 type:"DELETE", 81 data:{ 82 id:id 83 }, 84 }).done((data)=>{ 85 86 }) 87 }, 88 addFlower:function () { // 添加鲜花信息 89 90 }, 91 updateFlower:function (id) { // 修改鲜花信息 92 }, 93 findAllFlower:function () { // 查询全部鲜花信息 94 $.ajax({ 95 url:'http://localhost:3000/flower/getAllFlower', 96 type:"GET", 97 dataType:"json" 98 }).done((data)=>{ 99 this.flowerArray=data;100 })101 }102 },103 })104105</script>106</body>107</html>六、全部代码
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>ajax和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/jquery-3.3.1.min.js"></script> 55<script src="javascripts/vue.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 this.fid=id; 76 $.ajax({ 77 url:'http://localhost:3000/flower/findFlowerById', 78 type:'GET', 79 data:{id:id} 80 }).done((data)=>{ 81 this.fname=data[0].fname; 82 this.fprice=data[0].fprice; 83 this.fsituation=data[0].fsituation; 84 this.fuse=data[0].fuse; 85 this.fhc=data[0].fhc; 86 this.fword=data[0].fword; 87 }) 88 }, 89 deleteFlower:function (id) { //删除鲜花信息 90 $.ajax({ 91 url:'http://localhost:3000/flower/deleteFlower', 92 type:"DELETE", 93 data:{ 94 id:id 95 }, 96 }).done((data)=>{ 97 98 }) 99 },100 addFlower:function () { // 添加鲜花信息101 $.ajax({102 url:'http://localhost:3000/flower/addFlower',103 type:'POST',104 data:{105 fname:this.fname,106 fprice:this.fprice,107 fsituation:this.fsituation,108 fuse:this.fuse,109 fhc:this.fhc,110 fword:this.fword,111 }112 }).done((data)=>{113 })114 },115 updateFlower:function (id) { // 修改鲜花信息116 $.ajax({117 url:'http://localhost:3000/flower/updateFlower',118 type:'PUT',119 data:{120 fid:this.fid,121 fname:this.fname,122 fprice:this.fprice,123 fsituation:this.fsituation,124 fuse:this.fuse,125 fhc:this.fhc,126 fword:this.fword,127 },128 }).done((data)=>{129130 })131 },132 findAllFlower:function () { // 查询全部鲜花信息133 $.ajax({134 url:'http://localhost:3000/flower/getAllFlower',135 type:"GET",136 dataType:"json"137 }).done((data)=>{138 this.flowerArray=data;139 })140 }141 },142 })143144</script>145</body>146</html>Vue2整合axios
为了更加方便的实现功能和理解，在这里我分步骤为大家讲解。争取有一个好的效果。vue整合axios其实和vue整合ajax差不多，如果想学习axios的相关文章，可以参考我的这一篇博客vue-cli项目中使用axios，这里面涉及关于axios的使用大部分讲解的都非常详细。欢迎大家评论和提出问题。
一、查询全部鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>axios和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/vue.js"></script> 55<script src="javascripts/axios.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 76 }, 77 deleteFlower:function (id) { //删除鲜花信息 78 79 }, 80 addFlower:function () { // 添加鲜花信息 81 82 }, 83 updateFlower:function (id) { // 修改鲜花信息 84 85 }, 86 findAllFlower:function () { // 查询全部鲜花信息 87 axios({ 88 url:'http://localhost:3000/flower/getAllFlower', 89 method:"GET", 90 dataType:"json" 91 }).then((data)=>{ 92 this.flowerArray=data.data; 93 }) 94 } 95 }, 96 }) 97 98</script> 99</body>100</html>二、根据条件查询鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>axios和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/vue.js"></script> 55<script src="javascripts/axios.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 this.fid=id; 76 axios({ 77 url:'http://localhost:3000/flower/findFlowerById', 78 type:'GET', 79 params:{id:id} 80 }).then((data)=>{ 81 this.fname=data.data[0].fname; 82 this.fprice=data.data[0].fprice; 83 this.fsituation=data.data[0].fsituation; 84 this.fuse=data.data[0].fuse; 85 this.fhc=data.data[0].fhc; 86 this.fword=data.data[0].fword; 87 }) 88 }, 89 deleteFlower:function (id) { //删除鲜花信息 90 91 }, 92 addFlower:function () { // 添加鲜花信息 93 94 }, 95 updateFlower:function (id) { // 修改鲜花信息 96 97 }, 98 findAllFlower:function () { // 查询全部鲜花信息 99 axios({100 url:'http://localhost:3000/flower/getAllFlower',101 method:"GET",102 dataType:"json"103 }).then((data)=>{104 this.flowerArray=data.data;105 })106 }107 },108 })109110</script>111</body>112</html>三、添加鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>axios和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/vue.js"></script> 55<script src="javascripts/axios.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 76 }, 77 deleteFlower:function (id) { //删除鲜花信息 78 79 }, 80 addFlower:function () { // 添加鲜花信息 81 axios({ 82 url:'http://localhost:3000/flower/addFlower', 83 method:'POST', 84 data:{ 85 fname:this.fname, 86 fprice:this.fprice, 87 fsituation:this.fsituation, 88 fuse:this.fuse, 89 fhc:this.fhc, 90 fword:this.fword, 91 } 92 }).then((data)=>{ 93 this.result=data.data; 94 }) 95 }, 96 updateFlower:function (id) { // 修改鲜花信息 97 98 }, 99 findAllFlower:function () { // 查询全部鲜花信息100 axios({101 url:'http://localhost:3000/flower/getAllFlower',102 method:"GET",103 dataType:"json"104 }).then((data)=>{105 this.flowerArray=data.data;106 })107 }108 },109 })110111</script>112</body>113</html>四、修改鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>axios和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/vue.js"></script> 55<script src="javascripts/axios.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 this.fid=id; 76 axios({ 77 url:'http://localhost:3000/flower/findFlowerById', 78 type:'GET', 79 params:{id:id} 80 }).then((data)=>{ 81 this.fname=data.data[0].fname; 82 this.fprice=data.data[0].fprice; 83 this.fsituation=data.data[0].fsituation; 84 this.fuse=data.data[0].fuse; 85 this.fhc=data.data[0].fhc; 86 this.fword=data.data[0].fword; 87 }) 88 }, 89 deleteFlower:function (id) { //删除鲜花信息 90 91 }, 92 addFlower:function () { // 添加鲜花信息 93 94 }, 95 updateFlower:function (id) { // 修改鲜花信息 96 axios({ 97 url:'http://localhost:3000/flower/updateFlower', 98 method:'PUT', 99 data:{100 fid:this.fid,101 fname:this.fname,102 fprice:this.fprice,103 fsituation:this.fsituation,104 fuse:this.fuse,105 fhc:this.fhc,106 fword:this.fword,107 },108 }).then((data)=>{109 this.result=data.data;110 })111 },112 findAllFlower:function () { // 查询全部鲜花信息113 axios({114 url:'http://localhost:3000/flower/getAllFlower',115 method:"GET",116 dataType:"json"117 }).then((data)=>{118 this.flowerArray=data.data;119 })120 }121 },122 })123124</script>125</body>126</html>五、删除鲜花信息
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>axios和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/vue.js"></script> 55<script src="javascripts/axios.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 76 }, 77 deleteFlower:function (id) { //删除鲜花信息 78 axios({ 79 url:'http://localhost:3000/flower/deleteFlower', 80 method:"DELETE", 81 data:{ 82 id:id 83 }, 84 }).then((data)=>{ 85 this.result=data.data; 86 }) 87 }, 88 addFlower:function () { // 添加鲜花信息 89 90 }, 91 updateFlower:function (id) { // 修改鲜花信息 92 93 }, 94 findAllFlower:function () { // 查询全部鲜花信息 95 axios({ 96 url:'http://localhost:3000/flower/getAllFlower', 97 method:"GET", 98 dataType:"json" 99 }).then((data)=>{100 this.flowerArray=data.data;101 })102 }103 },104 })105106</script>107</body>108</html>六、全部代码
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>axios和vue操作mysql</title> 6</head> 7<body> 8<div id="app"> 9 <table border="1" width="800px" style="margin: 0 auto" cellspacing="0" cellpadding="0"> 10 <tr> 11 <td>编号</td> 12 <td>名称</td> 13 <td>价格</td> 14 <td>使用节日</td> 15 <td>鲜花用途</td> 16 <td>鲜花花材</td> 17 <td>花语</td> 18 <td>操作</td> 19 </tr> 20 <template v-for="(item,index) of flowerArray"> 21 <tr> 22 <td>{{index+1}}</td> 23 <td>{{item.fname}}</td> 24 <td>{{item.fprice}}</td> 25 <td>{{item.fsituation}}</td> 26 <td>{{item.fuse}}</td> 27 <td>{{item.fhc}}</td> 28 <td>{{item.fword}}</td> 29 <td> 30 <input type="button" :data-id="item.fid" value="删除" @click="deleteFlower(item.fid)"> 31 <input type="button" :data-id="item.fid" value="修改" @click="findFlowerById(item.fid)"> 32 </td> 33 </tr> 34 </template> 35 </table> 36 <form> 37 名称： 38 <input type="text" v-model="fname"><br> 39 价格： 40 <input type="text" v-model="fprice"><br> 41 节日： 42 <input type="text" v-model="fsituation"><br> 43 用途： 44 <input type="text" v-model="fuse"><br> 45 花材： 46 <input type="text" v-model="fhc"><br> 47 花语： 48 <input type="text" v-model="fword"><br> 49 <span style="color: red">{{result}}</span><br> 50 <input type="button" @click="addFlower" value="添加鲜花"> 51 <input type="button" @click="updateFlower" value="修改鲜花"> 52 </form> 53</div> 54<script src="javascripts/vue.js"></script> 55<script src="javascripts/axios.js"></script> 56<script> 57 var vm=new Vue({ 58 el:'#app', 59 data:{ 60 fid:'', 61 fname:'', 62 fprice:'', 63 fsituation:'', 64 fuse:'', 65 fhc:'', 66 fword:'', 67 result:'', 68 flowerArray:[], 69 }, 70 mounted(){ 71 this.findAllFlower(); 72 }, 73 methods:{ 74 findFlowerById:function (id) { //根据编号查询鲜花信息 75 this.fid=id; 76 axios({ 77 url:'http://localhost:3000/flower/findFlowerById', 78 type:'GET', 79 params:{id:id} 80 }).then((data)=>{ 81 console.log(data.data[0].fname); 82 this.fname=data.data[0].fname; 83 this.fprice=data.data[0].fprice; 84 this.fsituation=data.data[0].fsituation; 85 this.fuse=data.data[0].fuse; 86 this.fhc=data.data[0].fhc; 87 this.fword=data.data[0].fword; 88 }) 89 }, 90 deleteFlower:function (id) { //删除鲜花信息 91 axios({ 92 url:'http://localhost:3000/flower/deleteFlower', 93 method:"DELETE", 94 data:{ 95 id:id 96 }, 97 }).then((data)=>{ 98 this.result=data.data; 99 })100 },101 addFlower:function () { // 添加鲜花信息102 axios({103 url:'http://localhost:3000/flower/addFlower',104 method:'POST',105 data:{106 fname:this.fname,107 fprice:this.fprice,108 fsituation:this.fsituation,109 fuse:this.fuse,110 fhc:this.fhc,111 fword:this.fword,112 }113 }).then((data)=>{114 this.result=data.data;115 })116 },117 updateFlower:function (id) { // 修改鲜花信息118 axios({119 url:'http://localhost:3000/flower/updateFlower',120 method:'PUT',121 data:{122 fid:this.fid,123 fname:this.fname,124 fprice:this.fprice,125 fsituation:this.fsituation,126 fuse:this.fuse,127 fhc:this.fhc,128 fword:this.fword,129 },130 }).then((data)=>{131 this.result=data.data;132 })133 },134 findAllFlower:function () { // 查询全部鲜花信息135 axios({136 url:'http://localhost:3000/flower/getAllFlower',137 method:"GET",138 dataType:"json"139 }).then((data)=>{140 this.flowerArray=data.data;141 })142 }143 },144 })145146</script>147</body>148</html>结尾
如果觉得本篇文章对您有用的话，麻烦您给笔者点亮那个点赞按钮。
对于二太子木吒(一只流浪的KK)这个暖男来说：真的非常有用，您的支持就是我前进的动力，我们下篇文章见。
注意：博客园、CSDN等其它网站上含有一只流浪的KK的呢称，均属于笔者，至于为什么使用二太子木吒这个昵称，我觉得到时候会有相关文章进行解释。
作者：一只流浪的KK|二太子木吒
原创不易，请勿白嫖。
二太子木吒，一个在互联网前端苟且偷生的小白一枚，专注于前端开发，善于分享技术。
如需转载，请联系作者或者保留原文链接，微信公众号搜索二太子木吒
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。