详解前后端分离之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

页面载体

<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>

效果：丑是丑了点

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 "[e-mail]";
  }

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

代码：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。