首页
学习
活动
专区
圈层
工具
发布

Java 动静分离_如何做前后端动静分离

以往的不分离的开发,前端的请求往往是通过点击某个超链接,然后由浏览器接管后续,浏览器自行发出请求获取数据并刷新整个页面,后端则是收到请求后,由 PHP 这类后端脚本直接输出一个完整的 HTML 页面。...后来 Ajax 来了,则是由 Javascript 脚本触发事件,可控的让浏览器在特定条件下发出有限定的请求头的 HTTP 请求,并且收到响应后,依旧由脚本自行处理而不是以往浏览器直接渲染输出,这就使得前端可以实现局部刷新的功能...,但是对于 POST,PUT 则需要通过请求体传递数据,比如表单提交、比如文件上传。...后端利用请求中大大小小的数据,完全可以构建一个层次分明(利用中间件实现)的过滤流程,配合合理的路由模块和控制器,就很容易实现后端的分离。 前端玩法也很多,我就拿 ajax 这种最简单实用的来说。...前端就是获取数据的,那么利用 ajax 发请求获取数据就好了,拿到数据该渲染哪就渲染哪,至于数据,只要结构正确,一律认定就是正确的。

1.8K30

:第十五章 - 传统开发模式下的 axios 使用入门

一、前言   在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,能够非常便捷的发起 http...与 get 请求相似,使用 axios 发起 post 请求也是在 then 回掉方法中获取接口返回值,在 catch 回掉方法中捕获错误信息。...请求一样,我们可以使用 $.ajax/$.post 方法去发起一个 get/post 请求,也可以在 $.ajax 方法中通过指定请求的 type 类型来确定我们是以 get 请求还是 post 请求的方式执行...3、拦截器   在前后端分离的项目中,我们一般采用 Jwt token 的方式进行权限控制。前端在获取数据之前,需要从后端获取到 token 令牌。...在每一个通过 axios 发起请求的 then 回掉方法中,我们都需要对获取到响应状态码进行判断,判断接口的调用是否成功。

