vuejs php 前后端分离,详解前后端分离之VueJS前端

前言

前端用什么框架都可以，这里选择小巧的vuejs。

要实现的功能很简单：

1、登录功能，成功将服务器返回的token存在本地

2、使用带token的header访问服务器的一个资源

本次实验环境：

css-loader": "^0.25.0","file-loader": "^0.9.0","vue-loader": "^11.1.4","vue-template-compiler": "^2.2.1","webpack": "^2.2.0","webpack-dev-server": "^2.2.0"

}

开发IDE：Atom

首先建一个项目

使用webpack构建

安装插件

/Atom/vue-jwt-demo# cnpm install vue-resource

整体目录

auth.js

完成token的存取

export default{

data:{

authenticated:false

},login(context,info){

context.$http.post(LOGIN_URL,info).then(function(data){

console.log(data.bodyText)

localStorage.setItem('token',data.bodyText);

this.authenticated = true

//跳到home页

this.$router.push('home')

},function(err){

console.log(err+","+err.body.message)

context.error = err.body.message

})

},getAuthHeader(){

return {

'Authorization':'Bearer '+localStorage.getItem('token')

}

},checkAuth(){

var token = localStorage.getItem('token')

if(token){

this.authenticated = true

}else{

this.authenticated = false

}

}

}

main.js

程序入口：完成路由和初始化

Vue.use(VueRouter)

Vue.use(VueResource)

//在启动APP时进行校验是否有token

auth.checkAuth()

const routes= [

{

path:'/',redirect:'/login'

},{

path:'/login',component:Login

},{

path:'/home',component:Home

}

]

const router = new VueRouter({

routes

})

new Vue({

router,render: h => h(App)

}).$mount('#app')

App.vue

页面载体

{{msg}}

Login.vue

{{ error }}

登录

效果：丑是丑了点

Home.vue

主页面，访问一个获取邮箱的请求

{{msg}}

Email:{{email}}

对应在服务端：

可看到浏览器的本地存储：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

总结

以上是编程之家为你收集整理的详解前后端分离之VueJS前端全部内容，希望文章能够帮你解决详解前后端分离之VueJS前端所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。