都知道现在前端技术厉害了？很多人都开始尝试前后端分离的架子了。这种方式挺好的，前后端各自独立，互不影响，再也不用担心后端一手抓全权了，这样才真的能够稳定系统，也有利于后面的发展。说到前端库，最近最火的无疑是Vue！用它来做前后端分离的网站，肯定会让你的网站变得更炫酷！下面我来说说如何使用Vue实现这种架构，以及怎样传输数据的问题。
一、后端实现
下面，挑个你擅长玩儿的工具，像Java里的Spring框架，或是Python里的Django框架啥的。这个问题，咱不再磨叽了
二、前端实现
Vue，就是个前端大哥大，实在是太牛逼了，后端前端正合适！前后端分开来弄挺简单滴：
1.创建Vue项目：
npm install -g vue-cli // 全局安装Vue-cli vue init webpack my-project // 创建一个webpack项目
咱们就先用命令行搞一下，建立一个全新的Vue项目。这玩意儿叫Vue-cli，超级好用！操作方法就跟我说的那样做：
module.exports = {
// ...
dev: {
// ...
proxyTable: {
'/api': {
target: 'http://localhost:8888', // 后端接口地址
changeOrigin: true // 是否跨域
}
}
}
}
2.修改配置文件：
在config文件夹里找到index.js，打开看看，找到叫proxyTable的部分，填写你的后台地址就搞定了！
import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) export default { name: 'UserList', data () { return { users: [] } }, created () { Vue.http.get('/api/users') .then(response => { this.users = response.data }) .catch(error => { console.log(error) }) } }用户列表
编号 姓名 {{ user.id }} {{ user.name }}
3.编写前端页面和接口调用：
在Vue中，咱们都喜欢将网页看作一堆小零件，弄起来轻松多。Ajax调用服务器？那绝对跟玩儿一样简单，只要借助Vue-resource就能搞定！
npm run build
这个程序咱们搞成了一个叫作USER_LIST的东西，跟网站的用户列表有点像？然后说到那个PRIVACY，得找出来瞧瞧，这样就可以从“/API/USERS”拿用户信息过来，然后直接扔到网页上就搞定。记得我们还是按着之前的路线走的，只不过加了代理设置！
4.构建和部署：
写完前端代码后，立马启动vue项目！弄好了就把那个大文件夹交给网页服务器去处理。
三、接口对接
前后端衔接就是接口对接！想在前端敲代码，直接用类似’/api/users’的网址也没问题。说到传递信息，我们能用JSON或RESTful接口这两种超棒的方式！
{
"code": 0,
"message": "",
"data": [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }]
}
1. JSON数据格式对接：
Vue.http.get('/api/users')
.then(response => {
if (response.body.code === 0) {
this.users = response.body.data
} else {
alert(response.body.message)
}
})
赶紧让我们试试后台API！咦，用JSON发点吃的过来也不错哦～然后？没问题，动用Ajax神器一下子就能拉出接口，立马吃到数据了哟
2. Restful接口对接：
下面，咱们看下后头的平台怎么给大家展示他们的RESTful API！比如说，咱的用户管理系统就能帮你找到全部的用户，看看某个具体的每个人的详细情况，或者添加新成员或者改改其他人的什么。
在前端代码中调用这些RESTful接口方法示例如下：
搞定前后端分离不用慌，跟着Vue爽快上手，你的系统就能更顺滑了。先别急，咱们先掌握好基础知识再说，接下来就可以正式开始前端部分，接着把它和后台连起来，大功告成！不过大家的情况各不相同，所以还是得根据你自己的需求来灵活改变。
评论0