后端编程
什么是后端编程，作用?
网站数据存储在一个地方， 数据变化，不用更改代码。
1.可以接收前端请求，
2.处理业务逻辑
3.响应数据给前端
- 编程语言 javascript
- 运行环境 nodejs
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。
14.18.2版本 默认安装
命令行检查node环境
node -v
执行js代码
d:/test>node demo.js
demo.js文件在d:/test目录下执行 - window环境上的DOS操作
DOS 命令操作
盘符切换: c盘->D盘
c:/user>D:
目录切换 D:/> cd test -> D:/test
服务器是怎么访问的呢
- ip地址, 唯一标识网络中一台电脑
- port端口号: 标识电脑中不同应用程序
- 域名: 解决ip地址不好记的问题
域名与ip地址一一对应,通过域名解析服务器DNS进行解析 - 数据传输协议
限制用户和服务器之间交流传输数据的方式和规则
规则：- 建立连接通道
- 相互通信
- 关闭连接通道
- 常见的传输协议是 http 和 https
区别:- http 是一种常见协议，不是很安全
- https 是一种加密传输协议
- 访问服务器资源
- url地址: 统一资源定位符,标识网络中资源数据
- url地址格式: 协议://域名:端口/资源
- 示例: http://www.xiongmaoyouxuan.com:port/login
Nodejs认识
Nodejs是一个应用编程平台，能运行javascript语言编写的代码，提供了javascript运行环境，
基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
提供了大量应用编程接口API,在处理http网络、数据库、文件等操作时非常方便.
安装
官网下载地址http://nodejs.cn/download/
- 检查安装成功：
打开命令窗口:输入 node –v
#>v12.11.3 版本
直接在终端中书写 js 代码
在命令行运行一个 js 文件
常用命令行操作
目录操作
文件操作
其他指令
web服务器
- nginx
- liveserver插件
实现后端程序web服务功能
1、接收前端请求
2、处理业务逻辑
3、响应数据
1、引入内置模块http模块
此内容写在后端的js里
let productList = [
{
goods_id: 1,
title: "南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038",
img_big_logo: "https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg",
price: "25.00",
current_price: "17.50",
goods_number: 24,
is_sale: true,
sale_type: "70%",
is_hot: false,
category: "其他"
},
{
goods_id: 2,
title: "南极人 袜子男士 男女士船袜 精梳棉竹纤维棉袜 情侣袜 运动 休闲 商务男袜短袜吸湿排汗透气男袜女袜子P3015K31",
img_big_logo: "https://image3.suning.cn/uimg/b2c/newcatentries/0070081143-000000000132291774_2_800x800.jpg",
price: "29.00",
current_price: "29.00",
goods_number: 71,
is_sale: false,
sale_type: "100%",
is_hot: true,
category: "内衣配饰"
},
]
productList = JSON.stringify(productList) // 将数组转字符串
// 1、引入内置http模块
let http = require('http')
// 2、创建一个web服务
let server = http.createServer(function (request, response) {
// request 请求对象
// response 响应对象
// 跨域问题
response.setHeader('Access-Control-Allow-Origin', '*')
// 解决乱码
response.writeHead(200, { 'content-type': 'text/html;charset=utf-8' })
response.write(productList) // 向响应对象写入数据helloworld
response.end() // 结束写入，发送数据给请求客户端
})
// 启动web服务, 端口号 http://10.7.162.67:3000 3000端口号, 作用: 区分同一台电脑中不同应用
//3、监听端口 200
server.listen(3000, () => console.log('web服务启动成功,监听3000端口...'))
响应内容
response.write(‘helloworld 这是后端响应的内容’)
客户端发起请求，后端响应内容，
后端响应的内容，可以多种类型
字符串1. json格式对象(数组,Object)
2. html字符串
let loginPage = `
<form>
<p>登录界面</p>
<input type="text" /><br>
<input type="password" /><br>
<input type="submit"/>
</form>
`
response.write(loginPage) // 向响应对象写入数据helloworld
web程序的特点：
启动之后一直运行，监听前端客户端用户请求，如果有请求则响应数据。
url:
url地址: http://10.7.162.67:3000
http： 协议
ip地址： 10.7.162.67
唯一确定网络中一台电脑
端口号: 3000
唯一确定同一台电脑中不同应用
示例
// 1、引入内置http模块
const http = require("http");
//2、 创建一个web服务
const server = http.createServer((request, response) => {
//request 请求对象 response 响应对象
//后端设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
// 1. 接收请求
var path = request.url;
console.log(request.url);
//解决中文乱码问题
response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
//2.根据请求路由，响应数据
if (path === "/login.do") {
response.write("登录界面");
} else if (path === "/register.do") {
response.write("注册界面");
} else if (path === "/list") {
let obj = { name: "Jack", age: 23 };
response.write(JSON.stringify(obj));
} else {
response.write("<h1>主界面</h1>");
response.write("<div>第一个nodejs程序</div>");
}
response.end(); // 结束响应
});
// 监听启动服务器
server.listen(8080, () => {
console.log("listening on port 8080");
});
获取 URL 的参数
处理post请求
解决乱码和跨域问题
response.writeHead(200,{‘content-type’:‘text/html;charset=utf-8’})
服务端业务处理—Ajax
最常用最基础的业务处理，将客户端数据存储到数据库,
从数据库获取数据返回给客户端
Ajax：现在允许浏览器与服务器通信而无须刷新当前页面的技术. 不需要刷新整个页面，只刷新局部页面的一种异步通讯技术。
Ajax技术的核心 XMLHttpRequest对象
发送请求到服务器并获得返回结果—写在前端html界面
1、异步获取商品数据
<button class="product-list">获取商品列表数据</button>
<p></p>
<table>
<!-- 动态渲染 -->
</table>
const btn = document.querySelector('.product-list')
const pEle = document.querySelector('p')
const table = document.querySelector('table')
btn.addEventListener('click', function () {})
//异步获取商品数据
getProductList()
function getProductList() {
1. 创建对象
let xhr = new XMLHttpRequest()
2. 建立连接
xhr.open(method,url,true)
- 请求方法 method:
get 获取数据
- url: http://10.7.162.67:3000/
- true|false 异步与同步
3. 发送请求
xhr.send()
4. 接收响应内容
xhr.onreadystatechange = function(){
// 响应数据是否完成未创建对象、未成功建立连接、未成功发送请求、未成功接收响应内容
//readyState 就绪码: 0 1 2 3 4
//分别代表依次代表
if(xhr.readyState === 4){
// 响应是成功还是失败
// status 状态 200 成功
if(xhr.status === 200){
// 获取成功响应的数据
let data = xhr.responseText // 响应内容
let dataObj = JSON.parse(data)
showProductList(dataObj) //执行动态渲染数据
}else{
alter('网络出错' +xhr.status)
}
}
}
// IE9以下
const xhr = new ActiveXObject(‘Mricosoft.XMLHTTP’)
动态渲染网络商品数据—html界面，加在上面得后面
/*
商品列表渲染
*/
// productList 是商品对象数组
function showProductList(productList) {
let str = `<tr>
<th>商品名称</th>
<th>商品图片</th>
<th>商品价格</th>
<th>商品数量</th>
<th>操作 </th>
</tr>`
// 遍历商品数组
let trArray = productList.map(item => {
return `<tr>
<td>${item.name}</td>
<td><img src="${item.url}" width="100" alt="pic"/></td>
<td>${item.price}</td>
<td>${item.num}</td>
<td>删除</td>
</tr>`
})
str = str + trArray.join('')
table.innerHTML = str
}
get传参—获取数据
参数以名称值对的形式拼接到url地址后 key/value
http:///localhost:8888/test/third?name=KaTeX parse error: Expected 'EOF', got '&' at position 11: {username}&̲age={age}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端</title>
</head>
<body>
<form>
<input type="text" placeholder="请输入姓名" name="username"><br>
<input type="text" placeholder="请输入年龄" name="age"><br>
<input type="submit" class="product-list" />
</form>
<!-- 显示后端数据 -->
<p></p>
<script>
const btn = document.querySelector('.product-list')
const formEle = document.querySelector('form')
const pEle = document.querySelector('p')
const usernameInput = document.querySelector('input[name="username"]')
const ageInput = document.querySelector('input[name="age"]')
formEle.addEventListener('submit', function (e) {
e = e || window.event
e.preventDefault()
getData()
})
/**
*异步获取后端商品列表数据
*/
function getData() {
//获取输入框得内容，将输入框得内容作为参数传给地址携带参数
let username= usernameInput.value
let age = ageInput.value
// 1. 创建XMLHttpRequest
let xhr = new XMLHttpRequest()
// 2. 建立连接
xhr.open('get', `http:///localhost:8888/test/third?name=${username}&age=${age}`)
// 3. 发送请求
xhr.send()
// 4. 接收响应数据
xhr.onreadystatechange = function () {
// 4.1 是否响应完成
if (xhr.readyState === 4) {
// 4.2 是否成功响应
if (xhr.status === 200) {
let data = xhr.responseText // 响应内容
pEle.innerHTML = data
console.log(JSON.parse(data))
} else {
alert('网络出错 ' + xhr.status)
}
}
}
}
</script>
</body>
</html>
post请求传参—提交数据
xhr.open(‘post’,‘url’)
// 需要加一个请求头才能拿到数据 content-type: 内容传参类型
xhr.setRequestHeader(‘content-type’,‘application/x-www-form-urlencoded’)
xhr.send(‘name=${username}&age={age}’)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端</title>
</head>
<body>
<form>
<input type="text" placeholder="请输入姓名" name="username"><br>
<input type="text" placeholder="请输入年龄" name="age"><br>
<input type="submit" class="product-list" />
</form>
<!-- 显示后端数据 -->
<p></p>
<script>
const btn = document.querySelector('.product-list')
const formEle = document.querySelector('form')
const pEle = document.querySelector('p')
const usernameInput = document.querySelector('input[name="username"]')
const ageInput = document.querySelector('input[name="age"]')
formEle.addEventListener('submit', function (e) {
e = e || window.event
e.preventDefault()
getData()
})
/**
*异步获取后端商品列表数据
*/
function getData() {
let username= usernameInput.value
let age = ageInput.value
// 1. 创建XMLHttpRequest
let xhr = new XMLHttpRequest()
// 2. 建立连接
xhr.open('post', `http://10.7.162.67:8888/test/fourth`)
// 3. 发送请求
// content-type: 内容传参类型
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send(`name=${username}&age=${age}`)
// 4. 接收响应数据
xhr.onreadystatechange = function () {
// 4.1 是否响应完成
if (xhr.readyState === 4) {
// 4.2 是否成功响应
if (xhr.status === 200) {
let data = xhr.responseText // 响应内容
pEle.innerHTML = data
console.log(JSON.parse(data))
} else {
alert('网络出错 ' + xhr.status)
}
}
}
}
</script>
</body>
</html>
get 和post区别
post更安全
get请求参在url地址上
post请求参数在请求体中
5357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
