重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

前后端分离之VueJS前端的示例分析

这篇文章给大家分享的是有关前后端分离之VueJS前端的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

10多年建站经验, 成都网站建设、网站建设客户的见证与正确选择。创新互联提供完善的营销型网页建站明细报价表。后期开发更加便捷高效,我们致力于追求更美、更快、更规范。

前言

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

页面载体



Login.vue

登录页面



效果:丑是丑了点

前后端分离之VueJS前端的示例分析

Home.vue

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





对应在服务端:

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

前后端分离之VueJS前端的示例分析

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

前后端分离之VueJS前端的示例分析

感谢各位的阅读!关于“前后端分离之VueJS前端的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


本文标题:前后端分离之VueJS前端的示例分析
标题来源:http://cqcxhl.cn/article/pijojj.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP