3.前端技术专题
文章平均质量分 81
前端技术专题包括:H5、C3、JS、jQuery、Ajax、Vue、
Hudie.
✨Never stop !To be the person you want to be!
展开
-
分布式医疗挂号系统(六) | 使用Vue开发后台管理系统页面
前后端分离开发是目前流行的大趋势,本文从整体上介绍Vue框架的开发流程,结合具体的案例,演示使用Vue框架调用具体的后端接口。原创 2021-04-12 10:15:03 · 2143 阅读 · 0 评论 -
使用Webpack打包JS与CSS教程
使用Webpack打包JS与CSS教程原创 2021-04-10 16:40:15 · 451 阅读 · 0 评论 -
Node.js的使用与npm管理
Node.js介绍与使用1.Node.js是什么2.什么是BFF3.安装Node.js4.测试Node.js测试执行JS文件模拟服务器效果1.Node.js是什么Node.js是JS的引擎,或者说是JS的运行环境,通过Node.js可以直接运行JS。使用Node.js之前,编写的JS代码都是通过浏览器访问才能执行。使用了Node.js之后,不需要浏览器就可以直接运行JS程序,因为Node.js内置了Chrome V8的引擎。除了能直接运行JS程序外,Node.js还可以模拟服务端效果。简单说,Nod原创 2021-04-09 23:26:06 · 657 阅读 · 0 评论 -
使用axios方式实现Ajax请求
使用axios请求后端数据步骤1:引入axios依赖步骤2:实现Ajax请求在前后端分离开发中,前端通过Ajax请求请求后端,后端返回JSON数据,进而在页面中渲染显示。Ajax请求可以通过原生方式实现、也可以通过jQuery方式实现,在Vue中,通常使用axios方式(读作阿修斯)方式实现Ajax。axios是独立于vue的一个项目,可以用于浏览器和node.js中发送ajax请求。由于axios请求后端后,接收一段JSON数据,这里手动模拟一段JSON数据。步骤1:引入axios依赖依赖即a原创 2021-04-09 23:25:48 · 958 阅读 · 0 评论 -
使用Vue脚手架进行模块化开发
使用Vue脚手架进行模块化开发原创 2021-02-14 22:52:42 · 519 阅读 · 1 评论 -
Vue |计算属性和侦听器 |组件化开发 |生命周期函数
Vue的计算属性和侦听器学习记录原创 2021-02-13 22:35:07 · 372 阅读 · 0 评论 -
Vue编程语法演示
Vue编程语法演示原创 2021-02-13 21:14:10 · 352 阅读 · 1 评论 -
Vue | 入门案例
文章目录一、MVVM思想二、Vue入门案例1.初始化项目2. 声明式渲染+双向绑定3.事件处理三、Vue开发插件介绍安装 Vue3 Snippets代码提示安装vue-devtools方便调试一、MVVM思想M: 即 Model, 模型, 包括数据和一些基本操作。V: 即 View, 视图, 页面渲染结果。VM: 即 View-Model, 模型与视图间的双向操作(无需开发人员干涉)在 MVVM 之前, 开发人员从后端获取需要的数据模型, 然后要通过 DOM 操作 Model 渲染到 V原创 2021-02-13 21:13:35 · 420 阅读 · 0 评论 -
ES6异步编排Promise与模块化
演示ES6的异步编排Promise与模块化原创 2021-02-12 14:35:21 · 2323 阅读 · 4 评论 -
ES6基础语法与模块化编程
介绍ECMAScript6基础语法原创 2021-02-11 22:43:32 · 371 阅读 · 1 评论 -
简单的登录页面设计
文章目录一、效果展示二、前端html/css代码(1)regist.html(2)CSS3.css三、服务器端代码(1)TextRegistServlet.java一、效果展示二、前端html/css代码(1)regist.html<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2020-01-08 21:14:04 · 7197 阅读 · 0 评论 -
Vue.js框架介绍
文章目录一、Angular和React框架二、Vue.js框架介绍三、谈谈Vue.js的优点Google 的 Angular 、Facebook 的 React和尤雨溪的 Vue,是目前流行的三大主流前端框架。一、Angular和React框架1.AngularAngular更适合开发一些大型应用,其强大之处在于可以把静态页面与动态数据绑定起来。该框架拥有良好的项目结构,适合大型项目...原创 2020-02-25 09:15:53 · 9327 阅读 · 7 评论 -
检验中文昵称是否存在(使用Ajax)
<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>textregist.html</title> <script src="js/jQuery-3.4.1.js"></script> <script type...原创 2019-11-30 00:06:10 · 547 阅读 · 0 评论 -
JavaScript正则实现表达式以字母开头
表单校验:创建表单,使用JavaScript+dom为表单添加校验.要求:验证用户名称,必须以字母开头,长度2-6位之间.验证密码不能为空.确认密码不能为空,要与密码一致.<!DOCTYPE html><html lang="en"><!-- 表单校验:创建表单,使用JavaScript为表单添加校验. 1.验证用户名称,必须以字母开头,...原创 2019-11-20 22:50:02 · 9115 阅读 · 1 评论 -
Ajax开发
(1)Ajax简介(Asynchronous JavaScript and Xml,异步的JavaScript和Xml.)Ajax是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。Ajax是一种用来改善用户体验的技术,本质是使用XMLHttpRequest对象异步地向服务器发请求,并且发送请求的同时浏览器并不销毁页面,可以继续进行页面的操作,在服务器收到请求之后会返回部分数据,而不...原创 2019-11-20 18:47:26 · 673 阅读 · 0 评论 -
jQuery框架
一、jQuery简介jQuery是一个JS的框架(JS的类库),对传统的JS进行了封装。使用JQuery可以兼容各种浏览器,方便的处理HTML、Events、动画效果等。方便的为网站提供AJAX交互。jQuery写法的简单性,易用性大大提升了人们对它的使用。使用jQuery可以做到,html页面代码和控制的分离,彻底将控制代码放入一个单独的js文件。使用jQuery需要引入jQuery...原创 2019-11-11 18:45:29 · 574 阅读 · 0 评论 -
Dom编程技术基础总结
(1)dom概述文档对象模型(Document Object Model,简称DOM):是Js操作HTML文档的一种技术,是W3C组织推荐的处理可扩展标志语言的标准编程接口。dom将html标签对象化,将网页中的每一个元素都看作一个对象。利用dom可以直接访问所有的html对象,连同他们的文本和属性,可以对其中的内容进行修改和删除,也可以创建新的元素。dom作用:参与制作动态网页(其他...原创 2019-10-03 17:03:41 · 950 阅读 · 0 评论 -
CSS字体样式属性
font-size:字号大小。font-family字体和Unicode字体。font-weight:字体粗细。font-style:字体风格。font:综合设置字体样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style>...原创 2019-06-19 21:53:27 · 1160 阅读 · 0 评论 -
盒子阴影
(1)盒子模型布局的稳定性大部分情况下内边距和外边距是可以混用的,但是,根据稳定性来分,建议如下:wide>padding>margin优先使用 宽度(width) 其次使用内边距(padding) 再次使用 外边距(margin)。原因:margin会有外边距合并和id6以下版本的加倍bug,所以最后使用。padding会影响盒子大小,需要进行加减计算(麻烦) 其次使用...原创 2019-07-09 09:33:20 · 699 阅读 · 0 评论 -
"版心"和布局流程
(1)版心版心(可视区)是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。(2)布局流程为了提高网页制作的效率,布局时通常要遵循一定的布局流程:确定页面的版心(可视区)分析页面中的行模块,以及每个行模块中的行列表。制作HTML结构。CSS初始化,然后开始运用和种子模型的原理,通过DIV+CSS布局来控制...原创 2019-07-09 09:52:17 · 2017 阅读 · 0 评论 -
浮动与清除浮动
网页布局的核心就是用CSS来摆放盒子位置,把盒子摆放到合适的位置需要用到CSS的定位机制。CSS的定位机制有三种,普通流(标准流),浮动和定位。(1)普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列。(2)浮动(1)浮动最早是用来做文字环绕图片效果的。后来才开始用浮动的特性来布局。<!DOCTYPE htm...原创 2019-07-09 10:15:22 · 502 阅读 · 0 评论 -
CSS复合选择器
(1)交集选择器交集选择器是并且的意思,是即…又…的意思。用的相对来说比较少,不太建议使用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .red { color: red; ...原创 2019-06-28 20:43:35 · 478 阅读 · 0 评论 -
HTML常用标签总结
HTML常用标签:结构标签字体标签排版标签图片标签列表、超链接表格标签表单标签分组标签特殊字符原创 2019-09-25 23:27:53 · 706 阅读 · 0 评论 -
css常用标签总结
(1)CSS选择器①元素选择器<head> <style> /* 元素选择器 */ div { width: 100px; height: 100px; background-color: red; } </style>&...原创 2019-09-25 23:28:20 · 782 阅读 · 0 评论 -
JavaScript基础语法总结
一、Js介绍JavaScript是一种基于对象和事件驱动的客户端脚本语言。JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面之后,可在所有的现代浏览器中执行。Js的用途:使页面更加丰富,使页面动起来。二、Js基础语法(1)使用Js①定义事件时直接写入Js脚本代码②嵌入式:<script&g...原创 2019-09-25 23:28:45 · 808 阅读 · 1 评论 -
盒子模型(CSS重点)
目录:(1)网页布局的实质(2)盒子边框(border)(3)表格的细线边框(4)表格的细线边框(5)内边距(padding)(6)外边距(margin)(7)清除元素默认的内外边距(8)新浪导航栏小案例(padding练习)(9)搜索趣图小案例(margin练习)(1)网页布局的实质把网页元素(比如文字图片等)放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。简单一...原创 2019-07-09 09:26:59 · 770 阅读 · 0 评论 -
两个易混点(水平居中和插入图片)
一、 文字水平居中和盒子水平居中区别文字水平居中:text-align: center;盒子水平居中:margin: 10px auto;二、 插入图片和背景图片的区别:插入图片更改大小用width和height插入图片更改外置用margin 或padding 盒模型背景图片更改大小只能用background-size背景图片更改位置用background-position&l...原创 2019-07-09 09:03:42 · 421 阅读 · 0 评论 -
特殊字符和列表
特殊字符标签:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> ----- 空格符 -----<br /> ...原创 2019-06-15 21:02:52 · 1242 阅读 · 0 评论 -
链接标签(anchor)和锚点定位
HTML中创建超链接只需要用标签环绕需要被链接的对象即可,基本原格式如下: <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>href:用于指定连接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。HypertextReference的缩写, 意思是超文本引用。target:用于指定链接页面的打...原创 2019-06-15 13:26:36 · 5647 阅读 · 0 评论 -
图像标签(image)
语法格式:<img src="图像URL" />src属性用于指定图像文件的路径和文件名,是img标签的必需属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> 1.基本图像插入方式:&...原创 2019-06-15 13:26:26 · 564 阅读 · 1 评论 -
文本格式化标签和标签属性
(1)本格式化标签:在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时候就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。四种常见文本格式化标签:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume...原创 2019-06-15 13:26:16 · 1438 阅读 · 0 评论 -
排版标签(Typesetting label)
排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。排版标签分为:标题标签段落标签水平线标签(单)换行标签(单)div span标签(1)标题标签(head):基本语法格式:<hn>标题文本</hn>标签语义:作为标题使用,并且依据重要性递减。html提供了6个等级的标题<h1>、<h2>、<h3...原创 2019-06-15 13:26:06 · 638 阅读 · 0 评论 -
CSS初步(Cascading Style Sheets)
一、CSS--网页的美容师CSS通常称为CSS样式表或层叠样式表,主要用来设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片外观(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS的出现,拯救了混乱的HTML,更拯救了web开发者,让我们的网页更加丰富多彩。CSS最大的贡献是:让HTML从样式中脱离苦海,可以让HTML专注去做结构呈现。而样式交给CSS。目前CSS有...原创 2019-06-19 21:53:13 · 542 阅读 · 0 评论 -
多媒体标签
embed:标签定义嵌入的内容。audio:播放音频。video:播放视频。一、embed引入网上的视频。embed可以插入各种多媒体,格式可以使Midi、Wav、AIFF、AU、MP3等。url为音频或视频文件及其路径,可以使相对路径或绝对路径。注意:先上传。再引用。目前只发现爱奇艺的视频分享中有html代码分享,腾讯和优酷只有通用代码。通用代码可以播放,html代码无法播...原创 2019-06-19 00:26:39 · 511 阅读 · 0 评论 -
html初步
一、HTML初步(1)HTML(Hyper Text Markup Language)中文译为"超文本标签语言",主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。(2)HTML骨架格式:...原创 2019-06-14 10:50:02 · 476 阅读 · 0 评论 -
表单小案例:学生档案
表单标签小案例之学生档案效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <form action=""> <fieldset> ...原创 2019-06-18 20:22:20 · 723 阅读 · 0 评论 -
HTML发展历程和HTML5新增标签
W3school一、HTML发展历程:目前处于向H5的过度阶段,历史遗留问题太多了。二、HTML5新增常用标签:header:定义文档的页眉头部。nav:定义导航链接的部分。footer:定义文档或节的页脚,底部。article:定义文章。section:定义文档中的节(section\区段)。aside:定义其所处内容之外的内容 侧边。datalist:定义选项列表。一般...原创 2019-06-18 19:55:25 · 608 阅读 · 0 评论 -
相对路径和绝对路径
一、相对路径:同一级路径:图像文件和HTML文件位于同一文件夹,只需输入图像文件的名称即可,如<img src="logo.gif" />下一级路径:图像文件位于HTML文件的下一级文件夹,输入文件夹名和文件名,之间用“/”隔开,如<img stc="img/img01/logo.gif">上一级路径:图像文件位于HTML文件夹的上一级文件夹,在文件名之前加...原创 2019-06-15 20:02:57 · 843 阅读 · 0 评论 -
伪类选择器(链接、结构、目标)
伪类选择器目的就是向某些选择器添加特殊效果。一、链接伪类选择器:link—未访问的链接。:visited—已访问的链接。:hover—鼠标移动到链接上。:active—选定的链接。注意:写的时候要按照lvha的顺序。(lv包包非常hao)<!DOCTYPE html><html lang="en"><head> <meta c...原创 2019-06-20 23:23:05 · 1048 阅读 · 0 评论 -
CSS三大特性(层叠/继承/优先)
(1)CSS层叠性层叠性指多种CSS样式的叠加。这是浏览器处理冲突的一个能力。当出现样式冲突,会按照CSS书写的顺序,以最后的样式为准:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div { ...原创 2019-07-09 08:59:00 · 604 阅读 · 0 评论