作者：LoveEmperor_王子様

###java代码

package com.example.springbootsamplehelloworld;


import java.util.HashMap;
import java.util.Map;


import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;


import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;




@Controller
public class GreetingController {




     ObjectMapper mapper = new ObjectMapper();  
     String json = "";  


    @RequestMapping("/greeting")
    public String greeting(@RequestParam(value="name", required=false, defaultValue="World") String name,String password) throws JsonProcessingException {


   <!-- 接受前端传递过来的数据 -->
        Map<String, String>bjson =new HashMap<String, String>();
        bjson.put("name", name);
        bjson.put("password", password);
        json = mapper.writeValueAsString(bjson);  


        System.out.println(json);
        return "greeting";
    }


    @RequestMapping("/user")  
    public String user(Model model){  


        User user = new User("nick","nick@qq.com");


        model.addAttribute("user", user);
        model.addAttribute("name", "elaine");




        return "user";  
    }


    @RequestMapping("/")  
    public String index(Model model){  
        return "index";  
    }


}

 

 

 

 

### 前端页面代码

***********************************

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
    <style type="text/css">
    body{
       text-align:center;
    }
    </style>
</head>
<body>
    <h2 style="margin-top:50px">LOGIN IN </h2>


    <div id="datashow">{{datashow}}</div>
    <input type="text" id="username" style="margin-top:30px" v-model="username" /><br></br>
    <input type="password" id="password" style="margin-top:15px" v-model="password"/><br></br>
    <button id="logindiv" class="button" v-on:click="loginbtn" style="margin-top:20px">login in</button>


</body>


    <script th:inline="javascript">


Vue.http.options.emulateJSON = true; 
Vue.http.options.emulateHTTP = true;


    var name = [[${name}]]; 
    var user = [[${user}]]; 
    <!-- 将后端传输过来的值展示在datashow -->
      var showvm = new Vue({
        el:'#datashow',
          data:{
            datashow:name,
          }
      })


<!-- 接受username值 -->
      var uservm = new Vue({
        el:'#username',
          data:{
              username:'',
          }
      })
<!-- 接受password值 -->
  var pswvm = new Vue({
    el:'#password',
    data:{
        password:'',
    }
  })




      var logindiv = new Vue({
       el: '#logindiv',
       data: {
       name: 'Vue.js'
      },
     // 在 `methods` 对象中定义方法
      methods: {
      loginbtn: function (event) {
      // `this` 在方法里指当前 Vue 实例
       <!-- 打印pswvm.password -->
       console.log(pswvm.password);


    <!-- 将name:uservm.username,password:pswvm.password传输到后台，调用greeting -->
   <!-- Vue post -->
    this.$http.post("/greeting?", 
            {name:uservm.username,password:pswvm.password}
       )
       .then(function (response) { 
       }).catch(function (response)
        { console.error(response); 
        });


     }
    }
   })
// 也可以用 JavaScript 直接调用方法
// logindiv.loginbtn() // => 'Hello Vue.js!'


    </script>


</html>

 

 

 

 

Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区