前后端交互
关注
分享
扫一扫
前后端交互
火星飞鸟
学习前端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 · 310 阅读 · 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 · 174 阅读 · 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 · 225 阅读 · 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 · 453 阅读 · 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 · 181 阅读 · 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 · 2544 阅读 · 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 · 348 阅读 · 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 · 169 阅读 · 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 · 371 阅读 · 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 · 222 阅读 · 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 · 499 阅读 · 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 · 1296 阅读 · 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 · 1268 阅读 · 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 · 192 阅读 · 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 · 803 阅读 · 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 · 1811 阅读 · 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 · 1149 阅读 · 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 · 340 阅读 · 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 · 657 阅读 · 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 · 726 阅读 · 0 评论 -
模板引擎 artTemplate
1. 安装及使用在命令行工具中使用npm install art - template命令进行下载使用const template = require('art-template')引入模板引擎告诉模板引擎要拼接的数据和模板在哪：const html = template('模板路径', 数据);使用模板语法告诉模板引擎，模板与数据应该如何进行拼接2. 模板语法art-template同时支持两种模板语法： 标准语法和原始语法。标准语法：可以让模板更容易读写{{数据}}原始语法原创 2020-11-08 22:45:44 · 417 阅读 · 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 · 1225 阅读 · 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 · 321 阅读 · 0 评论 -
node.js 异步函数
异步函数是异步编程语法的终极解决方案，它可以让将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。使用格式：const fn = async () => {};async function fn () {};async关键字普通函数定义前加async关键字，变成异步函数异步函数默认返回promise对象在异步函数内部使用return关键字进行结果返回，结果会被包裹的promise对象中，return关键字代替了resolve方法在异步函数内部使用throw关键原创 2020-11-04 14:48:03 · 992 阅读 · 0 评论 -
node.js 异步函数 依次读取三个文件
需求：使用异步函数，依次读取1.txt、2.txt、3.txt三个文件。文件内容：1.txt：12.txt：23.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 · 664 阅读 · 0 评论 -
Promise 解决回调地域问题，依次读取三个文件
需求：依次读取1.txt、2.txt、3.txt三个文件，因为fs.readFile属于异步编程，可使用promise完成，解决回调地狱问题。文件内容：1.txt：12.txt：23.txt：3代码实现：const fs = require('fs');// 将三个promise定义成函数，可以再调用的时候再执行，实现依次执行function p1() { // 函数直接返回promise对象，就可以写成“p1().then”的形式 return new Promi原创 2020-11-04 14:24:02 · 398 阅读 · 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 · 460 阅读 · 0 评论 -
Node.js 模块查找机制
1. 当模块拥有路径但没有后缀时require('./find');require方法根据模块路径查找模块，如果是完整路径，直接引入模块如果模块后缀省略，先找同名JS文件再找同名JS文件夹，没有同名文件夹则报错如果找到了同名文件夹，找文件夹中的index.js如果文件夹中没有index.js，就会去当前文件夹中的package.json文件中查找main选项中的入口文件如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到2. 当模块没有路径且没有后缀时require(原创 2020-11-02 21:14:49 · 424 阅读 · 1 评论 -
nodemon : 无法加载文件 [解决办法]
安装了nodemon第三方库以后，使用nodemon .\01.helloworld.js命令，出现如下错误：解决办法：管理员身份打开powerShell将鼠标定位到左下角“开始菜单”处，右键，选择“Windows PowerShell（管理员）(A)”，输入set-ExecutionPolicy RemoteSigned回车：输入A，回车：验证一下：问题已解决！...原创 2020-11-02 18:31:16 · 1190 阅读 · 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 · 818 阅读 · 0 评论 -
初识 MongoDB 数据库
1. 环境搭建1.1 数据库相关概念在一个数据库软件中可以包含多个数据仓库，在每个数据仓库中可以包含多个数据集合，每个数据集合中可以包含多条文档（具体的数据）。术语解释说明database数据库，mongoDB数据库软件中可以建立多个数据库collection集合，一组数据的集合，可以理解为JavaScript中的数组document文档，一条具体的数据，可以理解为JavaScript中的对象field字段，文档中的属性名称，可以理解为JavaScript原创 2020-11-07 17:45:14 · 625 阅读 · 0 评论