Quasar 热启动时使用proxy连接远程服务器

Quasar在接真机调试时很方便，改了马上在手机上就能看到，但程序中如果需连接远程服务器就比较麻烦，因为在热启动时，连远程服务器属于跨域了，之前我一直都是直接生成apk后，安装后再来测试连接远程服务器的功能，直到又读Quasar文档时看到了quasarconfjs中的devServer属性，经过一翻查阅，得到在热启动时连接远程服务器的方法。

这样，在程序中使用'/proxy'，代表的路径就是' >

项目介绍：

完全开源仓储管理软件，遵循Apache License 20协议，前后端分离，且完全开源，API使用restful协议，方便二次开发，前端代码使用quasar进行构建，后端使用Python Django31，利用API，可以支持多仓，波次发货，合并拣货，Milk-Run等业务模型。

软件著作权编号：2018SR517685

GitHub地址：

GitHubgithubcom/Singosgu/GreaterWMS

Demo地址：

GreaterWMS--Open Source Warehouse Management System>

商务联系：mail@56yhzcom

技术交流：GreaterWMS-01（加微信进群）

项目初衷：

我在供应链行业工作了15年，发现在我们这个专业的领域，没有一款高自由度、高自定义化的软件，来深度支持我们企业的业务。大多数软件都是闭源的，而且很难去做二次开发，即使开发，周期也是非常长，开发失败的案例也是比比皆是。由于企业选择了一款软件后，其二次开发也会被开发公司绑定，至于二次开发费用，只能说呵呵。所以，我设计了这个聚商汇WMS，为的是做到一款高自由度，高自定义开发的仓库管理软件，来深度支持企业的业务。

愿景：如果你从事着非IT行业的工作，而你又热爱你的行业，那就用科技去改变他。

生命周期

V 100 -- 2019年7月 ~ 2020年12月（由于100版本的二次开发设计较为复杂，故20重新编写）

V 200 -- 2020年12月 ~ 2021年3月（重新编写业务逻辑，原生自带API开发文档，加入实时通信，方便企业用户互相沟通）

V 210 -- 2021年3月 ~ 2021年6月（加入了客户与企业之间的实时互动，增进企业与客户之间的业务联系，实现VMI）

V 220 -- 2020年6月 ~ 2021年9月（加入了供应商与企业之间的实时互动，增进企业与供应商之间的业务联系，实现Milk-Run和看板拉动）

V 230 -- 2021年9月 ~ 2021年12月（库存管理雏形，初步加入神经网络，深度学习库存变化）

V 300 -- 2021年12月 ~ 2022年3月（完全植入神经网络，让上下游企业可以以最低的成本运营整体的业务）

V 310 -- 2022年3月 ~ 2022年6月（区域仓库业务布局，通过深度学习，实现多仓运营，成本最低化）

开发环境：

Python 版本为 V 380 +

Django 版本为 V 310 +(该版本Django才原生支持异步实时通信)

Django-rest-framework 版本为 V 3122 + (更高版本的Django-rest-Framework对Django3的兼容比较好)

Django-silk 版本为 V 410 (如果是部署上线，请关闭silk，silk仅为调试API接口速度用，有可能会泄露用户信息)

Quasar 版本为 V172 + (可以查看Quasar官网，来编辑GreaterWMS前端代码：Quasar官网)

Vue 版本为 V 260 +（尽量不要使用Vue3，因为开发环境没有使用Vue3，不知道会出现什么问题）

API，遵循 RESTful 架构

构建命令：

下载代码：

git clone

安装Python库：

pip install -r requirementstxt

注意：安装需要Twisted库，这个库有时候会安装不上，需要下载下来本地安装

下载地址：TWISTED

pip install Twisted{你下载下来的版本名称}

注意：本地安装需要注意路径

初始化数据库：

python managepy makemigrations

迁移数据库：

python managepy migrate

创建数据库，Django默认使用sqlite3作为数据库，如果需要mysql数据库，请在greaterwms/settingspy里面配置DATABASE

开发服务器运行：

开发运行：

daphne -p 8008 greaterwmsasgi:application

生产服务器运行：

supervisor守护进程：

