从零开始的vue后台管理-连接数据库

首先现在vue项目里面找到config这个文件，配置里面的index.js

然后再配置生产环境的参数，也就是dev.env.js

最后在prod.env.js里面配置

给config/index.js里面的内容做个注释

我在src里面创建了一个文件夹axios，api.js是我封装axios方法的文件，globalData.js是存放后台接口的文件。

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以vue官方也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。

globalData.js

然后是最重要的引用（important）

import api from '@/axios/api.js'

import gd from '@/axios/globalData.js'

config/index里面host: 'localhost', 需要注意，否则运行会underfind

使用vue.js与后台实现数据交互的方法是利用vue-resource组件提供的一系列api：

get(url, [data], [success], [options])

post(url, [data], [success], [options])

put(url, [data], [success], [options])

patch(url, [data], [success], [options])

delete(url, [data], [success], [options])

jsonp(url, [data], [success], [options])

具体举例如下：

1、导入vue-resource

<script src="js/vue.js"></script>

<script src="js/vue-resource.js"></script>

2、基于全局Vue对象使用http

// 通过someUrl获取后台数据，成功后执行then的代码

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback)

3、在一个Vue实例内使用$http

// $http是在vue的局部范围内的实例

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback)

说明：

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

template3。vue与数据库连接引用的是template3接口。vue是一套用于构建用户界面的渐进式框架（根据需求使用特定的功能）。数据库就是存储数据的仓库，其本质是一个文件系统，数据按照特定的格式将数据存储起来，用户可以对数据库中的数据进行增加，修改，删除及查询 *** 作。

---