Node.js实操练习(一)之Node.js+MySQL+RESTful（2）-阿里云开发者社区

Node.js实操练习(一)之Node.js+MySQL+RESTful（2）

2024-06-20 7

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

RDS MySQL Serverless 基础系列，0.5-2RCU 50GB

云数据库 RDS MySQL，集群版 2核4GB 100GB

云数据库 RDS MySQL，高可用版 2核4GB 50GB

简介： Node.js实操练习(一)之Node.js+MySQL+RESTful

Node.js实操练习(一)之Node.js+MySQL+RESTful（1）https://developer.aliyun.com/article/1543051

四、修改鲜花信息

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax和vue操作mysqltitle>
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操作mysqltitle>
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操作mysqltitle>
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>

Node.js实操练习(一)之Node.js+MySQL+RESTful（3）https://developer.aliyun.com/article/1543054

Node.js实操练习(一)之Node.js+MySQL+RESTful（2）

四、修改鲜花信息

五、删除鲜花信息

六、全部代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像