pip install supervisor

使用supervisor来守护Django进程，再使用Nginx做反向代理，至于superevisor的教程有很多，这里不做讲解

Nginx支持：

推荐使用Nginx进行部署，部署的时候需要指定WebSocket链接，如果不指定，实时通信功能将报错

另需要修改axios_requestjs里的ws_url

## 示例更改前

const baseurl = '/'

const wsurl = 'ws://127001:8008/'

## 示例更改后

const baseurl = '://你的域名/'

const wsurl = 'wss://你的域名/websocket/'

如果服务器启用了SSL，请使用>

修改后需要重新build前端代码

开发扩展：

因为使用的前后端分离的设计，所以可以通过API，开发更多的软件应用

物流智能AGV

AGV的项目也已经开源，由于场地受限，仅实现智能发货，定点回库，使用的循迹感应器，超声波避障感应器，红外避障感应器，所有的指令通过网络传输，AGV绑定MAC地址和IP地址，保证了安全性，前提是，你需要有一个树莓派。

进销存

可以直接当一个进销存系统使用，简化仓库库位设置等 *** 作即可。

APP和小程序

Quasar原生可以直接打包成IOS APP和Android APP

小程序的开发可以通过API开做二次开发，但小程序不支持put请求，所以需要自己再写一个请求接口。

API的组合可以达到100万种，这样我们可以根据查询请求，来获得实时报表和数据监控

供应链管理系统

产品的数量，创建时间，最后使用时间是各方面统计的，所以可以方便采购计划和调拨计划进行库存的分析

V 230及其以后的版本，将自带深度学习分析，所以可以直接使用分析结果作为供应链管理系统工具使用

多仓管理

OPENID为用户的数据唯一标识，数据组统一标识为APPID，所以很方便可以实现多仓管理

波次拣货，发货

可以设置固定时间向服务器发出请求，从而达到波次拣货的功能

也可以直接使用任务工作，通过API查询分析结果来实现，推荐使用APScheduler

~~~python pip install apscheduler ~~~

Milk-Run

V 220及其以上版本，将原生支持此功能

如果现在就需要这个业务，可以根据API调用库存消耗，来实现此功能

VMI

V 210及其以上版本，将原生支持此功能

如果现在就需要这个业务，可以根据API调用库存消耗，来实现此功能

拣货路线优化

现在的拣货路线是按照库位排序

V 230以后版本将原生支持此功能

如果现在需要这个业务，可以根据每天的拣货明细，调用API来实现此功能

开发指南：

baseurl

是发起请求的基本网址，如果是本地调试，则默认为>

修改方式为，修改axios_requestjs，注意websocket的修改之前已经提到了

Django-silk

django-silk为开发时的调试工具，可以统计每个接口的响应速度，如果需要部署到生产环境，请删除Django-silk相关配置，因为会有泄露用户信息的风险，或者直接修改Django-silk库，让用户只能看到自己的请求数据

数据库存储

数据库设计时考虑到数据迁移等问题，所以只有users里面的user_id和Django自带的user_id做了外键，其余所有字段全部没有使用外键，方便数据备份和数据库迁移

数据库是4段式设计

验证数据用户归属

验证数据安全性

验证数据是否可以存入数据库

存入数据库，并返回Response

关于数据传输

需要在所有的请求头headers里面加入token值，这个值就是用户的数据唯一标识OPENID

所有的数据传输需要设定content-type为application/json

OPENID

OPENID是注册用户数据的唯一标识，当管理员直接注册时，会有developer=1这个管理员标识。

你可以根据developer标识来做自定义二次开发

APPID

APPID是用户数据组唯一标识

如果需要多公司运营，或者多仓运营，可以通过APPID做统一链接，来实现多公司，多仓 *** 作

用户权限

未对用户权限做过多限制，请根据自身的业务需要，做二次开发限制

业务流程：

管理员

点击注册，可以注册成为管理员账号，从而实现初始化程序设置

注册后会得到2个ID和1个开发者标识，OPENID是用户数据组唯一标识，通过OPENID绑定此OPENID下所有的数据，APPID是用户组数据唯一标识，通过APPID来实现多公司，多仓库功能，Developer标识是个布尔值，True代表这是个管理员账号

