浅析前后端对接问题

浅析前后端对接问题

一、JSON

概念：
JavaScript Object Notation :JavaScript对象表示法(早期：在JavaScript中，用json来表示对象)

例：var p = {“name”:“张三”,“age”:“23”,“gender”:“男”};

JSON 通常用于与服务端交换数据,在接收服务器数据时一般是字符串,我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法：
数据在名称/值对中：json数据是由键值对构成的键用引号(单双都行)引起来，也可以不使用引号。
值的取值类型：

1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（true 或 false）
4. 数组（在方括号中） {“persons”:[{},{}]}（可以内含多个person）
5. 对象（在花括号中） {“address”:{“province”：“陕西”…}}
6. 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

声明：部分资料源自网络，如有侵权，请联系我删除！
文中如存在谬误、混淆等不足，欢迎批评指正！