详解前后端分离之VueJS前端


Posted in Javascript onMay 24, 2017

前言

前端用什么框架都可以,这里选择小巧的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

整体目录

详解前后端分离之VueJS前端

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

页面载体

<template>
 <div id="app">
  <h1>{{msg}}</h1>
  <router-view></router-view>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
  return {
   msg: 'Vue前后端分离demo'
  }
 }
}
</script>

Login.vue

登录页面

<template>
 <div>
  <h2>登录</h2>
  <p>{{ error }}</p>
  <div>
   <input
    type="text"
    placeholder="Enter your username"
    v-model="info.username"
   >
  </div>
  <div>
   <input
    type="password"
    placeholder="Enter your password"
    v-model="info.password"
   >
  </div>
  <button @click="submit()">登录</button>
 </div>
</template>

<script>
import auth from '../auth/auth'

export default {

 data() {
  return {
   info: {
    username: '',
    password: ''
   },
   error: ''
  }
 },
 methods: {
  submit() {
   var info = {
    username: this.info.username,
    password: this.info.password
   }
   auth.login(this, info)
  }
 }
}
</script>

效果:丑是丑了点

详解前后端分离之VueJS前端

Home.vue

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

<template>
 <div id="home">
  <h1>{{msg}}</h1>
  <button @click="getEmail()">Get Email</button>
  <h2>Email:{{email}}</h2>
 </div>
</template>

<script>
import auth from '../auth/auth'

export default {
 name: 'home',
 data () {
  return {
   msg: '欢迎您登录成功',
   email:''
  }
  },
  beforeCreate(){
    //如果没有token的话需要重新登录
     if(!auth.authenticated){
      this.$router.push('login')
    }
  },
  methods:{
    getEmail(){
      this.$http.get('http://localhost:8081/user/getEmail',{
        headers:auth.getAuthHeader()
      }).then(function(re){
        this.email = re.bodyText
      },function(){
        console.log("get email error")
      })
    }
  }
}
</script>

<style>
#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;
}
</style>

对应在服务端:

@GetMapping("/getEmail")
  public String getEmail() {
    return "xxxx@qq.com";
  }

详解前后端分离之VueJS前端

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

详解前后端分离之VueJS前端

代码:https://github.com/jimolonely/vue-jwt-demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 #Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
bootstrap table使用入门基本用法
May 24 #Javascript
Vue动态实现评分效果
May 24 #Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 #Javascript
jquery append与appendTo方法比较
May 24 #jQuery
You might like
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
详解JS函数重载
2014/12/04 Javascript
ExpressJS入门实例
2015/01/14 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
简明 Python 基础学习教程
2007/02/08 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
django框架创建应用操作示例
2019/09/26 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
党员组织关系介绍信
2014/02/13 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python