精华内容
下载资源
问答
  • 听说只需要通过添加过滤器就能实现交互,但是不太懂是怎么实现的,还有过滤器要怎么写?前端需不需要添加什么配置?还望有大佬帮忙解答一下
  • 比如传输一个对象,是不是序列化对象传输的? 如果是这样的话,那如果增加或者删除一个对象的属性,有什么文件或者代码需要重新生成吗?
  • JS实现前后端数据交互--简单登陆页面交互

    千次阅读 热门讨论 2020-06-11 22:44:02
    前后端交互的问题有 1、数据是怎么发送到后端? 2、后端是怎么接收到前端发送过来的数据? 3、后端怎么对前端发送来的数据进行处理? 4、处理完之后又怎么写入数据库,以及给前端返回处理结果? 案例:实现简单的...

    前后端交互的问题有

    1、数据是怎么发送到后端?

    2、后端是怎么接收到前端发送过来的数据?

    3、后端怎么对前端发送来的数据进行处理?

    4、处理完之后又怎么写入数据库,以及给前端返回处理结果?

    案例:实现简单的登陆注册的页面
    前端:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登录</title>
    </head>
    <body>
        
    <p>账号:<input type="text" id="user"></p>
    <p>密码:<input type="text" id="pass"></p>
    <button id="login">登录</button>
    <button id="add">注册</button>
    
    <script src="ajax.js"></script>
    <!-- 
        接口文档
    method: get
    url: './data/user.php'
    参数:
        type = login  登录
               add    注册 
        user = 用户名
        pass = 用户密码
    返回:
        {err:0,msg:'登录成功'} 
    -->
    <script>
    var login = document.querySelector('#login');
    var add = document.querySelector('#add');
    var user = document.querySelector('#user');
    var pass = document.querySelector('#pass');
    
    login.onclick = function (){
        ajax({
            type: 'get',
            url: './data/user.php',
            data: {
                type: 'login',
                user: user.value,
                pass: pass.value
            },
            success: function (data){
                var json = JSON.parse(data);
                if (json.err == 0){
                    alert(json.msg);
                }
            }
        });
    }
    
    add.onclick = function (){
        ajax({
            type: 'get',
            url: './data/user.php',
            data: {
                type: 'add',
                user: user.value,
                pass: pass.value
            },
            success: function (data){
                var json = JSON.parse(data);
                if (json.err == 0){
                    alert(json.msg);
                }
            }
        });
    }
    </script>
    

    后端:

    <?php
    /* 
    接口文档
    method: get
    url: './data/user.php'
    参数:
        type = login  登录
               add    注册 
        user = 用户名
        pass = 用户密码
    返回:
        {err:0,msg:'登录成功'}
    */
    
    header('Content-Type:text/html;charset=utf-8');
    
    $type = $_GET['type'];
    $user = $_GET['user'];
    $pass = $_GET['pass'];
    
    if ($type && $user && $pass) {
        //连接数据库 
        $link = mysqli_connect('localhost','root','xiaoming','userlist');
        if(!$link){
            die('连接失败:'.mysqli_connect_error());
        }
        //设置编码
        mysqli_set_charset($link,'utf8');
    
        //判断要登录还是要注册 
        // 执行sql语句
        if ($type === 'login'){
            $login_sql = "select * from user where username='$user' and password='$pass'";
            $login_res = mysqli_query($link,$login_sql);
            $login_arr = mysqli_fetch_all($login_res);
            if (count($login_arr) > 0){
                echo '{"err":0,"msg":"登录成功"}';
            } else {
                echo '{"err":-3,"msg":"账号或密码错误"}';
            }
        } else if($type === 'add') {
            $select_sql = "select * from user where username='$user'";
            $select_res = mysqli_query($link,$select_sql);
            // print_r($select_res );
            // die();
            $select_arr = mysqli_fetch_all($select_res);
            
            if(count($select_arr) > 0){
                die('{"err":-1,"msg":"用户名已被占用"}');
            } else {
                $insert_sql = "insert into user (username,password) values ('$user','$pass')";
                $insert_res = mysqli_query($link,$insert_sql);
                if ($insert_res){
                    echo '{"err":0,"msg":"注册成功"}';
                } else {
                    echo '{"err":-2,"msg":"注册失败"}';
                }
            }
        } else {
            die('{"err":-9,"msg":"参数错误"}');
        }
        mysqli_close($link);
    } else {
        echo '{"err":-9,"msg":"参数错误"}';
    }
    ?>
    

    以上的内容就是实现前后端交互的代码

    展开全文
  • 假设说我用java写后台服务,前台用vuejs写。那我怎么能让2个交互呢? 平常写vue,react什么的都是通过webpack打包,node来跑的。 而java会跑在tomcat或者jboss上。
  • 前后端交互

    2019-11-13 21:26:08
    对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前后端实现数据交互,在没有指导的情况下,可能大多数人都会一头雾水,往往都会有以下的疑问。 1、数据是怎么发送到后端?...

    对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前后端实现数据交互,在没有指导的情况下,可能大多数人都会一头雾水,往往都会有以下的疑问。

    1、数据是怎么发送到后端?

    2、后端是怎么接收到前端发送过来的数据?

    3、后端怎么对前端发送来的数据进行处理?

    4、处理完之后又怎么写入数据库,以及给前端返回处理结果?

    网站数据处理主要分为三层。
    第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。
    第二层,是业务层,这层是负责处理数据的。常用的代码语言有PHP,JSP,Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库,然后把结果返回给前端网页。
    第三层,是数据层,这个就是数据库,用来存储数据的。通过业务层的操作可以实现增删改数据库的操作。

    ①你接触到的是这个网页是属于表示层,这个网页一般由HTML标签结合CSS/JAVASCRIPT来实现的。 这时候你要先填入数据。
    ②然后你按提交触发后台处理机制,这时候数据会传到后台的代码进行处理。这部分代码根据不同网站可以使PHP,JSP,JAVA等。 代码根据程序员预设的算法将收到的数据进行处理之后会相应的对数据库进行操作,存储数据等。
    ③成功操作完数据库之后,业务层的代码会再向表示层也就是显示器端传回一个指令通知你表格填写成功

    从前端向后端传递参数方法

    一、通过表单传递参数

    1.前端部分,在前端jsp页面设置form表单,确定需要传递的参数name让用户输入,通过点击按钮后submit()提交到后台

    <form id="loginform" name="loginform" action="<%=path %>/login" method="post">
        <div class="form-group mg-t20">
            <i class="icon-user icon_font"></i>
            <input type="text" class="login_input" id="sfzh" name="sfzh" placeholder="请输入用户名" />
        </div>
        <div class="form-group mg-t20">
            <i class="icon-lock icon_font"></i>
            <input type="password" class="login_input" id="pwd"  name="pwd" placeholder="请输入密码" />
        </div>
        <div class="checkbox mg-b25">
            <label>
                <!--  <input type="checkbox" />记住密码 -->
            </label>
            <span style="color: red;" id="error">
    			<% 
    			String message = (String)request.getAttribute("message");
    				if(StringUtils.isNotBlank(message)){ %>
    						  	<%=message %>
    						  	<%
    						  	}
    							%>
    	    </span>
        </div>
        <button id="login" type="submit" style="submit" class="login_btn">登 录</button>
    </form>
    

    2.后台对前端请求的反应,接收数据,处理数据以及返回数据。

    @RequestMapping(method=RequestMethod.POST)
    	public String dologin(String sfzh, String pwd, RedirectAttributes redirectAttributes){
    		
    		User query = new User();
    		query.setUserAccount(sfzh);
    		
    		HttpSession session = HttpSessionUtil.getHttpSession();
    		
    		List<User> userlist = userService.select(query);
    

    二.通过ajax传递参数(有post和get写法)

    1.ajax是如何将前端数据传到后台的

    function leftmenu(parentid, parentpath,moduleindex){
    		var leftcontent="";
    		$.ajax({
    	 		type: "POST",
    			url : "<%=path%>/resource/usermenus",
    			data : {parentid:parentid,parentpath:parentpath},
    			success : function(data){
    				// 处理head menu是否有页面要打开
    				leftcontent= template('_menu2tmpl',data);
    				$('.nav').html(leftcontent);
    				addclick();
    				//临时点击显示菜单
    				if($('.index-left-warp').width()==0){
    					$(".index-left-show").hide();
    					$(".index-left-warp").animate({width:"200px"},250);
    					timer=setTimeout(function(){
    						tabsResize();
    					},500);
    				};
    				
    				$(".nav").accordion({
    			        //accordion: true,
    			        speed: 500,
    				    closedSign: '<img src="<%=path%>/images/menu_close.png"/>',
    					openedSign: '<img src="<%=path%>/images/menu_open.png"/>'
    				});
    			}
    		});
    	}
    

    $.ajax({

    type: “POST”,//type是ajax的方法

    url : “<%=path%>/resource/usermenus”,//参数url,要把参数传到什么地方

    data : {parentid:parentid,parentpath:parentpath},//传递什么数据

    success : function(data){//sucess表示,当数据返回成功后要怎么做,返回的数据存储在data

    2.后台对前端请求的反应,接收数据,处理数据以及返回数据。

    @ResponseBody
    	@RequestMapping(value = "usermenus")
    	public Map<String, Object> usermenus(String parentid, String parentpath) {
    		UserDetail user = HttpSessionUtil.getSessionUser();
    		String appadmin = Config.getInstance().getCustomValue("app.admin");
    		List<Resource> list = null;
    		if(user.getUserAccount().equals(appadmin)){
    			// 系统内置管理员 默认获取全部授权
    			list = resourceservice.queryAllMenuCascade(parentpath);
    		}else{
    			list = resourceservice.queryUserMenuCascade(user.getId(), parentpath);
    		}
    		// 初始化根节点
    		Resource root= new Resource();
    		root.setId(parentid);
    		
    		Collections.sort(list, new Comparator<Object>() {
    			
    			public int compare(Object o1, Object o2) {
     
    				Resource resource1 = (Resource) o1;
    				Resource resource2 = (Resource) o2;
     
    				if (resource1.getSort() > resource2.getSort()) {
    					return 1;
    				}
    				if (resource1.getSort() < resource2.getSort()) {
    					return -1;
    				}
    				
    				//如果返回0则认为前者与后者相等
    				return 0;
    			}
    		});
     
    		// 组装Tree
    		return RecDHTree(root,list);
    	}
    

    3.再看看前端接收到后端返回的数据是如何处理的

    function leftmenu(parentid, parentpath,moduleindex){
    		var leftcontent="";
    		$.ajax({
    	 		type: "POST",
    			url : "<%=path%>/resource/usermenus",
    			data : {parentid:parentid,parentpath:parentpath},
    			success : function(data){
    				// 处理head menu是否有页面要打开
    				leftcontent= template('_menu2tmpl',data);
    				$('.nav').html(leftcontent);
    				addclick();
    				//临时点击显示菜单
    				if($('.index-left-warp').width()==0){
    					$(".index-left-show").hide();
    					$(".index-left-warp").animate({width:"200px"},250);
    					timer=setTimeout(function(){
    						tabsResize();
    					},500);
    				};
    				
    				$(".nav").accordion({
    			        //accordion: true,
    			        speed: 500,
    				    closedSign: '<img src="<%=path%>/images/menu_close.png"/>',
    					openedSign: '<img src="<%=path%>/images/menu_open.png"/>'
    				});
    			}
    		});
    	}
     
    
    展开全文
  • axios 前后端数据交互

    2020-12-16 21:59:39
    一直纠结前后端怎么实现数据的交互,老想不通。关键还是基础太差,看文档不认真。 1.前端显示数据的主要代码: display(){ Axios.get('/api/data-item').then(res=>{ console.log(res); this.data = res....

    一直纠结前后端该怎么实现数据的交互,老想不通。关键还是基础太差,看文档不认真。

    1.前端显示数据的主要代码:

        display(){
          Axios.get('/api/data-item').then(res=>{
            console.log(res);
            this.data = res.data;
          })
        },
    

    在这里插入图片描述res是我发送请求获取到了的结果,把res.data赋值给this.data 因为我获取到的后台数据在res.data里面,如上图。

    2.后端的代码

    function findAll(){
        return MongoClient.connect(url).then(db=>{
            var dbo = db.db('dop');
            return dbo.collection("dataItems").find().limit(5)
                .toArray()          //这里的toArray当不传入回调函数时, 返回的是个Promise
                .catch(ex=>{
                    throw ex;
            });
        });
    }
    
    展开全文
  • 所以就需要明白前后端数据是怎么进行交互的。 一、网站数据处理主要分为三层 第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。...

    作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一。所以就需要明白前后端数据是怎么进行交互的。

    一、网站数据处理主要分为三层

    第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。

    第二层,是业务层,这层是负责处理数据的。常用的代码语言有PHP,JSP,Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库,然后把结果返回给前端网页。

    第三层,是数据层,这个就是数据库,用来存储数据的。通过业务层的操作可以实现增删改数据库的操作。
    ①你接触到的是这个网页是属于表示层,这个网页一般由HTML标签结合CSS/JAVASCRIPT来实现的。 这时候你要先填入数据。
    ②然后你按提交触发后台处理机制,这时候数据会传到后台的代码进行处理。这部分代码根据不同网站可以使PHP,JSP,JAVA等。 代码根据程序员预设的算法将收到的数据进行处理之后会相应的对数据库进行操作,存储数据等。
    ③成功操作完数据库之后,业务层的代码会再向表示层也就是显示器端传回一个指令通知你表格填写成功。

    二、前后端数据交互方法

    1、HTML赋值

    2、JS赋值

    3、script填充JSON

    4、AJAX获取JSON

    前三个数据交互方法在AJAX获取json的方法普遍使用之后,就很少使用了,今天主要了解一下ajax获取json:

    $.ajax({

    type: "POST",//type是ajax的方法

    url : "<%=path%>/resource/usermenus",//参数url,要把参数传到什么地方

    data : {parentid:parentid,parentpath:parentpath},//传递什么数据

    success : function(data){//sucess表示,当数据返回成功后要怎么做,返回的数据存储在data

    )}

    Ajax进行数据交互就和我们使用接口测试工具的概念一样,请求方式get/post,url地址,还有需要传递的参数,然后对返回的响应值进行处理。

    在明白Ajax的原理之后,知道前后端数据交互方法,就可以快速定位数据传输的时候是前端还是后端的错误了。

    展开全文
  • 所以就需要明白前后端数据是怎么进行交互的。 一、网站数据处理主要分为三层 第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也...
  • 前后端如何进行数据交互

    千次阅读 2020-12-22 14:28:40
    1、数据是怎么发送到后端? 2、后端是怎么接收到前端发送过来的数据? 3、后端怎么对前端发送来的数据进行处理? 4、处理完之后又怎么写入数据库,以及给前端返回处理结果? 网站数据处理主要分为三层。 第一层,...
  • 所以就需要明白前后端数据是怎么进行交互的。  一、网站数据处理主要分为三层  第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层...
  • web前端和后端怎么连接 数据网站主要分为三层 第一层表示层,这部分用的是html,css/javascript代码来实现,就是浏览器打开的网页 第二层是业务层,这一层负责处理数据,常用语言是java,jsp。处理前台传过来的数据...
  • 所以就需要明白前后端数据是怎么进行交互的。 一、网站数据处理主要分为三层 第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也...
  • 前后端交互第四周

    2020-08-02 21:44:16
    现在我面临的一个大问题就是页面太难看了,光顾得实现功能去了,就没怎么注意页面的美观性,现在回头来看,自己都不忍直视。。。还有一个收获就是我发现我没有写页面的整体观,同样的按钮,写一个通用class能省很多...
  • 这时候我们可以通过layui渲染实现这个功能,那么我们怎么使用layui插件呢,我们可以通过layui的官方文档先了解下,layui数据表格文档 这里给我们介绍了三种渲染的方式 方法渲染 “自动化渲染”的手动模式,本质...
  • 我刚入职一个公司,前端页面完全是后端人员写的,骨架有cshtml+aspx两种格式,里面是动态生成页面,里面拼接和多东西,有动态交互、静态页面还有...请问我该怎么做,才能实现前后端分离,请指得具体一点。谢谢
  • 前后端分离的好处就不用多说了,前后端那么Java Web项目前后端分离是怎么实现的呢? 1.浏览器发送请求 2.直接到达html页面(前端控制路由与渲染页面,整个项目开发的权重前移) 3.html页面负责调用服务端接口产生...
  • changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 路径重写, '^/login': '' // 替换...
  • 一、是什么在我们做数据查询的时候,如果数据量很大,比如几万条数据,放在一个页面显示的话显然不友好,这时候就需要采用分页显示的形式,如每次只显示10条数据要实现分页功能,实际上就是从结果集中...
  • 1、首先自己心里要非常清楚的明白什么是前后端分离, 所谓的前后端分离...3、前后端需要约定交互接口,实现开发,开发结束后需要进行独立部署。 4、前端只需要关注页面的样式与动态数据的解析&渲染,而后端专...
  • 所以就需要明白前后端数据是怎么进行交互的。 一、网站数据处理主要分为三层    第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示...
  • 使用的是SSH架构,表单直接存在list<T> 里,在jsp里展示 以上是展示数据,然后是...拼接成功之后,自己想怎么传到后台都可以了,如果有前段大佬,知道table怎么实现分页的,可以分享下,祝各位在开发的道路上...
  • 前端要掌握哪些技术点?前后端分离接口怎么回事?随着互联网的高速发展以及IT...两个不同的工程,两个不同的代码库,不同的开发人员,前后端工程师需要约定交互接口,实现同步开发。开发结束后需要进行独立部署,前端通
  • 先来说说目前前后端分离后,前端和后端是怎么进行数据交互的。在《MiniMall:说一说前端代码框架,你爱看不看》文章中,我们介绍前端采用的是Extjs框架实现,然后通过Nginx进行代理转发。下来看看现在的Nginx代理...
  • 因为Spring Security中默认的登录数据格式是key/value形式,这里我们改为JSON格式,这样保持前后端统一。 下面我们来看看怎么实现。 1.服务端接口调整 首先大家知道,用户登录的用户名和密码是在...
  • Python+Vue+Django前后端分离项目实战

    万人学习 2020-02-12 09:38:05
    一、融汇贯通 本视频采用了前后端分离的开发模式,前端使用Vue.js+Element UI实现了Web页面的呈现,后端使用Python 的Django框架实现了数据访问的接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正...
  • 前言 很早就想写了的,一直拖啊拖,现在碰巧有时间,就来记录一下对...相信如果要实现一个应用前后端的数据交互,使之后台数据反馈显示在前端页面,如果你接触到的移动端Android 的话,你会知道HttpConnection , 那...
  • 然后他们根据产品功能和交互制定了一堆叼炸天的前后端交互的API,这套API就类似于一套前后端开发的“协议”,Alex和Bob开发的时候都需要遵守。例如其中一个发表评论的功能: <pre><code> // API: ...

空空如也

空空如也

1 2 3 4 5
收藏数 97
精华内容 38
关键字:

前后端怎么实现交互