Vue.js 使用Vue.js和Jquery做增删改查

最新推荐文章于 2023-05-08 19:03:15 发布
最新推荐文章于 2023-05-08 19:03:15 发布
阅读量813 收藏 4
点赞数 1
分类专栏： Vue.js 前端 文章标签： Vue Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41594146/article/details/83045982
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap-4.1.3-dist/css/bootstrap.css" rel="stylesheet"/>
    <style type="text/css">
        table thead tr th {
            text-align: center;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/axios.min.js"></script>
    <!--<link rel="stylesheet" href="css/index.css">-->
    <script src="js/vue.js"></script>
    <!--<script src="js/index.js"></script>-->
</head>
<style>
    /***** 结合CSS样式一起使用 *****/
    [v-cloak] {
        display: none !important;
    }
</style>
<body>
<div id="app" v-cloak style="padding:20px;">
    <div id="index" class="panel panel-primary">
        <div class="panel-heading">
            搜索名字: <input type="text" id="name" name="name"> &nbsp;&nbsp;
            班级号:
            <select id="classid" name="classid">
                <option value="">请选择</option>
                <option v-for="item in clist" :value=item.classid>{{item.classname}}</option>
            </select>
            &nbsp;&nbsp;
            教师名:
            <select id="teacherid" name="teacherid">
                <option value="">请选择</option>
                <option v-for="item in tlist" :value=item.teacherid>{{item.teachername}}</option>
            </select> &nbsp;&nbsp;
            <input type="button" @click.prevent="find()" value="搜索" id="find" name="find">&nbsp;&nbsp;
            <input type="button" @click.prevent="add()" value="添加" id="add" name="add">
        </div>
        <!--width="90%" border="1"-->
        <table class="table table-bordered table-striped text-center">
            <tr>
                <td>编号</td>
                <td>名字</td>
                <td>班级名</td>
                <td>教师名</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.classname}}</td>
                <td>{{item.teachername}}</td>
                <td>
                    <a href="#" @click.prevent="remove(item.id)">删除</a>&nbsp;
                    <a href="#" @click.prevent="edit(item)">修改</a>&nbsp;
                </td>
            </tr>
        </table>
        <br>
        <div><a href="#" @click.prevent="homepage">首页</a>&nbsp;
        <a href="#" @click.prevent="uppage">上一页</a>
        当前页:{{pagebean.page}}&nbsp;
        最大页数:{{pagebean.maxPages}}&nbsp;
        <a href="#" @click.prevent="down">下一页</a>
        <a href="#" @click.prevent="lastpage">末页</a>&nbsp;&nbsp;&nbsp;
        <input type="number" style="width: 50px" id="pagex" min="1" >&nbsp;<input type="button" @click.prevent="go()" value="跳转" id="t">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <select id="limit" @change="changge()">
        <option>10</option>
        <option>20</option>
        </select>
        </div>
        <!--<template>-->
            <!--<v-pagination :total=pagebean.maxPages @page-change="pageChange1" @page-size-change="pageSizeChange1"></v-pagination>-->
        <!--</template>-->
        <input type="hidden" value="" id="page">
    </div>
    <!--编辑页面-->
    <div id="edit">
        <table class="table table-bordered table-striped text-center">
            <input type="hidden" id="hid">
            <tr>
                <td>姓名</td>
                <td><input type="text" name="ename" id="ename"></td>
            </tr>
            <tr>
                <td>班级</td>
                <td>
                    <select id="eclassid" name="eclassid">
                        <option value="">请选择</option>
                        <option v-for="item in clist" :value=item.classid>{{item.classname}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>教师</td>
                <td><select id="eteacherid" name="eteacherid">
                    <option value="">请选择</option>
                    <option v-for="item in tlist" :value=item.teacherid>{{item.teachername}}</option>
                </select></td>
            </tr>
            <tr>
                <td><input type="button" @click.prevent="confirm" value="确定"></td>
                <td><input type="button" @click.prevent="back" value="返回"></td>
            </tr>
        </table>
    </div>
</div>
<script>
    $('#edit').hide();
    //实例化vue
    var vm = new Vue({
        el: '#app',
        data: {
            list: find().list,//学生数据
            clist: class_bind(),//班级数据
            tlist: teacher_bind(),//教员信息
            pagebean: find().pagebean//分页信息
        },
        created() {//布置完之后执行的区域

        },
        methods: {
            find() {//查询
                this.list = find().list
                this.pagebean = find().pagebean
            }
            ,
            remove(id) {//删除
                if (confirm('确定删除吗?')) {
                    remove(id);
                    this.list = find().list
                    this.pagebean = find().pagebean
                }

            }, back() {//点击返回
                $('#index').show();
                $('#edit').hide();
                //该项目的所有ajax请求可以改成以下的axios请求
                // let params=new URLSearchParams();
                // params.append("limit","20");
                // params.append("name","张三");
                // axios.post('studentaction.action?methodName=find',params).then(function (value) {
                //     console.log(value.data);//value.data为返回的数据
                // })
            },
            edit(item) {//点击修改
                $('#index').hide();
                $('#edit').show();
                $('#hid').val(item.id);
                $('#ename').val(item.name);
                $('#eclassid').val(item.classid);
                $('#eteacherid').val(item.teacherid);
            }, add() {//点击添加
                $('#index').hide();
                $('#edit').show();

            }, confirm() {//确定按钮
                if ($('#hid').val() == "") {//为空则是添加
                    add('add');
                } else {
                    add('edit');//修改
                }
                this.list = find().list
                this.pagebean = find().pagebean
            },
            homepage() {//点击首页
                $('#page').val(1);
                this.list = find().list
                this.pagebean = find().pagebean
            }, uppage() {//上一页
                var up = $('#page').val() == 1 ? 1 : parseInt($('#page').val()) - 1;
                $('#page').val(up);
                this.list = find().list
                this.pagebean = find().pagebean
            }, down() {//下一页
                var dowm = $('#page').val() == this.pagebean.maxPages ? this.pagebean.maxPages : parseInt($('#page').val()) + 1;
                $('#page').val(dowm);
                this.list = find().list
                this.pagebean = find().pagebean
            }, lastpage() {//末页
                $('#page').val(this.pagebean.maxPages);
                this.list = find().list
                this.pagebean = find().pagebean
            }, go() {//跳转
                if ($('#pagex').val() >= 0 && $('#pagex').val() <= this.pagebean.maxPages) {
                    $('#page').val($('#pagex').val());
                    this.list = find().list
                    this.pagebean = find().pagebean
                } else {
                    alert('请输入正确页数');
                }

            }, changge() {//换数量的方法
                this.list = find().list
                this.pagebean = find().pagebean
            }
        }
    });

    /**
     * 查询方法
     * @returns {*}
     */
    function find() {
        var data2;
        $.ajax({
            type: "post",
            url: "studentaction.action?methodName=find",
            dataType: "json",
            data: {//传给servlet的数据,
                name: $('#name').val(),
                classid: $('#classid').val(),
                teacherid: $('#teacherid').val(),
                page: $('#page').val(),
                limit: $('#limit').val(),
                d: new Date()
            },
            async: false,//加上这个ajax先执行
            success: function (data) {
                $('#page').val(data.pagebean.page);
                //返回处理的方法
                console.log(data);
                data2 = data;
            }
        });
        return data2;
    }


    /**
     * 班级数据绑定
     */
    function class_bind() {
        var data2;
        $.ajax({
            type: "post",
            url: "studentaction.action?methodName=cfind",
            dataType: "json",
            data: {//传给servlet的数据,
                d: new Date()
            },
            async: false,//加上这个ajax先执行
            success: function (data) {
                //返回处理的方法
                data2 = data;
            }
        });
        return data2;
    }

    /**
     * 教员数据绑定
     */
    function teacher_bind() {
        var data2;
        $.ajax({
            type: "post",
            url: "studentaction.action?methodName=tfind",
            dataType: "json",
            data: {//传给servlet的数据,
                d: new Date()
            },
            async: false,//加上这个ajax先执行
            success: function (data) {
                //返回处理的方法
                data2 = data;
            }
        });
        return data2;
    }

    /**
     * 添加和修改
     */
    function add(index) {
        var ur = "studentaction.action?methodName=add";
        if (index == 'edit') {
            ur = "studentaction.action?methodName=edit";
        }
        $.ajax({
            type: "post",
            url: ur,
            dataType: "json",
            data: {//传给servlet的数据,
                id: $('#hid').val(),
                name: $('#ename').val(),
                classid: $('#eclassid').val(),
                teacherid: $('#eteacherid').val(),
                d: new Date()
            },
            async: false,//加上这个ajax先执行
            success: function (data) {
                if (data) {
                    alert('操作成功');
                    $('#index').show();
                    $('#edit').hide();
                    $('#hid').val("");
                    $('#ename').val("");
                    $('#eclassid').val("");
                    $('#eteacherid').val("");
                } else {
                    alert('操作失败')
                }
            }
        });

    }

    /**
     * 删除
     */
    function remove(id) {
        $.ajax({
            type: "post",
            url: "studentaction.action?methodName=remove",
            dataType: "json",
            data: {//传给servlet的数据,
                id: id,
                d: new Date()
            },
            async: false,//加上这个ajax先执行
            success: function (data) {
                //返回处理的方法
                if (data) {
                    alert('删除成功')
                } else {
                    alert('删除失败');
                }
            }
        });
    }

</script>
</body>
</html>

 

beyond丿qq:1559810637
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现的增删改查
12-03
Vue的增删改查，没什么好说的，参考参考就行了，重在理解，包含了部分模糊查，需要的就看看吧，大佬勿喷，小白出道
开发【总结与学习四】vue+js+jquery+css+html[不考虑响应式的大屏项目开发]
lyx9611的博客
08-30 541
1、轮播 写轮播。写广告
Vue笔记——Vue组件中引入jQuery
fengzhen8023
10-14 8867
如果想在普通的HTML页面引入jQuer库的话，直接使用&lt;script src="jQuery.js"&gt;&lt;/script&gt;即可。但是如果要在Vue组件中使用jQuery库的话，使用这样的方式就不行了，需要使用以下方法 一、安装jQuery依赖 在使用jQuery之前，我们首先要通过以下命令来安装jQuery依赖： npm install jquery --save #...
Vue.js （ 比JQuery更加精简的前端框架）
m0_58495313的博客
01-20 912
Vue.js简介 什么是 Vue 什么是 Vue？ 考虑这个需求： 我们要把一个 json对象的数据，显示到一个元素上去。 如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。 如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。 以下就用代码来表示这两种方式，通过比较，就知道Vue 是做什么的了。 JS 的 方式 1. 首.
前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
m0_46680765的博客
11-16 2065
前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序） 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别? !DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。 标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的
（附源码）node.js外卖系统 毕业设计 071605
01-18
对 MySql数据库进行操作,实现系统数据的增删改查、客户端服务端的数据交互。 1.设计的成果以网站的形式展现，展示界面主要包括主页面，购物车页面和用户页面 2.该设计主页面主要用于用户观看选择相关餐品，加入...
springboot + mybatis plus + vue代码生成器
06-30
干货分享，减少重复劳动，让工作更专注，为提高开发效率而出的代码生成器，支持mysql，sqlserver，oracle 等主流数据库，单表增删改查一键生成，大家可随意修改模版来满足你的需要。 运行环境 jdk8+ 项目技术...
项目多个类型项目、。net、JavaScript、Python, Vue,微信小程序
01-27
多个类型的项目一、.NET MVC1.practice根据《c#高级编程》写的练习DEMO2.Web.MVC基于.net MVC的内容管理系统，ado实体类模型生成SQL SERVER entities实体类，UnitOfWork通过context对sql增删改查进行封装，并产生...
青否云 - 小程序待办事项vue开源系统
12-11
无需开发数据库增删改查，登录授权验证，短信验证码等基础功能。 人员成本 无需运维人员，后端仅需要设计数据库，关联，授权等功能的人员。 运维时间 无需搭建服务器，也无需运维，运维自动化时间节省100%。 简单 ...
基于SSM框架+Mysql的企业CRM客户关系管理系统项目源码+数据库+项目说明.zip
最新发布
01-09
【资源说明】 1、该资源包括项目的全部...### 2022/4/10 - 导入市场活动，市场活动备注的增删改查: 1. 文件上传用到MultipartFile类，需要引入相关插件并在MVC配置文件中配置multipartResolver解析器bean 2. 将thy
在HTML中使用Vue.js
weixin_43955724的博客
01-31 6068
在非前后端项目中做页面时, 现在时常是只由后端人员一手开发, 在html或ftl文件中写js和 jquery总是令后端开发者如鲠在喉, 此时若能引入vue或者angular将极大提升开发效率(一般来说都会允许引入, 但博主也见过比较执拗的项目经理不允许使用前端框架非要用jq的) 在html中使用vue，直接在head中引入vue.js: //最好是把这个vue.min.js另存到本地,这样...
JS库：Vue.js与Jquery的比较
hdxx2022的博客
03-27 539
部分是因为jQuery的流行，但主要是源于经验开发人员的一个错误的理念：因为jQuery是简单的，所以对于初学者也很简单适合。简单已经内建于它的设计。不同的功能被很好的组织和分层在Vue构造函数对象中，或能通过指令直接应用到模板中的DOM节点，这些指令提供更多的易于理解的上下文。无需心理DOM，你可以看到它在网页上有保证，更新计数器不会弄乱你的DOM以意想不到的方式由于摇晃的节点选择。不再需要DOM复制，你可以看到它在网页上，保证更新计数器时不会由于靠不住的节点选择以意想不到的方式弄乱你的DOM。
VueJs和jQuery
qq_32900003的博客
10-27 1982
Vue.js是什么？ Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方..
html和vue能混搭嘛吗,jquery与vue.js可以混用吗？
weixin_36438124的博客
06-16 1217
jquery与vue.js可以混用吗？jquery与vue.js可以混用。有时候只要想到要用的 vue.js 的时候就会惯性的想起用vue-cli手脚架搭建一个项目，但是有时候的业务场景并不适合用vue-cli手脚架，这个时候使用vue+jquery混合使用，把他们的优点结合起来使用会大大提升开发效率。vue+jquery应该如何使用呢？1、首先引入vue文件(cdn或者下载到本地都行)，参考vu...
Vue.js+Jquery+Webpack初体验
沧海一粟
05-06 303
1、安装node.js运行环境，直接到官网下载相应的安装包即可，安装完后运行node -v和npm -v看下版本号 D:\web\webpack-example>node -v v10.15.3 D:\web\webpack-example>npm -v 6.4.1 2、创建web项目，安装webpack运行环境、Vue.js和Jquery D:\web\webpack-e...
使用vue.js + jQuery开发组件
左直拳的马桶_日用桶
01-22 2091
本模式有3个要点： 1）利用vue.js实现html封装进组件，让复用可以落地； 2）jquery负责操作dom； 3）js函数模拟面向对象中的类，运行时通过new方式创建对象，将dom标识符和业务数据作为参数传递，提高组件独立性，实现与调用页面解耦，且能够动态渲染。 近期做的一个项目，使用的框架十分古怪。spring boot，但没有使用默认的thymeleaf，而是前后端分离，同时前后端代码却又放在同一个项目工程里。前端使用了vue.js，但与我之前接触到的vue项目很不一样。一般vue项目，除了一个首
使用 html、css、JavaScript 、vue.js、bootstrap、jquery、layui实现轮播图 轮播图实现的内部算法 javascript、js的严格模式 自调用函数的语法
念兮为美
09-14 659
应产品经理的要求，使用 html、css、JavaScript 、vue.js、bootstrap、jquery、layui等技术实现轮播图，以及展示轮播图实现的内部算法。同时说明了javascript的严格模式的作用，以及怎么使用 js的严格模式。.........
用vue实现列表的增删改查基本功能（简单易懂）
热门推荐
why0925123的博客
10-10 1万+
用vue实现列表的增删改查基本功能（简单易懂）
用vue实现增删改查
m0_64344470的博客
05-08 2562
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
HTML、AJAX、SpringBoot、Vue3 增删改查
05-10
3. SpringBoot 后端实现：使用 SpringBoot 框架搭建后端服务，实现数据的增删改查操作。可以使用 MySQL、MongoDB 等数据库来存储数据。 4. Vue3 前端实现：使用 Vue3 框架实现前端交互逻辑，包括用户输入的数据校验...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值