vue实现数据的绑定以及如何进行和后台php就行数据的交互

最新推荐文章于 2024-10-05 20:06:07 发布
最新推荐文章于 2024-10-05 20:06:07 发布
阅读量5.1k 收藏 7
点赞数 2
分类专栏： 第一次 文章标签： 第一次
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40593587/article/details/79179769
版权

用vue实现登录的简单的页面

对了，我这个是直接下载了vue.min.js和vue-resource.min.js这两个文件到我自己的框架上面，你们也可以直接引用线上的

代码如下所示：

<style>
    body{
        background-color: #92d2af;
    }
</style>
<h2 align="center">登录系统</h2>
<body id="app">
<div align="center" class="ab">
        <p>
            用户名： <input type="text" v-model="zhanghao" placeholder="输入用户名">
        </p>
        <p>密码&nbsp;：<input type="password" v-model="mima" placeholder="输入密码"> </p>

<!--            <input type="reset" value="重置">-->
<!--            <button @click="register">重置</button>-->
            <button  @click="login">登录</button>


</div>
    <script>
        Vue.http.options.emulateJSON = true;//这个的设置了提交的方式的是post的方式提交
        var vue=new Vue({//这个是实现对数据的绑定
            el:'#app',
            data:{
                zhanghao:"",
                mima:""
            },
            methods:{
                login:function () {
                    //console.log("你好！");

                    this.$http.post("/application/huoqu", {//这里是将表单的数据提交到该地址
                        zhanghao:this.zhanghao,//我将表单的两个文本传过去
                        mima:this.mima
                    }).then(function (data) {//这个是获取到了刚传过去文件该文件的整个数据

                        if(data.body.results)//如果返回的数据的值是true那么久说明登录成功
                        {//获取传过去文件的返回值，如果是为true的话就跳转到登录成功的页面
                            console.log(data.body.results);
                            window.location.href="/application/bbb";
                        }
                        //console.log(data.body.result);
                            //window.location.href="/application/aaa";
                        else{//反之则跳转到失败的页面
                            console.log(data.body.results);
                           window.location.href="/application/aaa";
                        }
                    })

                }
            }
        })
    </script>
<h5 align="center"><a href="http://zf11.com/application/sign">返回注册</a> </h5>
</body>
--------------------------------------------------------------------------------------------
对于后台,我是通过php的zf框架写的，所以可能会有所不同，但是在其他应该也是这样的思路：
return new JsonModel(array('results'=>false));
这样，在前台能获取到我的results的值

 

 



 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  后端切图仔
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
实战：vue上传图片给PHP后台全过程（账户注册模块）

				
			

			

				

					qq_38086247的博客
				

				

					08-31
					
					7453
					
				

			

		

		

			
				

  注册窗口是用到的技术栈：前端vue、element，传输：axios 后台php 
  效果图： 
   
  本次开发主要的难点是注册时的图片上传，所以技术总价大部分关于图片上传的内容




上传逻辑思想




核心坑点1 
前台图片显示是用现成组件：img-inputer（可以用npm直接安装在vue项目中）连接：https://github.com/waynecz/vue-img-...

			
		

	



                

            
              



	

		

			

				
					
微擎vue对接php_vue + ajax + php 接口的使用小接

				
			

			

				

					weixin_39697660的博客
				

				

					12-20
					
					420
					
				

			

		

		

			
				
