vue.js使用例子

最新推荐文章于 2024-09-02 10:17:00 发布

wickedvalley

最新推荐文章于 2024-09-02 10:17:00 发布

阅读量2.2k

点赞数

分类专栏：杂类文章标签： vue.js

本文链接：https://blog.csdn.net/wickedvalley/article/details/71248683

版权

杂类专栏收录该内容

72 篇文章 0 订阅

订阅专栏

1.加载的html页面,访问该页面会访问后台数据，进行该数据的回显

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <form id="Forms">
        <input type="hidden" name="id" :value="id">
        用户名：<input  type="text" name="name" :value="name"><br>
        年龄：<input type="text" name="age" :value="age"><br>
        喜爱的网站：<select v-model="fruit" name="fruit">
            <option value="">选择一个网站</option>
            <option value="1">Runoob</option>
            <option value="2">Google</option>
        </select><br>
        性别：
        男<input type="radio"  name="gender" value="男" v-model="gender">
        女<input type="radio"  name="gender" value="女" v-model="gender"><br>

        读书<input type="checkbox" name="hobbies" value="读书" v-model="hobbies">
        音乐<input type="checkbox" name="hobbies" value="音乐" v-model="hobbies">
        旅行<input type="checkbox" name="hobbies" value="旅行" v-model="hobbies"><br>

        <button οnclick="submitForm()">提交</button>
    </form>
</div>

<script>
    var data={
        id:null,
        name:null,
        age:null,
        fruit:"",
        gender:"男",
        hobbies:[]
    }
    new Vue({
        el: '#app',
        data: data
    })
</script>

<script>
    //回显该数据，测试设置0,应该根据id查询该信息
    queryData(0);
    function queryData(id) {
        $.post("/api/test/getUserDataMap.do",function (res) {
            data.id=res.id;
            data.name=res.name;
            data.age=res.age;
            data.fruit=res.fruit;
            data.gender=res.gender;
            //checkbox需要注意了，后台已经给了hobbies初始值了,赋值的是一个数组
            for(var i=0;i<res.hobbies.length;i++){
                data.hobbies[i]=res.hobbies[i];
            }
        },"json")
    }
    //提交表单
    function  submitForm() {
        var param =$("#Forms").serialize();
        $.post("/api/test/edit.do",param,function (res) {
            alert(res.states);
        },"json")
    }
</script>
</body>
</html>

2.后台数据

package com.apes.oves.front.controller;

import com.apes.core.util.ResponseUtil;
import com.apes.oves.core.bean.Brake;
import org.apache.commons.collections.map.HashedMap;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;

/**
 *
 */
@RequestMapping("/test")
@Controller
public class TestController {

    @RequestMapping("/getUserDataMap.do")
    @ResponseBody
    public Map getUserDataMap(HttpServletRequest request, HttpServletResponse response)throws Exception{
        System.out.println("name=="+request.getParameter("name"));
        System.out.println("age=="+request.getParameter("age"));
        System.out.println("fruit=="+request.getParameter("fruit"));
        System.out.println("gender=="+request.getParameter("gender"));
        //后台接受checkbox注意，checkbox为多值的，没有选择，获取的为null
        String [] hobbies=request.getParameterValues("hobbies");
        if(hobbies!=null&&hobbies.length>0){
            for(String s: hobbies){
                System.out.println("兴趣爱好："+s);
            }
        }
        Map<String,Object> map = new HashedMap();
        map.put("id","123456789");
        map.put("name","张三");
        map.put("age","25");
        map.put("fruit","2");
        map.put("gender","女");
        //处理checkbox问题
        map.put("hobbies",new String[]{"旅行","音乐"});
        return map;
    }


    @RequestMapping("/edit.do")
    @ResponseBody
    public Map edit(HttpServletRequest request, HttpServletResponse response)throws Exception{
        System.out.println("name=="+request.getParameter("name"));
        System.out.println("age=="+request.getParameter("age"));
        System.out.println("fruit=="+request.getParameter("fruit"));
        System.out.println("gender=="+request.getParameter("gender"));
        //后台接受checkbox注意，checkbox为多值的，没有选择，获取的为null
        String [] hobbies=request.getParameterValues("hobbies");
        if(hobbies!=null&&hobbies.length>0){
            for(String s: hobbies){
                System.out.println("兴趣爱好："+s);
            }
        }
        Map<String,Object> map = new HashedMap();
        map.put("states","更新成功");
        return map;
    }

}