本篇文章主要介绍了详解前后端分离之VueJS前端，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言
前端用什么框架都可以，这里选择小巧的vuejs。
要实现的功能很简单：
1、登录功能，成功将服务器返回的token存在本地
2、使用带token的header访问服务器的一个资源
本次实验环境：
"dependencies": { "vue": "^2.2.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-latest": "^6.0.0", "cross-env": "^3.0.0", "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 init webpack-simple vue-jwt-demo ... /Atom# cd vue-jwt-demo/ /Atom/vue-jwt-demo# cnpm install /Atom/vue-jwt-demo# npm run dev
安装插件
/Atom/vue-jwt-demo# cnpm install vue-router /Atom/vue-jwt-demo# cnpm install vue-resource
整体目录
auth.js
完成token的存取
const SERVER_URL = 'http://localhost:8081' const LOGIN_URL = SERVER_URL+'/login2' 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
程序入口：完成路由和初始化
import Vue from 'vue' import App from './App.vue' import Login from './component/Login.vue' import Home from './component/Home.vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import auth from './auth/auth' 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
页面载体
<div id="app"> <h1>{{msg}}</h1></div>
Login.vue
登录页面
本文来源gao*daima.com搞@代#码&网6
<div> <h2>登录</h2><p>{{ error }}</p><div> </div><div> </div><button>登录</button></div>
丑是丑了点
Home.vue
主页面，访问一个获取邮箱的请求
<div id="home"> <h1>{{msg}}</h1><button>Get Email</button><h2>Email:{{email}}</h2></div> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } a { color: #42b983; }
对应在服务端：
@GetMapping("/getEmail") public String getEmail() { return "[email protected]"; }
可看到浏览器的本地存储：
代码：https://github.com/jimolonely/vue-jwt-demo
以上就是详解前后端分离之VueJS前端的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解前后端分离之VueJS前端
转载请注明原文链接：详解前后端分离之VueJS前端
