后端开发如何快速转前端开发

一、技术选型

前端有几个流行的开发框架,最好选用VUE这种技术框架。VUE的特点是简单、易用,基本上你的各种需求,它都能搞定。等以后你想换其他开发框架,有了VUE的经验,也能轻车熟路的转。

VUE的技术思想:组件化

它由大大小小的组件,来组成你的WEB应用。

这就很符合后端开发兄弟的理念了,如果没有VUE这种框架,直接写传统的原生WEB脚本代码,过程化的写法,仿佛回到了上古时期,后端的兄弟会非常难以接受。

 二、部件代码的组成

一个VUE的部件代码,包括下面五个组成

1、模板:用来展现各种画面,包含展示界面的小组件、绑定数据、绑定响应函数这几个要素

这可比传统HTML/JSP的脚本和代码混合在一起,清爽多了。有哪些用于呈现第三方组件,自己去网上找,然后放入放入这边,比如下面的各种第三方的element-plus组件们。

2、导入:导入各种部件定义、函数定义、数据定义、消息定义

3、数据:内部数据成员

VUE的数据会自动维护,不像后端得自己手动管理数据。

就像JAVA的内存回收机制一样,让JAVAER脱离了C/C++手动申请/释放内存的苦海。

VUE的双向绑定机制,也让VUER脱离了JAVAER们需要手动管理数据的苦海。

4、响应函数:

响应函数是类似springt框架的controller数据处理响应函数,各种数据处理逻辑都在这边实现。

5、导出声明

让把你的部件和函数给其他页面部件使用

二、新手上路

新手上路之前,总得有个教练车给我们试试手;初学者最好有个半成品,能让我们好照猫画虎。

推荐一个模板代码vue3-element-admin,麻雀虽小,可它五脏俱全,一个前端网站该有的东西它全都有。而且关键是它小,你了解和改造它,不会拿到一个大产品时,会有无从下手的感觉。

网站效果:

vue3-element-admin

源代码:

vue3-element-admin: 基于 vue-element-admin 升级的 vue3 版本管理前端解决方案,技术栈: vue3 + vite3 + typescript + element-plus + pinia 。

三、调试

自从有了chrome后,前端的调试跟传统后端调试变的很类似。

而且VUE的运行期的动态代码,所见即所得,不像JAVA修改完代码后,还要编译,还要重启进程,才能看到效果。运行时,一边修改,一边看效果。

注意,前端代码调试,不是在IDE中的源码里调试的,而是在浏览器里进行调试的。这跟后端的在IDE里断点调试是不一样的。刚开始我还误以为是在IDEA里调试,这个对前端来说是常识性的重要事情,在网上的各种文档却大多数没有提到,浪费了我不少时间。

总的来说,前端的运行期调试,比后端的编译后运行调试效率要高。

四、第三方库的使用

类似后端的maven中央仓库,前端也有类似的中央仓库,叫node_models

同样类似maven的POM.XML被用来管理包引入,VUE也有package.json来完成同样的功能

可以在命令行用npm view xxx versions的方式,查询可用使用的最近版本

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值