基于CodeIgniter&Vue-cli构建前后端分离

下载并安装 CodeIgniter (只负责提供接口)

安装成功运行CI

这是正常CI给的初始页面,CI让我们更改welcome_message文件更换视图,具体方法在controllers/welcome中,但是我们并不需要,因为视图层会用vue,先吧控制器方法做写更改

原文件

更改原控制器welcome
/controllers/welcome/index方法  移除加载视图代码
        $result=array(
            'user'=>'admin',
            'pass'=>123456,
            'u_id'=>753951
        );
        $data=array(
            'code'=>200,
            'msg'=>'请求成功',
            'data'=>$result
        );
        echo json_encode($data);
重新访问CI

更改后CI只负责返回数据

到此CI部分告一段落 开始构建vue

安装vue-cli并初始化项目

cnpm install webpack ci_vue

安装目录为CI根目录下

初始化项目完成-安装好依赖-并成功启动

初始化项目完成-安装好依赖-并成功启动

通过axios请求CI中写好的接口

安装axios

cnpm install axios --save-dev

项目中引入axios 修改文件main.js

import Axios from 'axios'
//配置全局
Vue.prototype.axios=Axios

在组件中使用 修改文件components/HelloWorld.vue

注释部分为ES5写法,需要在修改data的时候提前存入this 而用es6箭头函数则不需要
html部分 在页面最下面添加
<div><button @click="getPhpData">getData</button></div>
<ul>
  <li>u_name:<span>{{user_info.user}}</span></li>
  <li>u_pass:<span>{{user_info.pass}}</span></li>
  <li>u_id:<span>{{user_info.u_id}}</span></li>
</ul>

js部分  初始data数据,添加方法getPhpData
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      user_info:{}
    }
  },
  methods:{
    getPhpData:function(){
      //es5
      // var this_=this
      // this.axios.get('http://localhost').then(function(res){
      //   if(res.data.code==200){
      //     this_.user_info=res.data.data
      //   }
      // }).catch(function(err){
      //   console.log(err)
      // })

      //es6
      this.axios.post('http://localhost').then(res=>{
        if(res.data.code==200){
          this.user_info=res.data.data
        }
      }).catch(err=>{console.log(err)})
    }
  }
}

现在打开vue页面 点button请求,没有数据返回,打开控制台

跨域

在CI中设置跨域 welcome.php

在页头添加:指定访问,也可以设置为*或者多设置几个访问链接
header('Access-Control-Allow-Origin:http://localhost:8080');

在Vue页面中重新点击button请求

请求前

请求成功

收工

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术碎碎念

Http请求与响应

Http协议对浏览器发出的Request格式以及对Web服务器发出的Response格式有具体的规定。 请求部分由三部分组成: Requset line:请求...

2756
来自专栏Django中文社区

简单全文搜索

搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 Django Model 层提供的一些内置方法来完成。现在我们来为我们的博客提供一个简单的搜索功能...

4586
来自专栏狂码一生

linux系统挂载磁盘、卸载磁盘、磁盘分区

一、挂载磁盘     1.查看磁盘列表、查看是否有硬盘未被挂载:     >fdisk -l ?     可以看到/dev/sdb硬盘没有被挂载。     2....

1.5K9
来自专栏Jerry的SAP技术分享

如何创建一个新浪微博应用以及获得Access token

打开网页http://open.weibo.com/wiki/%E9%A6%96%E9%A1%B5

1594
来自专栏python3

python调用ip查询接口

cat access_201711160430.log | awk '{print $1}' | sort| uniq -u >> 2.txt

1864
来自专栏Hongten

博客园_插入代码(推荐)_按钮功能实现_代码高亮显示

=============================================================

1952
来自专栏IMWeb前端团队

Nodejs进阶:Express常用中间件body-parser实现解析

写在前面 body-parser是非常常用的一个express中间件,作用是对post请求的请求体进行解析。使用非常简单,以下两行代码已经覆盖了大部分的使用场景...

30210
来自专栏练小习的专栏

条件注释

下面是条件注释的语法 gt /Greater than/大于/<!--[if gt IE 5.5]> gte /Greater than or equal t...

18910
来自专栏全华班

“码码”再也不用担心我的代码被反编译了!

自己辛辛苦苦写出来的代码,被别人无情的反编译了怎么办? ? 一、背景 Java是一种跨平台的、解释型语言,Java源代码编译成中间“字节码”存储...

7026
来自专栏大数据杂谈

Windows下python2和3共存问题

在学习python的过程中,有人推荐2,也有人推荐3。但是,不管选择了哪一个版本,总是想着是否能2个版本同时安装并兼容使用呢? 真的可以吗? 答案是肯定的,完全...

2209

扫码关注云+社区

领取腾讯云代金券