1+X web证书(高级)的重要知识点的复习
1+X web证书(高级)的重要知识点的复习内容涉及:html css javascript bootstrap4 jQuery Vue3.0 (vuex)es6ajaxLaraver php mysqlwebpack ui框架…高级重点掌握:html css script vue本文内容主要是梳理,整合。方便在回答实操题的时候,能够通过关键字找到答案。知识点以热门的考点进行整合,内容不一定全覆盖
1+X web证书(高级)的重要知识点的复习
内容涉及:html css javascript bootstrap4 jQuery Vue3.0 (vuex) es6 ajax Laraver php mysql webpack ui框架…
高级重点掌握:html css script vue
本文内容主要是梳理,整合。方便在回答实操题的时候,能够通过关键字找到答案。知识点以热门的考点进行整合,内容不一定全覆盖,仅供参考。知识点来源于网络以及我本人的学习笔记,写的匆忙,如有错误或纰漏联系我矫正。
Canvas
createImageData(width,height) 以指定的尺寸(以像素计)创建新的 ImageData 对象
width ImageData 对象的宽度,以像素计。
height ImageData 对象的高度,以像素计。
createImageData(imageData)
创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象(不会复制图像数据)
imageData 另一个 ImageData 对象。
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
drawElm.getContext(‘2d’) 获取Vanvas的2d绘制环境
beginPath() 方法在一个画布中开始子路径的一个新的集合 起点(0.0)
moveTo(x,y); 移动到(x,y)点
lineTo(x,y); 路径的目标位置的 x 坐标, y 坐标
strokeStyle="#0000ff"; 绘制颜色 这里是蓝色
addColorStop(stop,color); 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。 在结束位置显示的 CSS 颜色值
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。该方法写在绘图最后
createLinearGradient(x,y,x1,y1) 创建线条渐变
context.createRadialGradient(x0,y0,r0,x1,y1,r1); 创建一个径向/圆渐变
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径
fillText(text,x,y,maxWidth); 在 canvas 上绘制实心的文本
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置(相对于画布)。
y 开始绘制文本的 y 坐标位置(相对于画布)。
maxWidth 可选。允许的最大文本宽度,以像素计。
strokeText(text,x,y) 在 canvas 上绘制空心的文本
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
drawImage(image,x,y) 把一幅图像放置到画布上
rect
rect x=“50” y=“50” rx=“10” ry=“10” width=“20” height=“280” -->svg
Less
参考:https://www.cnblogs.com/housheng/p/12109689.html
HTML
<meta>
<title>
<h1>
<link>
<canvas>
<nav>
<header>
<footer>
<aside> 定义页面的侧边栏内容。
<button>
<form>
属性 值 描述
accept MIME_type HTML5 不支持。规定服务器接收到的文件的类型。(文件是通过文件上传提交的)
accept-charset character_set 规定服务器可处理的表单数据字符集。
action URL 规定当提交表单时向何处发送表单数据。
autocompleteNew on/off 规定是否启用表单的自动完成功能。
method get/post 规定用于发送表单数据的 HTTP 方法。
name text 规定表单的名称。
novalidateNew novalidate 如果使用该属性,则提交表单时不进行验证。
target _blank 规定在何处打开 action URL。
type="checkbox" 带有复选框的表单
type="radio" 带有单选按钮的表单
<input>
html事件属性
-
onload —> οnlοad=“load()” 当文档加载完成后运行 JavaScript 脚本
-
onresize —> οnresize=“showMsg()” 当调整窗口大小时运行脚本
-
onblur 当元素失去焦点时运行脚本
-
onchange 当元素改变时运行脚本 属性可适用于
<input>
,<textarea>
, 和<select>
元素。 -
onfocus 当元素获得焦点时运行脚本 通常用于
<input>
,<select>
, 和<a>
元素。 -
onselect 当选取元素时运行脚本
-
onsubmit 当提交表单时运行脚本 只适用于
<form>
元素。
CSS
-
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
-
Position(定位)
relative 相对定位元素的定位是相对其正常位置。
fixed 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。
absolute 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于 -
Float(浮动)
-
display: block;
-
clear:both; 清除浮动 - 使用 clear
-
anchor伪类
a:link {color:#FF0000;} 未访问的链接
a:visited {color:#00FF00;} 已访问的链接
a:hover {color:#FF00FF;} 鼠标划过链接
a:active {color:#0000FF;} 已选中的链接
input:focus 选择元素输入后具有焦点
a:hover 把鼠标放在链接上的状态
a:active 选择正在活动链接 点击后的活动
p:before 在每个元素之前插入内容
p:after 在每个元素之后插入内容
-
边框
border-radius 圆角边框
box-shadow 添加阴影框 四个参数 上左 上右 下右 下左 颜色
border-image 以图片来做边框->边界图片 -
渐变
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。线性渐变 - 从上到下(默认情况下)
background-image: linear-gradient(#e66465, #9198e5);线性渐变 - 从左到右
background-image: linear-gradient(to right, red , yellow);线性渐变 - 对角
background-image: linear-gradient(to bottom right, red, yellow); -
文字
text-shadow 文本阴影 参数:水平阴影,垂直阴影,模糊的距离,以及阴影的颜色。
box-shadow 盒子阴影 参数:水平阴影,垂直阴影,模糊的距离(越大颜色越深),以及阴影的颜色。
text-overflow 溢出属性指定应向用户如何显示溢出内容 ellipsis 隐藏 ;clip 剪切掉
配合使用:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; -
2D转换
transform:translate(50px,100px) 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。这里向左边元素移动50个像素,并从顶部移动100像素。
transform:rotate(30deg) 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。元素顺时针旋转30度。
transform:scale(x,y) 该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数 (x,y>0) 例如: scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。
transform:skew() ,skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。 -
过渡
transition:css属性 时间; 指定要添加效果的CSS属性,指定效果的持续时间。 -
动画
animation
JS
Document 对象方法
document.getElementById(“demo”).innerHTML = “你好 Dolly”;
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly”
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
Element 对象
.className className 属性设置或返回元素的 class 属性
document.getElementsByTagName(“BUTTON”)[0].attributes;
attributes 属性返回指定节点的属性集合,即 NamedNodeMap。
document.getElementsByTagName(“BUTTON”)[0].attributes;
attributes 属性返回指定节点的属性集合,即 NamedNodeMap。
Event 对象
字符串方法
search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
JSON
JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。
bootsrap4
Bootstrap4 网格系统
Bootstrap 是移动设备优先的,先考虑移动设备再考虑PC端。
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-xs-超小屏幕 手机 <768px)
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
布局容器
.container 类用于固定宽度并支持响应式布局的容器。 boostsrap给出固定的宽度,有中大小等的屏幕宽度 超小屏 宽度百分百
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。 流式布局容器,宽度100%,默认padding有15px
Bootstrap4 图像形状
.rounded 类可以让图片显示圆角效果
Bootstrap4 折叠
Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
.collapse 类用于指定一个折叠元素 (实例中的
控制内容的隐藏与显示,需要在 或 元素上添加 data-toggle=“collapse” 属性。 data-target="#id" 属性是对应折叠的内容 (
jQuery
jQuery 入口函数:
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
JavaScript 入口函数:
window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别:
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test").hide() -…()。
在页面中选取所有
元素:
(
"
p
"
)
通
过
i
d
选
取
元
素
语
法
如
下
:
("p") 通过 id 选取元素语法如下:
("p")通过id选取元素语法如下:("#test")
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$(“p.intro”) 选取 class 为 intro 的
元素
$(“p:first”) 选取第一个
元素
$(“ul li:first”) 选取第一个
- 元素的第一个
- 元素
$(“ul li:first-child”) 选取每个- 元素的第一个
- 元素
$("[href]") 选取带有 href 属性的元素
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 元素
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 元素
$(":button") 选取所有 type=“button” 的 元素 和 元素
$(“tr:even”) 选取偶数位置的 元素
$(“tr:odd”) 选取奇数位置的 元素
jQuery 事件
jQuery 效果 - 滑动
jQuery 效果 - 淡入淡出
fadeIn() 用于淡入已隐藏的元素 显示隐藏
fadeOut() 方法用于淡出可见元素 类似于让他隐藏
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
jQuery Callback 方法
jQuery - 获取内容和属性
jQuery - 设置内容和属性
jQuery - 添加元素
jQuery - 删除元素
Vue (vue3.0)
beforeCreate 实例初始化之后
created 实例创建完成后被立即调用
beforeMount 挂载前开始之前被调用
mounted 实例被挂载后调用
beforeUpdate 数据更新时调用
Updated 数据更新完成之后,发生在视图更新之后
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用
destroyed 实例销毁之后调用
components 组件
transfrom
transfrom=“rotate(-45 70 50)” --> svg文件
transform:scale(2) 设置元素的放大倍率为两倍
transform: top left; 设置被转换元素的的基点位置
el
v-bind :
v-on @
v-for
v-if
v-show 是否显示
@click 组件点击事件
methods 方法
computed 计算属性
return 返回
components 组件
import Router from ‘vue-router’; 引用路由
Vue.use(Router) 使用路由
scoped 局部css样式
data(){ return{ } }
Vue的生命周期(Vue实例产生过程)
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模 板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
1.beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
2. created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer)属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,
e
l
属
性
目
前
不
可
见
3.
b
e
f
o
r
e
M
o
u
n
t
在
挂
载
开
始
之
前
被
调
用
:
相
关
的
r
e
n
d
e
r
函
数
首
次
被
调
用
4.
m
o
u
n
t
e
d
e
l
被
新
创
建
的
v
m
.
el 属性目前不 可见 3. beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用 4. mounted el 被新创建的 vm.
el属性目前不可见3.beforeMount在挂载开始之前被调用:相关的render函数首次被调用4.mountedel被新创建的vm.el 替换,并挂载到实例上去之后调用该钩子,如果 root 实例挂载了一 个文档内元素,当 mounted 被调用时 vm.$el 也在文档内
5. beforeUpdate
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器,该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行
6. updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
7. activated keep-alive
组件激活时调用。该钩子在服务器端渲染期间不被调用
8. deactivated keep-alive
组件停用时调用。该钩子在服务器端渲染期间不被调用
9. beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用10. destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监 听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
11. errorCaptured(2.5.0+ 新增)
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生 错误的组件实例以及一个包含错误来源信息的字符串,此钩子可以返回 false 以阻止该错误继续 向上传播。
vue之this.
r
o
u
t
e
.
p
a
r
a
m
s
和
t
h
i
s
.
route.params和this.
route.params和this.route.query的区别
1.this.$route.query的使用
A、传参数:
this.
r
o
u
t
e
r
.
p
u
s
h
(
p
a
t
h
:
′
/
m
o
n
i
t
o
r
′
,
q
u
e
r
y
:
i
d
:
i
d
,
)
B
、
获
取
参
数
:
t
h
i
s
.
router.push({ path: '/monitor', query:{ id:id, } }) B、获取参数: this.
router.push(path:′/monitor′,query:id:id,)B、获取参数:this.route.query.id
C、在url中形式(url中带参数)
http://172.19.186.224:8080/#/monitor?id=1
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据还会显示存在(项目中遇到此问题)
2.this.$route.params的使用
A、传参数:
this.
r
o
u
t
e
r
.
p
u
s
h
(
n
a
m
e
:
′
m
o
n
i
t
o
r
′
,
p
a
r
a
m
s
:
i
d
:
i
d
,
)
B
、
获
取
参
数
:
t
h
i
s
.
router.push({ name: 'monitor', params:{ id:id, } }) B、获取参数: this.
router.push(name:′monitor′,params:id:id,)B、获取参数:this.route.params.id
C、在url中形式(url中不带参数)
http://172.19.186.224:8080/#/monitor
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据不存在(项目中遇到此问题)
**vue 中 this. r o u t e r . p u s h ( ) 路 由 跳 转 传 参 及 参 数 接 收 的 方 法 ∗ ∗ 传 递 参 数 的 方 法 : 1. P a r a m s 由 于 动 态 路 由 也 是 传 递 p a r a m s 的 , 所 以 在 t h i s . router.push() 路由跳转传参 及 参数接收的方法** 传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this. router.push()路由跳转传参及参数接收的方法∗∗传递参数的方法:1.Params由于动态路由也是传递params的,所以在this.router.push() 方法中 path不能和params一起使用,否则params将无效。需要用name来指定页面。
及通过路由配置的name属性访问
在路由配置文件中定义参数:
通过name获取页面,传递params:
在目标页面通过this.$route.params获取参数:
2.Query
页面通过path和query传递参数,该实例中row为某行表格数据
在目标页面通过this.$route.query获取参数:
this.$route.query.row。xxx
express.js
el-ui
ajax
服务器端:
//1. 引入express
const { request, response } = require('express');
const express = require('express');
//2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// GET请求
app.get('/',(request,response)=>{
// 设置响应
response.send('Hello express')
});
//设置请求方式 使用json的方式进行请求
app.all('/json-server',(request,response)=>{
// 设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置自定义的响应头 允许所有的头信息
response.setHeader('Access-Control-Allow-Headers','*')
// 设置响应体
// 响应一个数据
const data = {
name :'mijac'
};
// 对对象进行字符串装换
let str = JSON.stringify(data);
response.send(str);
});
// axios
app.all('/axios-server',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
const data = {name:'mijac'};
response.send(JSON.stringify(data));
});
//4. 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中。。。。。")
});
响应请求:
--- html
<button>点击发送请求</button>
<div id="result"></div>
<script>
// 获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
//绑定事件
btn.onclick = function(){
//ajax
// 1.创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请方法和url
xhr.open('GET','http://localhost:8000/server?a=100&b=200&c=300');
//3 发送
xhr.send();
//4. 事件绑定 处理服务端返回结果
// on when 当....时候
// readystate 是 xhr 对象中属性,表示状态 0 1 2 3 4
// change 改变
xhr.onreadystatechange = function(){
//状态4的时候进行结果的处理
if(xhr.readyState === 4){
// 判断响应状态吗 200 404 403 401 500
// 200-299 成功的返回结果
if(xhr.status >= 200 && xhr.status <300){
//处理结果 行 头 空行 体
// 1. 响应行
console.log(xhr.status); //状态码
console.log(xhr.statusText);// 状态字符串
console.log(xhr.getAllResponseHeaders()); // 所有的响应头
console.log(xhr.response); // 响应体
result.innerHTML = xhr.response;
}else{
}
}
}
}
</script>
返回结果:Hello express
请求4个步骤
1.创建对象
2.初始化,设置请求地址
3.发送
4.事件绑定,返回执行结果
JSON:
<script>
const result = document.getElementById('result');
//绑定键盘按下的事件
window.onkeydown = function(){
// 发送请求
const xhr= new XMLHttpRequest();
// 自动转换 设置响应体数据的类型
xhr.responseType = 'json';
//初始化
xhr.open('GET','http://localhost:8000/json-server')
// 发送
xhr.send();
//事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 ){
if(xhr.status >=200 && xhr.status <300){
// console.log(xhr.response);
//result.innerHTML = xhr.response;
//手动对数据转换
// let data =JSON.parse(xhr.response);
// console.log(data)
//result.innerHTML = data.name;
//自动转换 需要设置响应体
console.log(xhr.response);
result.innerHTML = xhr.response.name;
}
}
}
}
</script>
返回结果:name :‘mijac’
请求步骤:
1.创建对象
2.自动转换 设置响应体数据的类型 ****
3.初始化,设置请求地址
4.发送
5.事件绑定,返回执行结果
axios
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
const btns = document.querySelectorAll('button');
// 配置baseurl
axios.defaults.baseURL = 'http://localhost:8000';
btns[0].onclick = function(){
// GET请求
axios.get('/axios-server',{
//url 参数
params:{
id:100,
vip:7
},
// 请求头信息
headers:{
name:'mijac',
age:20
}
}).then(value =>{
console.log(value); // 获取请求信息
});
}
btns[1].onclick = function(){
axios.post('/axios-server',{ //post
username:'admin',
password:'admin'
},{
//url
params:{
id:200,
vip:9
},
//请求头参数
headers:{
height:180,
weight:180,
},
//请求体
data:{
}
})
}
btns[2].onclick = function(){
axios({
method:'POST',
//url
url:'/axios-server',
//url 参数
params:{
vip:10,
level:30
},
//头信息
headers:{
a:100,
b:200
},
//请求体参数
data:{
username:'admin',
password:'admin'
} // 返回结果
}).then(response=>{
console.log(response);
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应头信息
console.log(response.headers);
//响应体
console.log(response.data);
})
}
</script>
webpack
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。同时webpack也是优秀的前端构建工具,静态资源打包器,可以根据模块依赖关系进行静态资源分析,快速打包生成相对应浏览器可以直接识别的静态资源!
入口起点(entry point) :指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。
输出(output):告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。
文件类型读取(loader):只能读取JavaScript 和 JSON 文件,loader 能够 import 导入任何类型的模块
插件(plugin) :loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。
环境模式(mode):通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production
浏览器兼容性(browser compatibility) :提前加载 polyfill,不支持 IE8 及以下版本。webpack 的 import() 和 require.ensure() 需要 Promise
环境(environment) :webpack 5 运行于 Node.js v10.13.0+ 的版本。
安装
1)项目根目录控制台执行指令:npm init,生成package.json文件,npm是新版本node自带的包管理工具,而package.json相当于清单,记录依赖库和项目信息的文件。
2)全局安装webpack指令: npm i webpack webpack-cli -g ,全局安装是指系统环境中,任何项目文件夹下都可以使用指令,其中mac电脑首次执行应该是需要管理员权限,sudo npm i webpack webpack-cli -g 如果网速太慢则建议切换为淘宝镜像源。
3)本地安装webpcak指令: sudo npm i webpack webpack-cli -D,下载的模块是注入于本项目下的./node_nodules文件夹中,不会影响其他项目,起到独立的作用!
plugins
插件(plugins)可以让webpack执行范围更广更为复杂的任务,配置打包优化等一下相关的作用功能,使用前需要单独引入对应的插件。
mysql
mysql数据库的关键字和关键句(笔记)
以下是数据库的基本操作语句关键字:
1.登陆
进入cmd后:
>>>
mysql -u root -p
(用户名和密码)
2.退出
exit
或者
\q
3.创建
数据库CREATE DATABASE database_name ;
数据表CREATE TABLE table_name(…);
索引 CREATE (/UNIQUE/FULLTXET/SPATIAL)INDEX index_name ON table_name
临时表CREATE TEMPORARY TABLE table_name AS …
视图 CREATE VIEW view_name AS SELECT 字段名1,字段名2 FROM 表格
4.删除
删除DELETE
删除数据库DROP DATABASE 数据库名;
删除表格DROP TABLE 数据表;
删除字段 ALTER TABLE 表名 DROP 字段名
删除索引DROP INDEX索引 ON 表名
5.添加
插入语句:①INSERT INTO table_name (column_name…) VALUES (值1)…;
②INSERT INTO table_name SET <列名1> = <值1>, <列名2> = <值2>,
6.修改
更新数据
7.更新
UPDATE 表名 SET 字段1=值1,字段2=值2 WHERE …
8.查询
常见的查询语句:SELECT 字段名1,字段名2 FROM 表名 WHERE …
查询表格:SELECT * FROM 表名;
9.分组,排序
10.索引
11.导入导出(备份)
12.日期
13.函数
字符串函数
数字函数
日期函数
聚合函数
高级函数,控制流程函数,格式化函数,类型转化函数
14.其他
15.mysql的单词
SELECT 查询
INSERT 插入
UPDATE 修改
DELETE 删除
CRETE DATABASE 创建数据库
DROP DATABASE 删除数据库
database 数据
DBMS 数据库管理系统
master 主要,首席
model 模型
relation 关系
studio 套件
server 服务器
client 客户端
column 字段、列
design 设计
primary key 主键
foreign key 外键
datetime 日期时间
varchar nvarchar unique 唯一
identity check 检查
insert 添加
delete 删除
update 修改
select 查询
union 联合
value 值
null 空
select 选择
distinct 不同的
order 排序
ascend 上升
descend 下降
percent 百分比
group 分组
where having 持有
top 顶部
like 像…一样 between 在…中间
max 最大值
min 最小值
average 平均值
count 计数
having 持有
inner 内部的
outer 外部的
left 左边的
right 右边的
join 联接
php
Laravel
artisan 自带的命令行接口
url:http://localhost/
定义命名空间 namespace 路径
定义类变量 static private public
self:: 调用类常量
$request->session()->forget(‘key’); 删除
$request->session()->put(‘key’, ‘value’); 存储
$request->session()->get(‘key’); 获取数据
$request->session()->all(); 获取所有的数据
return view() 选择模版
array_push() 数组添加数据
表单提交的时候需要添加参数 {!!csrf_field()!!} 防止CSRF攻击
{{URL::asset(‘css/…’) }} 解析静态方法URL::asset 绝对路径与之效果一样
模版文件在MVC模式中的view层
@extends 指令来明确的指定继承布局
@section 指令将挂件中的内容挂载到布局中
@yield 替换占位内容的关键字
@include 包含,加载局部视图文件
默认安装最新版的laravel
文件夹:
项目/public 入口文件路径
app 业务逻辑代码
app/Http/Controllers 控制器
app/Http/Middleware 中间件
bootstrap 框架启动与自动加载设置相关的文件
config 应用程序的配置文件
database 数据库操作相关的文件
gulpfile.js Gulp配置文件
package.json 应用的NPM包
Laravel闪存数据的方法
$request->flash()
真题答案
判断题:
设置某个元素的上外边距为10px,左右外边距为20px,下外边距为20px,可以缩写为:margin:10px 20px 20px。
设置标签的height和width压缩图片,可以改变图片容量大小。
选择:
在 jQuery Mobile 弹出框中,在弹出框内的元素上使用以下哪一个正确的属性,点击该元素弹出框会关闭。 data-rel=“back”
jQuery Mobile 中 Grid 网格布局容器正确的使用方法是 class=“ui-grid-a”
使用 Express 托管静态文件时,可以为静态目录指定安装路径来创建虚拟路径前缀,可以多次调用express.static中间件函数来设置多个静态资源目录,使用express.static时最好使用绝对路径。
关于Node.js的异步编程,Node.js通常会将异常作为回调函数的第一个实参传回,Node.js 是单线程的,Node.js 异步编程依托于回调来实现。
关于events模块,emitter为events.EventEmitter()的实例化对象。使用emitter.once()注册的监听器在触发后会立即解除,可以使用emitter.removeAllListeners()移除指定事件的所有监听器,events.EventEmitter() 的核心就是事件触发与事件监听器功能的封装。使用emitter.on(),监听事件,可以触发多次。
关于Express框架的中间件,如果当前的中间件功能没有结束请求-响应周期,则必须调用next()将控制权传递给下一个中间件功能,否则,该请求将被挂起。中间件可以执行任何代码。使用第三方中间件时,需要先安装对应的模块
在使用npm命令安装依赖包时,如果需要将该依赖添加进package.json中,但是只在开发和测试环境中使用,则应该使用命令。npm install moduleName
全局注册组件,Vue.component(‘component-a’, { /* … */ })。
vue生命周期。
在mounted阶段,vue实例挂载完成,data.message成功渲染。
在created阶段,vue实例的数据对象data有了,el还没有。
在beforeMount阶段,vue实例的$el和data都初始化了。
URI符合RESTful API规范。http://127.0.0.1:3000/books/book
URI规范
不用大写;
用中杠-不用下杠_;
参数列表要encode;
URI中的名词表示资源集合,使用复数形式。
在Vue.js 为 v-on 提供了事件修饰符,提交事件不再重载页面的事件修饰符是.prevent。
设置HTTP缓存时间为20秒,Cache-Control:max-age=20。
Node.js 的核心模块。path,fs,http
服务器响应的说法。在express中可以通过res.json来将JSON格式数据返回。可以通过设置HTTP头的Content-Type来改变当服务器要返回的数据格式。
对于Web模块,搭建HTTP服务器需要引入http模块,response.end(data)方法也可以将data发送给客户端。
对于Express框架的路由,Express支持与所有HTTP请求方法相对应的方法,路由路径可以是字符串,字符串模式或正则表达式。
this.$router.push({ path:’/user’}),router-link,方式可以实现路由跳转。
对于Node.js 文件系统,fs 模块中的方法均有同步和异步版本;可以使用 fs 模块的 open() 方法在异步模式下打开文件;异步调用文件系统可以自动处理异常,把一个错误对象作为第一个参数传递。
数组创建时Array.of()的用法,let arr = Array.of(1, 2, 3, 4);let arr = Array.of(1, ‘2’, true, null);let arr = Array.of();
SVG 图像放大后图像质量不会有损失;SVG 使用 XML 格式定义图像;SVG 是万维网联盟的标准。
Getter,Mutation,State属性属于Vuex
jQuery Mobile中page页,在屏幕中只会显示一个page,在一个html文件中可以有多个page。
Express框架集成MySQL数据库,Express 框架可以使用 Node.js 支持的所有数据库;在使用连接池时,每次查询后都需要调用 release() 方法释放连接;如果需要多次执行数据库操作,则使用连接池可以减少服务器内存资源的占用。
Vuex的属性getters,actions,mutations,state
在Vue中,使用以下哪个指令可以动态更改data中的值 v-model
过滤器的说法,正确的是
{{date|dynamic(price)}}
{{message|filterA(‘arg1’,arg2)}}
{{ message | filterA | filterB }}
{{ message | filterA}}
Vue提供了自定义指令的几个钩子函数
bind:只调用一次,指令第一次绑定到元素时调用。进入DOM之前在内存中调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
Vue内置的标签组件的有
axios请求来的数据不能被其他组件公用。
Vue一般使用template来创建HTML,如果我们需要使用javascript来创建html,这时候我们需要使用render函数。
更多推荐
所有评论(0)