前言
这回从前端文本基础实现讲解开始，到前端本人使用过的一些框架进行简单说明，技术方面不会深讲，工作经验没多少，主要还不是固定一个方向深耕，本人一直觉得很慌，虽说领导给定的方向是全栈，但还是担心是饼，但有个方向总比没有好，工作内方向又不是自己能决定的，难啊！
水够字数了，将从HTML页面的基础要素讲起，本人接触过的框架thymeleaf，vue2，angular,react，vue3会多少讲一点，后面用到了更深层次，或者更好用的技术，再更新吧。
HTML页面要素
打开F12，浏览器自带的开发者工具，点击元素，我们会看到html下有主要有三部分，（1）、<head></head>标签下代表的引用文件样式（.css或者样式预处理文件.scss）<style>直接写在标签内亦可，页面可声明元信息<meta>，<title>标题、<link>连接文件等
（2）、页面要素标签集合，<body></body>主体,<div></div>分区，<menu></menu>菜单，<hi></hi>标题,<img>图片,<table></table>表格,<button></button>按钮,<pagination></pagination>分页栏,<footer></footer>页脚等等，不详细介绍了，开发者工具右边样式栏里有标签对应各种显示属性，详细看教程，百度菜鸟教程自己看
（3）、引用的JavaScript（.js文件）或者Typecript（.ts）功能实现文本<script>，typescript对变量，功能等有类型定义，注重类型安全，js中var和let几乎能定义完，但出问题调试很困难，在源代码处找对应文件，对应行单击即可打上断点，鼠标停留在上面即可看运行到断点处的变量或者结构详细，确实比后端调试方便。
框架
这里先说明一下，thymeleaf和angularjs仍旧是多页面式的框架，使用多个HTML页面，但vue和react是单页面响应式框架，只有一个根页面App.vue或者index.html作为根页面，然后定义路由组件包含所有页面，响应速度十分快。
此外，react是讲HTML页面标签元素视为为一个函数返回值，代码更加容易得到复用，能够很好的应用在大项目的开发中，vue是另外定义了<template></template>标签存放html页面标签元素，下方<script></script>标签存放功能，<style><style>存样式响应更快。
另外两个的使用场景呢？thymeleaf是springboot自带的用来替代JSP的模板引擎，非分离式开发，存放在resource的template下，数据量大的情况下，比单个页面全部请求快很多，后端有大批量数据需要展示的情况下使用它；AngualarJs是一个类 MVC 类结构的 JavaScript 单页面应用框架，建议构建 CRUD 类型应用的时候使用它，而对于那些图形编辑、游戏开发等应用，使用 Angular 就不如调用其它 JavaScript 类库方便，如 jQuery，Vue 不包含路由器，HTTP 请求服务等。开发者必须安装所需的"插件"，angular却有，有助于节省编码时间。
ThymeLeaf
说真的，感觉没多少好讲的，数据绑定方式是属性后@{}绑定方法，*{}绑定对象，${}绑定值，嫌麻烦queryselector()直接绑定就行，没多少自带文件结构，在resource下定义首页，直接加标签就行；主要是UI库，根据UI库官网给的组件，直接往上套就行，我用的是layUI，同时甚至支持其他框架。
vue
文件结构：
1、build：构建脚本目录
2、config：项目配置
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。
2）components：用来存放自定义组件的目录，目前里面会有一个示例组件。
3）router：前端路由目录，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
5）main.js：应用的入口文件。主要是引入vue框架，根组件及路由设置，并且定义vue实例，即初始化 Vue 应用并且制定将应用挂载到index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。 6）store:存储文件，将全局变量、异步变量、状态管理之类的存放
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等。 这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。 注意：这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
vue2和vue3有些区别：
|------------|-------------------------------|-----------------------------|
| | vue2 | vue3 |
| 双向数据绑定实现原理 | APIobject.defineProprty()挟持数据 | API代理 |
| 碎片（多个根节点） | 不支持 | 支持，login->loginForm |
| API类型 | 选项类型data，components，methods | 合成类型components，setup() |
| 数据变量和方法定义 | data{}，methods{},computed{} | reactive()响应数据，setup()返回数据 |
| 生命周期函数 | create（） | 替代为setup（） |
| 父传子值 | 父props传子用this.$emit | 父传子setup（）参数列表里content参数 |
| 指令和插槽 | slot直接用，v-for级别最高，v-if不建议一起使用 | v-slot，命令间不起冲突，无v-on,filter |
| main.js | 可用protype，引入构造函数 | 引入工厂函数，无跟标签 |
编写.vue文件要注意以上这些
生命周期函数说明：
创建期间的生命周期函数：
beforeCreate：实例初始化后调用，此时实例刚在内存中创建出来，data和methods还没初始化好。
created：在实例创建完成后被立即同步调用，实例已在内存中创建好，data和methods已初始化好，此时还没开始编译模板。
beforeMount：在挂载开始之前被调用，已完成模板编译，还没挂载到页面上。
mounted：实例被挂载后调用，已将编译好的模板挂载到页面指定的容器中显示。
运行期间的生命周期函数：
beforeUpdate：状态更新前调用，此时data中的值是最新的，但界面上数据还是旧的，还没开始重新渲染DOM节点。
updated：实例更新完调用，此时data中的值和界面显示的数据都已更新完成，界面已被重新渲染完成。
销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
都是在<script>里methods:接口里定义行为。
具体实现参考UI库，我用的是elementUI，router安装后，可调用路由服务，在router文件夹下import就是了，然后属性指定，子组件component直接指定路径下对应文件，访问认证记得写在这里。
优化点是lazyload()延时加载长，因为是单页面吗，预加载的话时间太长，半天进不去体验就很差，可在main.js里指定对应参数，亦可在指定标签用v-lazy指令，component可用箭头函数import，后端在application.properties里调用gzip压缩指定文件,效果最明显
-
gzip on; # 开启Gzip
-
gzip_static on; # 开启静态文件压缩
-
gzip_min_length 1k; # 不压缩临界值，大于1K的才压缩
-
gzip_buffers 4 16k;
-
gzip_http_version 1.1;
-
gzip_comp_level 2;
-
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
-
gzip_vary on;
-
gzip_proxied expired no-cache no-store private auth;
-
gzip_disable "MSIE [1-6]\.";
最后，在config.js里做proxy代理到后端就行
AngualrJs
文件结构：
-
app/
-
-----config/
-
----- controllers/
-
---------- mainController.js
-
---------- otherController.js
-
----- directives/
-
---------- mainDirective.js
-
---------- otherDirective.js
-
----- services/
-
---------- userService.js
-
---------- itemService.js
-
----- js/
-
---------- bootstrap.js
-
---------- jquery.js
-
----- app.js
-
views/
-
----- mainView.html
-
----- otherView.html
-
----- index.html
说实话，这个玩意儿是我接触最少的，就做了一个页面和一个页面的优化，唯一有点印象的就是他的MVC模式，v就是view，视图这个不用多说，把html文件放进去views就行，指令绑定，ng-；c就是控制器，把实现的js文件放进去controllers，调度定义在service指定后端服务，有点印象的是它有作用域的概念，rootscope，定义获取全页面变量，scope只定义获取当前页面变量，然后.moudule绑定到指定模块，.controller绑定到自定义的controller，config里.state指定模块，属性url和views指定视图，resolve指定控制器文件
react
这个框架与vue结构基本一致:
项目目录：
├─node_modules //第三方依赖
├─public //静态资源（不参与打包）
└─src
├─assets //静态资源
├─components //组件
├─config //配置
├─http //请求方法封装
├─layout //页面布局
├─pages //页面
├─routes //路由
├─service //请求
├─redux //状态管理
└─util //通用方法
└─App.css
└─App.tsx
└─index.css
└─main.tsx
└─vite-env.d.ts
├─.eslinttrc.cjs
├─.gitignore
├─index.html //项目页面总入口
├─package.json
├─tsconfig.json //ts配置文件
├─tsconfig.node.json
├─vite.config.ts //vite配置文件
主要是用了TypeScript实现，typeScript建议看教程学，菜鸟教程搜就是，redux代替了store来存全局变量、异步变量、状态管理之类的数据，UI用的是TinyUI，练习用antd吧，毕竟那个官网要在华为内网内才能看。
react关键点在useState（）和useEffect()：
let [count,setCount] = useState(10) 定义变量和自带的修改方法，
useEffect()：
第一种情况:只有一个回调函数参数相当于didMount+didUpdate,并且可以有返回值的;
return 返回是一个钩子函数相当于 willUnmount卸载钩子；
第二种请求 参数1是箭头回调函数,参数2是空数组,相当于didMount 但是只初始化执行一次;
第三种情况 参数1是箭头回调函数 参数2是数组的元素是状态,在初始化走一次,监听第二个参数中的发生变化时候走一次;
// 只有参数1箭头函数回调
useEffect(()=>{
console.log("1-didMount+didUpdate")
// 可以在此处发请求和获取DOM ,但是数据更新的话会再次执行
ref1.style.color="red" //成功更改颜色
return ()=>{
// 可以清除定时器等
console.log("相当于 willUnmount卸载钩子")
}
})
// 参数2为空数组,只会在第一次绑定dom元素执行一次,相当于didMount
useEffect(()=>{
console.log("2-didMount")
// 可以在此处发请求和获取DOM
},[])
// 参数2数组不为空，数组元素的是一个状态，类似于watch监听到count变化的时候调用
// 初始化也会走一次，目的为了指定监听谁的
// 监听属性发生变化的时候， 也会触发改钩子
useEffect(()=>{
console.log("3---监听第二个数组中的状态")
},[count])
return(
<div>
<h3 ref={el=>ref1=el}>{count}</h3>
<button onClick={()=>{
setCount(999999)
}}
>修改count</button>
<h3>{person.name}</h3>
<button onClick={()=>{
setPerson({
name:"zs"
})
}}
>修改Person</button>
</div>
)
生命周期：
- Mounting(挂载)：已插入真实 DOM
- Updating(更新)：正在被重新渲染
- Unmounting(卸载)：已移出真实 DOM
后端代理在vite.config.ts里。
后言
看完还是觉得捞的不行，没项目干说太蛋疼，更像是个人感悟，谁不想直接跟着项目走一遍加深印象和理解呢，我就搬下大佬们的文章吧，react ,vue,angularJs，至于你问我为啥没有thymeleaf。只能说太旧了，我接手时领导找了两老员工都半天解决不了问题，只能期望于你别接手相关项目，现在前后端不分离的web项目太少见了，还不如祈求后端优化少传点数据。后端以后再说吧，感觉完全是另一个思路，毕竟抛异常，调试定位就有的头疼了，更别说各种技术，我以后看看能不能就一个框架springboot，毕竟也只接触过这一个，加上一些技术说明，前端其实好多也没说到，例如请求axios，navigate等等，后面再扩充或者另起文章讲吧。