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

最新推荐文章于 2023-03-22 15:04:15 发布

RaySunWHUT

最新推荐文章于 2023-03-22 15:04:15 发布

阅读量1.5k

点赞数 2

分类专栏： springBoot 文章标签： SSM Vue RESTful

本文链接：https://blog.csdn.net/qq_40994260/article/details/102824366

版权

springBoot 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前端HTML代码：

vue写在

	<!DOCTYPE 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 Interface</title>
</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启动后的主界面：

backend

前端反馈结果：

frontend

小结：

前端：

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

后端：

	不同IDE的启动URL不尽相同；
	Eclipse中的URL为：

	http://localhost:8080/

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

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

RaySunWHUT

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue.js and SSM实现RESTful风格的前后端交互

前端HTML代码：vue写在login.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