浅析前后端对接问题
一、JSON
概念:
JavaScript Object Notation
:JavaScript对象表示法(早期:在JavaScript中,用json来表示对象)
例:var p = {“name”:“张三”,“age”:“23”,“gender”:“男”};
JSON 通常用于与服务端交换数据,在接收服务器数据时一般是字符串,我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法:
数据在名称/值对中:json数据是由键值对构成的键用引号(单双都行)引起来,也可以不使用引号。
值的取值类型:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中) {“persons”:[{},{}]}(可以内含多个person)
- 对象(在花括号中) {“address”:{“province”:“陕西”…}}
- null
注意:
数据由逗号分隔:多个键值对由逗号分隔
花括号保存对象:使用{}定义json 格式
方括号保存数组:[]
原文链接:https://blog.csdn.net/weixin_46008168/article/details/106314239
二、AJAX
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
概念: ajax使网页异步刷新,在不重新加载整个页面时,对网页的局部进行刷新。
Ajax属性:cache、processData、contentType
① cache
:缓存
当发起一次请求后,会把获得的结果以缓存的形式进行存储,当再次发起请求时,如果 cache 的值是 true ,那么会直接从缓存中读取,而不是再次发起一个请求了。
从 cache 的工作原理可以得出,cache 的作用一般只在 get 请求中使用。
② processData
:处理数据
默认情况下,processData 的值是 true,其代表以对象的形式上传的数据都会被转换为字符串的形式上传。而当上传文件的时候,则不需要把其转换为字符串,因此要改成false。
③ contentType
:发送数据的格式
和 contentType 有个类似的属性是 dataType , 代表的是期望从后端收到的数据的格式,一般会有 json 、text……等,而 contentType 则是与 dataType 相对应的,其代表的是 前端发送数据的格式
默认值:application/x-www-form-urlencoded
代表的是 ajax 的 data 是以字符串的形式 如 id=2019&password=123456
使用这种传数据的格式,无法传输复杂的数据,比如多维数组、文件等
有时候要注意,自己所传输的数据格式和ajax的contentType格式是否一致,如果不一致就要想办法对数据进行转换,把contentType 改成 false 就会改掉之前默认的数据格式,在上传文件时就不会报错了。
原文链接:https://blog.csdn.net/qq_41564928/article/details/90580375
参数介绍:
$.ajax( [settings] );
//参数 settings 是$.ajax ( )方法的参数列表,用于配置 Ajax 请求的键值对集合;
基于jQuery的Ajax封装
$.ajax({
type:'GET', //请求的类型,GET、POST等
url:'www.baidu.com', //向服务器请求的地址。
contentType:'application/json', //向服务器发送内容的类型,默认值是:application/x-www-form-urlencoded
dataType:'JSON', //预期服务器响应类型
async:true, //默认值是true,表示请求是异步的,false是同步请求,同步请求会阻碍浏览器的其他操作(不建议使用)
timeout:'5000', //设置本地的请求超时时间(单位是毫秒)
cache:true, //设置浏览器是否缓存请求的页面
success:function(result,status,XMLHttpRequest){
//请求成功是执行的函数,result:服务器返回的数据, status:服务器返回的状态,
},
error:function(xhr,status,error){
//请求失败是执行的函数
},
complete:function(xhr,status){
//不管请求失败还是请求成功,都执行的函数
}
})
代码中的参数说明也可见下文链接:
原文链接:https://blog.csdn.net/qq_32325367/article/details/52291889
应用示例:
注意:$.ajax()方法的参数语法比较特殊。参数列表需要包含在一对花括号“{ }”之间,每个参数以以"参数名“ :"参数值“ 的方式书写;如有多个参数,以逗号“,”隔开;
function addmovie(){
var inputvalue = document.getElementById("inputmovie").value;//获取input框的内容
console.log(inputvalue);//打印查看
$.ajax({
method: 'POST',//请求方式
processData: false,
url: '/api/movie/add',// 请求路径
contentType: "application/json;charset=UTF-8",
dataType:"json",//设置接受到的响应数据的格式
data:JSON.stringify({
//请求参数
name:inputvalue,
}),
success(res) {
try {
if(res.code==200)
{
movielist();
}
}catch(e) {
console.log(e)
}
},//响应成功后的回调函数
error(e) {
console.log('xhr error code is ' + e)
}//表示如果请求响应出现错误,会执行的回调函数
})
}
分析:上面的代码,它与原生 JavaScript 实现 Ajax 相比要简洁清晰很多,只需设置几个参数即可。其中, success 函数用来处理晌应,相当于原生 JavaScript 实现Ajax 时,回调数中晌应成功的分支;error 函数则相当于错误分支,在该函数中执行程序出错后的操作,如给出示信息等。另外,需要注意的是,不需要特别设定的参数可以省略;
三、MD5
MD5(单向散列算法) 的全称是Message-Digest Algorithm 5(信息-摘要算法),经MD2、MD3和MD4发展而来。
应用环境:
在传输卡号、密码等敏感私密信息时,使用get方法很容易将密码用户名这些暴露再在rl中,post方法又容易在控制台查找到数据信息,所以使用MD5方式对密码加密。
功能:
输入任意长度的信息,经过处理,输出为128位的信息(数字指纹);
不同的输入得到的不同的结果(唯一性);
根据128位的输出结果不可能反推出输入的信息(不可逆);
引入js:
<script src="js/md5.js" type="text/javascript"></script>
常用函数:
hex_md5(value)
b64_md5(value)
str_md5(value)
hex_hmac_md5(key, data)
b64_hmac_md5(key, data)
str_hmac_md5(key, data)
示例:
var password="hello";
var md5password = hex_md5(password);
四、cookie
浏览器暂时存储一些数据的东西,存放在你的电脑上(上次访问时间、登录的时候,需要保存用户名,然后在登录之后的首页显示“欢迎,用户名!”等数据)
引入js:
<script src="cookie.js"></script>
使用示例:
Cookies.set("username",username);//设置cookie
Cookies.remove("username");//删除cookie
Cookies.get('name');//获取cookie
五、JQuery封装
概念:
jQuery = javaScript + Query 通过js代码实现对页面元素的快速查询
在它内部封装了JavaScript功能代码,优化HTML文档处理、事件处理和AjAX交互。
注意:
jquery本身就是一个JavaScript函数库,所以可以直接在js文件中写jquery代码,jquery的使用需要引用官方的jquery.js文件。(独立的js文件不需要引用任何jquery.js文件,只需要在相应的html网页中引用jquery.js和.js文件,jquery文件引用必须在.js文件之前。)
引入js:
<script src="./js/lib/jquery-3.4.1.js"></script>
相关语法可见下文链接:
原文链接:https://blog.csdn.net/qq_34477549/article/details/52821889
六、前端请求参数的形式
GET
和POST
两种方式
GET从指定的服务器中获取数据,POST提交数据给指定的服务器处理
GET方法的话,是将data里的参数拼接在url,POST方法的话是将data转成json发送过去
七、关于跨域问题的解决
什么是跨域问题?
浏览器的同源策略拒绝了我们的请求。 所谓同源是指,域名,协议,端口相同,浏览器执行一个脚本时同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报上面的异常,提示拒绝访问。这是为了同一浏览器打开多个网站时,保护你的A网站登陆信息不被B网站拿去访问A网站,B网站登陆信息同理。
比如:前端项目在本地运行后的地址为http://localhost:8080/,此时要访问后端接口http://192.168.123.43:8000/api/xxx/xxx,就会遇到跨域问题不能访问。
同源策略:https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
# 同源的例子
http://example.com/app1/index.html # 只是路径不同
http://example.com/app2/index.html
http://Example.com:80 # 只是大小写差异
http://example.com
# 不同源的例子
http://example.com/app1 # 协议不同
https://example.com/app2
http://example.com # host 不同
http://www.example.com
http://myapp.example.com
http://example.com # 端口不同
http://example.com:8080
怎么解决跨域问题?
使用nginx解决
nginx:
反向代理:其实客户端对代理是无感知的,因为客户端不需要任何配置就可以访问,我们只需要将请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取数据后,在返回给客户端,此时反向代理服务器和目标服务器对外就是一个服务器,暴露的是代理服务器地址,隐藏了真实服务器IP地址。
反向代理和正向代理的区别就是:正向代理代理客户端,反向代理代理服务器。
原文:https://www.cnblogs.com/ysocean/p/9392908.html#_label0
nginx指令:
start nginx #启动
nginx -s reload #重新加载Nginx配置文件,然后以优雅的方式重启Nginx
nginx -s stop #强制停止Nginx服务
八、如何将后端返回给我们的json数据填充到我们的页面中
方法:使用模板引擎
模板引擎
模板引擎是第三方模块。
让开发者以更加友好的方式拼接字符串,使项目代码更加清晰、更加易于维护。
art-template模板引擎
一、模板语法
标准语法:容易读写。
{
{
if user}}
<h2>{
{
user.name}}</h2>
{
{
/if}}
原始语法:有强大的逻辑处理能力。
<% if (user) {
%>
<h2><%= user.name %></h2>
<% } %>
二、安装
在命令行工具中使用 npm install art-templaet命令进行下载
三、使用方法
1.引入模板引擎
<script src="template-web.js"></script>
2.在html中创建模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<!-- 创建script标签创建模板 -->
<!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" -->
<!-- 2. 给 script 标签添加 id ,此 id 即为模板 id (也就是moviescript)-->
<!-- 3. leval_1是对象,index-1是下标(也可用$value代替) -->
<script id="moviescript" type="text/html">
{
{
each shuffling leval_1 index_1}}
<h1>{
{
leval_1.name}}</h1>
{
{
/each}}
</script>
</div>
</body>
</html>
<!-- 引入模板引擎 -->
<!-- 注意:JS由于是解释型语言,是从上到下的顺序执行的,所以对于JS代码的引入一定要按照顺序,否则会报错
(后面的可能包含前面的,所以报错) -->
<script src="template-web.js"></script>
<script src="index.js"></script>
3.创建template()方法
//数据内容
var mydata =[
{
name:'哈利波特',
},
{
name:'匆匆那年',
},
{
name:'哪吒',
},
{
name:'漫威',
},
]
//获取html中需要被渲染的div盒子
var movieget = document.querySelector('.box');
//在控制台中打印相关信息
console.log(movieget);
// 基于模板名渲染模板,template(filename/id, data);
//data即为后端传送过来的data主要渲染的信息,shuffling为index.html页面语法的变量名
var moviexuanran = template('moviescript',{
//第一种
shuffling:mydata,
//第二种:存放mydata.js里的json内容
shuffling:[{
……}],
})
//在定位的div盒子里innerHTML渲染的信息(写入)
movieget.innerHTML = moviexuanran;
四、语法
以下用标准语法(支持基本模板以及基本js表达式)举例
1.输出
{
{
value}}
{
{
data.key}}
{
{
data['key']}}
{
{
a ? b : c}}
{
{
a || b}}
{
{
a + b}}
2.原文输出
{
{
@ value}}
3.条件输出
<!-- 单 if 判断 -->
{
{
if value}}
...
{
{
/if}}
<!-- if ... else ... 判断 -->
{
{
if v1}}
...
{
{
else if v2}}
...
{
{
/if}}
4.遍历
{
{
each target}}
{
{
$index}} {
{
$value}}
{
{
/each}}
注:target
是一个数组,each
用于对数组遍历,$index
是数组的下标, $value
是数组的值
5.子模版
使用子模版可以将网站公共区块(头部、底部)抽离到单独的文件中。
{
{include '模板'}}
{
{include './header.art'}}
{
{include './header.art' data}}
6.模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件。
{
{extend './layout.html'}}
{
{block 'head'}}
...
{
{/block}}
原文:https://www.jianshu.com/p/d8d8e19157e0
声明:部分资料源自网络,如有侵权,请联系我删除!
文中如存在谬误、混淆等不足,欢迎批评指正!