让学前端不再害怕英语单词(四)

简介: 前三章直通车↓↓↓让学前端不再害怕英语单词(一)让学前端不再害怕英语单词(二)让学前端不再害怕英语单词(三)在第一章和第二章,我们大致讲了下前端三剑客和利用接口处理后端返回数据的一些单词,在第三章我们讲了css中的伪类和开发过程中要使用的一些单词,所以在第四章中,我们进一步系统的讲关于开发过程中使用的一些单词如果有读者觉得哪部分的单词不熟悉的话,可以直接私信博主,博主会根据内容进行总结归纳

系统


上一章发了之后,很多粉丝群的朋友问我为什么不继续讲网页而开始讲系统了,其实原因很简单,现在很多的公司的前端开发更多的工作不是去写网页,而是写系统,或者维护系统,所以如果一个新人进入到一家公司,并接受上司派来的进行维护系统的工作,面对一大堆代码,又不懂得上一位此岗位的程序员是怎么维护的,那么阅读代码就是一项常规且重大的工作


很多朋友说可以利用翻译软件去翻译不懂的单词,那问题是不可能每个单词都复制拿去翻译,那样太耗费时间,所以提前去了解一下系统常用的模块内的单词,是很有必要的


本章会衔接上一章末尾的系统的内容,进行系统的对开发过程中常用的单词进行总结


登录模块

登录模块的内容很简单,就是account 账号password 密码input 输入框,加上确认button 按钮,另外还有sign up注册check 勾选阅读协议,布局一般如下图所示:

a95fdeaa401140fc9371768df1d86a7c.png

ps:图里忘记加上注册的内容,不过可以参考github的首页,打开github首页右上角可以看到一个是sign up注册按钮,一个是sign in登录按钮,如下图所示

4d8a86d086d9400984caba37cabbf0b1.png

那程序员在开发的时候,可能就通过一个<el-button class='signUp' >Sign up</el-button>去写注册按钮,那么我们在进行二次开发或者维护的时候,就知道“噢!原来注册按钮写在这里


也可以通过快速查询单词 Ctrl+F,去快速查询sign up,或许就可以快速定位到之前的程序员写的注册按钮

cd7dc419da6a421092a39eaf5b512a12.png

el开头是使用的element组件库,这里暂时不对element组件库进行介绍

首页

首页的布局一般是顶部是显示当前页面的标记,侧边为选择模块,如下图所示:

55723ba740af4aaba9ee5b7b1b4f5a25.png

需要此项目的可以私聊博主


从这个页面,我们可以学到什么单词?

首先映入眼帘的是登录者的信息,包括头像,名字和个人简介

avator 头像,很多群的朋友说我可不可以用image 图像来当头像的class 类,这是什么意思呢?

就是我平时我们开发,是<div class='avator'></div>代表头像这一块的内容,有朋友想问能不能改成<div class='image'></div>,他说我不认识头像的单词,只记得image 是图像的意思,博主的建议是不要用image,因为你可能很多地方需要用到图,如果每一个地方的类都是image,那在设置样式的时候就会出错了


name 名字 这个单词应该学过英语都知道的


brief 简介,简短 在实战中我使用brief 简短+ information 信息去作为个人简介的类


上次登录时间即为 last 最后 login 登录 time 时间

上次登录地点即为 last 最后 login 登录 location 地点


实战真实代码如下:

6ec863eea98b4e7e900b0e14ee6a28cc.png

很多地方的名字我们都需要界定,比如右上角的是系统的名字,这个系统叫做通用后台管理系统

88ec8e65eb844cfdb2cd531ce2aa576d.png

那我们可以通过 system 系统 + name 名字,去界定这个类


首页在系统开发过程中,我们通常使用 home 房子 去代表首页,当然也可以使用其他的单词

22c94cb3ab9342d9a1f934524dff483d.png

如果公司有代码规范,那么就一定要按公司的代码规范去命名响应的文件名


整个系统都涉及到 manage 管理,比如userManage 用户管理projectManage 项目管理companyManage 公司管理


我们学计算机的也有一个证叫信息系统项目管理师,简称PM,就是project management


所以 manage 也是一个必须要学习的单词,因为随处可见


在首页我们可以看到可视化的内容,用chart 图表去展示我们需要的信息

在项目开发的过程中我们可能使用大量的图表去展示一些概览的信息,所以我们可以使用插件echarts,前端的同学可以了解一下这个插件85c47fa0de10402eafa9123d93de75db.png

在首页中我们也可以看到使用到了一些form 表格,这个我们就可以联想我们在第二章讲的import ...from ...中的from 来自…,中间两个单词调换一下位置就是form 表格


表格里面有row 行和column 列,通常column会缩写成col


至于更多的内容,我们下一章节再细谈!感谢阅读!


如在开发问题中遇到问题,可私聊博主

如有错字,还请原谅!近日会更下一章:让学前端不再害怕英语单词(五)和前端学习路线(四),同时也会更新前端静态页面开发思路(四)

相关文章
|
前端开发 数据安全/隐私保护
让学前端不再害怕英语单词(三)
让学前端不再害怕英语单词(三)
151 2
让学前端不再害怕英语单词(三)
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
160 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
2月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
2月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
112 1
|
2月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
3月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
4月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
47 0
|
6月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
107 2