用户登入分2种：

使用OPENID和员工名称直接登入

管理员使用账号和密码登入

登入后前端会存储登入信息

可以通过查看我的OPENID来查看用户数据组的OPENID

如果需要多公司，多仓库 *** 作，注意需要更改OPENID

更多管理员权限，请自行开发

员工管理

注册管理员后，新建一个员工

员工有2个字段，Staff_name（用于员工登入），Staff_type（员工类型来控制员工的权限）

系统没有对员工权限做任何限制，如果需要员工权限，请根据企业业务模型，自行修改Templates

点击Edit，可以修改员工信息

点击Delete，可以删除员工信息，系统后台会将Is_delete调成True

点击Contact：

可以直接和员工实时聊天，但是不可以和自己聊天

可以新建一个备忘录员工，这样做其实是当成备忘录使用

在个人中心，可以查看最近的联系人

Message标识会提醒你现在有多少未读消息

司机管理

司机管理只会在发货流程中用到

你需要知道货物是哪个司机提货取走的

仓库设置

Warehouse

仓库的创建只可以创建一个仓库，现在可以创建多个，但是只有第一个会起作用

如果需要多仓处理，可以通过APPID进行二次开发，也可以直接重新创建一个管理员账号

仓库的城市一定要填写，这是用来计算运费的

Bin_Property

库位属性决定了仓库中货物属于什么属性的货物

4种属性：破损（Damage)，锁定（Holding），质检（Inspection），正常（Normal）

Beta版中，属性可以修改和删除，正式版将无法删除和修改

所有的发货，都只会匹配Normal库位的货物

收货上架和移库，都会根据库位属性，直接修改库存数量，仓库的库存数量不会出现负数

Bin_Size

库位的尺寸是帮助 *** 作人员查看货物是否可以放入库位

现行的版本没有对上架和移库尺寸做检查，将来会加入自动检查

Bin_Set

库位设置是必须的，通常库位设置是横纵横纵，比如A010101，即A横01纵01横01纵

库位的设置需要设置库位属性和尺寸，属性很重要，他决定了此库位的货物是否为正常货物

基础设置

Company

公司基本信息的创建只可以创建一个公司，现在可以创建多个，但是只有第一个会起作用

如果需要多公司处理，可以通过APPID进行二次开发，也可以直接重新创建一个管理员账号

公司的城市一定要填写，这是用来显示在收发货单上的

Supplier

供应商的基础信息

供应商的城市一定要填写，这是用来显示在收货单上的，并且也是要自动计算运费的

Customer

客户的基础信息

客户的城市一定要填写，这是用来显示在发货单上的，并且也是要自动计算运费的

商品管理

Unit

商品的单位，系统会初始化创建一些，但可以自己添加和修改

Class

商品的类型，可以自己添加和修改

Color

商品的颜色，系统会初始化创建一些，但可以自己添加和修改

Brand

商品的品牌，可以自己添加和修改

Shape

商品的形状，系统会初始化创建一些，但可以自己添加和修改

Specs

商品的规格，可以自己添加和修改

Origin

商品的产地，可以自己添加和修改

Goods List

商品的列表

固定资产

Capital

固定资产创建，没有做过多拓展，只是记录使用

可以统计托盘账目等

库存管理

Stock List

在库的货物总的库存数据量

Onhand_stock现有的库存数量

Can Order，可以用于下单发货的库存数量，因为有些货物已经被下了订单，虽然有现有库存，但是不可以再被订货

Ordered Stock，已经被下单的货物数量

ASN Stock，已经下了到货通知书，但还没有确认到货通知书的货物数量

DN Stock，已被下单，但是还没有确认订单数量

Pre Load，预计到货货物数量

Pre Sort，已经到货，卸货完成，等待分拣的货物数量

Sorted Stock，货物分拣完成，等待上架的货物数量

Pick Stock，发货单生成了拣货单，等待拣货的货物数量

Picked Stock，已经拣货完成，等待和司机交接的货物数量

Back Order Stock，欠货订单数量

Bin Stock

Total Stock，这个库位该产品的所有库存数量

