详解前后端分离之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 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JavaScript Split()方法
Dec 18 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
vue双向绑定数据限制长度的方法
Nov 04 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
Array of country list in PHP with Zend Framework
2011/10/17 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php 魔术方法详解
2014/11/11 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
List Installed Software Features
2007/06/11 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jquery常用操作小结
2014/07/21 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
python绘制简单折线图代码示例
2017/12/19 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python安装Bs4的多种方法
2020/11/28 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
楼面部长岗位职责范本
2014/02/14 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
个人担保书格式范文
2014/05/12 职场文书
个人委托书
2014/07/31 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
vue实现滑动解锁功能
2022/03/03 Vue.js