SpringBoot + Vue 用户登入token 之租房管理系统后台模板

SpringBoot 项目构建:SpringBoot + MySQL8 + MyBatis-Plus + Redis +定时任务框架(elastic-job) + Spring Security + JWT(前后端分离Token)

csdn 下载地址:https://download.csdn.net/download/zhouzhiwengang/16136915

Vue项目构建:Vue + Vue-Route +Vuex + Element-UI + Axios 项目管理后台模板

Vue项目创建：

#创建一个基于webpack模板的新项目
vue init webpack C:\node_workspace\two
# 切换至项目路径
cd C:\node_workspace\two
# 安装项目依赖文件
cnpm install
# 项目启动
cnpm run dev

Vue 项目集成Vuex + Element-UI + Axios框架依赖

C:\node_workspace\two>cnpm i element-ui -S
√ Installed 1 packages
√ Linked 8 latest versions
√ Run 0 scripts
√ All packages installed (6 packages installed from npm registry, used 4s(network 4s), speed 21.08kB/s, json 9(81.21kB), tarball 0B)C:\node_workspace\two>cnpm i vuex -S
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 260ms(network 255ms), speed 156.22kB/s, json 2(39.84kB), tarball 0B)C:\node_workspace\two>cnpm i axios -S
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 363ms(network 360ms), speed 26.39kB/s, json 2(9.5kB), tarball 0B)

Vue 之移除初始化模板样式和数据

1、在App.vue 文件中移除原有Vue的logo 标签和样式文件。下面是修改后的App.Vue 文件

<template><div id="app"><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
* {margin: 0;padding: 0;box-sizing: border-box;
}
html,body{width: 100%;height: 100%;
}
#app {height: 100%;
}
</style>

Vue 之Vuex 功能封装

1、在src 文件夹下新增store 文件夹并新增index.js 。index.js 新增内容如下:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);const store = new Vuex.Store({state: {// 存储tokentoken: localStorage.getItem('token') ? localStorage.getItem('token') : ''},mutations: {// 修改token，并将token存入localStoragechangeLogin (state, user) {state.token = user.token;localStorage.setItem('token', user.token);},logout (state, user) {state.token = ''localStorage.removeItem('token')}}
});export default store;

Vue 之Element-ui、axios、store功能基础

1、在mian.js 集成element-ui、axios、store 。main.js 内容如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 集成element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 集成vuex
import store from'./store'
// 集成axios
import axios from '../node_modules/axios'// 设置跨域
axios.defaults.withCredentials = true
// 设置后端请求地址
axios.defaults.baseURL='http://192.168.1.74:8198/house'
Vue.prototype.$axios = axiosVue.use(ElementUI);
Vue.config.productionTip = false// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(config => {if (localStorage.getItem('token')) {config.headers.token = localStorage.getItem('token');}return config;},error => {return Promise.reject(error);});// 添加响应拦截器，移除token
axios.interceptors.response.use(response =>{return response;},error=>{if(error.response){switch(error.response.status){case 401:localStorage.removeItem('token');this.$router.push('/login');}}})/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: { App },template: '<App/>'
})

Vue 之路由配置

1、重点修改router文件夹下的index.js 文件，index.js 配置文件内容如下:

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login';
import home from '@/components/home';
// 新房管理
import newHouse from '@/components/view/newHouse'
// 二手房管理
import secondHouse from '@/components/view/secondHouse'Vue.use(Router)const router = new Router({routes: [{path: '/',redirect: '/login'},{path: '/login',name: 'login',component: login},{path: '/home',name: 'home',component: home,children: [{path: '/newHouse',name: 'newHouse',component: newHouse},{path: '/secondHouse',name: 'secondHouse',component: secondHouse}]}]
})// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {if (to.path === '/login') {next();} else {let token = localStorage.getItem('token');if (token === null || token === '') {next('/login');} else {next();}}
});export default router;

Vue 组件之 login.vue（登入首页）