Pick Stock，这个库位需要拣货的数量

Picked Stock，这个库位拣货完成的数量

Move To Bin， 移库，移库后，会根据库位属性，直接更新库存数量，如果库位全部移空，则该库位会更新为空库位

Empty Bin

空库位明细

Occupied Bin

非空库位明细

收货管理

ASN到货通知书状态

ASN Status = 1, ASN到货通知书创建完成，状态1是唯一可以删除和修改ASN信息的状态，他会显示在Pre Delivery中，即有了到货通知书，但是还没有到货，点击Confirm Delivery，即确认货物已经到达，ASN Status更新到2，此时已经无法再修改ASN信息

ASN Status = 2, 拓展开发为司机到货排队，如果我们有很多司机到货，这可以做成一个排队系统，同时也可以让采购和销售看到到货信息，减少不必要的邮件和电话沟通，点击Finish Loading，即确认货物已经卸货完成，ASN Status更新到3,货物信息会出现在Sorting，此时的ASN状态表示，货物已卸到仓库，等待分拣

ASN Status = 3, 货物分拣是必须的一个流程，没有货物分拣，货物是无法上架的，上架的原则就是货物整理好，摆放到相对应的库位上，点击Confirm Sorted，ASN Status更新到4，即确认分拣完成，等待上架

此时移动Sorted页面，会出现需要上架的货物明细，点击Move To Bin，上架完成，当然，系统会根据上架后的库位属性，自动更新商品库存数量信息

发货管理

DN发货单状态

DN Status = 1, DN发货单创建完成，此时订单还是可以修改状态，且系统中的库存数量不会发生任何改变，点击Confirm Order，DN Status更新到2，即订单已经被确认，且无法更改，同时系统中的货物库存数量会自动更新，比如Can Order数量和Ordered数量

DN Status = 2, 这是订单被确认等待生成拣货单的过程，你可以点击单条订单Order Release来生成一个订单的拣货单，你也可以点击Release All Order，来将所有订单生成拣货单，如果是所有订单Release，那么会根据时间的先后进行库存匹配，库存不足时，会生成Back Order，即欠货订单，在这个过程中，DN单号是会发生改变的，如一家客户的多张订单，会被统一到一张订单中进行拣货，如客户订单无法满足，会将未满足部分生成欠货订单，欠货订单如果仍未得到匹配库存满足，将不再生成新的订单，DN Status会更新到3，即等待拣货的过程，已确认的订单和欠货订单都时Status为2的状态

DN Status = 3, 直接拣货，此功能会出现在Beta5更新中，暂时未更新

DN Status = 4, 发货交接，此功能会出现在Beta6更新中，暂时未更新

DN Status = 5, 客户签收，此功能会出现在Beta7更新中，暂时未更新

DN Status = 6, 对账结束，订单关闭，此功能会出现在Beta7更新中，暂时未更新

退货管理

RO退货订单 此功能将会出现在正式版中

运费管理

Transportation Fee API已经完成，前端暂未更新入口，如果想要使用，可以直接调用Payment下的Transportation Fee API进行使用，运费自动计算模块已经做进收发货流程中

Quasar（发音为/kweɪzɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：

Quasar允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。

当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！

为什么使用Quasar？

全平台支持

同时针对所有平台的源代码：响应式桌面/移动网站，PWA（渐进式Web应用程序），移动APP（外观原生）和多平台桌面应用程序（通过Electron）。

顶级的，快速的网络响应组件

几乎每个Web开发需求都有一个组件。每个组件都经过精心设计，为用户提供最佳体验。Quasar设计时考虑到了性能和响应能力 - 所以使用Quasar的开销几乎不明显。这是我们特别引以为傲的一个领域。

最佳实践默认集成

我们鼓励Quasar用户遵循网页开发最佳实践，这需要许多开箱即用的嵌入式功能。HTML / CSS / JS压缩、缓存清除、tree shaking、sourcemapping、代码分割和延迟加载、ES6转译、代码检查、可访问性功能。Quasar有这些功能以及更多，并且不需要配置。

全面的RTL支持