vue + ajax + php 接口的使用小接前端代码： (获取用户信息，并渲染页面)userinfor.html用户信息{{item.userName}}  {{item.userTel}}new Vue({el: '#app',data: {userList: []},created: function () {var that = this;$.ajax({type : "POST",ur...

			
		

	



              


  
              

                


	

		

			

				
					
vue 获取php后台数据,vue导航菜单调用PHP后台数据

				
			

			

				

					weixin_29530803的博客
				

				

					04-02
					
					1009
					
				

			

		

		

			
				
数据库设计：  后台PHP输出所有菜单数据(index.php)：header("Access-Control-Allow-Origin:*");header("Content-type:text/json;charset=utf-8");error_reporting(0);require_once ("database.php");$sql = "select * from v_menu";$...

			
		

	





	

		

			

				
					
基于PHP+Vue的考研互助系统设计(源码+论文+PPT+部署文档教程等)

					
最新发布

				
			

			

				

					全网粉丝10W+、全栈领域优质创作者、掘金、阿里云等社区博客专家、专注于全栈领域和毕业项目实战
				

				

					10-05
					
					800
					
				

			

		

		

			
				
当游客打开系统的网址后，首先看到的就是首页界面。在这里，游客能够看到系统首页、院系信息、备考经验、资料类型、课程资料、考研政策、考研论坛、往届试题、个人中心。系统首页界面如图5-1所示：图5-1系统首页界面在注册流程中，用户在Vue前端填写必要信息（如用户名、密码等）并提交。前端将这些信息通过HTTP请求发送到php后端。后端处理这些信息，检查用户名是否唯一，并将新用户数据存入MySQL数据库。完成后，后端向前端发送注册成功的确认，前端随后通知用户完成注册。这个过程实现了新用户的数据收集、验证和存储。

			
		

	



		

			
		



	

		

			

				
					
vueaxiso表单数据如何与php交互,vue结合axios与后端进行ajax交互的方法

				
			

			

				

					weixin_35982453的博客
				

				

					04-01
					
					124
					
				

			

		

		

			
				
以前vue官方推荐的ajax库是vue-resource,现在改为axios实现的效果：页面异步发出get请求获取数据，提交表单异步post数据到服务端客户端代码解析：获取服务端返回的数据vm.$data.list = response.data;}).catch(function (error) {console.log(error);});}}});axios.get(url,{}).then...

			
		

	





	

		

			

				
					
Vue.js连接php调用数据

				
			

			

				

					qq_34227291的博客
				

				

					10-13
					
					9972
					
				

			

		

		

			
				
Vue.js连接php调用数据php步骤如下：vue.js步骤如下：
以下是我的学习总结，我尽量说的详细一些，部分步骤较多，可能会所有省略。

需要软件工具：

安装Vue.js: 是一套用于构建用户界面的渐进式框架
安装Xampp:（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包

思路示意图：





php步骤如下：
测试包/工具：
备注：如需要文件请留言

一...

			
		

	





	

		

			

				
					
vue.js过滤器+ajax实现事件监听及后台php数据交互实例

				
			

			

				

					10-18
				

			

		

		

			
				
本文将结合实例详细说明如何利用Vue.js的过滤器和ajax实现事件监听以及与后台PHP数据进行交互。  ### Vue.js过滤器的使用  Vue.js中的过滤器（Filter）可以用于对数据进行格式化，它们可以用在两个地方：双花括号...

			
		

	





	

		

			

				
					
基于ThinkPHP6和Vue2的极简后台管理系统源码.zip

				
			

			

				

					05-19
				

			

		

		

			
				
Vue2的异步数据请求库Axios，通常被用于与ThinkPHP6的API接口进行通信，实现前后端的数据交互。  权限管理是后台系统不可或缺的一部分。ThinkPHP6自带的角色权限（RBAC）机制，可以轻松实现用户角色的划分以及不同...

			
		

	





	

		

			

				
					
基于Vue的后台管理系统模板

				
			

			

				

					02-18
				

			

		

		

			
				
2. **双向数据绑定**：Vue的数据模型采用MVVM模式，通过`v-model`指令实现视图和模型间的双向绑定，使得数据变化能实时反映到界面。 3. **组件化**：Vue的组件系统是其强大之处，允许开发者创建可复用的UI部件，通过...

			
		

	





	

		

			

				
					
VUE2.x+elementUI实现后台管理系统

				
			

			

				

					07-11
				

			

		

		

			
				
这个系统通常会结合后端PHP框架，如Laravel或ThinkPHP，来处理数据和实现权限控制。以下是相关知识点的详细说明：  1. **Vue.js 2.x**：Vue.js 是一个轻量级的前端JavaScript框架，它采用组件化开发，易于理解和维护...

			
		

	





	

		

			

				
					
vue表格数据查询

				
			

			

				

					06-01
				

			

		

		

			
				
Vue.js 是一款流行的轻量...总结来说，"vue表格数据查询"涉及Vue.js的数据绑定、组件化、响应式更新，以及利用JavaScript和Ajax进行数据交互。通过学习和实践这些知识点，开发者可以创建出具有动态查询功能的表格应用。

			
		

	





	

		

			

				
					
vuex获取php数据,vuex的数据渲染与修改浅析

				
			

			

				

					weixin_35968185的博客
				

				

					04-08
					
					149
					
				

			

		

		

			
				
