ajax渲染的页面tp怎么赋值,【Vue】前后端不分离的情况下，TP5的视图页面中如何使用vue来接受和传递数据？...
在项目中遇到的一个情况，在做后台管理的时候，前后端没有做分离，如果做分离，成本太大，视图层使用了vuejs，请问如何在vuejs中接收和传递控制器传过来的数据？格式是怎么样的？请尽可能地提供一份控制器和视图层的样式代码，非常感谢！！！
回答
方法1: 直接赋值
控制器:
$this->assign([
'name' =>'tp',
'email'=>'[email protected]',
'array' => json_encode(array('a', 'b'))
]);
视图
var app = new Vue({
el: "#app",
data: {
name: '{$siteName}',
email: '{$email}',
array: {$array}
}
})
方法2: 使用ajax获取数据
完整视图test.html:
Document
var app = new Vue({
el: "#app",
data: {
name: '',
email: '',
array: null
},
methods: {
getData: function() {
var vm = this;
axios.get('/index.php?s=index/index/getData',{
params:{
name: 'tp',
email: '[email protected]',
array: ['a', 'b']
}
})
.then(function (response) {
var data = response.data;
vm.name = data['name'];
vm.email = data['email'];
vm.array = data['array'];
})
.catch(function (error) {
console.log(error);
});
}
},
mounted: function() {
this.getData();
}
});
完整控制器Index.php:
namespace app\index\controller;
use think\Controller;
use think\Request;
class Index extends Controller
{
public function test()
{
return $this->fetch('test');
}
public function getData(Request $request)
{
$arr = [
'name' =>$_GET['name'],
'email'=>$_GET['email'],
'array' => $_GET['array']
];
return json($arr);
}
}
文件位置自己调整一下，推荐使用第二种方法，将来去耦合的时候，改动没有那么大
ajax渲染的页面tp怎么赋值,【Vue】前后端不分离的情况下，TP5的视图页面中如何使用vue来接受和传递数据？...相关推荐
- Springboot Vue 前后端先分离后结合，闻名已久，今日实战
关于SpringBoot + Vue,这里列出一个基本的项目实例. 源码:https://github.com/slhuang520/study/tree/master/spring-boot-vue ...
- Vue前后端页面下载功能实现演示，Python+flask提供后台下载服务
Vue前后端页面下载功能实现 效果图 后台下载服务实现 前台简单实现 [ 文章推荐 ] Python 地图篇 - 使用 pyecharts 绘制世界地图.中国地图.省级地图.市级地图实例详解 效果图 ...
- Spring Boot + Vue 前后端分离
前后端分离 Spring Booot + Vue 开发单页面应用 前言 需求: 最近本人在学习SpringBoot,希望自己能搭一个简单的Demo应用出来,但是搭到前端的时候遇到了困惑,因为网 ...
- Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
- React / Vue 前后端分离项目实现微信分享教程
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 网上非常多的微信分享例 ...
- Vue 前后端交互基础
1.1 了解前后端分离 1.1.1 前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高.这种应 ...
- 适合新手拿来练习的springboot+vue前后端分离小Demo
前言: 作者:神的孩子在歌唱 大家好,我叫智 练习springboot+vue前后端分离的Demo 一. 设计数据库 二 . springboot项目创建 2.1 基本配置 2.2 创建dao层 三. ...
- SpringBoot+Vue前后端分离的三只松鼠商城实现毕业设计论文
题目名称 基于SpringBoot的B2C三只松鼠 电商平台 学 院 理工农学院 专业年级 软件工程2018级 填写时间 2021年10月19日 目 录 错误!未找到图形项目表. 基于SpringBo ...
- 电脑端京东的我的订单html+css页面_互联网系统架构前后端分离技术体系
点击「京东数科技术说」可快速关注 「摘要」随着互联网技术的发展以及终端设备的不断增多,前后端分离技术已成为移动互联网领域不可或缺的技术.前后端分离技术的不断完善,让前后端的分工与系统边界划分越来越清晰 ...
最新文章
- 增量式爬虫与分布式爬虫
- Eclipse远程调试HDP源代码
- 权限操作-springSecurity快速入门
- 不要笑！写 | 还是 || ，还真是一个问题
- 如何发布.Net MVC 网站项目（攻略集锦）
- Opencv--addWeighted()
- 朴素贝叶斯与垃圾邮件分类
- ubuntu 开启dhcp服务并配置
- String 类 的 使用
- Gitlab-IDEA使用教程
- 新 IT 框架概述和双态 IT
- 服务器ip总是被封，怎么办？
- 计算机初学者先学什么语言,计算机语言入门先学什么？
- c++简单复数计算器
- linux主进程退出时，结束子进程
- 基于opencv的图像阴影消除车辆变道检测
- python定义整数_Python | 程序定义一个整数值并打印
- 【数据结构】广义表的基本概念
- 【微信小程序】04-公共文件引入
- 技术硬实力+服务软实力，声网助力出海企业破解水土不服难题