ajax+bootstrap+node.js7

雍机智
295 阅读7分钟

jQuery简化

第一种

$.ajax({
    "url":"xx.php",//连接服务器端的地址，【必写】
    "type":"GET/POST",//请求的类型，默认值为get - 可选
    "data":"key=value&...",//请求的消息 - 可选
    "dataType":"HTML/JSON/XML/JSONP",//解析响应消息
    "jsonp":"callback",//通行令的名字,dataType为JSONP时书写
    "success":(data)=>{//ajax请求成功，才会执行，并且返回得到的数据，【必写】
        data;//服务器端返回的响应数据
    },
    "error":()=>{
        //只有报错后才会执行，通常不写
    }
});

第二种

第一种的基础上进行了再次简化：3个API - 不能做跨域

方法1

$("xx").load("xx.php","key=value",data=>{

})
  • 会将数据直接放到页面元素之中，document.write将页面元素给替换掉
  • 无法设置请求类型，只能是默认的GET
  • 无法帮我们转换数据类型

方法2

$.get("xx.php","key=value",data=>{

},"JSON")

方法3

$.post("xx.php","key=value",data=>{

},"JSON")

第三种

特殊功能 - 跨域：浏览器具有保护策略 - 同源策略：要求协议、域名、端口号必须相同，只要有一个不同就会触发此保护机制

跨域jQuery使用到了一个叫jsonp技术

前端

$.getJSON("url?key=?","data",data=>{
    //key=? - jQuery自动传入一个值，其实是一个函数，后端需要接住后在调用：通行令函数
})

后端 echo $_GET["key"]."(".JSON_encode($arr).")";

滚动监听触发ajax

前端

var count=0;
$(window).scroll(()=>{
    var sh=$(window).scrollTop()+innerHeight;//获取当前滚动条滚动到底部的位置
    var bh=$("body").height();//完整的页面的高度
    if(sh==bh){
        $.get("05server.php",`count=${count}`,data=>{
            //操作
            count+=2;
        },"JSON")
    }
})

后端 $sql="SELECT * FROM 表名 ORDER BY id DESC LIMIT 开始下标,个数;";

bootstrap

Bootstrap框架：UI组件库：提供了HTML/CSS/JS - 类似于jQueryUI

  1. 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
  2. Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发【响应式布局】、移动设备优先的 WEB 项目。

Bootstrap由5部分组成：入门、全局css样式、组件、js插件、定制

使用bootstrap引入：

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

全局css样式

分为了2个部分

  1. 提供了css reset - 如果引入了bootstrap.css，不需要自己去重置样式
  2. 提供了大概1000+的class - class带有样式
  3. 提供的常用内容：
  • 按钮：
    • btn btn-default;//白底黑字的按钮
    • btn-block;//块级按钮
    • 五种颜色（btn-danger/warning/success/info/primary） 和 四种大小(lg/md/sm/xs)
  • 图片：
    • img-rounded; - border-radius: 6px;
    • img-circle; - border-radius: 50%;//这两个class不是只有图片能用
    • 缩略图：img-thumbnail;
  • 文本：
    • 文本对齐方式：text-right/center/justify
    • 五种文字颜色（text-颜色），五种背景颜色（bg-颜色）
  • *表格
    • table - 长得像个表格
    • table-striped - 隔行变色
    • table-hover - 带有悬停效果
    • table-border - 带有边框
    • table-condensd - 紧缩型表格
    • table-responsive - 响应式表格，必须设置在table的父元素身上
  • *表单
  • 栅格式布局

组件：

  • 推荐：
    • 导航条
    • 巨幕 - banner
    • 缩略图 - 图片文字上下，图文并茂 - 产品
    • 媒体对象 - 左边或者右边放图片，另一边放文字 - 公司简介
    • 面包屑导航/路径导航
  • 其他
    • 字体图标
    • 按钮组
    • 分页条
    • 标签
    • 徽章
    • 页头
    • 警告框
    • 进度条
    • well水井

栅格式布局

  • 放上一个容器 <div class="container/container-fluid"></div>
  • 在此容器中放入行 <div class="row"></div>
  • 在此容器中放入列 <div class="col-*-*"></div>
  • 在不同的屏幕设置不同的列宽 col-lg/md/sm/xs-*
  • 列宽：bootstrap将一行等分为了12份 col-屏幕-列宽（1-12）
  • 更小的屏幕设置列宽可以管住更大屏幕
    • lg - 只能管lg屏幕
    • md - 只能管lg/md屏幕
    • sm - 只能管lg/md/sm屏幕
    • xs - 管所有
    • 自己有，优先用自己的，自己没有优先用离自己近的
  • 设置偏移：设置向左顶出几份 col-屏幕-offset-列宽
    • lg - 只能管lg屏幕
    • md - 只能管lg/md屏幕
    • sm - 只能管lg/md/sm屏幕
    • xs - 管所有
    • 自己有，优先用自己的，自己没有优先用离自己近的
  • 设置在某个屏幕隐藏 hidden-屏幕 只管自己屏幕，不管别人
  • 不推荐：列中可以继续嵌套行，一行又会分为12份，如果列太小了，什么都放不下
  • 栅格式布局是一个怪异盒模型：设置间距要用border

