# librarySeatsSystem

**Repository Path**: yileng/librarySeatsSystem

## Basic Information

- **Project Name**: librarySeatsSystem
- **Description**: 采用vue构建一个简单的图书馆自修室占座系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2018-07-31
- **Last Updated**: 2024-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# librarySeatsSystem

## 项目介绍

基于目前图书馆自修室座位经常出现供不应求而有些人占了位置并没有在此学习的现象以及早早去排队的等候费时费力的情况，决定构建一个简单的移动端图书馆自修室座位预约系统，主要实现以下功能：  

1.进入系统，可查看当前图书馆座位预约情况，同时可选择未被预约的座位  
2.选择座位后，系统自动进入倒计时状态，默认5分钟，5分钟后没有确认入座该座位将被释放掉供其他人选择  
3.进入图书馆以后扫描座位右下角的二维码，确认入座，当前座位状态为："已入座"  
4.离开图书馆时点击"确认离座"按钮，当前位置被释放供其他人选择  
5.待开发。。。  

[原型图地址](https://modao.cc/app/CfgAMHF0qpuX7QeWkNmurwa1kLdocJg#screen=s2F0AF358511532942054301)

## 软件架构

项目技术栈：
jQuery + Zepto + SuiMobile + font-Awesome
vue2.x + webpack + Mint-UI + vue-router

## 安装教程

jQuery项目直接在浏览器打开in-jQuery/index.html
vue部分(in-vue目录下执行)：
1.npm install 安装依赖
2.npm run dev  运行项目

## 数据交互说明

1.目前数据交互均使用ajax请求本地json的方式
2.扫描二维码入座功能暂时没有做，目前实现为：点击二维码时默认扫描的是9号座位

## 使用说明

1.本项目分别用jQuery和Vue两种技术栈构建，同时采用Font Awesome字体库，Mint-UI组件库，SUI mobile组件库等
2.jQuery版本需要将项目导入到IDE中，然后通过IDE打开index.html文件在浏览器中运行
3.vue版本项目在in-vue目录下执行npm run dev即可运行

## 本地打开index.html报错

### 原因

 chrome浏览器为了安全考虑默认禁止跨域请求，即chrome不能通过file的方式读取本地相对路径脚本。
故本地打开会报错：Failed to load file:///E:/librarySeatsSystem/json/index.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

### 解决方案

给浏览器传入启动参数，允许跨域访问：右键chrome快捷方式-属性-目标   在目标的后面追加 --allow-file-access-from-files