2021-10-03

2021-10-03 15:04:52 阅读：119 来源： 互联网

标签：10 03 cell range ws 2021 var import data

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

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

在这里插入图片描述

前言

有需要代码的小伙伴私信我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封装的主键，侧边栏，弹出层，头部导航，表格：
在这里插入图片描述

标签：10,03,cell,range,ws,2021,var,import,data
来源： https://blog.csdn.net/whipwhip/article/details/120594598

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。