时间:2021-05-25
前言
前端用什么框架都可以,这里选择小巧的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时进行校验是否有tokenauth.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 "xxxx@qq.com"; }可看到浏览器的本地存储:
代码:https://github.com/jimolonely/vue-jwt-demo
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。我们在
前后端分离实现方式: 1、前后端分离的概念就是“调接口与前端展示数据跟数据交互”,后端给前端专门写接口,至于数据格式自己定,如果处理的好未必一定说是要用jso
踩坑Axios提交form表单几种格式前后端分离的开发前后端,前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权
前端项目打包工具webpack与前端开发框架vue,算是现在前后端分离后非常流行的技术了,今天主要讲的是使用webpack和vue2构建一个前后端分离项目的基本
虽然现在很多开发,都采用了前后端完全分离的模式,即后端只提供数据接口,前端通过ajax请求获取数据,完全不需要用的模板引擎。这种方式的优点在于前后端完全分离,并