后端
(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这种基本操作。我真的想说,入门难度太高了……
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)、降低代码冗余、按需加载文件,还可以区分多个环境配置,还可以压缩图片、字体等文件,还能热加载(保存代码后立刻显示到浏览器而无需重启服务)
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,它已经设定好了一些精美的组件,你只需要把这些组件拼凑成一个个网页,而不需要从头自己一个一个去写组件了。
这些组件,如单选框、表格、进度条等,设计十分精美,只需传入数据即可呈现。如果觉得有不好看的地方,可以自己覆写css来更换,对于功能需求强烈、界面设计无所谓的中台页面、后台页面而言,十分方便。
5、为什么不用layui
从我接触前端以来,一直用的都是layui。后面发现它更适合于在原生html css js/jquery基础上来优化页面显示效果,而不太兼容现代前端语言的思路。它带有一些预设的jquery初始化和事件触发方式,与vue的写法不太兼容。此外,一些组件如tooltip、popover并不包含在内。