RTL（从右到左）支持Quasar组件和开发人员自己的代码。如果使用RTL语言包，开发人员编写的网站/应用程序CSS代码会自动转换为RTL。

两个主题（将有更多）

该框架支持两种最常用的主题 - Material主题和iOS主题。

逐步迁移现有项目

Quasar提供UMD（统一模块定义）版本，这意味着开发人员可以将CSS和JS HTML标签添加到现有项目中，并准备好使用它。不需要构建步骤。

通过Quasar CLI提供无与伦比的开发人员体验

当使用Quasar的CLI时，开发人员将受益于：

极大提升开发速度

顶级入门套件使开发人员可以在最短时间内轻松实现创意。繁重的工作已替开发人员完成，而不是由开发人员来做。他们可以轻松聚焦在功能上，并通过Quasar实现样板。

很棒的不断增长的社区

当开发者遇到他们无法解决的问题时，他们可以访问Quasar论坛或Discord聊天服务器。社区在那里帮助你。

广泛的平台支持

Google Chrome，Firefox，IE11 / Edge，Safari，Opera，iOS，Android，Windows Phone，Blackberry。

Quasar组件国际化（I18n）

Quasar组件默认提供I18n。如果您的语言包缺失，只需5分钟即可添加。

出色的文档

最后，值得一提的是，编写出色的，无臃肿，重点突出的完整文档页面花费了大量时间，以便开发人员可以快速学会Quasar。没有混淆的余地。

底层技术

Vue，Babel，Webpack，Cordova，Electron。

除了Vue(需要半天的时间就能学会并永远改变你)，你并不需要知道其他技术。他们中的大多数都已集成并已为您配置。

Quasar（发音为/kweɪzɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：

响应式网站

PWA（Progressive Web App）

通过Apache Cordova构建移动APP（Android，iOS，…）

多平台桌面应用程序（使用Electron）

Quasar允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。

当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！

本人也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可以给我留言指正。希望和大家共同进步，共建和谐学习环境。

最近公司想要开发一款桌面应用，在众多的跨平台桌面框架中，我选择了electron，主要的原因是electron使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。相对于其他桌面应用框架，electron相对于前端来说上手起来比较简单。因为之前的技术栈大部分用的Vuejs，所以想采用vue + electron的方式快速迁移之前的项目。

查阅了很多资料，我总结了以下几种方式进行“融合”。

在electron官网中提供一个快速创建electron 项目的模板 electron-quick-start

1、clone 模板到本地

2、使用npm install安装包（electron安装缓慢，后续更新教程）

3、使用npm run start 就可以启动项目，测试是否安装成功

4、使用vue-cli创建一个vue项目，然后打包到dist 目录下

5、修改mainjs中加载页面的路径 mainWindowloadFile('dist/indexhtml')

这个方法和第一个方法其实很相似，就是将第一种方法反过来用

1、使用vue cli 创建一个vue 项目

2、使用 npm install --save-dev electron electron-packager安装包

3、在根目录中添加一个renderjs

4、修改packagejson 的入口 main: "renderjs"

5、添加启动命令 "electron:serve": "vue-cli-service electron:serve"

6、在renderjs 中加载路径改为 mainWindowloadURL(" >

本期推荐开源项目目录：

1 开源远程桌面客户端软件

2 Windows 远程管理工具

3 FreeRDP：远程桌面协议实现

4 基于 Java 的远程控制桌面

开源远程桌面客户端软件

基于 Rust 编写的开源远程桌面客户端软件，标星 165K。这个开源远程工具开箱即用，无需进行额外的配置，是 TeamViewer 和向日葵的替代品。

这个开源产品支持 Windows 、Linux、MacOS 系统，界面简洁漂亮。

开源地址：>

无法实现。

分析原因：

iOS系统只支持一次加载一个软件，即一次开启一个进程。想运行其他软件，只能退出当前软件来打开下一个软件，说白了就是进程之间不能抢占资源，资源只有一个。

以上就是关于Quasar 热启动时使用proxy连接远程服务器全部的内容，包括:Quasar 热启动时使用proxy连接远程服务器、greaterwms是什么、Mac Window Linux 下应用只需一个Quasar等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！