公司做网站有什么用,wordpress恢复分类目录,怎么在服务器中安装WordPress,红黑配色网站1. Json结构
1.1 Json概述
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式#xff0c;实现数据前后端交互。 它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。 JSON采用完全独立于程序语言的文本格式。这些特性使JSON成为理想的数据交换…1. Json结构
1.1 Json概述
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式实现数据前后端交互。 它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。 JSON采用完全独立于程序语言的文本格式。这些特性使JSON成为理想的数据交换语言。
1.2 Json基本格式
1.2.1 对象格式
对象object是无序的key:value键值对集合一个对象以“{”开始“}”结束每个key后面跟一个:键值对之间使用,分隔。 例如{id:1,name:黑熊精,age:3000,sex:男}
1.2.2 数组格式
数组array是值value的有序集合一个数组以“[”开始“]”结束值之间使用“,”分隔。 例如[张三,李四,不知火舞]
1.2.3 嵌套格式
值是可以嵌套的。 例如[{id:1,name:黑熊精,age:3000,sex:男},{id:3,name:金角大王,age:3000,sex:男}] 四层嵌套[1,张三,{id:100,name:李四,hobby:[敲代码,打游戏,{gender:女}]}]
2. 实现前后端交互
2.1 前端页面
!DOCTYPE html
htmlheadmeta charsetutf-8title前后端交互/title/headbody!-- 需要准备一个表格,展现user的数据 --table border1px width80% aligncentertr aligncenter height60pxth colspan5h1用户列表/h1/th/trtr aligncenter height60pxth编号/thth名称/thth年龄/thth性别/thth操作/th/trtr aligncenter height60pxth1/thth黑熊精/thth3000/thth男/thth/th/tr/table/body
/html2.2 jQuery动态获取数据
2.2.1 下载jQuery.js类库
官网地址:https://jquery.com/
2.3 Ajax异步调用
Ajax是实现前后端交互,最为常用的一种方式其特点为局部刷新 异步访问JQuery是JS的一种高级函数类库JQuery提供了一种高效的Ajax的请求的方式现阶段所使用的Ajax是由jQuery进行的动态封装如果将来的前端不使用jQuery则应该采用另外的一种形式发起Ajax请求。
2.3.1 Ajax异步调用原理
同步: 用户发起请求时要求第一时间内服务器做出响应在此期间用户不可以做其它操作,只能等待服务器返回数据只能全局刷新1次。异步: 用户发起请求时要求服务器做出响应在此期间用户可以做其它的操作。如果后端服务器返回数据则通过回调函数通知客户端并且可以局部刷新多次。
2.3.2 Ajax实现数据获取
script
//jQuery语法: 让整个页面浏览器加载完成之后,再次执行JS
$(function(){$.ajax({type: get, //请求类型url: http://localhost:8090/findAll, //url地址data: {id:100,name:tom,age:18},//data: id100nametomage18, //参数success: function(data){console.log(data)}})})
/script2.3.3 data参数传递
1.对象方式实现数据传参 语法{key1value1key2value2}2.拼接字符串的方式 语法key1value1key2value2
2.3.4 关于Ajax返回值数据说明
后台服务器返回的是JSON串,但是经过Ajax业务调用,则程序会自动的根据返回值类型进行解析解析之后形成了JS的对象。 预期服务器返回的数据类型如果不指定jQuery 将自动根据 HTTP 包 MIME 信息来智能判断比如XML MIME类型就被识别为XML。 虽然服务器的返回值是JSON,但是经过Ajax智能的判断,则动态的转化为JS的对象。
2.4 JS原生for循环写法
2.4.1 原生写法
for(var i0;idata.length;i){console.log(data[i])
}2.4.2 in关键字
其中index代表的是遍历的下标.从0开始 0,1,2,3…
for(index in data){console.log(data[index])
}2.4.3 of关键字
其中user代表的是遍历的对象。
for(user of data){console.log(user )
}2.5 JS模版字符串语法
原生的JS中经常出现字符串拼接的现象其中需要动态的拼接参数 则结构复杂没有数据结构,导致阅读混乱.。 ES6-7 提供了新的模版语法 通过反引号来动态拼接字符串。
for(user of data){let tr trtd${user.id}/tdtd${user.name}/tdtd${user.age}/tdtd${user.sex}/td/tr2.6 表格数据的动态展现
!DOCTYPE html
html!-- 后端开发工程: 简单页面会写,复杂页面看懂即可 --headmeta charsetutf-8title前后端交互/title!--导入js函数类库--script srcjs/jquery.min.js/scriptscript//jquery语法让整个页面浏览器加载完成之后再次执行JS$(function(){$.ajax({type:get,url:http://localhost:8091/user/findAll,//data:id100nametomage22,success:function(data){//将data中的数据添加到表格中for(user of data){let tr trtd${user.id}/tdtd${user.name}/tdtd${user.age}/tdtd${user.sex}/td/tr $(#tab1).append(tr);//append将指定的元素进行追加}}}) })/script/headbody!-- 需要准备一个表格,展现user的数据 --table idtab1 border1px width80% aligncentertr aligncenter height60pxth colspan5h1用户列表/h1/th/trtr aligncenter height60pxth编号/thth名称/thth年龄/thth性别/thth操作/th/tr/table/body
/html3. JS变量基本用法与Ajax小结
3.1 var 关键字
var id: 表示定义了一个变量其名称为id。 该变量相当于在全局范围内声明了一个变量该变量没有作用域的概念是一个全局变量。 弊端 由于没有作用域的规定导致变量使用混乱。
3.2 let 关键字
从新版本的JS开始兼容支持let该关键字的用法与var一样但是有作用域的范围更加的通用。
3.3 const 关键字
该关键字用来标识常量, 该数据不变。
3.4 Ajax小结
Ajax是局部刷新异步访问。Ajax异步的核心在于Ajax引擎代理。Ajax请求调用时无论是否成功都通过回调函数的方式进行响应。 success/error
4. 跨域说明
4.1 同源策略
只有浏览器的请求网址与Ajax的请求网址满足同源策略浏览器才能解析Ajax,执行正确的请求。 什么是同源策略: 规定要求 —— 请求协议// 域名端口号 1.如果以上三者都满足,则符合同源策略浏览器可以正确解析。 2.反之(有一个不满足)不满足同源策略称之为跨域请求. 则浏览器不能正常解析Ajax请求。
4.2 同源策略的区别
1同域请求 浏览器地址: http://localhost:8090/userList.html Ajax请求地址: http://localhost:8090/abc/b 2端口不同, 跨域请求 浏览器地址: http://localhost:80/userList.html Ajax请求地址: http://localhost:8090/abc/b 3协议不同,跨域请求 浏览器地址: http://localhost:8090/userList.html Ajax请求地址: https://localhost:8090/abc/b 4** 域名不同(即使映射也是跨域) ,跨域请求** manage.jt.com 对应的IP假设为10.6.6.8 浏览器地址: http://manage.jt.com/userList.html Ajax请求地址: http://10.6.6.8/abc/b 5 同域请求 http协议默认端口为80 浏览器地址: http://manage.jt.com:/userList.html Ajax请求地址: http://manage.jt.com:80/aaa/bbb
5. Vue的使用
5.1 vue的概述
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或已有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。
渐进式: 构建项目可以由简单到复杂
5.2 vue的优点
体积小 压缩后的文件只有33k运行效率更高 采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术,由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM双向数据绑定让开发者不再去操作DOM将更多的经历投入到业务中生态丰富 市面上有大量的开源项目基于vue 进行开发 成熟稳定
5.3 vue案例
5.3.1 vue入门案例
!DOCTYPE html
htmlheadmeta charsetutf-8title入门案例/title/headbody!-- 第一步通过div定义vue的工作区域 --div idapph1vue入门案例/h1!-- 第四步通过插值表达式“{{ }}”来对data中的数据进行引用 --{{hello}}/div!-- 第二步导入函数类库 --!-- 生产环境版本优化了尺寸和速度 --script srchttps://cdn.jsdelivr.net/npm/vue2/script!-- 第三步实例化Vue对象 --scriptconst app new Vue({//el:标识vue对哪个元素有效el:#app,data:{hello:你好vue}})/script/body
/html5.3.2 vue指令
在浏览器解析JS完成之前用户看到的数据是{{msg}}直到浏览器加载完全部JS则{{msg}}才替换为具体的数据。 v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
!DOCTYPE html
htmlheadmeta charsetutf-8titlevue的指令/titlestyle/* 定义属性样式 */[v-cloak]{/*将元素进行隐藏 */display: none;}/style/headbodydiv idapp!-- 测试v-cloak指令需求不想让用户看到没解析的数据使用v-cloak的属性。 --h1 v-cloak{{msg}}/h1hr/!-- 测试v-text指令 v-text优化了v-cloak --h1 v-textmsg/h1hr/!-- 测试v-html指令动态的展现html标签让浏览器解析html之后再展现--span v-htmlhtml/spanhr/!-- 测试v-pre指令使得vue不解析该标签 --span v-pre{{msg}}/spanhr/!-- 测试v-once指令使得元素只解析一次之后在浏览器随意更改数据不变。 --span v-once{{one}}/span /divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscript//一般工作中字符串写法提倡使用单引号const app new Vue({el:#app,data:{msg:测试数据,html:动态网址,one:数据解析}})/script/body
/html5.3.3 双向数据绑定
v-model指令 数据绑定;只能标识可以编辑的标签 1.数据与页面绑定数据变化则页面数据同步修改 2.页面与数据绑定页面值发生变化则数据同步修改
!DOCTYPE html
htmlheadmeta charsetutf-8title双向数据绑定/title/headbodydiv idapp数据录入:input typetext v-modelmsg //divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{msg:hello,双向数据绑定}})/script/body
/html5.3.4 MVVM思想
字母解释 M model 数据 V view 视图 VM (view-model) 数据和视图的控制当页面数据发生变化时,则通过dom监听将数据传给model当model的数据发生变化时,则通过数据绑定到页面中。
5.4 事件绑定
5.4.1 事件绑定 v-on 指令
!DOCTYPE html
htmlheadmeta charsetutf-8title事件的绑定/title/headbodydiv idapp!-- v-on指令实现事件的绑定; --!-- 方式一直接编辑操作内容 --数值{{num}}button v-on:clicknum增加:1/button!-- 方式二v-on的简化操作 --button clickadd2()增加:2/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{num:1},methods:{//定义Vue对象中的方法add1:function(){alert(原始测试方法是否有效)},add2(){alert(已成功增加)this.num;//使用this获取自家的属性}}})/script/body
/html5.4.2 事件访问修饰符
click.stop、click.prevent
!DOCTYPE html
htmlheadmeta charsetutf-8title事件访问修饰符/title/headbodydiv idapp数值{{num}}!-- 1.stop 阻止事件冒泡事件冒泡由于嵌套关系先执行内部事件如果执行成功则事件冒泡给外层事件 --div clickadd1()button clickadd2()自增/button !-- 未阻止冒泡 --button click.stopadd2()自增/button !-- 阻止冒泡 --/div!-- 2.阻止默认行为编辑一个表单属性username,password需求要求用户只执行login的操作而不执行action的动作解决方案prevent属性阻止默认行为同类型案例a标签阻止href跳转 --form actionhttp://www.baidu.cominput nameusername typetext /input namepassword typepassword /button typesubmit click.preventlogin()提交/button/form/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{num:1},methods:{add1(){this.num},add2(){this.num},login(){alert(ajax提交)}}})/script/body
/html5.4.3 按键访问修饰符
!DOCTYPE html
htmlheadmeta charsetutf-8title按键访问修饰符/title/headbodydiv idapp!--1.按键访问修饰符 回车触发keyup: 键位弹起 keydown: 键位按下keypress: 数字键盘--回车触发:input typetext keyup.enterenter() /空格触发:input typetext keydown.spacespace() //divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{},methods:{enter(){alert(回车触发)},space(){alert(空格触发)}}})/script/body
/html5.4.4 综合案例
!DOCTYPE html
!-- 要求用户输入两个数字做加法运算
要求展现总数num1num2
要求
1.输入第二个数字时回车触发
2.指定一个计算按钮 --
htmlheadmeta charsetutf-8title计算器/title/headbodydiv idapp数1:input typetext v-modelnum1 /br/数2:input typetext v-modelnum2 keyup.enteradd() /br/button clickadd()计算/buttonbr/总数:span v-textnum/span/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{num1:,num2:,num:},methods:{add(){//parsentInt()将字符型转换为整数类型this.num parseInt(this.num1) parseInt(this.num2)}}})/script/body
/html5.4.5 属性绑定
!DOCTYPE html
htmlheadmeta charsetutf-8title属性的绑定/titlestyle.redClass{width: 200px;height:100px;background-color: aqua;}/style/headbodydiv idapp!-- 属性绑定 --a hrefhttp://www.baidu.com百度/aa v-bind:hrefurl网址/a!--简化写法--a :hrefurlhello/ahr!-- 类型绑定 --!-- div classredClass/div --!-- 控制样式的绑定根据boolean类型数据进行控制true:样式绑定false:样式不绑定 --div :class{redClass: flag}/divbutton clickflag!flag切换样式/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{url: http://www.jd.com,flag:true},methods:{//定义Vue对象中的方法}})/script/body
/html5.5 分支结构
!DOCTYPE html
htmlheadmeta charsetutf-8title分支结构/title/headbodydiv idapp!-- 分支结构语法1.v-if 如果满足条件则展现后续内容可单独使用2.v-else-if 除了if之外的其他可能 不接单独使用必须与v-if联用3.v-esle 上述条件都不满足时展现如下内容 不接单独使用必须与v-if联用--h1考试成绩等级/h1录入成绩input typetext v-modelscore /div v-ifscore90优秀/divdiv v-else-ifscore80良好/divdiv v-else-ifscore70一般/divdiv v-else-ifscore60及格/divdiv v-else不及格/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{score: 40,},methods:{}})/script/body
/html5.6 循环结构
!DOCTYPE html
htmlheadmeta charsetutf-8title循环结构/title/headbodydiv idapp!-- 语法v-for 遍历展现的是标签 --h1循环遍历数组/h1!-- 方式1 --p v-foritem in hobby{{item}}/p!-- 方式2 --p v-foritem in hobby v-textitem/phr/h1循环遍历对象/h1!-- 1.如果直接遍历对象展现的是value的值 --div v-foritem in user{{item}} /div!-- 2.如果不直接遍历对象展现的是参数与值,arg1:value,arg2:key --div v-for(value,key) in userp {{key}}----{{value}}/p/div!-- 3.如果不直接遍历对象展现的是参数与值,arg1:value,arg2:key,arg3:index--div v-for(value,key,index) in userp {{key}}----{{value}}-----{{index}}/p/divhr/h1循环遍历集合/h1!-- 约定key用来区分遍历的节点信息 --div v-foruser in userList :keyuser.idp ID编号:{{user.id}}/pp姓名:{{user.name}}/pp年龄:{{user.age}}/p/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{hobby:[电脑,手机,平板],user:{name:张三,age:22,address:西安},userList: [{id:100,name:唐僧,age:100},{id:101,name:孙悟空,age:120},{id:102,name:猪八戒,age:220}]},methods:{}})/script/body
/html
5.7 表单数据提交
5.7.1 表单数据提交
!DOCTYPE html
htmlheadmeta charsetutf-8title表单数据提交/title/headbodydiv idapp!-- vue使用双向数据绑定的结构input文本输入框textarea 文本域select 下拉框radio 单选框checkbox 复选框 --form actionxxxxh1表单数据提交/h1姓名:input typetext v-modeluser.name/br/详情:textarea v-modeluser.info/textareabr/城市:select namecity v-modeluser.city!-- 如果下拉框支持多选可添加multipletrue --option value北京北京/optionoption value西安西安/optionoption value杭州杭州/option/selectbr/性别input typeradio value男 namegender v-modeluser.gender/男input typeradio value女 namegender v-modeluser.gender/女br/爱好input typecheckbox value打篮球 namehobby v-modeluser.hobby/打篮球input typecheckbox value打羽毛球 namehobby v-modeluser.hobby/打羽毛球input typecheckbox value打排球 namehobby v-modeluser.hobby/打排球input typecheckbox value钓鱼 namehobby v-modeluser.hobby/钓鱼/form/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{user:{name:张三,age: 12,gender:男,city:西安,info:个人详情,hobby:[钓鱼,打篮球]}},methods:{}})/script/body
/html
5.7.2 双向绑定属性
!DOCTYPE html
htmlheadmeta charsetutf-8title表单数据提交/title/headbodydiv idapp !-- 属性说明1.number 将用户输入变为数值类型2.trim 去掉开头和结尾的空格3.lazy 懒加载,当鼠标离焦时生效只加载一次 --input nameage v-model.numberuser.age/button clickadd扩大10倍/buttonbr/input namename v-model.trimuser.name/name属性的长度: {{user.name.length}}br /input namename v-model.lazyuser.name/观察响应现象:{{user.name}}/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{user:{name:张三,age: 12,gender:男,city:西安,info:个人详情,hobby:[钓鱼,打篮球]}},methods: {add(){this.user.age 10 * this.user.age}}})/script/body
/html
5.7.3 计算属性
!DOCTYPE html
htmlheadmeta charsetutf-8title计算属性/title/headbodydiv idapp !-- s实现字符串数据反转函数split 拆分reverse 反转数据join 将数组转化为字符串 --用户输入:input v-model.lazymsg / br/数据展现:{{msg.split().reverse().join()}}br/ !-- 空串分隔 --!-- 计算属性:将需要计算的操作通过特定的方法先行计算之后再将结果进行展现 --计算属性:{{reverse}}/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{msg:1234},methods: {},//定义计算属性computed: {//定义一个方法要求必须有返回值reverse(){return this.msg.split().reverse().join()}}})/script/body
/html
5.8 vue生命周期
5.8.1 主要阶段 5.8.2 页面结构调用
!DOCTYPE html
htmlheadmeta charsetutf-8title测试vue生命周期函数/title/headbody!-- 钩子函数整个VUE有一个完整的执行过程如果用户需要对vue的对象进行额外的扩展时可以采用预留的“接口”进行扩展我们把项目中提前设定好的接口在JS中称之为钩子函数。总结1.钩子函数作用对原有的操作进行扩展8个函数。2.初始化函数 4个修改函数2个销毁函数2个。3.mounted() 函数标识Vue对象实例化成功。4.生命周期函数是VUE对象独有的内容注意写法不要放到methods方法中。 --div idapph3 v-textmsg/h3button clickdestroy销毁/button/div!--引入函数类库 --script srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el : #app,data : {msg: vue生命周期},//在实例初始化之后数据观测 (data observer) 和 event/watcher 事件配置之前被调用。beforeCreate(){console.log(beforeCreate)},//在实例创建完成后被立即调用created(){console.log(created)},//在挂载开始之前被调用相关的 render 函数首次被调用。beforeMount(){console.log(beforeMount)},//实例被挂载后调用这时 el 被新创建的 vm.$el 替换了。mounted(){console.log(mounted) },//数据更新时调用发生在虚拟 DOM 打补丁之前beforeUpdate(){console.log(beforeUpdate)},//由于数据更改导致的虚拟 DOM 重新渲染和打补丁在这之后会调用该钩子。updated(){console.log(updated)},//实例销毁之前调用。在这一步实例仍然完全可用beforeDestroy(){console.log(beforeDestroy) },//实例销毁后调用。destroyed(){console.log(destroyed)},methods:{destroy(){this.$destroy()}}})/script/body
/html
5.9 Vue数组的操作
!DOCTYPE html
htmlheadmeta charsetutf-8title数组的操作/title/headbody!-- push() 在最后追加元素pop() 从最后删除元素shift() 从开头删除元素unshift() 从开头追加元素splice() 替换数据sort() 按照字符编码顺序排序reserve() 字符反转 --div idappspan v-foritem in array{{item}}/spanbrinput typetext v-modelnum/button clickpushpush/buttonbr/button clickpoppop/buttonbr/button clicksplice替换/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst app new Vue({el:#app,data:{array:[1,2,3,4,5],num:},methods:{push(){this.array.push(this.num)},pop(){this.array.pop()},splice(){//arg1: 起始位置从下标0开始//arg2: 终止位置//arg3: 替换值//this.array.splice(0,1,this.num)//this.array.splice(0,3,this.num,this.num,this.num) //给三个位置分别替换值this.array.splice(0,3) //实现删除功能}}})/script/body
/html6. VUE组件化
7. Vue前端交互
7.1 Promise概述
Promise是一种异步编程的解决方案从语法上Promise是一个对象从它身上可以获取异步调用的信息。 作用: 1.有效避免回调地狱问题 典型的Ajax嵌套问题 (闭包方式) 2.Promise对象提供了简洁的API 用法简单
7.2 Axios方式
7.2.1 Axios介绍
Axios 是一个基于 promise 的 HTTP 库可以用在浏览器和 node.js 中。 特点: 1.从浏览器中创建 XMLHttpRequests 2.从 node.js 创建 http 请求 3.支持 Promise API 4.拦截请求和响应 5.转换请求数据和响应数据 6.取消请求 7.自动转换 JSON 数据 8.客户端支持防御 XSRF
7.2.2 Axios入门案例