响应式项目

必不可少的东西：

  1. meat viewport元标签 - 如果缺少，手机端看不到手机端应有的效果，只能看到离自己最近的那个端的效果
  2. 媒体查询必不可少
  3. 千万不要使用绝对单位，要使用相对单位：rem
  4. 响应式图片：max-width: 100%;

动态样式语言

  • 静态样式语言：css，没有语言必须拥有基础概念：变量、运算、函数、分支、循环...等等语言所必备的基础概念都没有
  • 动态样式语言：【在css的基础之上】添加了语言必备的概念
    • 目的：简化css开发
    • 市场上常用的动态样式语言：
      • sass/scss
      • less
      • stylus

scss

sass/scss编译：sass/scss=(编译)=>css

浏览器只认识css，不认识其他的动态样式语言，但是程序员书写动态样式语言又会减轻我们的负担，说白了

  • 如何编译：
    • vscode：安装插件easy sass;//自动编译，一旦保存xx.scss就会自动生成一个xx.css
    • HBuilder：安装插件，//手动编译，对文件点击右键->编译
    • 动态样式语言编译工具：koloa

scss带来的新特性：

  • 特性1：变量 $变量名: 值;
    • 使用时：$不能省略
    • 可以创建局部变量，选择器{$局部变量名: 值;}
    • 不区分中划线和下划线，都可以
  • 特性2：嵌套
    • 层级选择器不写的话，默认使用后代选择器（空格）
    • &：类似于javascript中的this，&包含在那个大括号里面就代表是谁
.d1{
    d1的样式
    .d2{
        d2的样式
        &:hover{
            hover样式
        }
    }
    >.d3{d3的样式}
}

编译后：
.d1{d1的样式}
.d1 .d2{d2的样式}
.d1 .d2:hover{hover样式}
.d1>.d3{d3的样式}

  • 特性3：导入 @import "文件名"

    • css也有，但是css不使用，因为引入html后，js无法操作样式。但是scss可用，常用于创建库等操作

  • *特性4：注释

    • 不要使用单行注释
    • 要使用多行注释才可以/****/

  • 特性5：混合器，类似于javascript中的函数：

    • 没有传入实参，使用默认值
    • 如果传入实参，则使用实参
//创建混合器
@mixin 混合器名($形参:默认值,...){
    width:$形参;
}

//调用混合器
@include 混合器名();
  • *特殊6：运算,尤其是颜色值可以进行运算
//#000000 - #ffffff
//黑（暗）      白（亮）
//0最小 - f最大
//乘以个1.x，一定会让此数字变大不断的靠近白色
//乘以个0.x，一定会让此数字变小不断的靠近黑色
  • 特性7：分支和循环

Less

和scss基本相同，有两点不同：

  • 变量：@变量名:值;
    • 需要区分中划线和下划线...
  • 混合器：
//创建
.混合器名(@形参:默认值,...){
    width: @形参;
    ...
}

//使用
div{
    .混合器名();
}

git/svn工具：代码托管平台

  • git（9+）：分布式版本管理控制工具
    • 优点：人人都是客户端，人人都是服务器端（云端）;
    • 缺点：黑客大佬，可能会破解你的项目
  • svn（1-）：集中式版本管理控制工具
    • 优点：所有的代码都保存在项目经理处（服务器端）
    • 缺点：服务器端一旦电脑坏了可能会数据丢失，一般都是一些老公司或者要是项目保密强的公司

git如何使用：

安装：

  • Git-2.18.0-64-bit.exe - 命令行方式
  • TortoiseGit-2.6.0.0-64bit - 小乌龟（提示功能）

分操作：

  • 项目经理：
    • 打开gitee网站：注册/登录
    • 创建项目仓库：选择开源/私有（仓库成员才能访问）
    • 将仓库地址私发给对应的开发人员
    • 监督项目流程、进度
  • 开发人员：
    • 对着电脑任意位置右键：git bash here
    • 将项目仓库拉到本地，仅第一次使用：git clone 仓库地址
    • 项目开发
    • 传到云端：在项目中再次右键重新打开git bash here
    git add . //将新增的或者修改的文件添加到本地git（蓝色+号）
git commit -m"日志" //将新增的或者修改的文件提交到本地git服务器
git push origin master //推送到云端
    • 更新仓库 git pull origin master
    • 特殊用法：分支,分工合作
      • 查看分支 git branch master主分支
      • 创建分支 git branch 分支名
      • 切换分支 git checkout 分支名//普通分支不能推送到云端，只能主分支推送
      • 合并分支 git merge 分支名
      • 删除分支 git branch -d 分支名

