SpringBoot之前后端分离

最新推荐文章于 2024-04-17 20:32:25 发布

g0415shenw

最新推荐文章于 2024-04-17 20:32:25 发布

阅读量454

点赞数

分类专栏： springboot

本文链接：https://blog.csdn.net/g0415shenw/article/details/95595887

版权

springboot 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

今天尝试写一个基于SpringBoot+Vue的前后端分离的简单登陆的例子。

SpringBoot采用IDEA集成环境开发

Vue采用Vscode集成环境开发

这个简单的例子，基本上把前面几周研究的技术都复习了一遍。例如

数据库，RestFul接口，注解，Vue等等。也算对一周工作的总结吧。http通信采用axios这个库。

先上一个效果图：

html页面如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue前后端示例</title>
</head>
<body>
    <h1>登陆测试</h1>
    <div >
        <label>用户名</label>
        <input  id="user" v-model ="user"></input>
    </div>
    <div id="psw">
        <label>密码</label>
        <input  v-model ="psw" type="password"></input>
    </div>
    <div>
        <button id="login" v-on:click ="handleLogin">登陆</button>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="axios.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

js如下：

var user_Vue =new Vue({
    el:'#user',
    data: {
        user: '111'
    }
})

var psw_Vue =new Vue({
    el:'#psw',
    data: {
        psw: '111'
    }
})
var app =new Vue({
    el:'#login',
    methods:{
        handleLogin:function(){
            var data = {
                user,
                psw
            };
            data.user =user_Vue.user;
            data.psw = psw_Vue.psw;

            axios.defaults.baseURL = 'http://127.0.0.1:8080/'
            axios.post('/app/login', data)
            .then(function (res) {
                alert(JSON.stringify(res.data));
            })
            .catch(function (err) {
              alert(err.message);
            });
        }
    }
    })

后端就实现了一个login接口。

现在又突发奇想，能不能把前后端都给tomcat托管呢？

进行尝试中。。。

尝试了一下，把war文件和前端的index.html都放在webapps/ROOT下面记得是大写的ROOT

就可以完美使用了

测试结果

g0415shenw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot之前后端分离

今天尝试写一个基于SpringBoot+Vue的前后端分离的简单登陆的例子。SpringBoot采用IDEA集成环境开发Vue采用Vscode集成环境开发这个简单的例子，基本上把前面几周研究的技术都复习了一遍。例如数据库，RestFul接口，注解，Vue等等。也算对一周工作的总结吧。http通信采用axios这个库。先上一个效果图：html页面如下：<!D...
复制链接

扫一扫