vue简单前后端交互增删改查

最新推荐文章于 2022-06-06 11:24:15 发布
最新推荐文章于 2022-06-06 11:24:15 发布
阅读量3.7k 收藏 19
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinzaiz/article/details/103483421
版权 
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--加载vue.js文件-->
    <script type="text/javascript" src="static/js/vuejs-2.5.16.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
        <!--vue异步前后端交互-->
    <div id="app01">
        <!--这是添加用户-->
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="报销类型" :label-width="formLabelWidth">
                    <el-input v-model="form.paymode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="报销金额" :label-width="formLabelWidth">
                    <el-input v-model="form.totalmoney" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="报销备注" :label-width="formLabelWidth">
                    <el-input v-model="form.bxremark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="comf">确 定</el-button>
            </div>
        </el-dialog>
        <div style="margin-left: 400px">
            <!--设置添加数据的按钮 当点击是触发弹窗-->
        <el-button type="primary"style="margin: 10px 200px" v-on:click="clear">添加数据</el-button>
            <!--list是自己定义的数组名称-->
            <el-table
                    :data="list"
                    border
                    style="width: 100%">
                <!--prop是pojo对象属性名称-->
                <!--label标题名称-->
                <el-table-column
                        prop="paymode"
                        label="报销类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="totalmoney"
                        label="报销金额"
                        width="180">
                </el-table-column>
                    <el-table-column
                            prop="bxremark"
                            label="报销备注"
                            width="180">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                    >
                    <template slot-scope="scope">
                        <el-button @click="deleteItem(scope.row.bxid)" type="text" size="small">删除</el-button>
                        <el-button type="text" @click="editItem(scope.row)"size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </template>
        </div>
        <!--vue分页-->
        <div style="margin-left: 450px">
            <!--total总记录数-->
            <!--page-size每页显示数-->
            <!--current-page当前页-->
            <!--@current-change="changeNum" 设置当页数发生改变时的事件-->
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total"
                    :current-page="currentPage"
            @current-change="changeNum">
            </el-pagination>
        </div>
    </div>
    <script>
        <!--这个是vm-->
        new Vue({
            el:"#app01",
            data:{
            list:[],
            total:50,
            pageSize:2,
            currentPage:1,
            dialogFormVisible:false,
                form:{
                    paymode:"",
                    totalmoney:"",
                    bxremark:"",
                    bxid:""
                }
            },
            <!--写函数的地方-->
            methods:{
                clear:function(){
                    this.dialogFormVisible=true
                    this.form={
                        paymode:"",
                        totalmoney:"",
                        bxremark:"",
                        bxid:""
                    }
                },
                editItem:function(info){
                    this.dialogFormVisible=true
                    this.form.paymode=info.paymode
                    this.form.totalmoney=info.totalmoney
                    this.form.bxremark=info.bxremark
                    this.form.bxid=info.bxid
                },
                deleteItem:function(num){
                    var is=this;
                    //post请求（路径，is.form） 要传入后台的参数
                    axios.delete("/pms/baoxiao/del/"+num)
                        .then(function (result) {
                            if (result.data.statusCode==200){
                                is.$message({
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                is.fenye("/pms/baoxiao/page",is);
                            }
                        }).catch(function (error) {
                    });
                },
                //弹窗的确定操作
                comf:function(){
                    var is=this;
                    if (is.form.bxid!=""){
                        //修改数据
                        axios.put("/pms/baoxiao/update",is.form)
                            .then(function (result) {
                                if (result.data.statusCode==200){
                                    is.dialogFormVisible=false
                                    is.fenye("/pms/baoxiao/page",is);
                                }
                            }).catch(function (error) {
                        });
                    }else{
                        //添加数据
                        //post请求（路径，is.form） 要传入后台的参数
                        axios.post("/pms/baoxiao/save",is.form)
                            .then(function (result) {
                                if (result.data.statusCode==200){
                                    is.dialogFormVisible=false
                                    is.fenye("/pms/baoxiao/page",is);
                                }
                            }).catch(function (error) {
                        });
                    }

                },
                <!--这个是当页数发生改变时执行的事件-->
                changeNum:function (msg) {
                    var is=this;
                    is.fenye("/pms/baoxiao/page?pageNum="+msg,is);
                },
                <!--提取的相同的分页数据-->
                fenye:function (url,is) {
                    axios.get(url)
                        .then(function (result) {
                            //list数据库的数据
                            is.list=result.data.map.pageInfo.list
                            //total数据库的总记录数
                            is.total=result.data.map.pageInfo.total;
                            //total数据库的当前页
                            is.currentPage=result.data.map.pageInfo.PageNum;
                        }).catch(function (error) {
                    });
                }
            },
            <!--这个是页面加载完成时执行的函数-->
            mounted:function () {
                var is=this;
                is.fenye("/pms/baoxiao/page",is);
            },
        })
    </script>
</body>
</html>
Hou°
关注
  • 4
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
模拟一个简单的购物车
weixin_58151575的博客
05-31 265
模拟一个购物车页面，通过点击增减按钮，对商品数量及金额进行自动计算 <style> table{ border-collapse: collapse; } td{ width: 200px; height: 50px; text-align: center; } button{ width: 2
jQuery实现简易购物车
Ann_Chenyx
08-10 6186
  上上篇用JS写了个简单的购物车，学习了jQuery之后想要看看JavaScript和jQuery的区别到底有多大，于是又在原来的模板上用JQuery将购物车再次实现了一下。 HTML部分代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;购物车&lt;/..
vue3增删查改（规范版）- 规范如下图
qq_42556628的博客
06-06 2040
页面结构 修改规范 DetailModal DetailModal.ts DetailModal.vue AppManage AppManage.ts AppManage.vue types(枚举)
Vue链接后台数据库的增删改查
07-15
在.net模式下的vue.js后台数据增加、删除、修改、查询
vue-cli与后台数据交互增删改查
weixin_30849591的博客
12-21 1147
1. 安装vue-resource npm install vue-resource --save 2.访问后台地址，在vue中会出现跨域的问题，以下为解决方案 　　在config下的index.js 中配置proxyTable代理设置 proxyTable: { '/api':{ target:'http://19******...
简单购物车Demo
androidyhr的博客
11-19 247
//自定义控件中的加减号 public class CustomView extends LinearLayout {     private EditText editText;     private Button revserse;     private Button add;     private int mCount = 1 ;     public Custom
Jquery练习1：制作简易的当当购物车页面.zip
08-27
Jquery练习1：制作简易的当当购物车页面.zip
node+vue前后端分离增删改查
08-17
在现代Web开发中，前后端分离的架构设计已经成为主流，其中“Node+Vue前后端分离增删改查”是一个典型的示例。这个项目利用Node.js（搭配Express框架）作为后端服务器，处理数据请求和业务逻辑，而Vue.js（配合...
Springboot_Vue前后端分离
06-08
本项目“Springboot_Vue前后端分离”正是这种模式的一个实例，它利用Spring Boot作为后端服务框架，Vue.js作为前端UI框架，实现了基本的数据增删改查功能。 **Spring Boot** Spring Boot是Spring框架的一个扩展，...
node+vue+mysql前后端分离增删改查
08-17
本项目“node+vue+mysql前后端分离增删改查”就是实现这一模式的一个实例，利用Node.js（通过Express框架）、Vue.js、MySQL数据库以及Bootstrap和jQuery来构建一个基础的CRUD（Create, Read, Update, Delete）应用。...
vuejs前后端数据交互之从后端请求数据的实例
10-18
今天小编就为大家分享一篇vuejs前后端数据交互之从后端请求数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
用axios和elementui做的一个增删改查的小例子
08-12
用axios和elementui做的一个增删改查的小例子； 之前使用vue-reource写的，并且没有封装，这个例子用的是es6里的promise进行的封装，单独抽取出api接口；
增删改查和前后台之间的数据传输
10-26
用node和ajax实现前后端的数据传输，已经根据数据做相应的操作
springboot+vue+bootstrap实现用户增删改查
12-19
6. **前后端交互**: 前端Vue组件通过axios库发起HTTP请求，调用后端提供的API接口，获取或提交数据。axios支持Promise，易于与Vue的async/await语法结合，提升代码可读性。同时，Vue的Vuex状态管理库可以协调组件间...
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
在本文中，我们将深入探讨如何使用Vue.js框架和Mock.js库来模拟登录功能以及实现表格的增删改查。Vue.js是一个轻量级的前端JavaScript框架，它提供了强大的数据绑定和组件化特性，使得开发更加高效。Mock.js则是一个...
简易购物车
风之物语
03-09 638
简易购物车(java)才疏学浅，资历欠佳，难免有误，望有心人批评指正。一、主要类及其含义类名含义 Shopping 模拟顾客购物，运行后进入Market Market 模拟商场 LogIO 生成购物记录文件，传输数据 Casher 模拟收银台 ShoppingCart 模拟购物车 二、设计思路三、个性化设置 主窗口为Market窗口，位于屏幕的左上角，Shoppingcar
购物车的全选，全不选，局部全选，全选判定
weixin_30460489的博客
09-04 226
<!doctype html><html><head><meta charset="utf-8"><meta name="format-detection" content="telephone=no"/><meta name="viewport" content="user-scalable=no, width=devi...
Springboot+vue+axios 增删改查案例
weixin_44490884的博客
05-24 1335
Springboot+vue+axios 增删改查案例 摘要 Springboot+vue+axios 增删改查案例 关键字 springboot、vue、axios、mvc、mysql、java、crud 项目环境 IDEA、 Mysql数据库、Navicat 一、创建数据库 -- ---------------------------- -- Table structure for placesvr -- ---------------------------- DROP TABLE IF EXISTS
利用Vue基础部分实现增删改查的页面
novice的博客
11-07 5198
有关Vue Vue是一个最近很火的前端框架，这篇文章是在我看了Vue除了组件部分之外的基础部分之后，参考了一篇知乎专栏的练习写的一个练手demo，结合了Boostrap和localStorage。而以后这个demo其实还可以延伸开来，引申出更深的用法。 代码
springboot+vue前后端分离增删改查
最新发布
06-28
springboot+vue是一种前后端分离的开发模式，其中...该模式下，可以通过接口实现前后端的交互，实现增、删、改、查等功能。在此模式下，后端主要负责对数据进行操作和处理，前端则主要负责界面展示和交互逻辑的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值