Node.js

  1. Node.js概述：不是js，但是语法和javascript非常相似，他的竞争对手是PHP/JAVA/C++/PYTHON...
  • 服务器端语言一致（和数据库进行交互）
  • 目的：
    • 使用代码搭建一个服务器（文件可以放在任何位置）
    • node.js如何操作数据库
    • 全栈
  1. Node.js安装：node-v12.1.0-x64.msi 一步到位
  • 版本：16年初（0.12） 16年中（4.xx） 16年底（6.xx） - 更新速度非常快（但是其实并没有加什么新东西）
  • 检查：打开cmd 输入：node -v; - 查看版本，如果有版本号说明安装成功
  • node.js只是一个运行环境
  1. Node.js如何运行：
  • 交互模式 - 临时测试
    • 打开cmd输入：node，就可以开始敲"js"代码
  • 脚本/文件模式 - 正式开发中：
    • 先创建xx.js，里面书写你自己的代码
    • 打开cmd输入：node 文件绝对路径
  • 编辑器有插件：
    • vscode：code runner
    • HBuilder：nodeclipse
  1. Node.js
  • js 和 node.js 的区别：
    • 相同点：都可以使用一切ecmascript的操作，包括一切API都可以使用
    • 不同点
      • javascript：BOM DOM;
    • Node.js：虽然不能使用BOM DOM，但是他却又10万个以上的模块

模块

概念

每一个.js文件，都可以称之为叫做一个模块

  • 模块化开发：如果以一个网页来说，我们可以按照功能分为很多个模块：商家模块、产品模块、促销模块、用户模块...
  • 分工：将每个模块就给对应的人完成，最后再由主模块进行引入,每一个模块都有一个操作，可以用于公开/暴露自己的成员 
    exports.属性名=值
module.exports={
    属性名:值,
    ...
}
  • 每一个模块都有一个操作，可以用于引入其他模块：var obj=require("./文件名");//必须加上./
  • exports和module.exports的区别
    • 都是用于暴露公开自己的成员的
    • 但是：exports={} 这写法是错误的
      • node.js底层有一句话：exports=module.exports，真正做的公开功能的是module.exports。若使用了exports={}，替换了module.exports，不再具有公开的功能

模块的分类：

  1. 官方模块 - 今日重点，大概几十个，重要的只有几个
  2. 第三方模块 - 多到数不清，提供了很多很多官方没有的东西，有一个网址npm
  3. 自定义模块
  • node.js最大的特点：
    • 速度快 - 以前最快的是php，node.js速度是php的十六倍
    • 为什么快：
      • 因为官方提供的东西很少，甚至连数据库操作都没有
      • 使用google浏览器v8引擎

官方模块

不需要下载，在安装node.js环境时已经带上了，但是某的模块可能需要引入，引入时不要加./

  1. Global模块
  • 不需要引入，直接可以使用：
  • 三种定时器（Interval、Timeout、Immediate）
    • Immediate 底层：Timeout延时为0，立刻执行，但是毕竟异步操作，不会卡主后续代码
  • console对象
  1. querystring模块：查询字符串
  • 需要引入：var qs = require('querystring')
  • 提供了解析url查询字符串部分的功能：var obj=qs.parse("查询字符串")
  • 想要获取前端传来的每一部分：obj.键名;
  • 但若前端传来的是一个完整的网址，他就解析不了了
  1. url模块
  • 需要引入 var url = require('url');
  • 提供了解析完整的url的功能 var objurl=url.parse("完整的网址",true); + 加上true，自动调用querystring模块的parse方法，进行查询字符串部分变为一个对象
  • 查询字符串：objurl.query.键名 拿到前端传来的数据
  • 路由/请求地址：objurl.pathname 搭配上fs模块（文件系统）和http模块（服务器）实现代码搭建服务器和文件系统
  1. Buffer模块：缓冲区，可以将数据（字符串、数字、图片、HTML...）变为一个16进制的数字 - node中的一个新的数据类型
  • 不需要引入，直接可以使用：
  • 不会主动的使用buffer的任何操作，但是一些API可能会导致我们得到的结果就是一个buffer，我们不认识，node.js的大部分API都是支持buffer操作
  1. fs模块 - 文件系统：对文件增删改查
  • 需要引入：var fs = require('fs');
  • 对文件进行操作
    • *异步读取文件
    fs.readFile("文件路径",(err,buf)=>{
    buf//读取到的内容
})
    • 异步写入文件
    fs.writeFile("文件路径","新内容",(err)=>{
    - 会替换原有的内容
console.log("写入完毕后续操作")
})
    • 异步追加文件
    fs.appendFile("文件路径","新内容",(err)=>{ 
    - 会替换原有的内容
    console.log("写入完毕后续操作")
})

文件相对路径有可能会失败：绝对路径node.js提供了一个全局变量__dirname+"/你的文件的相对路径"

  1. http模块 - 搭建服务器
var http = require('http');
var app=http.createServer();//创建服务器应用
app.listen(80);//设置了此服务器应用的端口号为80
app.on("request",(req,res)=>{
    req.url 此属性记得使用url模块的parse方法分别解析出路由和查询字符串
    res.end();//响应方式，此方法一个请求只能有一个响应
})
  • node.js搭建服务器和文件系统，所有的连接（href和src）其实都是一个请求路由
avatar
文章
阅读
粉丝