前后端交互
关注
分享
扫一扫
前后端交互
火星飞鸟
学习前端ing...
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
模板引擎
1. 模板引擎 1.1 Ajax 项目中存在的问题 数据和HTML字符串拼接导致代码混乱，拼接容易出错，增加修改难度。 业务逻辑和用户界面混合，代码不易维护。 for (var i = 0; i < result.length; i++) { html += '<!DOCTYPE html>\ <html lang="en">\ <head>\ <meta charset="UTF-8">\ <title&原创 2020-11-23 18:21:36 · 363 阅读 · 0 评论 -
关于XML
XML：全称 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。 XML DOM：XML文档对象模型，是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。 例如： <students> <student> <sid>001</sid> <name>张三</name> </student原创 2020-11-23 16:41:17 · 227 阅读 · 1 评论 -
RESTful 风格的API
传统请求地址： GET http://www.example.com/getUsers // 获取用户列表 GET http://www.example.com/getUser?id=1 // 比如获取某一个用户的信息 POST http://www.example.com/modifyUser // 修改用户信息 GET http://www.example.com/deleteUser?id=1 // 删除用户信息 RESTful API 概述 GET：原创 2020-11-23 16:31:41 · 311 阅读 · 0 评论 -
jQuery 封装函数：将表单中输入的内容转换为对象类型
实现效果： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将表单中用户输入的内容转换为对象类型</title> </head> <body> <form id="form"> <input type="text" name="username"原创 2020-11-23 16:19:51 · 529 阅读 · 1 评论 -
jQuery 中的 Ajax
1. $.ajax()方法基本使用 var params = { name: 'wangwu', age: 300 } $('#btn').on('click', function() { $.ajax({ // 请求方式 type: 'post', // 请求地址 url: '/user', // 向服务器端发送的请求参数 // name=zhangsan&age=100原创 2020-11-23 16:14:32 · 234 阅读 · 0 评论 -
withCredentials 属性
在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。 withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false。（写在客户端） 例： // 当检测用户状态按钮被点击时 checkLogin.onclick = function() { // 创建ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('get', 'http://loca原创 2020-11-23 15:44:46 · 2898 阅读 · 0 评论 -
访问非同源数据，服务器端解决方案
同源政策是浏览器给予Ajax技术的限制，但服务器端是不存在同源政策限制。 需要用到第三方模块request 举例： 客户端CORS.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="btn"原创 2020-11-23 15:31:47 · 435 阅读 · 0 评论 -
CORS 跨域资源共享
CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。 CORS举例： 客户端CORS.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head&g原创 2020-11-23 14:43:29 · 241 阅读 · 0 评论 -
使用 JSONP 解决同源限制问题
JSONP是JSON with Padding的缩写，它不属于Ajax请求，但它可以模拟Ajax请求。 1. JSONP 跨域原理 浏览器的同源策略把跨域请求都禁止了 html的<script>标签，<img>标签，<iframe>标签，可以请求第三方的资源（不受同源策略影响） 由此可以用<script>标签引入jsonp文件，然后通过一系列JS操作获取数据 2. JSONP 实现跨域步骤 将不同源的服务器端请求地址写在<script>标签的原创 2020-11-18 17:00:57 · 479 阅读 · 1 评论 -
学习-浏览器的同源政策
1. Ajax请求限制 Ajax只能向自己的服务器发送请求。 比如现在有一个A网站，有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送Ajax请求，B网站中的 HTML 文件只能向 B 网站中发送Ajax请求。 但是A网站是不能向 B 网站发送Ajax请求的。同理，B网站也不能向A网站发送Ajax请求。 2. 什么是同源 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。 例如现有页面： http://www.example.com/dir原创 2020-11-18 15:55:08 · 282 阅读 · 0 评论 -
基于Ajax和FormData对象 实现二进制文件上传
实现效果： 启动app.js 在浏览器地址栏输入http://localhost:3000/upload.html 实现代码： 客户端upload.html： （引入了bootstrap框架bootstrap.min.css） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <原创 2020-11-17 19:56:37 · 554 阅读 · 1 评论 -
前端学习 FormData 对象的方法
1. 常用的FormData对象方法 获取表单对象中属性的值 formData.get('key'); 设置表单对象中属性的值 formData.set('key', 'value'); 删除表单对象中属性的值 formData.delete('key'); 向表单对象中追加属性值 formData.append('key', 'value'); 注意： set()方法与append()方法的区别是，在属性名已存在的情况下，set()会覆盖已有键名的值，append()会保留两个值。 2. 其他Form原创 2020-11-17 19:43:33 · 1417 阅读 · 1 评论 -
前端学习 FormData 对象的基本用法
1. FormData对象的作用 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。 异步上传二进制文件。 2. FormData对象的使用 准备HTML表单 <form id="form"> <input type="text" name="username"> <input type="password" name="password"> <input type="button"&g原创 2020-11-17 19:29:16 · 1389 阅读 · 0 评论 -
Ajax 实现3个option选项列表联动效果
实现效果： 安装express、path模块 在node环境中启动app.js 在浏览器地址栏输入http://localhost:3000/provinceCityArea.html 实现代码： provinceCityArea.html： （引入了bootstrap框架bootstrap.min.css和Ajax模板引擎template-web.js） [→关于ajax.js封装函数请点击此处←] <!DOCTYPE html> <html lang="en"> <原创 2020-11-16 20:52:31 · 231 阅读 · 0 评论 -
Ajax 实现搜索框内容自动提示效果
实现效果： 安装express、path模块 在node环境中启动app.js 在浏览器地址栏输入http://localhost:3000/Search.html 在输入框分别输入苹果和华为，搜索框会自动提示可能要输入的文字信息 实现代码： Search.html： （引入了bootstrap框架bootstrap.min.css和Ajax模板引擎template-web.js） [→关于ajax.js封装函数请点击此处←] <!DOCTYPE html> <html lang="原创 2020-11-16 20:44:16 · 865 阅读 · 0 评论 -
Ajax 实现验证邮箱地址唯一性
实现效果： 安装express、path模块 在node环境中启动app.js 在浏览器地址栏输入http://localhost:3000/Email.html 输入框失去焦点时，首先判断是否为邮箱格式，再验证输入邮箱的唯一性。为了实现基本的功能，app.js将123456@123.com作为已注册的邮箱。 实现代码： Email.html： （引入了bootstrap框架） [→关于ajax.js封装函数请点击此处←] <!DOCTYPE html> <html lang="en原创 2020-11-16 20:27:04 · 1930 阅读 · 0 评论 -
JavaScript 封装Ajax函数
说明： 封装函数ajax()，使用时传递一个对象 传递的对象有请求方式type、请求地址url、请求参数data、请求参数格式的类型(字符串orjson对象)、请求成功后的函数、请求失败后的函数等属性 使用时以如下格式传递： ajax({ // 请求方式 type: 'get', // 请求地址 url: 'http://localhost:3000/responseData', // 请求参数 data: { name: 'Jack',原创 2020-11-16 16:25:29 · 1233 阅读 · 0 评论 -
基于Node的Express框架
1. Express框架初体验 在Node环境中使用npm install express命令进行下载使用。 初体验： // 引入Express框架 const express = require('express'); // 使用框架创建web服务器 const app = express(); // 当客户端以get方式访问/路由时 app.get('/', (req, res) => { // 对客户端做出响应 send方法会根据内容的类型自动设置请求头 res.原创 2020-11-10 18:15:16 · 394 阅读 · 0 评论 -
Node.js 第三方模块 serve-static
1. 功能： 实现静态资源访问服务。 2. 使用步骤： 引入serve-static模块获取创建静态资源服务功能的方法 // 引入静态资源访问模块 const serveStatic = require('serve-static'); 调用方法创建静态资源服务并指定静态资源服务目录 // 实现静态资源访问服务 const serve = serveStatic(path.join(__dirname, 'public')); 启用静态资源服务功能 // 引入http模块 const htt原创 2020-11-08 23:00:39 · 752 阅读 · 0 评论 -
Node.js 第三方模块 router
1. 功能 实现路由功能。 2. 使用步骤： 获取路由对象 // 引入router模块 const getRouter = require('router'); // 获取路由对象 const router = getRouter(); 调用路由对象提供的方法创建路由 // 呈递学生档案信息页面 router.get('/add', (req, res) => { let html = template('index.art', {}); res.end(html); })原创 2020-11-08 22:55:42 · 817 阅读 · 0 评论 -
模板引擎 artTemplate
1. 安装及使用 在命令行工具中使用npm install art - template命令进行下载 使用const template = require('art-template')引入模板引擎 告诉模板引擎要拼接的数据和模板在哪：const html = template('模板路径', 数据); 使用模板语法告诉模板引擎，模板与数据应该如何进行拼接 2. 模板语法 art-template同时支持两种模板语法： 标准语法和原始语法。 标准语法：可以让模板更容易读写 {{数据}} 原始语法原创 2020-11-08 22:45:44 · 594 阅读 · 0 评论 -
数据库连接报错{ useNewUrlParser: true }{ useUnifiedTopology: true }解决办法
使用以下代码启动数据库，会提示报错信息： mongoose.connect('mongodb://localhost/playStudent', ) .then(() => console.log('数据库连接成功！')) .catch(() => console.log('数据库连接失败！')); 解决办法： 在js中mongoose.connect添加参数{ useUnifiedTopology: true, useNewUrlParser: true } mongoos原创 2020-11-08 20:24:26 · 1309 阅读 · 0 评论 -
初识 HTTP
1. HTTP协议的概念 超文本传输协议（HyperText Transfer Protocol，缩写：HTTP）规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）请求和应答的标准。 2. 报文 在HTTP请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，并且要遵守规定好的格式。 2.1 请求报文 （1）请求方式 (Request Method) GET 请求数据 浏览器地址栏 link标签的href属性 scri原创 2020-11-07 15:25:38 · 387 阅读 · 0 评论 -
node.js 异步函数
异步函数是异步编程语法的终极解决方案，它可以让将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。 使用格式： const fn = async () => {}; async function fn () {}; async关键字 普通函数定义前加async关键字，变成异步函数 异步函数默认返回promise对象 在异步函数内部使用return关键字进行结果返回，结果会被包裹的promise对象中，return关键字代替了resolve方法 在异步函数内部使用throw关键原创 2020-11-04 14:48:03 · 1078 阅读 · 0 评论 -
node.js 异步函数 依次读取三个文件
需求： 使用异步函数，依次读取1.txt、2.txt、3.txt三个文件。 文件内容： 1.txt：1 2.txt：2 3.txt：3 代码实现： const fs = require('fs'); // 改造现有异步函数api 让其返回promise对象 从而支持异步函数语法 const promisify = require('util').promisify; // 调用promisify方法改造现有异步API 让其返回promise对象 const readFile = promisify(fs原创 2020-11-04 14:42:42 · 731 阅读 · 0 评论 -
Promise 解决回调地域问题，依次读取三个文件
需求： 依次读取1.txt、2.txt、3.txt三个文件，因为fs.readFile属于异步编程，可使用promise完成，解决回调地狱问题。 文件内容： 1.txt：1 2.txt：2 3.txt：3 代码实现： const fs = require('fs'); // 将三个promise定义成函数，可以再调用的时候再执行，实现依次执行 function p1() { // 函数直接返回promise对象，就可以写成“p1().then”的形式 return new Promi原创 2020-11-04 14:24:02 · 445 阅读 · 1 评论 -
Node.js 异步API 代码执行顺序分析
1. 同步API 同步API从上到下依次执行，前面代码会阻塞后面代码的执行 for (var i = 0; i < 1000; i++) { console.log(i); } console.log('for循环后面的代码'); 执行结果： 先将for循环执行完毕后，再执行for循环后面的代码 2. 异步API 异步API不会等待API执行完成后再向下执行代码 console.log('代码开始执行'); setTimeout(() => { console.log('原创 2020-11-04 12:13:37 · 537 阅读 · 0 评论 -
Node.js 模块查找机制
1. 当模块拥有路径但没有后缀时 require('./find'); require方法根据模块路径查找模块，如果是完整路径，直接引入模块 如果模块后缀省略，先找同名JS文件再找同名JS文件夹，没有同名文件夹则报错 如果找到了同名文件夹，找文件夹中的index.js 如果文件夹中没有index.js，就会去当前文件夹中的package.json文件中查找main选项中的入口文件 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到 2. 当模块没有路径且没有后缀时 require(原创 2020-11-02 21:14:49 · 537 阅读 · 1 评论 -
nodemon : 无法加载文件 [解决办法]
安装了nodemon第三方库以后，使用nodemon .\01.helloworld.js命令，出现如下错误： 解决办法： 管理员身份打开powerShell 将鼠标定位到左下角“开始菜单”处，右键，选择“Windows PowerShell（管理员）(A)”， 输入set-ExecutionPolicy RemoteSigned 回车： 输入A，回车： 验证一下： 问题已解决！ ...原创 2020-11-02 18:31:16 · 1263 阅读 · 0 评论 -
基于Node.js、MongoDB数据库的简单前后端交互界面
1. 效果展示： （1）启动MongoDB数据库服务 （2）Node环境环境中运行app.js （3）浏览器地址栏输入http://localhost:3000/list进入 list 界面 （4）可进行简单的增、删、改、查操作 （5）可通过 MongoDB Compass 可视化软件看到数据库的内容 源代码： （1）各文件相对位置 （2）list.html <!DOCTYPE html> <html lang="Zh"> <head> <me原创 2020-11-07 21:28:13 · 872 阅读 · 0 评论 -
初识 MongoDB 数据库
1. 环境搭建 1.1 数据库相关概念 在一个数据库软件中可以包含多个数据仓库，在每个数据仓库中可以包含多个数据集合，每个数据集合中可以包含多条文档（具体的数据）。 术语 解释说明 database 数据库，mongoDB数据库软件中可以建立多个数据库 collection 集合，一组数据的集合，可以理解为JavaScript中的数组 document 文档，一条具体的数据，可以理解为JavaScript中的对象 field 字段，文档中的属性名称，可以理解为JavaScript原创 2020-11-07 17:45:14 · 748 阅读 · 0 评论