vue重构后台管理系统调研
Q4要来了,我来这家公司已经一个季度了,通过对公司前端框架的整体认识,对业务的一些认识,发现,这些东西也都是可以重构,无论是v2,还是v3的代码。
首先就要那后台管理来开刀来,现有的技术框架就是php模版+jquery+jquery插件库,大杂烩什么都有,简单的说就是jquery技术栈,jquery灵活,但是代码量太大,没有太深入的思想,回调,dom操作,表单校验正则,dialog框,蒙层,表格编辑,查询分页,查询条件筛选,日期计算,无非就是这些东西。但是使用jquery的话,很坑,尤其是联动效果很多的时候就更坑了。我实在忍受不了,普普通通的一个表单,要写上1000行以上的代码。
进入重构,首先的问题是,后端渲染,为什么要做后端渲染,因为有时候会做google统计,seo优化,之类的,必须用后端渲染才行,普通的spa就不行了,而且语言包那一块需要去服务器拉去数据后才能生成文件,必须有后端服务做支撑,考虑这些,然后就入了nuxtjs的坑,nuxt是一种vue后端渲染方案,首先搭了一个nuxt服务,然后使用element,把menu组件改成了侧边栏,然后看了一下路由配置发现,这个路由就是根据文件的目录来判断,和php,java有的一拼,几乎是一样的,也支持动态路由,可匹配等,然后里面有server.js,client.js,分别打包客户端和服务端的代码,首页采用服务端渲染,其他页面则采用客户端渲染。

但是这样搭载过之后,我发现,后台管理系统里会有一些统计数据的工具,这时候可能会引入vue的图标框架,但是我不能确定vue的图表插件能否支持ssr
纠结之中我还是放弃了,如果以后有小的项目可以试一下。这次就别这样了,进度也要跟的上,况且都是内部人员使用的话对seo要求也不高,就选用spa,然后折腾了一下,发现vue-element-admin这个架口碑不错,进去看了一些,图标,表格,校验,菜单自适应,该有的都有,然后。。。。遇到了一个问题,没有服务端,语言包咋搞,总不能在前端代码里写吧,那就搭载一个子项目,专门搞权限,和语言包就行了,完美。
vue重构后台管理系统调研的更多相关文章
- vue+element-ui后台管理系统模板
vue+element-ui后台管理系统模板 前端:基于vue2.0+或3.0+加上element-ui组件框架 后端:springboot+mybatis-plus写接口 通过Axios调用接口完成 ...
- 从零开始搭建vue+element-ui后台管理系统项目到上线
前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...
- vue开发后台管理系统小结
最近工作需要用vue开发了后台管理系统,由于是第一次开发后台管理系统,中间也遇到了一些坑,想在这里做个总结,也算是对于自己工作的一个肯定.我们金融性质的网站所以就不将代码贴出来哈 一.项目概述 首先工 ...
- vue开发后台管理系统有感
使用vue开发后台近一个月,今天终于完成得差不多了,期间也遇到很多的问题,所以利用现在的闲暇时间做个总结 使用element-ui基础,这次使用了vue-element-admin(github地址) ...
- vue之后台管理系统遇到的几个痛点
杂七杂八的一些日总结 1.vue(最)合理的处理表单提交和初始化表单数据显示的方式 对于表单处理,繁琐的一个地方就是当出现多个下拉选择的表单框的时候,我们需要进行多次将选择的文本去换对应的id值的操作 ...
- vue写后台管理系统问题概述和解决方案
一个不错的Demo; http://xmall.exrick.cn/#/home 源码:https://gitee.com/Exrick/xmall-front/blob/master/src/pag ...
- Vue3教程:Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦
之前发布过一篇文章<Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统>,文中提到会开发并开源一个 Vue 3 + Element Plus 的项目供大家练手 ...
- React版/Vue版都齐了,开源一套【特别】的后台管理系统...
本项目主要基于Elux+Antd构建,包含React版本和Vue版本,旨在提供给大家一个简单基础.开箱即用的后台管理系统通用模版,主要包含运行环境.脚手架.代码风格.基本Layout.状态管理.路由管 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(58)-DAL层重构
系列目录 前言:这是对本文系统一次重要的革新,很久就想要重构数据访问层了,数据访问层重复代码太多.主要集中增删该查每个模块都有,所以本次是为封装相同接口方法 如果你想了解怎么重构普通的接口DAL层请查 ...
随机推荐
- jQuery的节点操作
1.创建节点 var aa = $("<div id='cccc'>插入的内容</div>") var bb = $("<a href='h ...
- 721. Accounts Merge合并电子邮件账户
[抄题]: Given a list accounts, each element accounts[i] is a list of strings, where the first element ...
- 使用MySQLMTOP监控MySQL性能
一.服务器角色 服务器角色 172.18.35.29 10.160.22.14 (MySQL Master) 10.160.22.47 (MySQL Slave) 监控点 YES NO NO 被监控点 ...
- FZU 1977 Pandora adventure (DP)
题意:给定一个图,X表示不能走,O表示必须要走,*表示可走可不走,问你多少种走的法,使得形成一个回路. 析: 代码如下: #pragma comment(linker, "/STACK:10 ...
- struct 和union的区别
union ( 共用体):构造数据类型,也叫联合体 用途:使几个不同类型的变量共占一段内存(相互覆盖) struct ( 结构体 ):是一种构造类型 用途: 把不同的数据组合成一个整体——自定义数据 ...
- struct pollfd
struct pollfd 2010年04月15日 星期四 下午 03:59 int poll (struct pollfd *fds, size_t nfds , int timeout); str ...
- java并发编程实战:第八章----线程池的使用
一.在任务和执行策略之间隐性耦合 Executor框架将任务的提交和它的执行策略解耦开来.虽然Executor框架为制定和修改执行策略提供了相当大的灵活性,但并非所有的任务都能适用所有的执行策略. 依 ...
- EBS增加客制应用CUX:Custom Application
1. 创建数据库文件和帐号 [root@ebs12vis oracle]# su - oracle[oracle@ebs12vis ~]$ sqlplus / as sysdba SQL*Plus: ...
- Python学习-11.Python中的类定义
Python是一门面向对象语言,那么作为面向对象的特征——类也是有的.值得注意的是Python中一切皆对象,并不像C#中为了性能考虑,int这些在Python中也是对象.(C#中int是结构体) 如何 ...
- md1
a b link to baidu 我不懂啊 这是什么意思 http://example.com/ 这里是一段代码' adsfasdf 你 你输得算好了 反正就这样吧,大概也值能这样了注 我想写一段引 ...