备案控制台
开发者社区 开发与运维 文章 正文

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

2024-06-20 10
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
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（2）https://developer.aliyun.com/article/1543053

vue2整合axios

为了更加方便的实现功能和理解，在这里我分步骤为大家讲解。争取有一个好的效果。vue整合axios其实和vue整合ajax差不多，如果想学习axios的相关文章，可以参考我的这一篇博客https://www.cnblogs.com/jjgw/p/12079892.html，这里面涉及关于axios的使用大部分讲解的都非常详细。欢迎大家评论和提出问题。

一、查询全部鲜花信息
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios和vue操作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/vue.js">script>
<script src="javascripts/axios.js">script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            fid:'',
            fname:'',
            fprice:'',
            fsituation:'',
            fuse:'',
            fhc:'',
            fword:'',
            result:'',
            flowerArray:[],
        },
        mounted(){
            this.findAllFlower();
        },
        methods:{
            findFlowerById:function (id) {    //根据编号查询鲜花信息
            },
            deleteFlower:function (id) {    //删除鲜花信息
            },
            addFlower:function () {         //  添加鲜花信息
            },
            updateFlower:function (id) {      //  修改鲜花信息
                
            },
            findAllFlower:function () { //  查询全部鲜花信息
                axios({
                    url:'http://localhost:3000/flower/getAllFlower',
                    method:"GET",
                    dataType:"json"
                }).then((data)=>{
                    this.flowerArray=data.data;
                })
            }
        },
    })
script>
body>
html>
二、根据条件查询鲜花信息
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios和vue操作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/vue.js">script>
<script src="javascripts/axios.js">script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            fid:'',
            fname:'',
            fprice:'',
            fsituation:'',
            fuse:'',
            fhc:'',
            fword:'',
            result:'',
            flowerArray:[],
        },
        mounted(){
            this.findAllFlower();
        },
        methods:{
            findFlowerById:function (id) {    //根据编号查询鲜花信息
                this.fid=id;
                axios({
                    url:'http://localhost:3000/flower/findFlowerById',
                    type:'GET',
                    params:{id:id}
                }).then((data)=>{
                    this.fname=data.data[0].fname;
                    this.fprice=data.data[0].fprice;
                    this.fsituation=data.data[0].fsituation;
                    this.fuse=data.data[0].fuse;
                    this.fhc=data.data[0].fhc;
                    this.fword=data.data[0].fword;
                })
            },
            deleteFlower:function (id) {    //删除鲜花信息
            },
            addFlower:function () {         //  添加鲜花信息
            },
            updateFlower:function (id) {      //  修改鲜花信息
            },
            findAllFlower:function () { //  查询全部鲜花信息
                axios({
                    url:'http://localhost:3000/flower/getAllFlower',
                    method:"GET",
                    dataType:"json"
                }).then((data)=>{
                    this.flowerArray=data.data;
                })
            }
        },
    })
script>
body>
html>
三、添加鲜花信息
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios和vue操作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/vue.js">script>
<script src="javascripts/axios.js">script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            fid:'',
            fname:'',
            fprice:'',
            fsituation:'',
            fuse:'',
            fhc:'',
            fword:'',
            result:'',
            flowerArray:[],
        },
        mounted(){
            this.findAllFlower();
        },
        methods:{
            findFlowerById:function (id) {    //根据编号查询鲜花信息
            },
            deleteFlower:function (id) {    //删除鲜花信息
            },
            addFlower:function () {         //  添加鲜花信息
                axios({
                    url:'http://localhost:3000/flower/addFlower',
                    method:'POST',
                    data:{
                        fname:this.fname,
                        fprice:this.fprice,
                        fsituation:this.fsituation,
                        fuse:this.fuse,
                        fhc:this.fhc,
                        fword:this.fword,
                    }
                }).then((data)=>{
                    this.result=data.data;
                })
            },
            updateFlower:function (id) {      //  修改鲜花信息
            },
            findAllFlower:function () { //  查询全部鲜花信息
                axios({
                    url:'http://localhost:3000/flower/getAllFlower',
                    method:"GET",
                    dataType:"json"
                }).then((data)=>{
                    this.flowerArray=data.data;
                })
            }
        },
    })
