在前端开发初期,最开始设计模式并不清晰,到后来总结经验后,逐步完善,有了目前的前端开发方式。本文也顺着时间线,给大家讲解相关概念。 前端渲染,什么是后端渲染(重要) 后端渲染(SSR):类似JSP,网页直接从后端进行渲染(服务端),再向客户展示 前端渲染(BSR):浏览器中显示的网页中的大部分内容,都
一、前端核心分析 1.1、概述Soc原则:关注点分离原则 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 : 给用户看,刷新后台给的数据 网络通信 : axios 页面跳转 : vue-router 状态管理:vuex Vue-UI : ICE , Element UI 1.2、前端三要素 HTML(结构):超文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body> <!--有序列表 应用范围:试卷,问答..... --> <ol> <li>Java</li>
1. 事件起因 最近在做一个关于星座的移动端项目,想实现这样一个需求,每次切换导航栏NavBar item时,都会使下面的页面级组件TodayView更改背景色样式(如图1到图2,导航栏从双鱼座切换到处女座,下面页面级组件的背景颜色由黄色切换至粉色)。 图1
上线一个阿里 QianKun “微前端”逼走了 2 位 90后 爱前端不爱恋爱 113 人赞同了该文章 序言 作为一个团队领导者,需要经常帮助组员解决各类阻塞问题。 而我一直从事后端的开发,导致对前端的知识储备并没有那么丰富(实际很简陋)。 鉴于当下流行的开发模式几乎
这个问题主要是我们的数据获取不到,我们的前端页面在渲染时会有后端的数据,但是我们有可能后端传给前段时没有传过来,导致前端并没有这个数据,但是由于页面没有展示出来我们没有发现。此时我们应该从页面开发者工具中查看后端传给前端的数据是否包含。
声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 背景 如果你有玩过
DAY02 列表 1.无序列表:没有排序 <ul> <li></li> <li></li> </ul> 2.有序列表:默认排序 <ol> <li></li> <li></li> </ol> 3.自定义列表 <dl> <dt>名词</dt> <dd>解释</dd> <
先到高的开放平台申请key 在index.html引入高德地图文件 <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <script src="https://webapi.amap.com/maps?v=1.4.15&key='key值'&p
DAY01 计算机的介绍 特点: 1.可以进行数值计算,可以进行逻辑计算 2.具有存储记忆功能 硬件:看得见,摸得着的 显示器,主机,存储器 软件:看得见,摸不着的 系统软件:操作系统:windows、Linux、UNIX等 应用软件:各类app C/S架构和B/S架构 1.C/S架构:需要安装 app C:client 客户机 由服务器S
学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理。没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间、精力、金钱。废话不多说直接上干货。 爱创课堂提醒一下,在开始学习之前你需要做到以下5点: 需要达到
getVideoBase64(url) { return new Promise(function(resolve, reject) { let dataURL = ''; let video = document.createElement("video"); video.setAttribute('cr
验证码 <template> <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode" > <span v-for="(item,index) in co
<template> <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode" > <span v-for="(item,index) in codeLi
1.shift+alt+f 格式化代码(vscode) 2.css的复合选择器 后代选择器:选后代(不一定是儿子) 空格隔开 如ol li{样式声明} 更好地选择想要的标签 也可以用class表示 如 .nav.li.a 子选择器 >亲儿子 并集选择器 逗号 div,p{样式声明} 最后一个选择器 不需要加逗号 3.链接
web前端的使用工具为:Visual Studio Code 骨架:在工具中输入英文状态下的 !即可出现骨架,无需自己手写 首先先在Visual Studio Code中创造一个HTML的文件,然后输入英文状态下的 “ !” 代码如下: <!-- 如何写注释:一般程序默认 ctrl+/ (/此符号不是数字盘上的是在英文盘
Swiper
parcel是一款前端构建工具,可以不写任何配置的情况下做前端项目开发。 前端用的比较的构建工具是webpack,搭配相关脚手架是齐全且重的,有些简单的项目就可以考虑用parcel来构建,快速实现模块化开发。下面通过一个简单例子跟大家展示一下怎么使用。 1,npm 初始化生成package.json文件 n
这周结束了javaweb的基础学习,做了一个基于mabatis框架的后端代码,前端代码是基于vue框架的页面,关于异步请求的使用的理解更加深刻,在完成修改和删除功能时遇到了如何取出他的id用来操作。最后发现在vue框架中button按钮可以使用slot-scope。获取当前行的所有数据通过指针直接取出数
相信很多小伙伴在看到树状图都很头疼,因为大部分的树形列表都是要去数据库动态查询数据,然后显示出来的,会跟着数据库字段变化而变化. 在我点击左侧树状图,右侧空白区域会动态的刷新出不同页面的内容 以layui前端框架为示例,给各位展示树状图的实现 前端HTML、CSS 以
上传指定路劲 /*使用SpringBoot实现简单文件上传(上传至本地)*/ @PostMapping("/upload") //MultipartFile 接收前端传过来的文件 public String upload(@RequestBody MultipartFile file) throws IOException { // 注意 前端传参的name要和MultipartFile的
前言 随着前端诸如webpack,rollup,vite的发展,gulp感觉似乎好像被取代了。其实并没有,只不过它从台前退居到了幕后。我们仍然可以在很多项目中看到它的身影,比如elementplus、vant等。现在gulp更多的是做流程化的控制。 比如我们要把一个大象放进冰箱里就需要 打开冰箱门->把大象放进
前端面试题视频讲解 封装异步的fetch,使用async await方式来使用 (async () => { class HttpRequestUtil { async get(url) { const res = await fetch(url); const data = await res.json(); return data; } asy
尽量减少HTTP请求次数 减少DNS查找次数即减少页面中的主机名 避免跳转 可缓存的ajax 推迟加载内容 预加载 减少DOM元素数量 根据域名划分页面内容 使iframe的数量最小 避免404 使用内容分发网络 为文件头指定Expires或Cache-Control Gzip压缩文件内容 配置ETag 尽早刷新输出缓冲
在学生管理系统里,其中会有学生信息采集的功能。程序结构不外乎下面的分层实现方式。 开发出来这个功能,我觉得大家都易如反掌了。 当然易如反掌。 OK,我要说的是数据校验,以最简单的非空校验(例如:学生姓名不可为空)来说: 首先,前端页面的表单要校验,为空则不允许提交,非空则调用后端