Vue+Foxtable 前后端分离Web开发框架

Vue+Foxtable 前后端分离Web开发框架

发表日期: 2022-07-02
平台类型: Web
产品价格: 使用免费,源码免费
功能简介: 用d2admin+elementui做的PC前端Web,uniapp+uVIew做手机H5端,狐表Foxtable做后端,前后端分离的Web开发框架

1.开发框架介绍

        目前大趋势都是web,前后端分离的开发模式,一套后端代码,pc端和手机端通用,这样做多平台的项目才快。于是我挑了vue的框架下几个优秀的开源框架,集成了一个小的企业系统。

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

2.框架下载

3.产品定价

4.在线试用

4.1电脑端体验

体验地址:https://mh10web.mbldt.com/

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

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

4.1手机端体验(扫一扫打开)

image.png

5.界面截图

    5.1手机端界面截图

image.png

    5.2电脑端界面截图

    5.3狐表后端截图

6.框架说明

6.1 后端:使用狐表2020.1.19版本的高级开发版,下载链接已提供。


6.2 PC端

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

2UI框架使用elementUi

3后台整体框架使用d2admin,

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


6.3 移动端

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

6.3.2 样式框架采用ColorUi(一个颜色非常绚丽夺目的框架!)


6.4 话说前头:

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


如果你看狐表的帮助文档都觉得辛苦,搞不懂cs的狐表怎么玩

如果你很懂狐表的vb.net,但是对网页知识一无所知

如果你也懂了网页知识的基础,但没超出过狐表高级开发文档里的

如果你觉得搞懂了周老师的jquery和easyui,但是没接触过vue

如果你接触过vue,但是没去玩vue-router、vuex、axios


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


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


6.5 部署步骤

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

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

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

  4. 安装好nodejs,

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

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


6.6 后端设计理念

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

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

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

    按此在新窗口浏览图片

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

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

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

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

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


6.7 d2admin设计理念

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

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

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

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


6.8 uniapp设计理念:

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

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

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


7.在狐表领域里,究竟cs快还是bs快?

答案:看规模

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

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

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

       

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




Copyright © 2016-2022 江门蓬江区华越科技公司 版权所有 | 承接软件定制开发,欢迎联系
粤ICP备17073215号