script>
body>
html>
四、修改鲜花信息
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios和vue操作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/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>


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

文章标签：
云数据库 RDS MySQL 版
JavaScript
前端开发
关键词：
云数据库 RDS MySQL 版实操
实操云数据库 RDS MySQL 版
JavaScript Node
node.js node云数据库 RDS MySQL 版
云数据库 RDS MySQL 版node.js
相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境，其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心，利用清洁计算为万物互联的新世界提供源源不断的能源动力，目前开服的区域包括中国（华北、华东、华南、香港）、新加坡、美国（美东、美西）、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程，来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品：云服务器ECS 云服务器 ECS（Elastic Compute Service）是一种弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
weixin_836869520
目录
相关文章
weixin_836869520
|
7天前
|
JavaScript
Node.js实操练习(一)之Node.js+MySQL+RESTful（4）
Node.js实操练习(一)之Node.js+MySQL+RESTful
weixin_836869520
9 0
白雾茫茫丶
|
8天前
|
存储 前端开发 安全
Nuxt3 实战 (十)：使用 Supabase 实现 RESTful 风格 API 接口
这篇文章介绍了如何使用Supabase实现RESTful风格的API接口，用于网站分类和子站点的增删改查（CURD）功能。文章首先阐述了表设计，包括ds_categorys和ds_websites两张表的列名、类型和用途，并提到了为每张表添加的user_id和email字段以支持用户身份识别。接着，文章描述了接口设计，以ds_websites表为例，说明了如何通过RESTful API实现CURD功能，并给出了使用SupabaseClient实现插入数据的相关代码。文章最后提供了项目效果预览和总结，指出学习了Nuxt3创建接口及调用Supabase数据库操作。
白雾茫茫丶
17 2
Nuxt3 实战 (十)：使用 Supabase 实现 RESTful 风格 API 接口
我不是游客20240119
|
1天前
|
JSON API 数据格式
深入理解RESTful API设计原则与最佳实践
【6月更文挑战第26天】在现代Web开发中，RESTful API已成为构建可扩展、易于维护的后端服务的标准。本文将探讨RESTful API的核心设计原则，揭示如何通过遵循这些原则来优化API设计，确保高效和灵活的数据交互。我们将从资源定位、数据交互格式、状态传输、接口设计等方面入手，提供一系列实用的设计建议和最佳实践，帮助开发者避免常见的设计陷阱，打造高质量的后端服务。
我不是游客20240119
11 3
啊猪是的读来过倒
|
1天前
|
JSON 前端开发 API
Django API开发实战：前后端分离、Restful风格与DRF序列化器详解
Django API开发实战：前后端分离、Restful风格与DRF序列化器详解
啊猪是的读来过倒
9 3
天下无贼001
|
5天前
|
缓存 前端开发 API
深入理解RESTful API设计原则与最佳实践
【6月更文挑战第21天】在现代Web开发中，RESTful API已成为构建可伸缩、易维护网络服务的重要基石。本文将探讨RESTful API的核心设计原则，揭示其背后的哲学思想，并提供一系列最佳实践来指导开发者如何创建高效、可靠的API接口。从资源定位到HTTP方法的恰当使用，从状态管理到API版本控制，我们将一探究竟，帮助开发者避免常见的陷阱，构建出既符合标准又易于交互的后端服务。
天下无贼001
26 4
今天是几号
|
8天前
|
XML 安全 API
API攻防-接口安全&SOAP&OpenAPI&RESTful&分类特征导入&项目联动检测
API攻防-接口安全&SOAP&OpenAPI&RESTful&分类特征导入&项目联动检测
今天是几号
23 5
旦莫
|
8天前
|
JSON API 数据格式
如何使用Flask开发RESTful API
RESTful API（Representational State Transferful Application Programming Interface）是一种基于 REST 架构风格设计的 Web 服务接口，用于实现资源的增删改查（CRUD）操作。它通过使用 HTTP 协议的不同方法（如 GET、POST、PUT、DELETE）和 URL 路径来对资源进行操作，并使用不同的状态码和数据格式进行响应。
旦莫
23 1
历年考试不作弊
|
10天前
|
JSON 缓存 API
探索RESTful API设计的最佳实践
【6月更文挑战第16天】在数字化时代，构建高效、可扩展的后端服务是软件开发的核心。本文将深入探讨如何设计符合RESTful原则的API，包括资源定位、接口一致性、错误处理和性能优化等方面，旨在帮助开发者构建更加健壮和用户友好的网络服务。
历年考试不作弊
27 3
cqtianxin1
|
9天前
|
XML JavaScript API
Node.js RESTful API
Node.js RESTful API
cqtianxin1
15 1
请看我回答~
|
11天前
|
XML 前端开发 API
构建高效后端：RESTful API设计的最佳实践
【6月更文挑战第16天】在本文中，我们将深入探讨如何构建高效的后端系统，特别是如何设计出符合最佳实践的RESTful API。我们将从基础概念开始，逐步深入到具体的设计原则和技巧，最后通过一个实际案例来展示这些原则的应用。无论你是后端开发的新手，还是有一定经验的开发者，这篇文章都将为你提供有价值的指导。
请看我回答~
18 1

