酒店信息管理项目——前端代码

这个项目是本人在工作之余利用闲暇时间进行开发的，主要是为了弥补大学毕业设计的遗憾（本人并不是没有过^_,只是没有做自己喜欢的毕业设计）。酒店信息管理系统是一个前后端分离项目，前端使用vue,后端使用java开发，开发完后部署在云服务器上。
废话少说直接上项目地址，http://121.43.170.105:8004
账号：black 密码：root (也可以自行注册)
如果有不明白可以看我的主页关于酒店信息管理项目系列的文章

文章目录

• 酒店信息管理项目——前端代码
• 前言
• 一、项目结构和技术栈的使用
• 二、功能介绍
• • 1前端代码

---

前言

有需要代码的小伙伴私信我WX: 1208191350

---

一、项目结构和技术栈的使用

项目的整体结构采用的是前后端分离的形式：
后端框架的使用：spring-boot maven mybatis-plus mybatisX
后端技术栈的使用：
1.JWT令牌权限校验与授权登录
2.短信验证码登录，使用阿里云短信服务
3.swagger api接口文档生成器
4.mybatis-plus-generator 代码生成
5.七牛云图片上传服务，将图片保存到三方服务器
6.结合数据库使用spring-boot的定时调度任务
7.redis进行短信验证码的验证，和JWT令牌（Token）的激活（保活）
后台项目结构：

前端框架的使用：vue-cli3 element-ui vue-router
前端技术栈的使用：html css scss js vue axsio
前端项目结构：

二、功能介绍

1前端代码

1.1请求配置api.js：

import axios from 'axios'
// 导入router，进行页面跳转
import router from '../router';



// 创建一个axios实例
const service = axios.create({
    // 请求超时时间
    timeout: 5000
})

// 设置基础的请求路径
service.defaults.baseURL = "http://121.43.170.105:8080/"

// 添加请求拦截器
service.interceptors.request.use(
    config => {
        config.withCredentials = false
            //设置jwt令牌
        config.headers.token = sessionStorage.getItem("token")
        return config
    },
    err => {
        console.log(err)
    }
)

//响应拦截
service.interceptors.response.use(
    response => {
        // 判断token有没有过期或者是token有没有错误
        if (response.data.code == 2000 && response.data.message == '令牌无效') {
            // 跳转到登录页面
            router.push({ path: "/" });
        } else {
            return response.data
        }
        return response.data
    },
    err => console.log(err)
)

export default service

1.1路由配置index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

// 完整路由代码
export default new VueRouter({
    routes: [{
            path: '/main',
            component: () =>
                import ('@/views/Main'),
            children: [{
                    path: '/home',
                    name: 'home',
                    component: () =>
                        import ('@/views/Home/Home'),
                },
                {
                    path: '/user',
                    name: 'user',
                    component: () =>
                        import ('@/views/UserManage/UserManage'),
                },
                {
                    path: '/room',
                    name: 'room',
                    component: () =>
                        import ('@/views/Room/Room'),
                },
                {
                    path: '/customer',
                    name: 'customer',
                    component: () =>
                        import ('@/views/Customer/Customer'),
                },
                {
                    path: '/order',
                    name: 'order',
                    component: () =>
                        import ('@/views/Order/Order'),
                },
                {
                    path: '/employee',
                    name: 'employee',
                    component: () =>
                        import ('@/views/Employee/Employee'),
                },
                {
                    path: '/center',
                    name: 'center',
                    component: () =>
                        import ('@/views/Center/Center'),
                },
                {
                    path: '/page2',
                    name: 'page2',
                    component: () =>
                        import ('@/views/Other/PageTwo'),
                },
            ]
        },
        {
            path: '/',
            component: () =>
                import ('@/views/Login/Login'),
        },
        {
            path: '/register',
            component: () =>
                import ('@/views/Register/Register'),
        }
    ]
})

1.3excel电子表格导出js：

/* eslint-disable */
require('script-loader!file-saver');
require('script-loader!@/excel/Blob');
require('script-loader!xlsx/dist/xlsx.core.min');

function generateArray(table) {
    var out = [];
    var rows = table.querySelectorAll('tr');
    var ranges = [];
    for (var R = 0; R < rows.length; ++R) {
        var outRow = [];
        var row = rows[R];
        var columns = row.querySelectorAll('td');
        for (var C = 0; C < columns.length; ++C) {
            var cell = columns[C];
            var colspan = cell.getAttribute('colspan');
            var rowspan = cell.getAttribute('rowspan');
            var cellValue = cell.innerText;
            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

            //Skip ranges
            ranges.forEach(function(range) {
                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
                }
            });

            //Handle Row Span
            if (rowspan || colspan) {
                rowspan = rowspan || 1;
                colspan = colspan || 1;
                ranges.push({ s: { r: R, c: outRow.length }, e: { r: R + rowspan - 1, c: outRow.length + colspan - 1 } });
            };

            //Handle Value
            outRow.push(cellValue !== "" ? cellValue : null);

            //Handle Colspan
            if (colspan)
                for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
        }
        out.push(outRow);
    }
    return [out, ranges];
};

function datenum(v, date1904) {
    if (date1904) v += 1462;
    var epoch = Date.parse(v);
    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
    var ws = {};
    var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } };
    for (var R = 0; R != data.length; ++R) {
        for (var C = 0; C != data[R].length; ++C) {
            if (range.s.r > R) range.s.r = R;
            if (range.s.c > C) range.s.c = C;
            if (range.e.r < R) range.e.r = R;
            if (range.e.c < C) range.e.c = C;
            var cell = { v: data[R][C] };
            if (cell.v == null) continue;
            var cell_ref = XLSX.utils.encode_cell({ c: C, r: R });

            if (typeof cell.v === 'number') cell.t = 'n';
            else if (typeof cell.v === 'boolean') cell.t = 'b';
            else if (cell.v instanceof Date) {
                cell.t = 'n';
                cell.z = XLSX.SSF._table[14];
                cell.v = datenum(cell.v);
            } else cell.t = 's';

            ws[cell_ref] = cell;
        }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
    return ws;
}

function Workbook() {
    if (!(this instanceof Workbook)) return new Workbook();
    this.SheetNames = [];
    this.Sheets = {};
}

function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

export function export_table_to_excel(id) {
    var theTable = document.getElementById(id);
    console.log('a')
    var oo = generateArray(theTable);
    var ranges = oo[1];

    /* original data */
    var data = oo[0];
    var ws_name = "SheetJS";
    console.log(data);

    var wb = new Workbook(),
        ws = sheet_from_array_of_arrays(data);

    /* add ranges to worksheet */
    // ws['!cols'] = ['apple', 'banan'];
    ws['!merges'] = ranges;

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });

    saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "test.xlsx")
}

function formatJson(jsonData) {
    console.log(jsonData)
}
export function export_json_to_excel(th, jsonData, defaultTitle) {

    /* original data */

    var data = jsonData;
    data.unshift(th);
    var ws_name = "SheetJS";

    var wb = new Workbook(),
        ws = sheet_from_array_of_arrays(data);


    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
    var title = defaultTitle || '列表'
    saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), title + ".xlsx")
}

1.5封装的主键，侧边栏，弹出层，头部导航，表格：