- Foxtable(狐表) (http://foxtable.com/bbs/index.asp)
-- 专家坐堂 (http://foxtable.com/bbs/list.asp?boardid=2)
---- [免费开源]基于vue框架，用d2admin+elementui做的PC前端Web，uniapp做移动端，狐表做后端 漂亮美观 狐表变美终极方案 前后端分离(20211109追加货运订单管理案例) (http://foxtable.com/bbs/dispbbs.asp?boardid=2&id=146015)
-- 发布时间：2020/2/14 11:27:00
-- [免费开源]基于vue框架，用d2admin+elementui做的PC前端Web，uniapp做移动端，狐表做后端 漂亮美观 狐表变美终极方案 前后端分离(20211109追加货运订单管理案例)
|
而且，在这个看脸的时代，功能再强，也抵不过甲方一句“太丑了”，功能和美观，都要兼得，才能在未来的路里，越走越顺！
此主题相关图片如下：系统架构图.png
此主题相关图片如下：系统流程图.png
此主题相关图片如下：手机端.jpg
此主题相关图片如下：1.png
此主题相关图片如下：2.png
此主题相关图片如下：3.png
此主题相关图片如下：1.png
此主题相关图片如下：4.png
此主题相关图片如下：未标题-1.jpg
此主题相关图片如下：a.png
此主题相关图片如下：b.png
此主题相关图片如下：c.png
此主题相关图片如下：d.png
此主题相关图片如下：1.png
此主题相关图片如下：2.png
此主题相关图片如下：3.png
此主题相关图片如下：3.jpg
此主题相关图片如下：1.png
此主题相关图片如下：2.png
此主题相关图片如下：5.jpg
此主题相关图片如下：4.jpg
此主题相关图片如下：1.png
此主题相关图片如下：2.png
此主题相关图片如下：3.png
此主题相关图片如下：4.png
用狐表做简单的2步审批。主要用于校内管理员与教员之间，信息填报与审批，包含：科研项目记录、科研绩效发放、专利发布、专著发布、咨询报告、个人科研荣誉、团队科研荣誉、团队月度考核记录。特色功能是可以把系统数据与附件同时导出，自动把上传的附件以超链接的形式嵌套在Excel里，可以直接打开
此主题相关图片如下：1.png
此主题相关图片如下：2.png
此主题相关图片如下：3.png
此主题相关图片如下：4.png
此主题相关图片如下：5.png
此主题相关图片如下：6.png
一、先看案例效果：
（更多最新案例，可以去我官网查看https://www.mbldt.com/FoxtableExample/，不再帖子里继续增加了，影响阅读）
2021年11月9号更新，追加 货运订单管理系统：
这是一个做货车运输订单和调度管理的系统
- 业主是一个货运公司，接各个客户的订单，然后调度自营货车/外发物流进行运输，最后收款
- 系统特点是订单支持拆单，自动把订单按自定义比例分为“提货”和“送货”2张运单，这是行业特色
- 针对运单进行调度管理，货车安排、发货、卸货、收款
- 月底可以根据司机的基本工资÷出车次数，得出每单人工成本，反写回每张调度单的成本里，实现成本精准计算
- 最后根据订单、调度单、工资、外发物流费用，一键分析公司利润、车辆成本、外发物流成本
- 系统支持手机端查看报表，方便老板管理
此主题相关图片如下：系统架构图.png此主题相关图片如下：系统流程图.png此主题相关图片如下：手机端.jpg此主题相关图片如下：1.png此主题相关图片如下：2.png此主题相关图片如下：3.png2021年10月9号更新，追加 企业代理记/账管理系统：
这是一个帮小微企业做代理记账的客户
- 业务不复杂，就是帮小微企业代理做/账、申报、企业法人变更、银行开销户等业务
- 分为国内和国外客户，系统记录一下每个业务员跟进的情况，解决过去资料混乱的问题
- 有一个资料交接的模块，专门用于记录与客户收发快递。在过去经常资料找不到，互相扯皮说已经交付，非常头痛。这个客户是造价公司，有很多材料价格，要求做一个小程序给他们的合作单位，能通过权限控制能否看到价格
此主题相关图片如下：1.png此主题相关图片如下：4.png2021年5月13号更新，追加 造价材料价格 微信小程序：
这个客户是造价公司，有很多材料价格，要求做一个小程序给他们的合作单位，能通过权限控制能否看到价格
此主题相关图片如下：未标题-1.jpg这个客户是代理雇主险，帮工厂购买。系统可以非常方便根据人员名单和方案价格，算出应收款。
最大的特点是是换员替补时，能自动按照先进先出的原则替换保单，大大降低人工计算的耗时
此主题相关图片如下：a.png此主题相关图片如下：b.png此主题相关图片如下：c.png此主题相关图片如下：d.png2021年3月20号更新，追加 纯英文版-订单管理系统： https://mh19web.mbldt.com/
这个客户是外企，要求做一个纯英文的系统，功能不复杂，大家可以体验下英文状态下系统的样式
此主题相关图片如下：1.png此主题相关图片如下：2.png此主题相关图片如下：3.png2021年1月25号更新，追加藏宝阁-玩家交易平台（含手机端）： https://mh15web.mbldt.com/
这是一个做方便 小圈子群里，玩家们发布账号交易、高价值装备交易、收金、代练发布等需求的交易平台。
手机端框架首次使用UniApp+UViewUi，放弃之前ColorUi框架，并首次引入手机端的富文本框编辑器mp-html
PC端与手机端是数据完全同步。试用请随意注册账号，所以功能完整无bug。
此主题相关图片如下：3.jpg此主题相关图片如下：1.png此主题相关图片如下：2.png此主题相关图片如下：5.jpg此主题相关图片如下：4.jpg2020年11月14号更新，追加贸易订单管理系统： https://mh14web.mbldt.com/
这是一个做贸易生意的客户定制的。业务流程是：收到客户订单后，转手给供应商下单，赚中间差价，赚钱模式简单直观，可管理却反过来。过去都是用Excel管理合同、订单、发货、验收、开票、收款。多个人每天十多份Excel传来传去，订单进度非常混乱。
开发系统为了解决Excel订单混乱的弊端。能时刻掌握我有多少，已下单未发货，已发货未验收，已验收未收款，已开票未收款的订单
此主题相关图片如下：1.png此主题相关图片如下：2.png此主题相关图片如下：3.png此主题相关图片如下：4.png2020年9月7号更新，追加科研信息管理系统： https://mh12web.mbldt.com/
此主题相关图片如下：1.png此主题相关图片如下：2.png此主题相关图片如下：3.png此主题相关图片如下：4.png此主题相关图片如下：5.png此主题相关图片如下：6.png2020年7月23号更新，追加OA办公+造价管理系统： https://mh9web.mbldt.com/
用狐表做OA工作流审批，包含常见的OA模块：文具耗材领用管理、固定资产管理、请假申请、报销申请、用印盖章申请、出差申请、加班报餐登记、员工入职离职登记、发票申请。这个客户是做造价项目，所以还有特色功能，造价招标项目登记、造价过程资料管理、员工提成管理、项目流程跟踪
此主题相关图片如下：1.png
此主题相关图片如下：2.png
此主题相关图片如下：3.png
2020年4月28号更新，追加冒险岛攻略网站： https://mxd.mbldt.com/
此主题相关图片如下：3.png
2020年4月5号更新，追加工业铝材进销存管理系统成果体验： http://mh6web.mbldt.com/
帮一个广东佛山金属园的客户做的，用于管理铝材的进货、下单、出仓、称重、结算。技术功能点包含单表、父子表、统计分析、excel打印、用户权限控制、动态表头、行尾合计、分页动态加载、自动编号。
给旅行社做的，给大家体验，包含基础产品录入，线路套餐录入，订单行程安排，酒店预订邮件发送。
从2月12号开始做，2月25号完成，包含常见的父子表结构，首页界面设计。邮件功能由于安全性考虑，体验版不开放。
此主题相关图片如下：1.png
二、开源分享给大家，体验地址：（下载在最后）
（体验时请尊重其他狐友，不要擅自修改密码，方便后来人）
(由于单点登录的功能，所以如果体验过程中账号被登出，您可以换一个别的账号，或者自己新建一个！）
手机端与PC端是同一套后台，所以账号密码与数据都是一样的。
他们都部署在阿里云上，使用nginx反向代理，启动好免费的SSL证书，都是HTTPS协议。
基础版：手机端体验地址：
三、源码的效果展示
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
此主题相关图片如下：2.png
①后端：使用狐表2020.1.19版本的高级开发版。(最高支持2021.5.29的高级开发版，因为后续版本官方取消了动态编译）
②PC端：
1基础框架用Vue_cli3+node.js+webpack，
2UI框架使用elementUi，
3后台整体框架使用d2admin,
③移动端：
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设计理念：
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
强烈的推荐大家去看下我分享的关于服务器安装的经验总结：
===============================================================
顺便总结以前分享过的帖子，方便大家学习
联系QQ：2385350359
免费产品：
经验分享：
[此贴子已经被作者于2024/6/5 18:11:11编辑过]
-- 发布时间：2020/2/14 11:38:00
--
多谢分享！
-- 发布时间：2020/2/14 11:40:00
--
学习
-- 发布时间：2020/2/14 11:45:00
--
学习，谢谢！楼主这种开源的精神太可贵了！
[此贴子已经被作者于2020/2/14 11:45:35编辑过]
-- 发布时间：2020/2/14 12:53:00
--
我只能说看看，确实达不到杰哥说的水平
-- 发布时间：2020/2/14 12:56:00
--
学习
-- 发布时间：2020/2/14 12:58:00
--
看看什么东东
-- 发布时间：2020/2/14 13:11:00
--
多谢分享
-- 发布时间：2020/2/14 13:14:00
--
多谢。。
-- 发布时间：2020/2/14 13:14:00
--
杰哥牛逼