<template><div class="login-container"><el-form label-position="left"label-width="0px"status-icon><h3 class="login_title">系统登录</h3><el-form-item><el-inputtype="text"v-model="loginForm.username"auto-coplete="off"placeholder="账号"></el-input></el-form-item><el-form-item><el-inputtype="password"v-model="loginForm.password"auto-coplete="off"placeholder="密码"></el-input></el-form-item><el-form-item style="width: 100%"><el-button type="primary" @click.native.prevent="login" style="width: 100%">登录</el-button><!--<el-button type="primary" @click.native.prevent="register" style="width: 100%; margin-top: 30px">注册</el-button>--></el-form-item></el-form></div></template><script>
import { mapMutations } from 'vuex';
export default {data () {return {loginForm: {username: '',password: ''},userToken: ''};},methods: {// 调用store 存储...mapMutations(['changeLogin']),login () {let _this = this;if (this.loginForm.username === '' || this.loginForm.password === '') {alert('账号或密码不能为空');} else {// 发起登入请求this.$axios({method: 'post',url: '/auth/login',headers: {'Content-Type':'application/json;charset=utf-8' },data:{"username":_this.loginForm.username,"password":_this.loginForm.password},}).then(res => {console.log('123456');console.log(res);console.log(res.data.datas.token);_this.userToken = res.data.datas.token;// 将用户token保存到vuex中_this.changeLogin({ token: _this.userToken });// 用户登入成功,自动跳转至系统首页_this.$router.push('/home');alert('登陆成功');}).catch(error => {alert('账号或密码错误');console.log(error);});}}}
};
</script>
<style scoped>
.login-container{border-radius: 15px;background-clip: padding-box;margin: 10% auto;width: 350px;padding: 35px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;
}
.login_title{margin: 0px auto 40px auto;text-align: center;color: #505458;
}
</style>

Vue 组件之 home.vue（系统首页）

<style>
.el-main {background-color: #f5f7f9;
}
.el-header,
.el-footer {background-color: white;box-sizing: border-box;border-bottom: 1px solid #f5f1f1;
}
.el-container {height: 100%;
}
</style><template><el-container><!-- header部分 --><el-header><navtop></navtop></el-header><el-container><!-- aside部分 --><leftNav></leftNav><el-main><!-- main部分 --><router-view /></el-main></el-container></el-container>
</template>
<script>
import navtop from "@/components/part/nav-top.vue";
import leftNav from "@/components/part/nav.vue";
export default {components: {navtop,leftNav},data() {return {};},methods: {}
};
</script>

Vue 组件之系统首页涉及公共页面（nav-top.vue 和nav.vue）

注意:在src/components/part 新增上述两个vue 文件

nav-top.vue

<style scoped>
.el-aside {display: flex;justify-content: center;align-items: center;
}
section{height: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;
}
.logo {width: 200px;
}
.headerLogo,.logo{cursor: pointer;
}
</style><template><el-container><el-aside width="auto" class="header-logo tap" ><img class="logo" src="@/assets/logo.png" alt="Logo" /></el-aside><el-aside width="auto" class="header-logo tap" ><el-avatar icon="el-icon-user-solid" class="headerLogo"></el-avatar></el-aside></el-container>
</template><script>
export default {data() {return {activeIndex: "1",};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}
};
</script>

nav.vue

<style scoped>
.el-row{height: 100%;
}
.el-menu{border-right:none;
}
.el-aside{border-right: 1px solid #f5f1f1;
}
</style><template><el-aside width="200px"><el-row class="tac"><el-col><el-menudefault-active="1"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"><el-menu-item index="1" @click="goPage('centre')"><i class="el-icon-menu"></i><span slot="title">首页</span></el-menu-item><el-submenu index="3"><template slot="title"><i class="el-icon-location"></i><span>房屋管理</span></template><el-menu-item-group><el-menu-item index="3-1" @click="goPage('newHouse')">新房管理</el-menu-item></el-menu-item-group><el-menu-item-group><el-menu-item index="3-2" @click="goPage('secondHouse')">二手房管理</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-col></el-row></el-aside>
</template><script>
var $this = {};
export default {data() {return {};},beforeCreate() {$this = this;},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},goPage(link) {// 跳转至首页if (link === "centre") {$this.$router.push("/centre").catch(error => error);}// 跳转至会员管理 else if ((link === "newHouse")) {$this.$router.push("/newHouse").catch(error => error);} // 跳转至收获地址else if ((link === "secondHouse")) {$this.$router.push("/secondHouse").catch(error => error);} }}
};
</script>

Vue 组件之业务组件

注意:在src/components/view 新增上述业务组件Vue

业务组件之newHouse.vue(新房管理)

<style>
</style>
<template><div id="new_house"><h1>新房管理</h1></div>
</template><script>
export default{name: 'new_house'
}
</script>

业务组件之secondHouse.vue(二手房管理)

<style>
</style>
<template><div id="second_house"><h1>二手房管理</h1></div>
</template><script>
export default{name: 'second_house'
}
</script>

Vue 后台租房管理系统功能演示:

SpringBoot + Vue 用户登入token 之租房管理系统后台模板相关推荐

Vue 用户登入及token 认证
VUE 项目新建vue 项目(eight) #创建一个基于webpack模板的新项目 vue init webpack D:\node_workspace\eight # 切换至项目路径 cd d: ...
查看linux的用户 7.2,linux下查看用户登入系统相关命令及编写脚本(七)
linux下查看用户登入系统相关命令及编写脚本(七) 查看用户登入系统日志 1.w 显示谁登入并正在做什么事 2.who 显示谁登入 -r:显示系统运行级别 3.sleep 睡眠命令(sleep 5 ...
python编辑用户登录界面_python编辑用户登入界面的实现代码
1.需求分析登入界面需要达到以下要求: 系统要有登入和注册两个选项可供选择系统要能够实现登入出错提示,比如账户密码错误等,用户信息保存在user_info.txt文件夹中系统要能够进行登入错误次 ...
python登陆界面代码_python编辑用户登入界面的实现代码
1.需求分析登入界面需要达到以下要求: 系统要有登入和注册两个选项可供选择系统要能够实现登入出错提示,比如账户密码错误等,用户信息保存在user_info.txt文件夹中系统要能够进行登入错误次 ...
用户登入腾讯视频，QQ扫描二维码不显示二维码
环境: 电脑:联想E14 系统:Windows 10 专业版 64位 AC:深信服AC13.0.47 问题描述: 用户登入腾讯视频,QQ扫描二维码不显示二维码解决方案: 1.在AC上,在线用户列表搜 ...
用java语言编写的用户登入模块1
今天我们来学习如何用java语言来写一个简单用户登入模块,本次主要利用java中面向对象程序设计的三大特性"封装,继承,多态"来完成代码编写. (1)要求:通过用户输入,获取 ...
flask笔记：6：用户登入登出
用户登入登出需要用到 Flask-Login 插件初始化修改配置文件 app/__init__.py from flask import Flask from flask.ext.sqlalche ...
写一个用户登入功能(html+ tomcat + mysql)
用户登入功能的实现(html + tomcat + mysql) 第一导入 jar包(放入到web-inf的文件夹下) 和html Title 游戏玩第二写个jdbc操控数据库的一个类 packa ...
ad域服务器信息怎么获取,获取AD域用户登入信息
获取AD用户登入信息详细记录AD域用户登入过哪些终端电脑 1: Dim con Set objSysInfo = CreateObject("ADSystemInfo") str ...

SpringBoot + Vue 用户登入token 之租房管理系统后台模板

SpringBoot + Vue 用户登入token 之租房管理系统后台模板相关推荐

最新文章

热门文章

SpringBoot + Vue 用户登入token 之租房管理系统后台 模板

SpringBoot + Vue 用户登入token 之租房管理系统后台 模板相关推荐

最新文章

热门文章

SpringBoot + Vue 用户登入token 之租房管理系统后台模板

SpringBoot + Vue 用户登入token 之租房管理系统后台模板相关推荐