Foxtable(狐表)用户栏目专家坐堂 → [免费开源]基于vue框架,用d2admin+elementui做的PC前端Web,uniapp做移动端,狐表做后端 漂亮美观 狐表变美终极方案 前后端分离(20211109追加货运订单管理案例)


  共有136333人关注过本帖平板打印复制链接

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

帅哥哟,离线,有人找我吗?
chen37280600
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:六尾狐 帖子:1264 积分:7827 威望:0 精华:4 注册:2017/12/31 14:53:00
[免费开源]基于vue框架,用d2admin+elementui做的PC前端Web,uniapp做移动端,狐表做后端 漂亮美观 狐表变美终极方案 前后端分离(20211109追加货运订单管理案例)  发帖心情 Post By:2020/2/14 11:27:00 [只看该作者]


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

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

一、先看案例效果:

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

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

此主题相关图片如下:系统架构图.png
按此在新窗口浏览图片


此主题相关图片如下:系统流程图.png
按此在新窗口浏览图片


此主题相关图片如下:手机端.jpg
按此在新窗口浏览图片


此主题相关图片如下:1.png
按此在新窗口浏览图片

此主题相关图片如下:2.png
按此在新窗口浏览图片

此主题相关图片如下:3.png
按此在新窗口浏览图片



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

此主题相关图片如下: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
按此在新窗口浏览图片


此主题相关图片如下: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
按此在新窗口浏览图片

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

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

联系QQ:2385350359

免费产品:

经验分享:




















[此贴子已经被作者于2022/7/27 14:53:31编辑过]

[本帖被加为精华]
 回到顶部
总数 335 1 2 3 4 5 6 7 8 9 10 下一页 ..34