前端实现以及个人理解

前言

        这回从前端文本基础实现讲解开始,到前端本人使用过的一些框架进行简单说明,技术方面不会深讲,工作经验没多少,主要还不是固定一个方向深耕,本人一直觉得很慌,虽说领导给定的方向是全栈,但还是担心是饼,但有个方向总比没有好,工作内方向又不是自己能决定的,难啊!

        水够字数了,将从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有些区别:
vue2vue3
双向数据绑定实现原理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压缩指定文件,效果最明显

  1. gzip on; # 开启Gzip

  2. gzip_static on; # 开启静态文件压缩

  3. gzip_min_length 1k; # 不压缩临界值,大于1K的才压缩

  4. gzip_buffers 4 16k;

  5. gzip_http_version 1.1;

  6. gzip_comp_level 2;

  7. gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型

  8. gzip_vary on;

  9. gzip_proxied expired no-cache no-store private auth;

  10. gzip_disable "MSIE [1-6]\.";

        最后,在config.js里做proxy代理到后端就行

AngualrJs

文件结构:

  1. app/  

  2. -----config/

  3. ----- controllers/  

  4. ---------- mainController.js  

  5. ---------- otherController.js  

  6. ----- directives/  

  7. ---------- mainDirective.js  

  8. ---------- otherDirective.js  

  9. ----- services/  

  10. ---------- userService.js  

  11. ---------- itemService.js  

  12. ----- js/  

  13. ---------- bootstrap.js  

  14. ---------- jquery.js  

  15. ----- app.js  

  16. views/  

  17. ----- mainView.html  

  18. ----- otherView.html  

  19. ----- 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等等,后面再扩充或者另起文章讲吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/1542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

控制maven 输出信息的语言

设置javac 输出 set JAVA_TOOL_OPTIONS-Duser.languageen JAVA_TOOL_OPTIONS-Duser.languageen 如果用java/java.exe来启动JVM&#xff0c;那么在命令行上使用 -Duser.countryUS 就可以把国家指定为美国。用javac/javac.exe来启动javac编译器则需要再多加个-J在前面&#xff0…

GPT-3.5 Turbo 的 temperature 设置为 0 就是贪婪解码?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 将 GPT-3.5 Turbo 的 temperature 设置为 0 通常意味着采用贪婪解码&#xff08;greedy decoding&#xff09;策略。在贪婪解码中&#xff0c;模型在每一步生成文本时选择概率最高的词元&#xff0c;从…

【Linux】学习记录_15_POSIX信号量

15 POSIX信号量 15.1 POSIX信号量基本概念 信号量&#xff08;Semaphore&#xff09;是一种实现进程/线程间通信的机制&#xff0c;可以实现进程/线程之间同步或临界资源的互斥访问&#xff0c; 常用于协助一组相互竞争的进程/线程来访问临界资源。在多进程/线程系统中&#…

Microchip 32位MCU CAN驱动图文教程-附源码

文章目录 创建一个新的32位MCU工程Microchip MCC Harmony配置界面说明在MCC下配置系统的时钟在MCC下配置所需要使用的模块配置调试打印模块配置CAN模块配置管脚功能修改系统堆栈大小生成代码 添加用户代码 创建一个新的32位MCU工程 确保电脑上已经安装最新的MPlab X IDE、XC32编…

ubuntu安装QEMU

qemu虚拟机的使用&#xff08;一&#xff09;——ubuntu20.4安装QEMU_ubuntu安装qemu-CSDN博客 遇到的问题&#xff1a; (1)本来使用git clone https://github.com/qemu/qemu.git fatal: 无法访问 https://github.com/qemu/qemu.git/&#xff1a;GnuTLS recv error (-110): …

使用 ADB 命令在 Android 设备上进行截屏

在 Android 开发和调试过程中&#xff0c;截取设备屏幕是一项非常有用的功能。ADB&#xff08;Android Debug Bridge&#xff09;是一个强大的工具&#xff0c;可以帮助我们与 Android 设备进行通信和调试。本文将介绍如何使用 ADB 命令在 Android 设备上进行截屏。 1. 准备工…

[阅读笔记18][CITING]LARGE LANGUAGE MODELS CREATE CURRICULUM FOR INSTRUCTION TUNING

这篇论文是23年10月提交到arxiv上的&#xff0c;也是用大模型蒸馏小模型的思路。 作者在这篇论文中提出了课程指令微调&#xff0c;大体流程如下图所示&#xff0c;教师模型给出一个问题&#xff0c;让学生模型回答一下&#xff0c;这时候学生回答大概率不够准确&#xff0c;这…

简化安卓操作:利用ADB命令返回主页、首页等操作

