0

0

Vue+ElementUI+Springboot的基础知识是什么

WBOY

WBOY

发布时间:2023-05-25 23:26:38

|

1789人浏览过

|

来源于亿速云

转载

一、旧世界的Web

后端

(1)刚开始,web后端基本都是php写的,脚本化的语言,嵌入到html里面很方便。

(2)然后Java开始发力,JSP+Servlet成为主流。

(3)发现Java又臭又长,开始把一些常用的思路封装成类,于是Spring成长了起来,且具有两个核心概念AOP切面、IoC控制反转。这两个思想简直无敌。

AOP:例如,我们程序的每个地方都可能抛异常,以前每个地方都要try、catch十分繁琐,且catch后的处理大同小异。如果有一个切面,把Web的出口拦截了,所有流量都会经过这个切面,一旦拦截到异常抛出,则返回对应的错误码,这样很多地方都只需要抛异常,不需要catch了,少些好多代码不说,还统一了异常处理的方式。这只是AOP最简单的一个应用。

IoC:Spring提供了一个容器的概念,把所有需要实例化的类都new出来一个对象,称为Bean(类似豌豆里面的本站),当类A需要类B的时候,就把管理的类B对象像挤本站一样注入到类A里面去。这样解开了类之间的耦合,想要什么就拿什么,相互之间没有前置的依赖关系,我获得类A的时候不需要去管类A的构造方法里面还需要先实例化一个类B、一个类C…当然实际上类之间有很多复杂的引用关系,实例化的先后顺序以及依赖循环异常交给Spring来管理就好。

立即学习前端免费学习笔记(深入)”;

(4)由于人继续变懒,Spring的XML也不想写了,于是出了Springboot这种东西,口号是“约定大于配置”,把一些基本的参数都设定好了,如果不需要改的话直接引用pom就可以使用了,如果要改的话,只需要配置application.yml文件里面的可选参数就可以了,如果还想更深地自定义的话,就写一个config bean就好了,所有的config bean和application.yml都会被自动注入,不需要再写XML说哪个bean所在的类叫什么名字,id是什么,怎么初始化等等。使用Jetbrains的IDEA集成开发环境,同写Java会变得极其简单,编码量减少且易于维护。

(5)未来:肯定是Go的天下呀。

前端

(1)最开始:HTML+CSS+JS三大金刚

(2)发现JS满足不了欲望了,想发展更方便脚本,于是Jquery出来了。

由于HTML含有太多重复的语句,因此JSP等前后端结合语言得以出现。Thymeleaf现在仍可用于Springboot,它为后端开发者提供了专门向前端小白介绍的工具。

前端专家们发现前端门槛太低,于是他们通过“组件”思维来管理重复的代码,提高门槛。比如我好不容易用HTML+CSS+JS写了一个非常漂亮的Table,但是每次使用我都要复制所有的代码过去,有一点点改动就要改所有复制的地方。如果这个Table是一个组件,我只需要引用它,然后把数据传给它,它就可以自动渲染成HTML,并引用相关CSS和JS,该多好。另外,每次都要去考虑兼容什么浏览器,多麻烦,如果有个脚本,输入要支持哪些版本的哪些浏览器,用一种高级点的语言写,然后编译的时候自动转换成兼容各种浏览器的原生HTML+CSS+JS,这样难道不香吗。这就出来了现代前端语言。现代前端语言的基础是React,用JS编织一切。React还是比较原生,所以在其之上衍生出了各种框架,出名的有Vue和Ant Design,它们封装好了一些常用的思路,以及JS生成HTML这种基本操作。我真的想说,入门难度太高了……

二、打开新世界Vue的大门

1、基本概念

  • Node.js是一种JavaScript运行环境,旨在专门用于执行JavaScript代码。类似于java -jar xxx.jar的命令,比如执行node xxx.js

  • npm:node.js包管理。类似于Java的Maven和Gradle,JavaScript也有npm,用于版本控制和引用已经写好的JavaScript代码。

  • ES6:ECMAScript 6,就是javascript的新版本,比原生javascript更好写。

  • Babel:用来将ES6、ES7等高级版本js转为低级版本js语言,便于兼容各种运行平台的脚本

  • vue-cli:就是vue的命令行工具

  • vue-router:前端有个重要的概念叫做“路由”,其实就是管页面URL怎么跳转的,这是vue的路由组件。

  • webpack:将所有的前端项目代码打包和压缩到一起,可以编译高级语言(比如CSS的高级语言SCSS、LESS)、降低代码冗余、按需加载文件,还可以区分多个环境配置,还可以压缩图片、字体等文件,还能热加载(保存代码后立刻显示到浏览器而无需重启服务)

    Android 基础知识入门 pdf版
    Android 基础知识入门 pdf版

    Android 基础知识入门 pdf,介绍什么是Android、Android可以完成的功能、Android架构、Android应用程序框架、Android函数库等,从开始安装Android开始,到环境配置,到一步步编写复杂的应用程序,本书将带你了解基础但有内涵的Android入门知识。

    下载

2、npm

对比项 npm maven
仓库名称

registry

repository
官方仓库

http://registry.npmjs.org

https://mvnrepository.com
国内仓库

https://registry.npm.taobao.org

http://maven.aliyun.com/nexus/content/groups/public
配置文件

package.json

pom.xml
配置文件内容

“dependencies”: {“vue”: “^1.0.0”}

……
打包生成的目录 dist target

由于npm非常火,在高版本的node.js里面,已经集成了npm

3、Vue

大概了解下vue是什么。

  • 语法:vue在语法上类似标签版本的JSP动态网页语言,或者非常类似themeleaf。

  • 组件:vue的一切都是组件,你可以把HTML+CSS+JS封装在一起自定义一个组件。

  • 路由:本质就是,给什么URL,应该返回什么组件。

  • 封装好的一些功能:比如mounted可以在网页加载时处理内容,data可以定义一些变量且发生改动的时候自动渲染局部组件,methods可以定义一些js函数等等

CSS你可以用SCSS等语言来编写,可以加scope关键字来限制css的作用范围,且只需要import就可以引用任何其他的组件,定义好的组件可以直接以HTML标签的形式来书写,通过data来传参,例如:

核心就是用高级语言更懒地去写HTML+CSS+JS……

4、element-ui

element-ui是饿了么出的一个前端UI,它已经设定好了一些精美的组件,你只需要把这些组件拼凑成一个个网页,而不需要从头自己一个一个去写组件了。

Vue+ElementUI+Springboot的基础知识是什么

这些组件,如单选框、表格、进度条等,设计十分精美,只需传入数据即可呈现。如果觉得有不好看的地方,可以自己覆写CSS来更换,对于功能需求强烈、界面设计无所谓的中台页面、后台页面而言,十分方便。

5、为什么不用layui

从我接触前端以来,一直用的都是layui。后面发现它更适合于在原生HTML+CSS+JS/Jquery基础上来优化页面显示效果,而不太兼容现代前端语言的思路。它带有一些预设的jQuery初始化和事件触发方式,与Vue的写法不太兼容。此外,一些组件如tooltip、popover并不包含在内。

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 6.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号