[免费开源]基于vue框架，用d2admin+elementui做的PC前端Web，uniapp做移动端，狐表做后端漂亮美观狐表变美终极方案前后端分离(20211109追加货运订单管理案例) - 专家坐堂 - Foxtable(狐表) - 新一代数据库软件，完美融合Access、Foxpro、Excel、vb.net之优势，人人都能掌握的快速软件开发工具!

(快速浏览杰哥分享过的所有经验汇总，点击跳转）

目前大趋势都是web，前后端分离的开发模式，一套后端代码，pc端和手机端通用，这样做多平台的项目才快。于是我挑了vue的框架下几个优秀的开源框架，集成了一个小的企业系统。(感兴趣想与我深入交流的，可以加QQ 2385350359）

而且，在这个看脸的时代，功能再强，也抵不过甲方一句“太丑了”，功能和美观，都要兼得，才能在未来的路里，越走越顺！

一、先看案例效果：

（更多最新案例，可以去我官网查看https://www.mbldt.com/FoxtableExample/，不再帖子里继续增加了，影响阅读）

2021年11月9号更新，追加货运订单管理系统：

这是一个做货车运输订单和调度管理的系统

业主是一个货运公司，接各个客户的订单，然后调度自营货车/外发物流进行运输，最后收款
系统特点是订单支持拆单，自动把订单按自定义比例分为“提货”和“送货”2张运单，这是行业特色
针对运单进行调度管理，货车安排、发货、卸货、收款
月底可以根据司机的基本工资÷出车次数，得出每单人工成本，反写回每张调度单的成本里，实现成本精准计算
最后根据订单、调度单、工资、外发物流费用，一键分析公司利润、车辆成本、外发物流成本
系统支持手机端查看报表，方便老板管理

此主题相关图片如下：系统架构图.png

此主题相关图片如下：系统流程图.png

此主题相关图片如下：手机端.jpg

此主题相关图片如下：1.png

此主题相关图片如下：2.png

此主题相关图片如下：3.png

2021年10月9号更新，追加企业代理记/账管理系统：

这是一个帮小微企业做代理记账的客户

业务不复杂，就是帮小微企业代理做/账、申报、企业法人变更、银行开销户等业务
分为国内和国外客户，系统记录一下每个业务员跟进的情况，解决过去资料混乱的问题
有一个资料交接的模块，专门用于记录与客户收发快递。在过去经常资料找不到，互相扯皮说已经交付，非常头痛。这个客户是造价公司，有很多材料价格，要求做一个小程序给他们的合作单位，能通过权限控制能否看到价格

此主题相关图片如下：1.png

此主题相关图片如下：4.png

2021年5月13号更新，追加造价材料价格微信小程序：

这个客户是造价公司，有很多材料价格，要求做一个小程序给他们的合作单位，能通过权限控制能否看到价格

此主题相关图片如下：未标题-1.jpg

2021年5月12号更新，追加企保管理系统：https://mh20web.mbldt.com/

这个客户是代理雇主险，帮工厂购买。系统可以非常方便根据人员名单和方案价格，算出应收款。

最大的特点是是换员替补时，能自动按照先进先出的原则替换保单，大大降低人工计算的耗时

此主题相关图片如下：a.png

此主题相关图片如下：b.png

此主题相关图片如下：c.png

此主题相关图片如下：d.png

2021年3月20号更新，追加纯英文版-订单管理系统： https://mh19web.mbldt.com/

这个客户是外企，要求做一个纯英文的系统，功能不复杂，大家可以体验下英文状态下系统的样式

此主题相关图片如下：1.png

此主题相关图片如下：2.png

此主题相关图片如下：3.png

2021年1月25号更新，追加藏宝阁-玩家交易平台（含手机端）： https://mh15web.mbldt.com/

这是一个做方便小圈子群里，玩家们发布账号交易、高价值装备交易、收金、代练发布等需求的交易平台。

手机端框架首次使用UniApp+UViewUi，放弃之前ColorUi框架，并首次引入手机端的富文本框编辑器mp-html

PC端与手机端是数据完全同步。试用请随意注册账号，所以功能完整无bug。

此主题相关图片如下：3.jpg

此主题相关图片如下：1.png

此主题相关图片如下：2.png

此主题相关图片如下：5.jpg

此主题相关图片如下：4.jpg

2020年11月14号更新，追加贸易订单管理系统： https://mh14web.mbldt.com/

这是一个做贸易生意的客户定制的。业务流程是：收到客户订单后，转手给供应商下单，赚中间差价，赚钱模式简单直观，可管理却反过来。过去都是用Excel管理合同、订单、发货、验收、开piao、收款。多个人每天十多份Excel传来传去，订单进度非常混乱。

开发系统为了解决Excel订单混乱的弊端。能时刻掌握我有多少，已下单未发货，已发货未验收，已验收未收款，已开piao未收款的订单

此主题相关图片如下：1.png

此主题相关图片如下：2.png

此主题相关图片如下：3.png

此主题相关图片如下：4.png

2020年9月7号更新，追加科研信息管理系统： https://mh12web.mbldt.com/

用狐表做简单的2步审批。主要用于校内管理员与教员之间，信息填报与审批，包含：科研项目记录、科研绩效发放、专利发布、专著发布、咨询报告、个人科研荣誉、团队科研荣誉、团队月度考核记录。特色功能是可以把系统数据与附件同时导出，自动把上传的附件以超链接的形式嵌套在Excel里，可以直接打开

此主题相关图片如下：1.png

此主题相关图片如下：2.png

此主题相关图片如下：3.png

此主题相关图片如下：4.png

此主题相关图片如下：5.png

此主题相关图片如下：6.png

2020年7月23号更新，追加OA办公+造价管理系统： https://mh9web.mbldt.com/

用狐表做OA工作流审批，包含常见的OA模块：文具耗材领用管理、固定资产管理、请假申请、报销申请、用印盖章申请、出差申请、加班报餐登记、员工入职离职登记、fa piao申请。这个客户是做造价项目，所以还有特色功能，造价招标项目登记、造价过程资料管理、员工提成管理、项目流程跟踪

此主题相关图片如下：1.png

此主题相关图片如下：2.png

此主题相关图片如下：3.png

2020年4月28号更新，追加冒险岛攻略网站： https://mxd.mbldt.com/

一个无商业利益的攻略查询网站,纯属个人爱好，顺便练手wangEditor富文本框，类似于企业门户展示

此主题相关图片如下：3.png

2020年4月5号更新，追加工业铝材进销存管理系统成果体验： http://mh6web.mbldt.com/

帮一个广东佛山金属园的客户做的，用于管理铝材的进货、下单、出仓、称重、结算。
技术功能点包含单表、父子表、统计分析、excel打印、用户权限控制、动态表头、行尾合计、分页动态加载、自动编号。

此主题相关图片如下：2.png

2020年2月25号更新，追加旅游订单管理系统成果体验： https://mh3web.mbldt.com/

给旅行社做的，给大家体验，包含基础产品录入，线路套餐录入，订单行程安排，酒店预订邮件发送。

从2月12号开始做，2月25号完成，包含常见的父子表结构，首页界面设计。邮件功能由于安全性考虑，体验版不开放。

此主题相关图片如下：1.png

二、开源分享给大家，体验地址：（下载在最后）

（体验时请尊重其他狐友，不要擅自修改密码，方便后来人）

(由于单点登录的功能，所以如果体验过程中账号被登出，您可以换一个别的账号，或者自己新建一个！）

手机端与PC端是同一套后台，所以账号密码与数据都是一样的。

他们都部署在阿里云上，使用nginx反向代理，启动好免费的SSL证书，都是HTTPS协议。

基础框架版，也就是免费开源出来的核心纯净版
基础版：PC端体验地址：https://mh10web.mbldt.com/

基础版：手机端体验地址：

此主题相关图片如下：qq截图20220727145316.png

三、源码的效果展示

PC端图片：

此主题相关图片如下：1.png

此主题相关图片如下：2.png

此主题相关图片如下：3.png

此主题相关图片如下：4.png

此主题相关图片如下：5.png

此主题相关图片如下：6.png

此主题相关图片如下：7.png

此主题相关图片如下：8.png

此主题相关图片如下：9.png

此主题相关图片如下：2.png

移动端图片：

此主题相关图片如下：10.png

此主题相关图片如下：11.png

此主题相关图片如下：12.png

此主题相关图片如下：13.png

此主题相关图片如下：14.png

狐表后端图片：

此主题相关图片如下：15.png

此主题相关图片如下：16.png

此主题相关图片如下：17.png

四、框架说明：

此主题相关图片如下：61849a56d569b.png

此主题相关图片如下：2.png

①后端：使用狐表2020.1.19版本的高级开发版。(最高支持2021.5.29的高级开发版，因为后续版本官方取消了动态编译）

②PC端：

1基础框架用Vue_cli3+node.js+webpack，

2UI框架使用elementUi，

3后台整体框架使用d2admin,

4表格功能使用vxe-table，基于elementui表格升级改造的。狐表擅长数据处理，所以要找一个类似easyui足够强的table框架

③移动端：

1基础框架用HBuilderX+uni-app, uni-app是个流应用的创始人，微信小程序也是用它的核心技术实现的。所以这个框架，在移动端的跨平台里，非常强大

此主题相关图片如下：1.png

2样式框架采用ColorUi（一个颜色非常绚丽夺目的框架！）

此主题相关图片如下：未标题-1.jpg

五、源码部署说明：

话说前头：

这套东西需要掌握很多技术，如果你没接触过，你下载了我的源码也玩不通。

如果你看狐表的帮助文档都觉得辛苦，搞不懂cs的狐表怎么玩
如果你很懂狐表的vb.net，但是对网页知识一无所知
如果你也懂了网页知识的基础，但没超出过狐表高级开发文档里的，
如果你觉得搞懂了周老师的jquery和easyui，但是没接触过vue
如果你接触过vue，但是没去玩vue-router、vuex、axios

以上5种情况，你都不用下载这套源码，真是浪费你时间的，你基础不够，看不懂的。先去学习狐表帮助文档+周老师的html、js、css网页开发基础+vue全家桶+nodejs，慕课网的小白入门视频教程都过一轮

如果你对狐表后端很懂，对狐表高开的内容很懂，对周老师里关于html/css 基础讲解的内容很懂，对vue开发模式略懂，做过1-3个简单的vue小demo，那你可以下载，你能看得懂我待会在说什么····

部署步骤：

1下载源码后，先恢复数据。我用的是mssql2008 R2的数据库。

2打开狐表后台，开发者密码888。设置好数据库源

3启动狐表后端服务。默认使用 127.0.0.1:9090 地址

4安装好nodejs，

5pc端的web，你在cmd里进去该d2admin目录，使用npm clean cache，清除缓存。然后npm install，等待nodejs自动帮你安装好依赖。最后 npm run dev ，就可以启动pcweb了

6移动端的，你下载安装好HBuilderx，打开uniapp1这个目录，使用HBuilderX运行。如果提示你安装scss插件，你也装一个。

后端设计理念：

狐表后端，进入动态内部函数模块。你会发现我做了一个比较细致的函数分类。其实是写了一个递归，实现代码与文件夹的分类。

1在狐表的HttpRequest事件里，调用了“Web_Main”函数，把代码的维护，转移到动态内部函数里。

2而“Web_Main”函数，在 “0Web入口”文件夹里。整个后端，这里就是核心。

3每次web访问，就会来这里，找对应的动态内部函数，再相应执行。

4这里借鉴了官方FoxWeb的设计理念，把函数，都放在全局变量Dictionary里，然后找函数，就瞬间找完

5然后我还多弄了一个专门存异步函数的Dictionary。

此主题相关图片如下：3.png

6后端统一只接受来自api目录下的ajax请求，所以你看到这里我对api进行了截取

7前端和后端数据传递时，做了AES对称加密，让人无法直接在network看到我在传输什么，在全局代码里，你会看到有个AES加密，里面有个对称的秘钥，在前端也要配合改。这个后话。

d2admin设计理念：

1这套东西，你必须要看它的官方文档d2admin,里面说了axios是怎么请求的，vuex是如何存储的，cookies是如何存取的，

2唯一注意配合的，就是我在axios的请求里，加了aes加密，你自己去看怎么加密

3里面用到的表格功能，你要去看vxe-table的文档

4里面的组件，都是ElemenUI的，你要自己去看elementUi文档

uniapp设计理念：

1你要懂移动端，必须先搞懂上面的d2admin,都是vue的产品

2这套东西跟uniapp的官方框架一样，没做什么太大调整，唯一就是我自己加了一个axios请求封装，而不是原来的uni.Request。你搞懂了上面的d2admin的axios，这里你会发现思路和原理是一样的。

3至于ui，是用了colorui这个css样式库。这个不改变uni组件下，做了美化，能最大限度保证它全平台的兼容性。

六、源码下载：

以下内容只有回复后才可以浏览

七、最后感想：

在狐表领域里，究竟cs快还是bs快？

答案：看规模

1单机版，个人软件，小工具，几个表，不分页，无外置数据库，绝对是cs快，无敌啊。直接建表，写几个按钮和逻辑代码，收工下班。

2多人软件，有登陆、权限，外置数据库，特别是需要动态加载、分页加载数据。这时候bs跟cs的速度已经开始持平，因为你发现你要为动态加载和分页，自己重复写很多代码，例如那些上一页，下一页按钮，表间关联造成的父表数据按需加载。但这时候，速度主要取决于你对工具的熟练，不能硬说bs和cs谁快。

3多平台系统。需要PC端能用，也需要手机端能用。用weui模式，你会发现CS里开发一大轮，到了weui里又几乎重新写过。发生修改时，你要改服务器的exe，重新发布。改客户端的exe，然后重新发布。改一次手机端的weui代码，模仿cs里的逻辑改，互相割裂，非常胡乱。

所以这时候就到了前后端分离的bs快。后端写了同一套加密，同一套api，然后前端只是展示，换个壳，代码非常容易统一维护。那些分页按钮，权限，在所有前端都同一套逻辑体系，非常方便。至于前端用vue还是用jquery体系，你自己选，都可以。

① 如果你想美观，建议就选vue，因为现在生态好，很多优秀美观的ui，和超级强大的git库，但是学起来很痛苦，掌握的东西需要超级多。vue/node/webpack/elementui/d2admin/axios/vuex，学个3-6个月，基本才入门。

②如果你想容易学，快出成果，建议选周老师的jquery。老师都做好总结了，连框架和文档都写好了，不用折腾这么辛苦。

最后提醒大家，bs比cs系统开放，注意安全性！！！尽量添加https和必要的防火墙。我放出来给体验的，不要一周就已经有thinkphp的黑客工具尝试注入我了

此主题相关图片如下：3.png

强烈的推荐大家去看下我分享的关于服务器安装的经验总结：

[服务器安全汇总] 杰哥在云服务器8年的狐表实战的网络安全经验总结。让你看看遭遇比特币勒索的血泪教训。没有信息安全，再强大的功能都是白搭！

===============================================================

顺便总结以前分享过的帖子，方便大家学习

【迈宝伦工作室】承接各种中小企业或个人的Foxtable项目，单机版exe3000元以下，多人版exe3000元起，web多人版10000元起步

联系QQ：2385350359

免费产品：

[杰哥的免费分享]A1迷你库存管理系统，网页版的纯库存管理，实现简单的多人协助出入库，库存统计，权限管理

[杰哥的免费分享]A2迷你产品报价系统，网页版的带图Excel报价单快速生成工具，外贸企业特别常用

[杰哥的免费分享]OA行政管理系统，网页版的OA审批工作流，开放式流程，包含固定资产管理、文具申领库存、报销申请、用印盖章申请、请假申请等常见行政模块

[杰哥的免费分享]造价项目资料和提成管理系统，应用于造价行业，把过程资料归档，设置每个项目的成员提成，一键统计绩效

经验分享：

[服务器安全汇总] 杰哥在云服务器8年的狐表实战的网络安全经验总结。让你看看遭遇比特币勒索的血泪教训。没有信息安全，再强大的功能都是白搭！

[免费开源]狐表集成Redis教程，三行代码搞定！使用CsRedis高分Git库，redis官方推荐的第三方库，简单易用！顺便分享Redis服务器安装和科普【缓存穿透、缓存击穿、缓存雪崩】

[免费开源]教你用狐表做爬虫获取网页元素。狐表HttpClient+第三方xPath分析工具HtmlAgilityPack。用主流的思路爬取网页，获取表格数据，配合狐表的定时器，快速多掌握一门工作业务技术

[分享]狐表帮助文档中【正确】的中英文颜色对照表。官方文档不够准确，导致调样式经常有色差

[总结分享]异步里里DataTable能用Find和不能用SqlFind，1小心被坑，2不要滥用异步！并附上实战项目里，BS前后端分离下的接口请求平均耗时统计

[免费分享]正则表达式的使用，含匹配验证、提取过滤，常见正则表达式，复制即可用。过滤中文、大小写英文、数字、标点符号、换行符...

[免费开源]狐表cs集成代码高亮Highlight.js，代码着色，毫秒级响应。你还在用黑白的文本框阅读后端web代码吗？来试试这个

[免费开源]狐表集成MQTT解决方案，MQTT是目前大热物联网领域最广泛使用的软硬件通讯协议。如果连MQTT都没听过，别说自己是做物联网项目的，会被人笑的....

[免费开源]狐表bs集成websocket方法，dll来源于github 3.5k高分数的C# Websocket库稳定性和兼容性非常好。相当于web bs领域的OpenQQ功能

[找图标的进来看一眼,包你开眼界！]一个国外黑马级别的图标网站，精美程度真秒杀国内那些fontawesome，关键是支持搜索！找图标的真正痛点：只能用肉眼遍历，上万个图，老子看到何年鸟月啊！

[免费分享]把组合统计结果的fxDataSource转json输出给前端，解决BS开发模式下此强大的多表联查工具只能用在C/S领域table组件的局限性

[免费开源]狐表代码精灵管理器,自己改造狐表的官方代码编辑器，增加提示，自定义事件、方法、对象，非常简单，只需要2步！不用依赖任何第三方工具，永久跟着官方升级

免费开源的wangEditor富文本框解决方案,粘贴自动上传图片（截图上传神器啊！）,可嵌入视频，vue和jquery的BS框架都能用，不能用在cs哦！

[免费分享]sqlBulkCopy批量插入大量数据总结分享（批量导入、快速导入）

[免费分享]从周老师的书里挖个Json部分的总结分享给大家。狐表官方没有细说这一块，在前后端分离开发亟需扎实json利用

[免费开源]基于vue框架，用d2admin+elementui做的PC前端FoxWeb，uniapp做移动端，狐表做后端漂亮美观狐表变美终极方案前后端分离(20201114追加贸易订单管理案例体验)

[免费分享]简单无脑3步实现！狐表做服务器端，开机自动启动的解决方案。解决云服务器重启后不会自动启动狐表的问题[亲测可用]

[免费分享]狐表结合阿里云Oss对象存储案例小结，引用官方SDK dll，亲测能用

[免费分享]狐表CS端集成Echarts总结，亲测能用（顺便基础扫盲）

[此贴子已经被作者于2024/6/5 18:11:11编辑过]

主题：[免费开源]基于vue框架，用d2admin+elementui做的PC前端Web，uniapp做移动端，狐表做后端 漂亮美观 狐表变美终极方案 前后端分离(20211109追加货运订单管理案例)

(快速浏览杰哥分享过的所有经验汇总，点击跳转）

主题：[免费开源]基于vue框架，用d2admin+elementui做的PC前端Web，uniapp做移动端，狐表做后端漂亮美观狐表变美终极方案前后端分离(20211109追加货运订单管理案例)