前后端分离之VueJS前端

2017年04月08日 14:07:58

本节接上一篇博客:前后端分离之Java后端

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

前言

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

整体目录

1

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>

效果:丑是丑了点

2

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";
    }

3

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

4

参考:
https://github.com/auth0-blog/vue-jwt-authentication(基于vue1.x)
https://router.vuejs.org/zh-cn/essentials/getting-started.html

vue前后端分离之前端搭建

名词解释 nodejs: nodejs是这个框架的基础,nodejs可以理解成js解释器,相对于Python语言而言,以前运行js代码必须使用浏览器,现在就可以使用nodejs,nodejs还扩充...
  • zwyjg
  • zwyjg
  • 2017年02月27日 22:34
  • 2079

我们为什么要尝试前后端分离

尝试与改变 如果你没有尝试过前后端分离的工作流程,那么可以先试想一下这样的流程改变: 把流程从  PM:“我要这个功能” 后端:“这个先找前端做个模板” 前端:“模板做完了” 后端...
  • kun5706947
  • kun5706947
  • 2016年09月08日 10:24
  • 3310

全栈开发:前后端分离配置篇(vue+webpack+mock+nginx+laravel)

是如何使前后端完全分离,答案是在服务器端利用nginx做转发,前端文件单独部署到服务器某目录下,nginx负责提供入口和接口监听,也就是前后端分离成两个项目部署到服务器上,好处是前端人员可以自行运维前...
  • ITmanba
  • ITmanba
  • 2017年08月22日 11:36
  • 1635

nginx+vue.js实现前后端分离

前后端分离原理及其功能的简单实现
  • qq_26026975
  • qq_26026975
  • 2017年07月18日 23:02
  • 4536

【vue+axios】一个项目学会前端实现登录拦截

一个项目学会前端实现登录拦截 一个项目学会vue全家桶+axios实现登录、拦截、登出功能,以及利用axios的http拦截器拦截请求和响应。 前言该项目是利用了Github 提供的persona...
  • qq673318522
  • qq673318522
  • 2017年02月17日 12:03
  • 18360

vue开发:生成token保存在客户端localStorage中

前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据。 回顾token 框架中的RESTful api快速领悟(中):token认证  框架中的RESTful a...
  • Generon
  • Generon
  • 2017年05月18日 16:08
  • 9676

Vue利用路由钩子token过期后跳转到登录页

Vue利用路由钩子token过期后跳转到登录页在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫。 分为全局导航钩子,单个路由独享的钩子,组件内钩子。 三种 类...
  • HaiJing1995
  • HaiJing1995
  • 2017年06月26日 09:20
  • 2781

Vue-login 案例的学习(一)

Vue-login 案例的学习(一) Token认证机制的原理​ 如今对于网站的登录后都要做个验证,保护网站的安全;Token 是包含用户名、有效期和某些专有信息并通过共享密钥加密的信息字符串。...
  • luozw_123
  • luozw_123
  • 2017年04月10日 17:17
  • 618

vue是怎么做到前端分离的--脱离laravel为例

首先表示折腾了十来天的php-laravel框架和vue的结合开发又偏前端实在是太大的阻碍,首先laravel的机制就是写完路由router再加载blade模板的.如果要在laravel工程里面加载一...
  • wmwmdtt
  • wmwmdtt
  • 2016年12月30日 20:10
  • 7269

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述

前言 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。 本来写这一系列的博文只是为了给自己看的,但没想到的...
  • mck477
  • mck477
  • 2017年11月16日 15:24
  • 91
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前后端分离之VueJS前端
举报原因:
原因补充:

(最多只允许输入30个字)