软件架构模式
对于一个软件系统,用户是通过用户界面来完成与软件系统的交互的(用户是通过用户界面来使用软件系统
的),根据软件不同的架构模式,软件系统界面设计的实现技术是不同的:
C/S架构
B/S架构
Java语言主要应用于web系统的开发,web系统就是基于B/S架构。
JavaWeb项目组成部分
javaweb项目分为三个部分:前端网页,后台java程序,还有数据库
我们在前端页面输入数据,比如“java开发”关键字,发送请求给java程序,java程序接收请求,
然后去数据库查询,数据库将查询结果给到java程序,java程序对数据进行渲染然后给前端响应请求。
这中间就会用到不同的技术:
- 前端就会用到HTML超文本标记语言、CSS层叠样式表、JavaScript脚本语言、Ajax异步交互技术。这是最基础的,此外还会用到Vue和ElmentUI这些框架。
- 后端java程序会用到java基础语法、面向对象的知识、封装工具类、集合、线程、反射、servlet等知识,另外为了高效的开发,还会使用到SSM、Springboot等这些框架对项目进行开发,其中springMVC就是对servlet的封装。
- 数据库则使用的是MySQL,最基础需要知道SQL的结构化查询语言。
只介绍这三部分还不够,因为这三部分目前来看还是独立的,一个完整的web项目需要将他们联系起来:
对于网页和java程序:我们需要将我们的web项目打包放进web服务器Tomcat,这样通过http请求就可以请求web服务器,并访问web服务器上的资源。这里会涉及到web服务器、Tomcat、http技术java程序与数据库:java操作数据库,建立连接这些,会使用到JDBC技术。为了高效的开发,后来使用了mybatis对jdbc进行了封装。
Tomcat服务器请求响应流程
- 当服务器启动的时候,Tomcat就会创建一个网络服务ServerSocket占据配置的8080端口等待用户请求
- 当用户请求到达服务器的时候,Tomcat就会接收用户请求,并为每个请求启动一个线程,通过这个线程去处理当前用户请求
- 当线程处理完用户请求,将资源响应给用户
- 完成响应后,这个线程就会归还到线程池,供下一个请求使用
前端三大组件
Java语言主要应用于web系统的开发,web系统就是基于B/S架构,其系统界面都是通过网页实现的。
网页一一可以在网络中传输、通过浏览器解析并显示视图的页面,网页设计3要素:
- HTML超文本标记语言 网页的结构,决定了网页中的内容
- CSS层叠样式表 网页的样式,决定网页内容的显示效果
- JavaScript网页脚本语言 网页的功能,决定了网页中标签的功能及动态效果
HTML
(Hyper Text Markup Language)超文本标记语言。以特定的标签在浏览器中呈现不同的视图
标记(标签):就是由<>和特定的单词组成的符号,可以被浏览器识别并显示对应的视图超文本:使用文本标签显示图片、视频、声音等非文本数据
CSS
层叠样式表:在syle标签中定义的多个样式表可以叠加作用在同一个HTML标签上
JavaScript
JavaScript是一种基于对象的、事件驱动型的、解释型的脚本语言。JavaScript的设计是为了完成网页文件的交互功能。
- 基于对象:(区别于面向对象),JavaScripti和Java语言一样可以通过对象调用方法obj.fn()
- 事件驱动:网页文档中的HTML标签事件触发JavaScript代码执行
- 解释型:边解释边执行(不会先对网页进行编译生成中间文件)
- 脚本语言:JavaScript不会独立运行,依赖于网页文件(HTML文档)存在(通俗的理解为js要写在网页中)
前端框架
UI框架:对CSS的封装
- Bootstrap
- amazeUl
- Layui
- elementUI
JS框架:对JavaScript的封装
- JQuery
- React
- angular
- nodejs–后端开发
- vue集各种前端框架的优势发展而来
JQuery
背景:在使用JS完成对应功能时,需要程序员自行完成代码的编写,开发相对还是比较繁琐的
jQuery就是一个JavaScript的框架,简化了Js的语法和操作,定义了HTML属性操作、样式操作、DOM操作等相
关函数,实现了对ajax异步请求封装。
Vue
背景:使用jQuery的复杂性问题
使用jQueryi进行前后端分离开发,既可以实现前后端交互(ajx),又可以完成数据渲染;存在的问题:Quey需要通过HTML标签拼接、DOM节点操作完成数据的显示,开发效率低且容易出错,渲染效率较低
vue是继jQuey之后的又一优秀的前端框架:专注于前端数据的渲染一语法简单、渲染效率高
它是MVVM思想,就是model和view之间可以通过VM来进行数据到视图之间,以及视图到数据的双向绑定操作
vue常用的指令都有v-for遍历显示数据 ,v-if,v-show等,绑定事件用v-on,绑定属性用v-bind还有就是vue的生命周期,常用的基本上就是created这个钩子函数,在vue组件创建之后,就会调用它;如果需要页面框架渲染出来之后,再加载数据的话,就用mounted这个钩子函数加载就行了另外vue项目都是通过npm管理的,npm呢就相当于与前端的maven,帮助我们管理js依赖,我们想要添加js依赖的时候,可以通过npm install 命令来下载就行了
。。。未完待续,后续会持续更新