前言：
之前写web项目，使用的基本都是jsp，使用的 jstl 标签库。使用这种模式的话，后端工程师将业务逻辑和数据写好后，发到页面上，还需要将页面进行数据显示，后端工程师所做的事情较多。而前后端分离的意思就是，后端工程师不需要取了解前端的页面，前端工程师将所需要的数据提前告诉后端工程师，后端工程师只需要将数据返回即可，不用考虑页面是如何的，这样后端工程师就可以把更多的精力放在逻辑处理上了。
下面直接用几个小demo，来实现下简单的前后台数据是如何进行交互的。
环境：以下案例使用了bootstrap、vue、jquery 需要提前导好相关脚本。
将前台数据传到服务端
- 页面
页面是利用bootstrap简单搭建的一个登录的小demo，利用了模态框来将登录页面显示出来。
- 目的：将用户名和密码传给服务器 js脚本（可以另外写给js文件，在html中引入就行了，我这里是直接写在body中的）
<script>
// 这个函数是整个script里最先运行的，类似与Java里的main方法。
$(function(){
$('#btn1').on('click',function(){
add();
});
})
function add(){
// 获取请求的参数
// form表单可以用serialize()将表单中的参数转换为：username=xxx&password=yyyy;
var p=$('form').serialize();
//将请求的参数发送至服务端
$.post('login',p,function(data){
if(data=='1'){
console.log('登录成功');
}else if(data=='0'){
alert('登录失败')
}
});
}
</script>
服务端代码：
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("login:" + username+password);
// 返回数据给前端
// json格式的字符串 需要用到jar包，网上有很多关于json转换的方法，可以自行去了解一个
// 得到数据后应该取服务层校验，然后根据是否成功返回相应数据 我这里假设成功返回1，失败返回2
String json = new Gson().toJson(1);
response.setContentType("application/json");
response.getWriter().write(json);
}*******
过程：用户浏览页面，点击登录，输入用户名和密码后，点提交按钮，这里触发了按钮的事件。
原因：在js中的主方法（$function(){}）里给该按钮注册了click事件。click事件中调用了add函数。
add函数：首先利用了serialize()方法将表单中的参数转换为username=xxx&password=yyyy形式存到 p 变量中。
用$.post将p传递到了服务器 $.post('','','')三个参数：
- 第一个是url ，即你要传输服务端的路径映射，
- 第二是你要传输到服务端的数据，数据可以是json格式、json格式字符串、标准参数模式（即本demo中用到的）。
- 第三个是一个回显函数，即数据传输过去，服务器响应给你数据，前端利用回显函数接受数据，data就是服务端所返回的数据，是json格式的字符串。
在测试的时候要多利用浏览器的开发者模式，主要看Console和Network。
加上vue 将前台数据传输到后台
vue是一个渐进式框架，它有一个很重要的点就是，MVVM（Model-View-ViewModel），可以实现视图-模型之间数据的双向绑定。 大家有兴趣可也取了解下，vue还可以自定义组件开发。https://cn.vuejs.org/
- 使用了vue后将html中两个输入框都进行了绑定，已经提交按钮绑定了事件
<!-- v-model是绑定vue中data里数据的指令
v-on绑定事件 -->
<input v-model="log.username" type="text" name="username" class="form-control" placeholder="用户名" aria-describedby="helpId">
<input v-model="log.password" type="password" name="password" class="form-control" placeholder="密码" aria-describedby="helpId">
<button v-on:click="login" type="button" class="btn btn-primary">提交</button>
- 加上vue后的js脚本
<script>
let vm = new Vue({
el:'#app',
data:{
log:{username:'',password:''},
},
methods: {
login:function() {
const _this = this;
console.log('测试');
$.post('login',_this.log,function(data){
if(data = '1') {
$('#login').modal('hide');
_this.log.username = '';
_this.log.password = '';
}else {
console.log('错误');
}
})
},
},
});
</script>这里主要是用了vue数据双向绑定的特点，没了解过vue的可以跳过。
后台代码同上
用$.get拿到后台数据并加以渲染
- 页面 加了一个表格用于显示数据
<div class="container">
<table class="table" id="data_table">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>password</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>- js部分还是使用的是vue
思路：要想浏览这个页面就能看到表格的数据，那么肯定要先进行数据渲染，而且方法只能写到主方法中（$function(){}）,但是这里用到的是vue，vue中有一个叫挂载mounted（）{}，可以将加载数据的方法写到这里。
<script>
let vm = new Vue({
el:'#app',
data:{
log:{id:'',username:'',password:''},
},
mounted() {
this.load();
},
methods: {
load:function() {
$.get('login',{},function(data){
console.info('后台返回的数据：'+data);
// 渲染数据到表格中
//let tbody = $('#tbody');
for(const b of data) {
let tr = $('<tr>')
.append($('<td>').text(b.id))
.append($('<td>').text(b.username))
.append($('<td>').text(b.password));
$('#tbody').append(tr);
};
})
},
login:function() {
const _this = this;
console.log('登录');
$.post('login',_this.log,function(data){
if(data = '1') {
// 控制模态框关闭
$('#login').modal('hide');
_this.log.username = '';
_this.log.password = '';
}else {
console.log('cuowu');
}
})
},
},
});
</script>load方法使用的是get请求，那么我们要在服务器的get中将数据返回过来，这样回显函数中的data才会有数据。
-
服务端返回数据
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 模拟从数据库拿到数据
List<User> list = new ArrayList<>();
list.add(new User(001, "root", "root"));
list.add(new User(002, "kai", "123"));
list.add(new User(003, "que", "456"));
//将list转换成json格式字符串
String json = new Gson().toJson(list);
System.out.println(json);
response.setContentType("application/json");
response.getWriter().write(json);
}这里我用到的渲染是循环添加html元素，并没有用到vue中的data。
ajax进行交互
<script>
let vm = new Vue({
el:'#app',
data:{
form_log:{username:'',password:''},
log:[]
},
mounted() {
this.load();
},
methods: {
load:function() {
const _this = this;
$.get('login',{},function(data){
console.info('后台返回的数据：'+data);
console.log('log:' + _this.log);
for(const c of data){
_this.log.push(c);
}
})
},
login:function() {
const _this = this;
var f = $('form').serialize();
$.ajax({
url:'login',
method:'post',
data:f,
success:function(data) {
if(data == '1'){
$('#login').modal('hide');
}
},
dataType:'json'
});
},
},
});
</script>后端工程师还是需要了解下前端的一些框架以及知识的。
扫一扫
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