介绍&#xff1a; 在日常使用安卓设备时&#xff0c;经常需要返回到主页或者首页。虽然通过手动点击设备上的按钮可以轻松实现&#xff0c;但对于一些需要频繁进行此操作的场景&#xff0c;这种方式可能显得有些繁琐。幸运的是&#xff0c;利用ADB&#xff08;Android Debug Br…

深度学习之图像分割从入门到精通——基于unet++实现细胞分割

模型 import torch from torch import nn__all__ [UNet, NestedUNet]class VGGBlock(nn.Module):def __init__(self, in_channels, middle_channels, out_channels):super().__init__()self.relu nn.ReLU(inplaceTrue)self.conv1 nn.Conv2d(in_channels, middle_channels, …

生态短讯 | Tapdata 与 TDengine 完成产品兼容性互认证,打造物联网实时数据生态

近月&#xff0c;深圳钛铂数据有限公司&#xff08;以下简称钛铂数据&#xff09;自主研发的实时数据平台&#xff08;Tapdata Live Data Platform&#xff09;与北京涛思数据科技有限公司&#xff08;以下简称涛思数据&#xff09;自主研发的大数据平台 TDengine&#xff0c;已…

【深度学习】Dropout、DropPath

一、Dropout 1. 概念 Dropout 在训练阶段会让当前层每个神经元以drop_prob&#xff08; 0 ≤ drop_prob ≤ 1 0\leq\text{drop\_prob}\leq1 0≤drop_prob≤1&#xff09;的概率失活并停止工作&#xff0c;效果如下图。 在测试阶段不会进行Dropout。由于不同批次、不同样本的神…

数据库管理-第171期 Oracle是用这种方式确保读一致的(20240418)

数据库管理171期 2024-04-18 数据库管理-第171期 Oracle是用这种方式确保读一致的&#xff08;20240418&#xff09;1 基本概念2 用处3 注意事项总结 数据库管理-第171期 Oracle是用这种方式确保读一致的&#xff08;20240418&#xff09; 作者&#xff1a;胖头鱼的鱼缸&#x…

MySQL中explain的用法

执行结果各字段的含义 EXPLAIN SQL语句 如&#xff1a; EXPLAIN SELECT * FROM test 执行结果&#xff1a; 列名描述id在一个大的查询语句中每个SELECT关键字都对应一个 唯一的idselect_typeSELECT关键字对应的那个查询的类型table表名partitions匹配的分区信息type针对单表…

P2P面试题

1&#xff09;描述一下你的项目流程以及你在项目中的职责&#xff1f; 一个借款产品的发布&#xff0c;投资人购买&#xff0c;借款人还款的一个业务流程&#xff0c;我主要负责测注册&#xff0c;登录&#xff0c;投资理财这三个模块 2&#xff09;你是怎么测试投资模块的&am…

前端nodead面试题

1.CSR和SSR分别是什么&#xff1f; CSR是客户端渲染&#xff0c;客户端访问网站时&#xff0c;服务器向客户端发送Html文档&#xff0c;让浏览器去渲染。其中像js,图片等还需要再次发请求。就是要啥给啥绝不多给。 缺点&#xff1a;不利于SEO&#xff0c;首次加载速度慢&…

HttpServlet,ServletContext,Listener它仨的故事

1.HttpServlet。 听起来是不是感觉像是个上古词汇&#xff0c;是不是没有阅读下去的兴趣了&#xff1f;Tomcat知道吧&#xff0c;它就是一个servlet容器&#xff0c;当用户向服务器发送一个HTTP请求时&#xff0c;Servlet容器&#xff08;如Tomcat&#xff09;会根据其配置找到…

【本地大模型】本地部署Llama3模型的极简教程

本地部署Llama3模型的极简教程 引言一、Llama3模型背景1、原理2、技术特点二、Ollama工具简介三、部署本地大模型(https://ollama.com/blog/llama3)1、安装Ollama四、运行Llama3模型五、Web UI的安装与配置1、安装open-webui2、启动Web UI3、解析本地文档六、整合使用1、Lang…

overflow(溢出)4个属性值,水平/垂直溢出,文字超出显示省略号的详解

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃-大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 Web 开发工具合…

解析 IP(IPv4)地址

IPv 4 地址 一、组成二、IPv4 的分类三、子网掩码四、特殊的地址五、私有 IP 地址六、全局 IP 地址七、私有 IP 地址和全局 IP 地址的关系八、广播地址九、网络地址十、IP 地址个数计算十一、查看电脑的 IP 地址&#xff08;window&#xff09;十二、手动设置电脑的 IP 地址 为…

面试十四、内存泄漏

1.内存溢出和内存泄漏是啥 内存溢出 out of memory&#xff0c;是指程序在申请内存时&#xff0c;没有足够的内存空间供其使用&#xff0c;出现out of memory&#xff1b;比如申请了一个integer,但给它存了long才能存下的数&#xff0c;那就是内存溢出。 内存泄露 memo…