Vue.js and SSM实现RESTful风格的前后端交互

前端HTML代码:

vue写在

login.html

	
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login Front Interfacetitle>
head>
<link rel="stylesheet" type="text/css" href="easy.css"/>
<body>
        
    <div id="app">

        <p>{{ message }}p>
        <button v-on:click="send">获取button>
    div>
    

    <script src="../source/Vue.js">script>
    <script src="../source/axios.min.js">script>
    <script src="../source/qs.min.js">script>
    <script src="arrive.js">script>
    
body>
html>

var app = new Vue({

    el: '#app',

    data: {

        message: 'okay'

    },

    methods: {

        send: function () {

            var _this = this;

            axios({

                method: 'post',
                
                url: "http://localhost:8080/Sun_war_exploded/findAll",
                
                data: Qs.stringify({

                    message: _this.message
                
                }),
                
                // responseType: 'json'

            }).then (function (response) {

                console.log(response.data);
                _this.message = response.data;

            }).catch (function (error) {

                console.log(error.data);
                _this.message = error.data;
            
            });

        }

    },

    computed: {

        

    }

});

SSM后端controller代码:

package controller;

import dao.UserDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import pojo.User;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Writer;
import java.util.List;


@CrossOrigin
@Controller
public class UserController {   // http://localhost:8080/Sun/src/main/java/controller/UserController/select

    @RequestMapping(value = "/findAll", method = RequestMethod.POST)
    @ResponseBody
    public User findAll() {

        List<User> list = userDao.selectAllUser();

//    for (User user: list) {
//
//       System.out.println(user.getId() + user.getUserName() + user.getPassword());
//
//    }

//        return JSONUtils.toJSONString(list);

        return list.get(0);

    }
}

结果展示

后端Tomcat启动后的主界面:

Vue.js and SSM实现RESTful风格的前后端交互_第1张图片

前端反馈结果:

Vue.js and SSM实现RESTful风格的前后端交互_第2张图片

小结:

前端:

	前端的问题在于跨域请求,使用axios.js可以解决大部分问题,在一些情况下可能会用到Qs库,重要的是请求后端接口的url必须要正确。

后端:

	不同IDE的启动URL不尽相同;
	Eclipse中的URL为:
	http://localhost:8080/

url + 项目名/ + @RequestMapping注解的value值。

如:
在这里插入图片描述
IDEA中的URL为:
Tomcat启动后的项目主路径 + @RequestMapping注解的value值。
如:
在这里插入图片描述

你可能感兴趣的:(springBoot)