1.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Next.js + TypeScript 搭建一个简易的博客系统

    但这种方式所有用户请求的内容都一样,无法生成用户相关内容。 代码:getStaticProps 获取 posts 显然,后端最好不要通过 AJAX 来获取 posts。...前端怎么不通过 AJAX 获取数据? posts 数据我们只传递给了服务器,为什么在前端也能打印出来? 我们来看看此时的页面: ?...现在前端不用 AJAX 也能拿到 posts 了,直接通过 __NEXT_DATA__ 获取数据。...通过 getStaticProps 可以获取数据,静态内容 + 数据(本地获取)就得到了完整页面。代替了之前的 静态内容+动态数据(AJAX获取)。...动态内容静态化 术语:SSG,通过 getStaticProps 获取用户无关内容 用户相关动态内容静态化 术语:SSR,通过 getServerSideProps 获取请求 缺点:无法获取客户端信息,

    5K20

    JavaScript第八弹——Ajax快到碗里来

    Hello小伙伴们大家好,我们了解了怎样写一个网站结构,了解了怎样装饰页面,了解了怎样给页面添加事件,但是又怎样从后台获取数据呢,今天给大家带来的是作为前后端数据桥梁的Ajax的用法。...通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。这其实对网页的渲染效率起到了非常大的帮助。...Ajax步骤 反正我们最后的目的是通过Ajax完成前后端的交互,那么我们就先了解一下整个数据传输流程吧~~ 要完成Ajax的数据传输需要以下步骤: (1)创建异步调用对象:XMLHttpRequest...post:无法使用缓存文件(更新服务器上的文件或数据库); 向服务器发送大量数据(POST 没有数据量限制); 发送包含未知字符的用户输入时,POST 比 GET...通过这个响应,获取后端传回来的数据。 4. XMLHttpRequest状态 知道这个状态,我们便可以根据状态码获取对象状态,从而在不同的阶段做出不同的处理。

    68110

    Django进阶之CSRF

    通过ajax提交 因为cookie中同样存在csrftoken,所以可以在js中通过: $.cooke("cstftoken")获取 如果通过ajax进行提交数据,这里提交的csrftoken是通过请求头中存放..._,所以实际传递的是就是X_CSRFtoken,而在前端页面的ajax传递的时候由于不能使用下划线所以传递的是X_CSRFtoken 下面是在前端ajax中写的具体内容: $("#btn1")....之前执行这个方法,从而在所有的ajax里都加上这个csrftoken 这里的xhr是XMLHttpRequest的简写,ajax调用的就是这个方法 如果想要实现在当get方式的时候不需要提交csrftoken...提交的时候通过请求头传递的给后台的 2、    csrf在前端的key为:X-CSRFtoken,到后端的时候django会自动添加HTTP_,并且最后为HTTP_X_CSRFtoken 3、    csrf...在form中提交的时需要在前端form中添加{%csrftoken%}

    1.3K50

    Django的form,model自定制

    self.fields字典的键, 一个一个的去get前端POST提交的数据 得到用户输入数据;input_value= request.post.get(‘k’)(所以form字段的名称,要和前端的name...(一般不使用post_clean做自定义过滤,clean_form方法完全可以解决) form表单提交验证 form表单(会发起 get)提交刷新失去上次内容 from django.shortcuts...由于form表单submit之后(发送post请求) 数据提交到 后端,不管前端输入的数据是否正确,服务端也要响应,所以页面会刷新; 所以无法保留用户上次输入的内容;如何解决呢?...,让用户输入值;用户输入值通过post方法提交到后台。...发送get请求时,服务端渲染到模板(空标签/默认值)发送到客户端显示 (3)客户端填数据,POST提交到后端; (4)后端验证,返回结果给前端;(切记Form组件是在后端生成,发送给客户端显示,客户端填完数据在发回服务端

    3K10

    Flask前后端分离实践:Todo App(3)

    这未免太麻烦,我们完全可以减少请求的次数,请求一次,然后在客户端(浏览器)上存起来,要用的时候带上即可。...在Flask中引入CSRF保护主要是用Flask-WTF这个扩展,但既然我们不用WTF去渲染表单了,那么表单的CSRF保护也用不上了,所幸,这个扩展还提供了一个全局CSRF保护方法,就是所有view都可以通过一个模板变量去获取...csrf.init_app(app) return app 这样在模板中,可以通过{{ csrf_token() }}获得CSRF token的值。...推荐放在返回的前端页面index.html的meta标签中,以供ajax方法获取 Html ......实际开发中,前端和后端可能完全是分离部署,通过nginx等其他web服务器返回的。这样一来,{{ csrf_token() }}就完全没机会透给前端。不要紧,我们还可以用Cookies嘛。

    2.2K10

    javaWeb项目(SSH框架+AJAX+百度地图API+Oracle数据库+MyEclipse+Tomcat)之一 基础Struts框架搭建篇

    在移动互联网蓬勃发展的今天,各种包含数据分析、图形可视化等技术的管理系统在企业经营过程中发挥着巨大的作用,单靠人工进行管理已经无法满足企业的发展需求。...那么具体的,Struts在Web开发中是封装什么的呢。 Web程序中,前端发送请求给后端,后端返回数据给前端。...我们可以有两种方式: 1)第一个就是普通的前端form表格(或者用AJAX)提交action 到相应url ,后台的url文件,通过Severlet的requset获取前端提交的数据,response向前台输出数据...这里我们看到,后台不需要写request来获取前端传过来的值,因为我们有了set访问器,通过Struts自动传了值,简化了代码   一个最简单的Struts框架就搭建了。   ...之后会详解AJAX。Ajax也是想后端发送post和get请求,所以struts的作用仍然有,只是没有标签的情况下,作用少了一点。

    1.3K90

    Vue:使用webpack搭建MOCK服务器

    在获取数据的和过程中,有很多方法。...把数据写入Vue中无疑是最蠢的,最后的方法便是留下一个接口,通过这个接口进行ajax获取数据,项目上线时只需要改变接口的url就好了,因此这里介绍一种使用webpack搭建mock服务器方法。...我把数据挂载到DATA后面,避免和前端的路由冲突。 数据部分,我直接写死了,用require进行加载。当然你完全可以用moogosse等数据库。最后记得导出 使用中间件及POST获取data主题 ?...注意,在express3以后,它精简了许多中间件作为第三方,使得它本身体积变得轻巧。因此想要获取前端通过POST提交的数据需要使用bodyParser这个中间件。 ?...body-parser使用.png 使用 这样你就能在POST方法后面通过req.body获取POST提交的数据 Vue中的数据获取 ? url.png ?

    1.6K80

    JavaWeb核心篇(6)——Ajax

    而我们在 第一步 绑定的匿名函数中通过以下代码可以获取用户名数据 // 获取用户名的值 var username = this.value; //this : 给谁绑定的事件,this就代表谁 而携带数据需要将...前后端需以 JSON 格式进行数据的传递;由于此功能是查询所有的功能,前端发送 ajax 请求不需要携带参数,而后端响应数据需以如下格式的 json 数据 环境准备 将 02-AJAX\04-资料\3...而在此案例中我们只关注前后端交互代码实现 要根据自己的数据库环境去修改连接数据库的信息,在 mybatis-config.xml 核心配置文件中修改 后端实现 在 com.itheima.web 包下创建名为...具体的前后端交互的流程如下: 说明: 前端需要将用户输入的数据提交到后端,这部分数据需要以 json 格式进行提交,数据格式如下: 后端实现 在 com.itheima.web 包下创建名为 AddServlet...username=zhangsan&age=23 ,后端就可以使用 request.getParameter() 方法获取 如果提交的数据格式是 json,后端就需要通过 request 对象获取输入流

    9.5K30

    Next.js静态页面渲染技术(静态生成和服务端渲染):BSRSSRSSG

    但请注意同构代码时需要使用前后端都存在的对象,比如window、document等客户端才有的对象就无法在服务端log出来。...如何做SSG:那么后端渲染还需要通过ajax来获取渲染内容么?也可以,axios支持服务端使用,但是这样有点傻,资源就在服务端为什么还需要绕远路请求ajax来获取一次资源呢?...因为加载数据的操作在后端,想通过 AJAX 获取 posts 显然不合适答案是: 通过 getStaticProps 获取 postsgetStaticProps 是 Next.js 提供的一个方法,会在后端执行...这就是同构 SSR 的好处,后端可以将数据直接传给前端,而不需要 AJAX 异步获取为什么不直接把数据放入 posts.js 呢?...renderToString() 在前端 hydrate()SSR的缺点:SSR无法获取客户端信息,比如浏览器大小。

    5K20

    对抗蠕虫 —— 如何让按钮不被 JS 自动点击

    在社交网络里,很多操作都是通过点击按钮发起的,例如发表留言。...实现 这个想法听起来好像不可行:如果发表留言需要带上用户行为信息,那么 XSS 完全可以伪造一份行为数据,后端根本无法识别。 除非,用户在点击按钮时会产生一个「特殊数据」,让后端校验它。...另外,通过第三方服务器发表是不算的。这里为简单,省略了登录态;真实场合下,会话 Cookie 是 HttpOnly 的,无法被 JS 获取到,也就无法让第三方服务器代替发表。...iframe 校验内部变量 S:若为 true,则将数据通过 AJAX 发送;否则放弃 服务器校验 referer:若为 iframe 的地址,则继续业务逻辑;否则放弃 iframe 收到 AJAX...并且该方案的改造成本也不是很大,后端只是增加一个 referer 判断而已;前端也只需改造个别按钮,例如发帖按钮,像点赞这种按钮就没必要保护了。 觉得本文对你有帮助?请分享给更多人。

    11.5K60

    浅谈前后端分离(下篇)

    很多公司认为采用前后端分离之后,前后端只需要通过指定API进行交互即可,前端负责页面渲染,Nodejs负责路由分配,后端提供API。...大量忽视了nodejs层的作用,仅仅把nodejs当成一个路由中转,这一方面也是对nodejs技术的不熟悉导致的,其实nodejs能负责很多事,除了复杂业务逻辑处理和数据操作由Java 负责,大量工作完全可以在...项目开发阶段,前后端分离是各自分工,协同敏捷开发,后端提供Restful API,并给出详细文档说明,前端人员进行页面渲染前台的任务是发送API请(GET,PUT,POST,DELETE等)获取数据(json...但如果本地没有开启服务器的话,不仅无法模拟线上的环境,而且还面临到了跨域的问题,因为你如果写静态的html页面,直接在文件目录下打开的话,你是无法发出ajax请求的(浏览器跨域的限制),因此,你需要在本地运行一个服务器...在我们这个项目里,我们是通过了mock来提供一些假数据,我们先规定好了API接口,设计出了一套API文档,然后我们就可以通过API文档,利用mock(http://mockjs.com)来返回一些假数据

    1.5K10

    【玩转全栈】—— Django 连接 vue3 保姆级教程,前后端分离式项目2025年4月最新!!!

    验证Token:当用户提交表单时,无论是通过POST请求还是其他非安全方法(如PUT、DELETE等),Django都会检查请求中的CSRF Token是否与存储在Cookie中的Token相匹配。...在前后端分离项目中的应用 在传统的Django项目中,模板渲染机制使得CSRF Token很容易集成进每个需要保护的表单或AJAX请求中。...然而,在前后端分离的应用场景下,前端可能是一个独立运行的Vue.js、React或其他JavaScript框架开发的应用,这种情况下,获取和使用CSRF Token需要一些额外的工作,比如通过特定的API...然而,在前后端分离的架构中: 前端和后端是独立运行的。 前端可能不会直接加载 Django 提供的页面,因此无法自动获取 CSRF Token。...运行前端 npm run dev 后端处理请求: 前端获取到 token: 有了 token 之后,前端的一系列数据就能被后端安全接收,像用户管理之类的功能就能安全得进行了。

    2.1K10

    Web端即时通讯基础知识补课:一文搞懂跨域的所有问题!

    2、什么是跨域问题 前端调用的后端接口不属于同一个域(域名或端口不同),就会产生跨域问题,也就是说你的应用访问了该应用域名或端口之外的域名或端口。 ?...而在实际开发中,前后端常常是相互分离的,并且前后端的项目部署也常常不在一个服务器内或者在一个服务器的不同端口下。前端想要获取后端的数据,就必须发起请求,如果不做一些处理,就会受到浏览器同源策略的约束。...后端可以收到请求并返回数据,但是前端无法收到数据。...如果没有同源策略 我这个恶意网站就能通过dom操作获取到用户输入的值 从而控制该账户所以同源策略是绝对必要的。...7、跨域问题解决方法3:修改应用服务器的跨域配置 根据现如今网站架构设计,可以将前端应用看作调用方使用服务,将后端应用看作被调用方提供服务。 ?

    1.1K30
    领券