gpt4 book ai didi

Java程序员学vue3最好的方式就是搭建后台管理模板

转载 作者:我是一只小鸟 更新时间:2023-09-07 22:52:06 26 4
gpt4 key购买 nike

前言

作为Java程序员,vue3还是有必要学的,毕竟是国内最受欢迎的前端JS框架,你现在接手的项目,前端部分几乎都会和vue沾边,尤其是中小企业.

vue3作为新的大版本,相较于vue2改动还是很多的,目前企业中很多新项目的前端实际上已经是以vue3为主了.

比如我所在的互联网公司,前端人员均已经在用vue3来搭建所有的新项目.

vue3中的 Composition Api 实际上很多地方可以用Java的思维来理解,所以Java程序员学习vue3还是挺适合的.

我推荐学会了vue3基础的Java工程师,尝试搭建自己的后台管理模板,这是提高vue3熟练度最快的方式.

正文

1、学TypeScript?

为什么单独讲下这个,主要是我自己作为多年的Java工程师,学习TypeScript的一点感受,不吐不快.

这语言看着真的很难受,就像是刻意拼凑的四不像语言,也许前端人员看着挺好,但作为Java工程师,实在是学的如鲠在喉.

另外,我们公司的前端今年也没有在新项目中使用TS了,用他的话说,一些中小项目用了反而添麻烦,不如不用.

所以纯粹是我个人对Java工程师的建议,TypeScript就先别花那么多时间学了,了解下就好,姑且学学vue3就够了.

2、搭建后台架子

我去年学习vue3,在学会了基础语法后,就尝试搭建一个后台管理模板,选用的是Naive-UI.

因为公司本身前端用的都是ElementPlus,所以自己学习就想换个口味.

我把模板大体分为几个部分:外层架子,菜单组件,头部组件,标签页组件.

image

后台模板的架子大概是这样,包含了菜单、头部、主体内容,这就是架子的基本结构,主体内容也就是根据路由动态加载的页面.

image

3、菜单组件

左侧菜单组件,使用 Composition Api 的方式来搭建,其实没那么难,按照Java的方式来理解就行.

image

如图所示,那么组件中引入的类又是长什么样呢?

image

其实拆解来看,就是Java类一样,包含变量、方法、初始化操作等等.

image

最后,把获取的结果return出去,是不是理解起来清晰多了.

image

4、头部组件

头部组件,其实和菜单组件的做法没啥区别了,直接往里套就行.

头部组件,主要实现了面包屑功能,以及路由跳转.

image

5、标签页组件

标签页是属于头部组件的一部分,但是也拆解为一个小组件.

这里面,实现了用cookie来缓存标签页列表.

image

实现了新增标签的方法 。

image

实现了关闭标签的方法 。

image

实现了选中标签的触发事件,以及选中菜单后路由的监听事件,目的是切换菜单时标签跟着变化,切换标签时菜单也跟着变化的效果.

image

6、全局守卫

这个是我觉得挺常用的功能,前置守卫和后置守卫.

用Spring的方式理解,就是AOP里面的切面.

image

7、router-view

一开始搭的架子里面,主体内容的router-view中其实就是要加载的页面,如图所示.

image

8、最终效果

image

总结

其实我就是单纯搭建了一个后台管理的模板,很多功能都没有实现.

比如退出、表单表格等常用组件的展示、标签页的优化等等,都没做,因为我觉得单纯学习vue3,到这一步也就够了.

至于做的更完美,那就纯看个人兴趣了.

我主要想以Java工程师的角度来讲述如何学习前端的一些东西,希望对后端程序员尤其是Java程序员学习前端有所启发.

至于模板的代码,都在git上,直接去下载了自己练习即可,想继续完善也可以.

Gitee: https://gitee.com/fangfuji/java-share 。


如果喜欢,↓↓↓可以点赞关注下哦,持续分享干货! 。

最后此篇关于Java程序员学vue3最好的方式就是搭建后台管理模板的文章就讲到这里了,如果你想了解更多关于Java程序员学vue3最好的方式就是搭建后台管理模板的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com