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

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: {
    // 存储token
    token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
  },
 
  mutations: {
    // 修改token，并将token存入localStorage
    changeLogin (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 = axios

Vue.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: ''
})

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（登入首页）

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

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

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

nav-top.vue

nav.vue

Vue 组件之业务组件

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

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

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

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