十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章给大家分享的是有关前后端分离之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
页面载体
{{msg}}
Login.vue
登录页面
登录
{{ error }}
效果:丑是丑了点
Home.vue
主页面,访问一个获取邮箱的请求
{{msg}}
Email:{{email}}
对应在服务端:
@GetMapping("/getEmail") public String getEmail() { return "xxxx@qq.com"; }
可看到浏览器的本地存储:
感谢各位的阅读!关于“前后端分离之VueJS前端的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。