文章目录

前言

用Vue+ElementUI+Springboot写一个不重要的Web,终于写得差不多并且上线了。开始盘一下相关的坑。

一、旧世界的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出来了。

(3)然后觉得HTML重复语句太多了,于是有了前后端结合语言:JSP等等。即使是现在,Springboot也有thymeleaf,专门给写后端的前端小白用的。

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

二、打开新世界Vue的大门

1、基本概念

  • node.js:就是javascript的运行时,专门用来运行js的。例如node xxx.js,像不像java -jar xxx.jar
  • npm:node.js包管理。有很多写好的js,引用也需要版本控制,就有了npm,概念上和java的maven、gradle类似。
  • 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”}

 <dependencies>……
 打包生成的目录 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来传参,例如:

<mytitle title="123"></mytitle>

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

4、element-ui

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

比如像这种单选框、表格、进度条等等,样式都很好看,只需要把数据传进去就可以显示了。如果觉得有不好看的地方,可以自己覆写CSS来更换,对于功能需求强烈、界面设计无所谓的中台页面、后台页面而言,十分方便。

5、为什么不用layui

从我接触前端以来,一直用的都是layui。后面发现它更适合于在原生HTML+CSS+JS/Jquery基础上来优化页面显示效果,而不太兼容现代前端语言的思路。它自带了一些初始化以及事件触发的jquery,和vue的写法不太契合。另外,组件并不齐全,像tooltip、popover是没有的。

总结

终于要告别复制粘贴+JS里粘贴大量HTML代码的痛苦日子了。入门的门槛下徘徊了好久,一直到看到一个后端大佬写的《Vue.js(一) Vue.js + element-ui 扫盲》才入了门,果然只有和后端技术对比着看,才能知道前端的各个东西是做什么用的。光看前端大佬们说什么“三大前端框架”、“MVVM”、“props区别”、“router”等等,根本理解不了我学了这个能有什么用嘛(╯°Д°)╯︵ ┻━┻

基础的概念了解了,Hello world就容易了_(:з」∠)_


转载请注明出处http://www.bewindoweb.com/280.html | 三颗豆子
分享许可方式知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
重大发现:转载注明原文网址的同学刚买了彩票就中奖,刚写完代码就跑通,刚转身就遇到了真爱。
你可能还会喜欢
具体问题具体杠