写在前面:现在项目大多是采用前后端分离的模式进行开发,这种模式下的开发大大的提高了工作效率,而进行前后端数据交互传输的格式基本以json为主,毕业设计中兼顾前端开发和后端开发(后端小白一个),前端业务完成后采用模块的后端开发,既能够理清楚开发过程中的流程,同时也给自己提供一个简单的逻辑思路优化逻辑,在这个过程中,考虑后端如何传递给前端json数据。开启json旅程(个人实验过程结果,有不合适的地方可以指出

1.思想一:后端传递给前端json,直接json_encode($arr)??

贴后端代码:

  public function login(){
//判断是否赋值
if(isset($_POST['stu_number']) && isset($_POST['pwd'])){
$useAccount = $_POST['stu_number'];
$password = $_POST['pwd'];
session('stu_number',$useAccount);
} else{
$arr = array('status'=>0,'msg'=>'输入账号和密码');
return json_encode($arr);
}
//省略验证逻辑步骤
$arr = array('status'=>1,'msg'=>'验证成功');
return json_encode($arr);
}

 ※ 在浏览器端直接用接口进行访问:发现接口直接返回的是json串 ,如图1

图1 直接用接口进行访问的后端返回数据格式

※在前端请求该接口返回的数据,如图2,浏览的是webapp 返回的数据是一个字符串,利用cordova打包的apk进行访问接口时数据格式如图3;

图2 在webapp 前端获取到数据

图3 在apk端访问时获取到数据

咦,惊呆了,在webapp和打包生成的apk 同一接口返回的数据格式竟然不一样,这与我们想要的不符合,我们在webapp浏览模式下需要将后端返回的数据转换成json数据格式,代码如下:

var data = JSON.parse(response.data);//将后端返回的数据直接用方法转

 在apk端访问接口数据就不用 JSON.parse(response.data),而在hybirdapp项目中,通常是将webapp打包成apk模式,这样接口提供的数据就不统一,为打包带来繁琐的步骤;如果单纯的在webapp中,可以利用json进行需要的逻辑判断了,如果项目n多接口,n多请求,每个接口都要进行处理,未免不是一种开销,所以是比较繁琐的了。记起来自己曾经做过的一个项目,后端返回的总是字符串,鉴于是网站,始终是以web形式打开,就没细细再追究。

2:思想二,用json()进行输出【采用的方法】

后端代码:

   $arr = array('status'=>1,'msg'=>'验证成功');
return json($arr);

   通过验证:

[前后端分离项目]thinkphp返回给前端数据为字符串的更多相关文章

  1. centos7部署前后端分离项目的过程

    概述 本文主要讲解在安装了centos7的Linux主机中部署前后端分离项目的过程. 前端项目名为:vue_project:后端项目名为:django_project. 将这两个项目放在/opt/wh ...

  2. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  3. Yii框架和Vue的完美结合完成前后端分离项目

    背景说明 本文假设你对Yii和Vue都比较熟悉,至少都在项目里用过,另外笔者新人,以后不定时放一些干货,欢迎程序媛关注 Yii是一个PHP全端框架,典型的mvc的项目结构,后端接口都是一个控制器里放了 ...

  4. 使用 Nginx 部署前后端分离项目,解决跨域问题

    前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...

  5. 基于Vue的前后端分离项目实践

    一.为什么需要前后端分离 1.1什么是前后端分离  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功 ...

  6. 如何使用Spring Securiry实现前后端分离项目的登录功能

    如果不是前后端分离项目,使用SpringSecurity做登录功能会很省心,只要简单的几项配置,便可以轻松完成登录成功失败的处理,当访问需要认证的页面时,可以自动重定向到登录页面.但是前后端分离的项目 ...

  7. nginx+vue+uwsgi+django的前后端分离项目部署

    Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...

  8. Spring-Gateway与Spring-Security在前后端分离项目中的实践

    前言 网上貌似webflux这一套的SpringSecurity操作资料貌似很少. 自己研究了一波,记录下来做一点备忘,如果能帮到也在迷惑的人一点点,就更好了. 新项目是前后端分离的项目,前台vue, ...

  9. Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案

    因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...

随机推荐

  1. java/rabbitmp发布订阅示例(转)

    原文:http://www.cnblogs.com/tinmh/p/6134875.html 发布/订阅模式即生产者将消息发送给多个消费者. 下面介绍几个在发布/订阅模式中的关键概念-- 1. Exc ...

  2. CoderForces 687C The Values You Can Make (01背包,DP)

    题意:给定 n 个硬币和一个值 k,问你在用一些硬币组成面值为 k的这些硬币还能组成多少种其他面值. 析:如果这样说,由这些硬币能组成多少种不同的面值,那么是不是就很熟悉了,这不就是01背包么,这个题 ...

  3. (转)DataTable与结构不同实体类之间的转换

    原文地址:http://www.cnblogs.com/kinger906/p/3428855.html 在实际开发过程中,或者是第三方公司提供的数据表结构,与我们系统中的实体类字段不对应,遇到这样我 ...

  4. Mysql自动设置时间(自动获取时间,填充时间)

    应用场景: 1.在数据表中,要记录每条数据是什么时候创建的,不需要应用程序去特意记录,而由数据数据库获取当前时间自动记录创建时间: 2.在数据库中,要记录每条数据是什么时候修改的,不需要应用程序去特意 ...

  5. ViewResolver 视图解析器

    pringMVC 视图解析器 前言 在前一篇博客中讲了 SpringMVC 的Controller 控制器,在这篇博客中将接着介绍一下 SpringMVC 视图解析器.当我们对SpringMVC控制的 ...

  6. C++语言运算符的功能、优先级和结合性

    优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数名(形参表)   . 成员选择(对象) 对象.成员名   -& ...

  7. Linux基础实验(一)

    一)基础实验:1. Unix中常见shell及其命令(shell的缩写)    Bourne shell (sh)      Korn shell (ksh)    C shell (csh)     ...

  8. “全栈2019”Java第二十六章:流程控制语句中循环语句do-while

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. 新建MAVEN项目--pom.xml报错

    使用集成了maven的Eclipse版本新建maven项目后,配置文件pom.xml会在project以及引用的xsd文件处出现错误(第一.二行报错) 其中一个报错例子: Multiple annot ...

  10. jquer 使用原生DOM对象

    js中使document.getElementById("ID"); Jquery中可以使用$("#id") 或者$("#id").get( ...