热门文章

最新文章

  • 1
    error @achrinza/node-ipc@9.2.2: The engine “node“ is incompatible with this module. Expected version
  • 2
    Node.js中的WebSockets：实现实时通信的利器
  • 3
    Node.js中的微服务架构：构建与实践
  • 4
    Node.js的网络编程：深入TCP/UDP网络编程
  • 5
    Node.js安装与配置
  • 6
    深入探索Node.js的Express框架：使用与中间件详解
  • 7
    【TypeScript技术专栏】TypeScript与Node.js后端开发
  • 8
    Node.js中构建RESTful API的最佳实践
  • 9
    Node 中的 AsyncLocalStorage 的前世今生和未来（一）
  • 10
    Node 中的 AsyncLocalStorage 的前世今生和未来（二）
  • 1
    构建RESTful API：Java中的RESTful服务开发
    49
  • 2
    谈谈你对RESTful API设计的理解和实践。
    33
  • 3
    flea-jersey使用之Flea RESTful接口客户端接入
    38
  • 4
    flea-jersey使用之Flea RESTful接口服务端接入
    38
  • 5
    深入探讨RESTful API设计原则及最佳实践
    32
  • 6
    Springboot项目中如何设计一个规范的统一的Restful API 响应框架？
    34
  • 7
    Python 如何开发出RESTful Web接口，DRF框架助力灵活实现!
    66
  • 8
    flea-jersey使用之Flea RESTful接口介绍
    36
  • 9
    通过Flask框架创建灵活的、可扩展的Web Restful API服务
    78
  • 10
    使用Node.js和Express构建RESTful API
    52

    • 相关课程

    更多
  • Java Spring Boot 2.6.0开发实战-1024程序员节创造营公益课
  • Node.js 入门与实战
  • JavaScript入门与实战
  • Node.js 入门教程文档
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • 探究 Node.js 的服务端之路
  • 个推微服务实践 基于OpenResty 和Node.js
  • 沪江基于Node.js大规模应用实践

    • 相关实验场景

    更多
  • 搭建Node.js编程环境
  • MySQL基础-学生管理系统数据库设计
  • 如何快速连接云数据库RDS MySQL
  • MyBase MySQL实例资源灵活弹配
  • 如何开通MySQL的专属集群
  • 云端MySQL的安装及应用

    • 推荐镜像

    更多
  • mysql
  • postgresql
  • mariadb
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）