vue与axios实现增删改

操作界面:<%@ page import="java.util.Map" %><%@ page import="java.util.HashMap" %><%--Created by IntelliJ IDEA.User: DELLDate: 2018/8/3Time: 17:43To c

ws1995_java

4819人浏览 · 2018-08-03 21:25:22

ws1995_java · 2018-08-03 21:25:22 发布

操作界面:

<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2018/8/3
  Time: 17:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="ppa">
    <table border="1" name="tbl">
        <tr>
            <th>姓名</th>
            <th>序号</th>
            <th>操作1</th>
            <th>操作2</th>
        </tr>
        <tr v-for="(value,key) in heros">
            <td>{{key}}</td>
            <td>{{value}}</td>
            <td v-on:click="dodelet(key)">删除</td>
            <td v-on:click="dochange(key)">修改</td>
        </tr>
    </table>
    <form>
        姓名:<input type="text" v-model="heroname" id="heroname" placeholder="请输入姓名"/><br/>
        序号:<input type="text" v-model="heronum" id="heronum" placeholder="请输入序号"/><br/>
        <button type="button" v-on:click="dosubmit()">添加</button>
    </form>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#ppa",
        data:{
            heroname:"",
            heronum:"",
            heros:{},
            inited:true,
            newname:"",
            newnum:""
        },
        methods:{
            dosubmit:function () {
              var data = {};
              data.heroname = this.heroname;
              data.heronum = this.heronum;
              console.log(this.heroname);
              console.log(this.heronum);
              var url = "save.jsp";
              //使用键值对参数进行提交
              var paras = new URLSearchParams();
              paras.append("heroname",data.heroname);
              paras.append("heronum",data.heronum);
              paras.append("heros",data.heros);
              //使用post方法提交
                if(vue.inited){
                    vue.inited=false;
                    vue.heros=data.heros;
                    return;
                }
              axios.post(url,paras).then(function (result) {

                  console.log(result);
                  if(result.data.msg.indexOf('添加失败')>=0){
                      alert('信息重复添加失败');
                  }else{
                      alert('添加成功');
                      vue.heros=result.data.heros;
                  }
              }).catch(function (reason) {
                  console.log(reason);
              });
            },
            dodelet:function (heroname) {
                var data = {};
                console.log(heroname);
                data.heroname = heroname;
                var url = "dodelet.jsp";
                //使用键值对参数进行提交
                var paras = new URLSearchParams();
                paras.append("heroname",data.heroname);
                //使用post方法提交
                axios.post(url,paras).then(function (result) {
                    console.log(result);
                    if(result.data.msg.indexOf('删除成功')>=0){
                        vue.heros=result.data.heros;
                    }
                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            dochange:function (heroname) {
                var data = {};
                var newnum="";
                var newname = window.prompt("请输入新的姓名");
                if(newname){
                    newnum = window.prompt("请输入新的序号");
                    if(newnum){
                        data.heroname = heroname;
                        data.newname = newname;
                        data.newnum = newnum;
                        var url = "dochange.jsp";
                        //使用键值对参数进行提交
                        var paras = new URLSearchParams();
                        paras.append("heroname",data.heroname);
                        paras.append("newname",data.newname);
                        paras.append("newnum",data.newnum);
                        //使用post方法提交
                        axios.post(url,paras).then(function (result) {
                            console.log(result);
                            if(result.data.msg.indexOf('修改成功')>=0){
                                alert("修改成功")
                                vue.heros=result.data.heros;
                            }else{
                                alert("修改失败");
                                vue.heros=result.data.heros;
                            }
                        }).catch(function (reason) {
                            console.log(reason);
                        });
                    }
                }
            }
        },
        mounted: function () {
            this.dosubmit();
        }
    });
</script>
</html>

处理增加的jsp文件:

<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<%@ page import="com.alibaba.fastjson.serializer.SerializerFeature" %>
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2018/8/3
  Time: 18:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String heroname = request.getParameter("heroname");
    String heronum = request.getParameter("heronum");
    System.out.println("接收");
    System.out.println(heroname);
    System.out.println(heronum);
    Map<String,String> map = (HashMap)application.getAttribute("herodata");
    //创建json对象,用于发送返回信息
    JSONObject json=new JSONObject();
    if(map==null){
        map=new HashMap();
        map.put(heroname,heronum);
        application.setAttribute("herodata",map);
        json.put("msg","添加成功");
    }else{
        if(map.containsValue(heronum)||map.containsKey(heroname)){
            json.put("msg","添加失败");
        }else{
            //添加hero
            map.put(heroname,heronum);
            json.put("msg","添加成功");
        }
    }
    json.put("heros",map);
    out.println(JSON.toJSONString(json, SerializerFeature.WriteSlashAsSpecial));
%>

处理删除的JSP文件:

<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<%@ page import="com.alibaba.fastjson.serializer.SerializerFeature" %>
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2018/8/3
  Time: 19:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String heroname = request.getParameter("heroname");
    Map<String,String> map = (HashMap)application.getAttribute("herodata");
    //创建json对象,用于发送返回信息
    JSONObject json=new JSONObject();
    if(map.containsKey(heroname)){
        map.remove(heroname);
        json.put("msg","删除成功");
        application.setAttribute("herodata",map);
    }
    json.put("heros",map);
    out.println(JSON.toJSONString(json, SerializerFeature.WriteSlashAsSpecial));
%>

处理修改的JSP界面:

<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<%@ page import="com.alibaba.fastjson.serializer.SerializerFeature" %>
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2018/8/3
  Time: 20:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String heroname = request.getParameter("heroname");
    String newname = request.getParameter("newname");
    String newnum = request.getParameter("newnum");
    Map<String,String> map = (HashMap)application.getAttribute("herodata");
    String heronum = map.get(heroname);
    //删除选中对象
    map.remove(heroname);
    //创建json对象,用于发送返回信息
    JSONObject json=new JSONObject();
    if (map.containsValue(newnum)||map.containsKey(newname)){
        json.put("msg","修改失败");
        map.put(heroname,heronum);
        application.setAttribute("herodata",map);
    }else{
        map.put(newname,newnum);
        json.put("msg","修改成功");
        application.setAttribute("herodata",map);
    }
    json.put("heros",map);
    out.println(JSON.toJSONString(json, SerializerFeature.WriteSlashAsSpecial));
%>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^