JAVA + VUE + 简洁UI:分离式软件平台形成之旅

转眼间,撸码7、8年了,从大公司到小作坊,码农的生活果然是很抠腚,在所有呆过的公司里,项目不少,正经的不多,延期是常事,你说QQ微信不聊,动作片也少看,动不动通个宵,但是进度却迟迟跟不上,找谁说理去。

以前,做项目的时候总有一种被压榨的感觉,认为项目经理总是把工时估少了,后来自己做了项目管理,按照以往的经历估工时,做到最后还是会有些延期,然后就是加班拼命赶。除了客户需求变化,开发人员水平,数据导入问题等不可控因素外,以往的项目没有积累,每次都是从头开始才是最应该解决的。

开发中一些常用的基础模块,比如权限控制,其实大部分系统都是可以通用;还有数据导入,最开始的时候我真的傻到一个个模块的去写,复制、粘贴、修改,还经常有字段对错了;还有数据接口,系统做好以后要花好长的时间去做数据对接......

在此基础上,我感觉到要提高开发效率需要一套高效的基础模块框架,基于目前的趋势可以采用MVC+VUE,力求通用,达到事半功倍的效果。

前端实现

以前我用过一段时间的ext感觉这个前端框架比较臃肿,加载速度慢,而且商用是收费的,所以没有考虑,后来考虑过easyui,也需要收费,而且感觉也不是特别灵活,所以后来就直接用JQuery来实现前端,用iframe的方式实现多窗体,自己再把样式调整得好看一些整个下来感觉一点都不比其它前端框架差,而且可以省去版权费用,降低了总体成本。后来总有客户要求用vue,在前端页面不做大的改动的情况下,实现也不算难,就改成了vue,和后端分开。

实现的前端界面效果如下:

主页面

目前这种布局算是比较流行的,用户体验反馈较好,后台是通过MVC来响应,因为这一技术已经越来越成熟应用也更广泛了,因此整体性使用MVC来处理,可能能够带来更好的效率和减少复杂性。

这样的方式,对一些企业应用、行业管理系统、单位信息化系统,应该是比较不错的界面展示了,再加上兼容性也很好,一套这样的框架拿出来,客户的第一印象会很好的,日后也不会为调整界面而闹心。

框架特点

开放性:框架将各业务系统进行了彻底的组件化和服务化,提高了多业务系统独立开发、设计、运维的能力,不同的服务之间采用轻量级通信机制沟通,服务之间的边界更加清晰。

组件化:平台提供组件化的开发模式,平台内置了大量的基础通用模块支持,增强各产品线的统一性,通用、个性化需求均可以有效满足。

配置性:平台内置了高度自定义的流程设计模型,支持自定义流程过程及表单。提供灵活、可自定义的统计报表和看板分析工具,构建数据分析中心,为决策提供依据。

代码生成器:框架内置代码生成器,基础功能的开发仅需要简单配置即可,不用写一行代码;个性化功能的开发配合代码生成器仅需少量代码。

多语言:框架支持多语言,支持集团化组织结构、集团化部署方式、集团化应用架构、集团化权限管控。

框架价值:

集团型企业和跨国企业部署

软件企业及非软件企业IT部门信息化升级

快速构建,快速实施,快速升级

异构集成

大数据存储/计算/分析

多操作系统/多数据库/多终端

详情:www.learun.cn

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现Java+Vue的家谱前后端分离系统,可以分为以下几个步骤: 1. 设计数据库表结构:可以设计Person表来存储每个人的信息,包括姓名、性别、父亲ID、母亲ID等字段。 2. 创建Java后端API:使用Spring Boot框架创建后端API,提供获取所有人、获取某个人、添加人等接口,通过JPA或MyBatis等框架操作数据库。 3. 创建Vue前端页面:使用Vue框架创建前端页面,包括家谱的展示、添加人、查找人等功能,使用axios等库调用后端API获取数据或提交数据。 以下是Java+Vue实现家谱前后端分离系统的示例代码: Java后端API: ```java @RestController @RequestMapping("/api") public class FamilyTreeController { @Autowired private PersonRepository personRepository; @GetMapping("/people") public List<Person> getAllPeople() { return personRepository.findAll(); } @GetMapping("/person/{id}") public Person getPerson(@PathVariable Long id) { return personRepository.findById(id).orElse(null); } @PostMapping("/person") public Person addPerson(@RequestBody Person person) { return personRepository.save(person); } } ``` Vue前端页面: ```html <template> <div> <h1>家谱</h1> <ul> <li v-for="person in people" :key="person.id"> {{ person.name }} <ul> <li v-for="child in getChildren(person)" :key="child.id"> {{ child.name }} </li> </ul> </li> </ul> <div> <h2>添加人</h2> <form @submit.prevent="addPerson"> <label>姓名:</label> <input type="text" v-model="newPerson.name"> <label>性别:</label> <select v-model="newPerson.gender"> <option value="male">男</option> <option value="female">女</option> </select> <label>父亲:</label> <select v-model="newPerson.fatherId"> <option v-for="person in people" :value="person.id" :key="person.id"> {{ person.name }} </option> </select> <label>母亲:</label> <select v-model="newPerson.motherId"> <option v-for="person in people" :value="person.id" :key="person.id"> {{ person.name }} </option> </select> <button type="submit">添加</button> </form> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { people: [], newPerson: { name: '', gender: 'male', fatherId: null, motherId: null } } }, created() { this.loadPeople(); }, methods: { loadPeople() { axios.get('/api/people') .then(response => { this.people = response.data; }); }, getChildren(person) { return this.people.filter(p => p.fatherId == person.id || p.motherId == person.id); }, addPerson() { axios.post('/api/person', this.newPerson) .then(response => { this.people.push(response.data); this.newPerson = { name: '', gender: 'male', fatherId: null, motherId: null }; }); } } } </script> ``` 在上面的代码中,`FamilyTreeController`类是Java后端API的实现,提供获取所有人、获取某个人、添加人等接口。`vue`文件是Vue前端页面的实现,包括家谱的展示、添加人等功能。通过axios等库调用后端API获取数据或提交数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值