- 安装nodejs环境（参考网上教程），本地当前nodejs版本和捆绑安装的npm版本如下：
-
下载git仓库。
-
安装依赖。下载完git仓库后找到该仓库（文件夹名称为sweFrontend）。进入sweFrontend文件夹，调用命令行，输入以下指令。该指令的作用是安装项目依赖的包，项目上传github不会上传包，需要重新安装。
-
运行项目。仍然在当前文件夹目录下输入指令。该指令是使用webpack工具对项目进行编译运行，输入的这些npm命令实际是绑定了对应的webpack的指令，有兴趣可以了解webpack的使用。（注意：在此只提供针对命令行的项目运行相关指令，简便期间可以自行查找对应IDE的快捷编译运行键的设置）
-
下载另一个git仓库，sweBackend是后端项目
-
sweBackend使用java开发，具体配置参考后端项目的readme文档
-
确保后端项目正常运行，要保证本项目中Vue.config.js中描述的服务器地址与后端项目运行地址相同
-
根据第4步的结果打开浏览器，输入对应回环测试网址即可。注意，此时不应关闭命令行，第4步命令行实际是运行了web服务器。（注意：由于设计时没有考虑性能，在首页加载了大量框架阻塞了渲染，打算后续优化，所以第一次打开时加载速度会比较慢，请耐心等待）
-
.idea文件夹：该文件夹是使用jetbrain系列的IDE打开项目时生成的文件夹，与项目开发内容无关。
-
dist文件夹：编译后项目文件夹。如果使用
npm run build命令，那么就会编译项目，编译后的项目保存在dist文件夹，关于编译后项目的结构，可以暂时不考虑（有兴趣可以了解webpack知识）。或者使用npm run serve命令，表示编译运行，也会在dist中生成编译后项目。编译后的项目可以用于服务器部署，或者利用相关软件打包成移动端软件。 -
info文件夹：readme文档用到的图片存储在该文件夹。
-
node_modules文件夹：包管理文件夹。
npm install下载的依赖都存储在该文件夹，该文件夹也为nodejs的运行提供支持，在上文中“1.环境配置与项目运行的第5点”中提到的web服务器就是由nodejs实现的。简单来说，该文件夹为JavaScript的运行提供了支持，并存储了JavaScript相关的包，为框架提供支持。 -
public文件夹：静态文件文件夹。在项目开发时的webpack和Vue版本下，要求了public文件夹存储静态文件，比如照片，视频之类的，打包时直接放入dist文件夹的指定目录中。当然在其他项目下可能没用public，而是static文件夹，意思都是一样的。
-
src文件夹：项目主文件夹。编写的项目内容都在该文件夹中。
-
.gitignore文件：描述性文件。描述项目git上传时应该忽略什么信息，例如忽略各种依赖包，避免项目过大。开发时一般不考虑该文件。
-
babel.config.js文件：设置性文件。设置babel编译器的信息。babel是一个编译器，在本项目中用于将ES6标准下的JavaScript编译，生成ES5标准下的JavaScript编译后的中间代码。避免高版本有些浏览器无法正常运行。**实际上这些配置使用Vue-Cli工具在项目搭建时就已经自动配置好了，并不用关心。**不过应该提一下，“编译原理大作业：静态作用域语言的变量检查”。如果语言选择JavaScript，那么JavaScript变量是无法类型检查的，可以下载Facebook提供的Flow.js扩展JavaScript的文法，对JavaScript类型检查。但是扩展文法的JavaScript无法再浏览器端正常运行，这时就可以使用babel编译扩展文法的JavaScript，生成原始文法的JavaScript的中间代码。总的来说，babel编译器可以把JavaScript编译成你希望的形式。
-
package.json文件：描述性文件。package.json与node_modules文件夹相辅相成，描述了项目应该安装哪些依赖包。当输入
npm install后就回去该文件中查询，应该安装哪些依赖包。这是它的主要作用，当然它还可以设置一些npm 指令映射。其它功能有兴趣再了解。 -
package-lock.json文件：描述性文件。该文件描述了项目实际安装了哪些依赖包，在package.json文件中要求的包被安装后都会记录到该文件中。
-
vue.config.js文件：设置性文件。可以用于设置webpack相关设置，本项目主要用它设置应用服务器的地址。下面指明了应用服务器（后端）的地址，在项目中发送http请求时用/api就可以代指该地址。
devServer: { proxy: { '/api': { // 服务器 target: 'http://localhost:8081', ws: false, changeOrigin: true } } },
该文件中的其它配置是涉及到项目编译时的设置（移动端适配），用到时再了解即可。
使用管理员账户登录，账户密码如下：（记住密码表示密码本地存储，下次登录时会直接跳转到个人主页）
注册普通用户，普通用户可以进行寄快递，查询快递进度**（注意：如果发送验证码收不到，可能是发邮件接口过期了，直接用管理员登录即可，管理员也具有该功能）**：
管理人员注册（公司认证码：管理员：all，人事管理员：people，财务管理员：financial，订单管理员：order，调度管理员：assign，仓库管理员：warehouse，运输员：trans）：
忘记密码（注意：邮件接口如果过期，则不能使用该功能）：
注意顶部导航栏的蓝色按钮，表示缩小左侧导航栏，而不是返回上一级。在个人主页中可以修改个人信息。导航栏右侧的设置按钮可以退出登录到登录界面，其中的清除缓存选项表示如果用户在登录界面选择了保存密码，那么此时清除本地存储的用户密码，用户下次登录需要重新输入密码，并且不会自动跳转到该界面。
用户在个人主页可以修改收件人地址，寄件人地址。
下面用收件人举例，点击添加按钮。然后在该页面编辑信息。在选择地址中填写地址，该地址支持模糊搜索，搜索完毕后会在地图上显示。
寄件页面如下，需要填写收件人，寄件人信息，物品信息
下面用寄件人举例，点击寄件人信息
当然，如果在个人主页已经填写了常用收件人，寄件人信息的话，在此可以使用自动填写
点击自动填写按钮，此时可以选择个人主页已经填写过的寄件人信息
按照上述步骤填写完收寄件人信息后填写货物信息，缺少填写则无法提交
订单审核界面只有全局管理员和订单管理员才能看到。下拉货物列表，找到刚刚填写的订单并审核。
找到刚刚下的订单，然后点击进入审核界面
填写审核信息，这里点击审核不通过 （原因是，本项目设立的快递仓库不足）
该界面用户可以查询到。进行中订单指的是用户下单后通过审核且付款后才能算是订单进行中。本界面接口设计出现问题，暂时还没有修复，查询数据库速度很慢，出现下面情况不代表没有进行中订单，请点击“加载更多”，或“显示所有订单”按钮，等待一段时间
等待一段时间后出现下列结果。请寄件表示用户已付款但是还没有投放到快递站，此时可以取消订单。可以随机点击一个订单查看运输进度详细信息。
我们点击“手机”，查看订单运输的详细信息。可以看到系统为其规划的路线信息，其中对号表示已经到达了其中某个仓库，下面有具体的进入仓库的时间。未进入的仓库不会显示时间（下面可能有bug，显示了未进入仓库的时间，以前没有遇到过，下次修改）
可以缩放百度地图，查看系统为其规划的路线。可以看到这是一个市内的调度，表示从哈工大寄件到山大，系统规划路线为：“哈工大快递驿站”到“仙姑顶中转仓库”再到“山大驿站”。
未进行订单可以显示我们下单的历史记录，在已取消订单中可以看到我们刚刚审核失败的订单“菠萝”。当然可以点击它查看详细信息，这里就不再演示了。
点击已审核待付款订单，用户可以在这里找到自己已经通过审核的订单，点击它付款
点击该订单进行付款，由于支付宝接口申请复杂，所以在此直接用二维码付款。付款全凭自觉，当然你也可以假装付款了。
已完成订单选项可以查询历史已完成订单，也可以查看详细信息，这里就不做演示了。
仓库管理界面只有全局管理员和仓库管理员可以看到
缩放百度地图可以查看所有建立的仓库，目前在云南省，河南省，山东省设有仓库。在该界面还设置了一个隐藏按键，在不输入任何值的情况下点击“按省搜索仓库”，可以自动缩放地图，查看所有仓库。
我们还可以查看仓库的详细信息，比如我们搜索威海市仓库，选择第一个仓库查看信息，点击该仓库查看具体信息
点击后进入仓库详情页面，仓库基本信息较多所以进行了折叠，可以点击右上角按钮进行展开。货架信息表示了仓库中货架的详细信息，只有设置了货架信息的仓库才能参与物流调度，点击“查看”按钮可以继续查看货架信息
点击“查看”按钮，结果如下。如果该仓库的该货架存储有货物，那么详细信息会显示在该页面
点击返回，退回到“仓库详细信息界面”，下拉进度条。此部分是入库，出库办理模块。 仓库管理员可以在收件时先填写货物的订单编号，这样系统会自动为货物安排货架位置。待出库货物信息将会按照指定算法计算权值，按照权值排序，决定出库顺序。
创建仓库页面只有仓库管理员和全局管理员可以访问。 在这里要注意一个问题，仓库级别有3级。1级表示面向用户的驿站，用户来这里投放快递，或者取走快递。2级表示市级中转仓库，1级仓库的快递会运输到2级仓库，如果是发往同城的快递，那么在2级仓库会直接调度，发往离收件人最近的1级仓库。如果是不同城的快递，那么会发往3级仓库。3级仓库表示省级中转仓库，负责调度跨省或者省内跨市的快递运输。所以说，如果想让某地能够首发快递，至少要建立3个不同级别的仓库。 仓库位置的选择与收寄件人的地址填写不同，这个需要手动填写，因为考虑到有些仓库建立的地方是没有名称的，无法搜索的，因此需要手动在地图上点击，选择位置。
删除仓库是危险的。因为仓库无法通过脚本批量产生（本项目已经用脚本产生了大量虚拟用户与各类管理员），需要根据具体情况人工选择。因此在这里禁用了删除按钮。
人事管理页面只能由人事管理员或全局管理员访问
可以选择修改信息
寄件人选择哈工大的吴亦凡。 （不要选其它的，有些地方仓库没有建全）
收件人选择最后一个樊华，第一个也可以。 （选择其它地区不保证邮寄成功，仓库创建不全）
随便填写物品信息，之后点击提交
订单审核界面找到刚刚下的订单，点击进入审核界面，点击审核通过
一直点击加载更多，在最下方找到进行中的订单。 （此过程比较慢，是接口问题，请耐心等待）。找到订单后，记录下订单号，因为一会用户要去驿站寄快递，需要提供订单号。在此记录下订单号142169186046。
用户去最近的驿站寄件。因为我们选择的是哈工大的寄件地址，所以我们去举例最近的1级仓库—哈工大驿站去寄件。 此处应该是哈工大驿站的仓库管理员操作，但因为账户密码都忘了，所以用管理员操作，管理员可见所有仓库，所以要先找到哈工大驿站 。选择第二个，要注意，我们要在驿站中入库，不能去中转站入库，因为中转站是2级仓库，不是面向用户的。
此时用户到达驿站，将货物交给工作人员，工作人员（仓库管理员）将订单编号填入系统，完成入库。（点击一次入库即可）
入库完成后可以进行检查，点击A货架的“查看”按钮，查看货物信息。由下图可知，货物已经成功进入驿站。此时用户离开驿站，驿站等待运输员运输货物。
找到进行中订单查询页面，由于该接口比较慢，我们直接使用搜索功能，搜索订单名称
点击订单，查看详细信息。在此可以看到快递调度的详细信息。我们知道了接下来要运送到哪些仓库。现在我们要做的就是模拟运输过程，（运输员的账户和密码都忘记了，只能用管理员来模拟） 下一步就是将货物运往仙姑顶，并进行入库。
接下来省略掉运输时间，运输员取走哈工大驿站的货物，所以先进行出库。之后运输员携带货物到达2级仓库—仙姑顶仓库时，会进行入库操作。
下面还是先找到刚刚的哈工大驿站，此时仓库管理员出库该货物，因为此时运输员来取走货物了。
先找到仙姑顶仓库 （此步骤本应由仙姑顶仓库管理员完成，但是方便起见，用全局管理员完成）
办理入库操作
过了若干时间以后，另一个运输员来到仙姑顶仓库，他要取走该货物，运输到3级仓库—哈尔滨工业大学中转站。此时仓库管理员为他办理出库业务。（在待出库货物信息中点击出库即可）
运输员将货物带到3级仓库等待跨省运输，此时仓库管理员为其办理入库操作
经过若干时间后，另一运输员前来取件，将快递按照约定路线运输到河南的3级仓库高寨中转站，此时仓库管理员为其办理出库业务
重复上述操作即可， 先找到该中转站，模拟该仓库管理员的操作，进行入库。若干时间后运输员来取件，模拟仓库管理员的出库操作。
重复上述操作
先重复上述操作，先入库。
入库后，收件人会受到短信，通知收件人前来取件。
若干时间后用户前来取件，仓库管理员为其办理“完成订单”服务。
路由设置主要位于src/router文件夹下，路由负责页面之间的逻辑关系。如果要添加页面，那么必须修改路由设置。
作用描述：
index.js负责导出路由信息，导出router对象。然后在src下的main.js入口模块中接收router对象，挂载到根Vue对象中。在index.js中一般不需要做修改，在项目开发时可以使用Vue-Cli工具自动生成该文件，也可以在Vue官网上根据Vue路由给出的规范来写该文件。
修改意见：
不需要修改。但如果涉及到打包成移动端APP，需要修改路径，注释中已经给出意见。
需要学习的知识：
ES6标准下JavaScript的模块规范，即import和export的使用
作用描述：
本文件定义了页面间的逻辑关系。（1）理解constantRoutes对象，该对象描述了“不变路由”，从代码中的对象描述就可以看出，描述的是登录界面。“不变”的原因是不论什么权限的用户，都会访问登录页面。（2）理解asyncRoutes对象，该对象描述了“异步路由”，看起有些奇怪，因为constantRoutes在本文件中导出，在index.js中接收，而该对象根本没有使用。这个对象实际上是在用户登录时检查用户权限时被添加到总路由对象中的。简单来说就是，用户点击登录，然后脚本检查用户权限，根据权限，将“异步路由”对象选择性地和“不变路由”进行合并。（3）理解实现原因。这种做法就是企业中常用的权限管理的解决方案（参考了阿里巴巴的项目）。当页面数量庞大时，往往难以用if或switch把页面和权限关联起来，决定展现给用户哪些页面，因此我们采用该方法。（理解至此即可，不必深究）
修改意见：
不需要搞懂每一个语句的作用，如果需要添加页面，那么模仿着asyncRoutes对象的写法，在其中添加即可。如果有必要可以去Vue官网查找路由相关api查看对象属性的含义。
需要学习的知识：
箭头函数的用法
permission.js位于src目录下，也是和页面逻辑相关的文件
作用描述：
permission.js是路由守卫文件，描述了浏览器每到达或离开一个页面时，脚本需要完成的动作。使用Vuex存储临时文件在刷新时会导致数据丢失，可以用该文件解决；防止用户越权限访问页面，可以用该文件解决。还有诸多功能可以实现。该文件逻辑比较复杂，不建议阅读，前期已经完善好了，不需要修改。
修改意见：
不建议修改，不建议阅读，了解作用即可。
每一个页面都对应一个Vue对象（也可以说是组件），这些对象间需要通信，这里描述项目中使用Vuex进行对象通信的方法（就是页面间传递消息）。组件通信设置位于src/store文件夹下。
作用描述：
这里的index.js类似于路由设置中的index.js。都是引入其它文件的内容，然后将它导出，交给入口脚本main.js处理。
修改意见：
未来很长时间这里应该不需要修改。如果需要修改，例如多个组件间需要传递新的信息，那么新建一个描述该信息的脚本文件存储到/src/store/modules中，再加入到本文件的modules中。
需要学习的知识：
Vuex，查询Vue官网了解Vuex。如果不需要组件通信，则不需要了解。
作用描述：
这里的user.js描述了登录页面的组件与登录后页面的组件的通信接口。相关函数执行时会进行权限判断，实现上文提到的“异步路由”。实现模仿了阿里巴巴的Antd-Pro项目框架。
修改意见：
不建议修改或阅读。理解作用即可。理解此文件需要花费比较多的时间，需要有扎实的Vuex基础。
作用描述：
这里的permission.js也是提供负责权限管理的接口，实现上模仿了Antd-Pro框架。简单理解，就是封装了一些函数供user.js使用，把上文提到的“异步路由”中符合用户权限的部分和“不变路由”合并。
修改意见：
不建议修改，这是比较底层的部分，常规维护不涉及，也没有必要去阅读。
通信接口进行了封装，封装到了一个文件
作用描述：
FetchAPI封装了fetch函数，fetch函数是ES6标准下的http通信函数，负责收发http请求。该函数是ES6标准以后客户端JavaScript进行网络通信的主流。该文件导出了fetchAPI对象，在各个组件中，如果想要收发网络请求，直接引用该对象即可，具体发送格式，可以随便找一个页面组件进行参考。
修改意见：
不建议修改。如果需要打包成移动端APP，需要修改，修改意见已经在该文件中给出注释。
需要学习的知识：
fetch的用法
作用描述：
该文件位于项目根目录下，不在src目录中。该文件已经在readme中提到，主要是配置打包信息。本项目在该文件中设置了“/api”来代指后端服务器的地址，如果后端服务器地址发生改变，则需要修改本文件。具体修改意见已经以注释形式给出。
-
assets文件夹：用于存储媒体资源，例如图片，视频。本项目基本不用该文件夹。
-
router文件夹：用于路由设置，上文已经提到
-
store文件夹：用于组件通信，上文已经提到
-
utils文件夹：提供工具类，简单来说，就是封装函数给其它组件使用，下文具体介绍
-
views文件夹：描述页面信息，下文具体介绍
-
App.vue文件：Vue根组件，后期维护不需要阅读与修改
-
main.js文件：项目入口脚本，负责引入与注册必要的组件，比如路由对象，Vuex对象等等，后期维护一般不需要阅读与修改
-
permission.js文件：路由守卫文件，在路由设置中已经提到
-
AddressFormat.js文件：把地址规范化。有些页面会填写地址，例如“收寄件信息填写”，此函数会把地址规范化，转化成前后端约定的形式。简单来说，就是接收到用户填写信息后，用此函数进行处理，之后发送给后端服务器。
-
choke.js文件：节流防抖函数。防止点击过快，短时间提交多次请求给后端服务器以及避免过快点击导致的页面性能下降。某些页面涉及点击按钮，可以引入该函数。有兴趣可以了解，需要提前学习闭包的知识（就是编译原理中提过的静态作用域规则）。
-
fetchAPI.js文件：封装网络请求函数。上文已经提到。
-
houseType.js文件：提供一个Map映射，描述3级仓库对应的中文。这个设计不太好，当时编写项目时不知道JavaScript自带Map函数。不过后期维护时，该文件没必要修改，没必要阅读。
-
normalize.js文件：提供了一个函数，负责把全国省市信息处理成指定格式，使得该格式满足Antd框架下的要求。简单来说就是，在“收寄件填写省市信息”时，会有选择框选择全国省市信息，我们必须要下载省市信息，并且按照指定格式传递给选择框，该文件就提供了此功能。
-
pca-code.js文件：全国省市信息的JSON对象描述形式。
-
typeChange.js文件：提供了一个映射，把各种权限用户的中文与英文缩写一一映射。
-
Assign文件夹：调度模块页面文件夹（还未实现好）
-
Login文件夹：登录模块页面文件夹
-
Order文件夹：订单管理模块页面文件夹
-
Page文件夹：整体页面框架文件夹（提供一个容器）
-
People文件夹：人事管理模块页面文件夹
-
Trans文件夹：运输管理模块页面文件夹（还未实现好）
-
User文件夹：用户界面模块页面文件夹
-
value文件夹：财务管理模块页面文件夹（还未实现好）
-
WareHouse文件夹：仓库管理模块页面文件夹
- Forget.Vue文件：忘记密码页面
- Login.Vue文件：登录注册页面
-
Order.Vue文件：订单审核页面
-
Check.Vue文件：订单审核页面点击某个订单后的审核详情页面。
-
Ask.Vue文件：进行中订单查询页面
-
Process.Vue文件：在进行中订单查询页面，点击某个订单后展现的详情页面
-
NowOrder.Vue文件：未进行中订单查询页面
-
OrderDetail.Vue文件：在未进行中订单查询页面，点击一个订单跳转出来的详情页面
-
PayOrder.Vue文件：在未进行中订单查询页面，查询未付款订单，点击订单后跳转到的收款页面
- Page.Vue文件：提供了页面的框架，描述了左侧导航栏，实现了顶部导航栏，实现了底部版权栏，描述了右部内容栏
- PageView.Vue文件：实现了右部内容栏，使得右部内容栏可以嵌入页面
- Smenu.Vue文件：实现了左侧导航栏，递归地从路由列表中选择可显示的页面，放入多级折叠页面导航框中。
-
People.Vue文件：人事管理模块页面
-
ChangeInfo.Vue文件：弹窗文件，在人事管理中如果修改某人信息，会弹窗修改，该文件描述了弹窗信息。弹窗的实现是将该文件导出到People.Vue中，People控制该组件是否显示，如果点击了指定按钮则显示该组件。
-
User.Vue文件：用户个人页面
-
EditWarehouseInfo.Vue文件：编辑运输员信息页面。如果是运输员登录系统，则会根据权限展示该页面
-
ChangeUserPassword.Vue文件：修改用户密码弹窗页面（弹窗如何实现参考People文件夹下的说明）
-
ChangeUserInfo.Vue文件：修改用户个人信息弹窗页面
-
ChangeUserEmail.Vue文件：修改用户邮箱弹窗页面
-
ChangeSendInfo.Vue文件：修改收寄件人信息页面
-
AddSendInfo.Vue文件：添加收寄件人信息页面
-
AcceptInfo.Vue文件：寄件模块下的收件人信息填写页面
-
AutoAcceptInfo.Vue文件：收件人信息填写页面的自动填写弹窗界面
-
MailInfo.Vue文件：寄件模块下的寄件人信息填写页面
-
AutoMailInfo.Vue文件：寄件模块下的寄件人信息自动填写页面
-
Send.Vue文件：寄件页面
-
WareHouse.Vue文件：仓库管理页面
-
DeleteWareHouse.Vue文件：删除仓库页面
-
CreateWareHouse.Vue文件：创建仓库页面
-
WareHouseDetail.Vue文件：仓库详情页面，在WareHouse.Vue下点击某个仓库会进入到WareHouseDetail页面
-
AddShelf.Vue文件：添加货架弹窗界面
-
EditShelf.Vue文件：编辑货架弹窗页面
-
Shelf.Vue文件：查看货架详情页面。在当前页面下，点击货架右端的“查看”按钮即可跳转到此页面。