今天带来vuex的数据渲染与修改浅析教程详解1.vuex是什么？用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是”你想要在不同的组件中使用同一份数据，并且在不同的组件中都可以实时修改它并且这份数据保持同步“。2.如何使用state中的数据在你创建好st...

			
		

	





	

		

			

				
					
vue从php获取初始值,Vue 同步异步存值取值实现案例

				
			

			

				

					weixin_36118049的博客
				

				

					03-27
					
					277
					
				

			

		

		

			
				
1.vue中各个组件之间传值1.父子组件父组件–>子组件，通过子组件的自定义属性：props子组件–>父组件，通过自定义事件：this.emit(′事件名′,参数1,参数2,...);2.非父子组件或父子组件通过数据总数Bus，this.root.$emit(‘事件名',参数1,参数2,…)3.非父子组件或父子组件更好的方式是在vue中使用vuex方法1: 用组件之间通讯。这样写很麻烦...

			
		

	





	

		

			

				
					
vue实现php传数据,vue组件之间相互传递数据的实现方法（代码）

				
			

			

				

					weixin_39716521的博客
				

				

					03-26
					
					214
					
				

			

		

		

			
				
本篇文章给大家带来的内容是关于php协成实现的详解(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、子组件给父组件传递数据父组件：{{total}}Vue.component('son-component',{template:'子组件：{{total}}+{{num}}={{add}}',props:{total:Number},data(){return {num:...

			
		

	





	

		

			

				
					
vue接收php数据,php怎么返回数据给vue

				
			

			

				

					weixin_39548606的博客
				

				

					03-11
					
					185
					
				

			

		

		

			
				
php怎么返回数据给vue1、首先vue发起网络请求可以使用axios库推荐学习：Vue框架视频教程1)安装axiosnpm install axios --save2)Vue使用axiosimport axios from "axios";//将$axios挂在原型上，以便在实例中能用 this.$axios能够拿到Vue.prototype.$axios = axios;3)发起get请求th...

			
		

	





	

		

			

				
					
vue如何接受php返回的数据,php怎么返回数据给vue

				
			

			

				

					weixin_32803887的博客
				

				

					03-12
					
					503
					
				

			

		

		

			
				
php怎么返回数据给vue1、首先vue发起网络请求可以使用axios库1)安装axiosnpm install axios --save2)Vue使用axiosimport axios from "axios";//将$axios挂在原型上，以便在实例中能用 this.$axios能够拿到Vue.prototype.$axios = axios;3)发起get请求this.$axios.get(...

			
		

	





	

		

			

				
					
php接收vue表单数据,关于vue.js前后端数据交互之提交数据的操作

				
			

			

				

					weixin_33603397的博客
				

				

					03-29
					
					542
					
				

			

		

		

			
				
这篇文章主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下本文实例讲述了vue.js前后端数据交互之提交数据操作。分享给大家供大家参考，具体如下：前端小白刚开始做页面的时候，我们的前端页面中经常会用到表单，所以学会提交表单也是一个基本技能，其实用ajax就能实现，...

			
		

	





	

		

			

				
					
vue给php传值,Vue常用的三种传值方式

				
			

			

				

					weixin_30061835的博客
				

				

					03-10
					
					597
					
				

			

		

		

			
				
这篇文章给大家分享的内容是关于Vue常用的三种传值方式，有一定的参考价值，有需要的朋友可以参考一下。父组件向子组件进行传值：父组件：父组件:import child from './child'export default {components: {child},data () {return {name: ''}}}子组件：子组件:{{inputName}}export default {//...

			
		

	





	

		

			

				
					
vue的三种axios请求，后端接口为php

				
			

			

				

					taotie_的博客
				

				

					10-25
					
					2216
					
				

			

		

		

			
				
1、后端的接口

//上传文件
public function upload_file()
{
    header('Access-Control-Allow-Origin:*');
    $file = request()->file('file');
    $path='D:\phpEnv\www\swoole_test\public\uploads';
    $info = $...

			
		

	





	

		

			

				
					
PHP+Vue打造旧书交易小程序高效后台源码

				
			

			

				

					
				

			

		

		

			
				
开发者需要掌握Vue的基础概念，如数据绑定、组件通信、指令、插槽和生命周期钩子，以及如何通过Vue.js进行单页应用（SPA）的构建。  - **小程序开发**：虽然没有直接提及，但基于“旧书交易小程序”的描述，源码应...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值