创建一个纯node服务
1.再外部终端使用 npm i express-generator -g(express生成器)
2.创建一个文件夹 右键终端集成打开 输入 express-e
3.在package.json文件中添加 "cross-env":"^7.0.3",
"nodemon":"^3.1.0" 在使用npm i 下载
4，修改"scripts": 为"scripts": {
"start": "cross-env PORT=4000 nodemon ./bin/www"
}, //PORT=4000 是自己指定的
5.执行 npm start 命令
//以上完成了一个纯node服务器的创建
//cross-env PORT=4000 通过传参的方式 把一个参数传到服务里面
//nodemon ./bin/www 自动重启 执行后面那个文件
接口
服务器的地址是一个 http://localhost:4001
如果需要做不同的请求时，每一种请求叫做一个接口
每种接口都需要做区分，有两种方式可以用来告诉后端，是哪一种接口
1、通过在url地址后面增加路径的方式，这种路径叫做路由 （普通http请求大多数采用这种路由方式区分接口）
2、通过传参中增加一个变量，设置不同的值来区分接口方式 (socket请求的接口采用这种方式)
`操作`
//设置接口名称
const ROUTER={
REGISTER:"/register",
LOGIN:"/login",
LOGOUT:"/logout",
SHOW_LIST:"/showlist"
}
//判断是哪一个接口的函数
function use(type,body,res){
switch(type){
case ROUTER.REGISTER:
return register(body,res);// 去执行对应的操作
case ROUTER.LOGIN:
break;
case ROUTER.LOGOUT:
break;
case ROUTER.SHOW_LIST:
break;
}
}
页面加载的两种方式
1.SSR Server Side Render 服务端渲染
每次访问新的内容时都需要卸载当前页面，跳转到新页面，因为所有页面都是已经创建好的静态页面
2.CSR Client Side Render 客户端渲染
第一次取出当前页面的主要部分，然后通过ajax通信的方式将需要的部分数据请求拿到，然后根据数据渲染部分的内容
routes路由文件的使用
//第二个冒号前面的是地址 后面的是路由
http://localhost:4000/users/login
`调用`
http://localhost:4000/users 这样就调用了users文档
http://localhost:4000/users/login 这样就调用了users文档下的login
`添加购物车路由`
1.要在路由(routes)文件夹下新建一个carts.js文件
2.在app.js中添加 var cartsRouter = require('./routes/carts')和app.use('/carts', cartsRouter) 语句
3.在新建的carts.js文件中添加
router.post('/add', function(req, res, next) {
res.send("add")
});
router.get('/remove', function(req, res, next) {
res.send("remove")
});
//以上内容中的 '/add'或'/remove' 根据需求设置
//要导出添加的文件
module.exports = router;
`get和post`
1. get方式 只能通过地址栏发送
请求时
1)参数不能过多，过长，浏览器将不会识别，不建议传递中文
2)参数是明文，不建议传输密码等内容
3)如果当前访问的地址和以前的地址相同时，会调用缓存，不会访问服务器重新获取
4)只做一次请求，不会做二次请求
2.post方式
1)通过转换成字符串解析二进制流数组
2)传送时会把数据拆分成多个包发送,,数据会进来很多次,所以得累加起来 var str ="",
3)侦听事件结束
4)数据从send传送
//服务器到客户端 叫响应(包括响应头 响应体)
//客户端到服务器 叫请求(包括请求头 请求体)
`服务器的作用：数据的中转存储，进行数据的筛选`
ajax
1.创建ajax实例化对象
var xhr = new XMLHttpRequest();
2.添加一个加载侦听，当加载完成后触发事件
xhr.addEventListener("load", loadHandler);
3.open打开地址 GET就是请求的方法 后面的地址就是接口的地址 ？就是query数据
xhr.open("GET", "http://localhost:4000/users/login?user=xietian&age=30")
4.发送请求给服务器
xhr.send();
5. 侦听事件回调 在这里接收到数据
function loadHandler(e) {
console.log(xhr.response);//服务端响应的数据
}
前端和服务端通信
利用ajax
`创建ajax`
1.创建ajax对象
var xhr=new XMLHttpRequest();
2. 进行侦听
xhr.addEventListener("load",loadHandler);
3.打开接口
xhr.open("POST","http://localhost:4001/login");
4. 发送请求
xhr.send(JSON.stringify(arr));// 只能发送字符串
5. 侦听事件回调 在这里接收到数据
function loadHandler(e){
console.log(xhr.response)//xhr.response:响应结果
}
`请求方式`
1. get方式
请求时
1.参数不能过多，过长，浏览器将不会识别，不建议传递中文
2.参数是明文，不建议传输密码等内容
3.如果当前访问的地址和以前的地址相同时，会调用缓存，不会访问服务器重新获取
2.post方式
使用post发送数据时
`服务器接受参数`
1. 侦听事件开始 req.on("data", function (_data){Buffer array}接收数据//_data是二进制流数组
2. 通过转换成字符串解析二进制流数组
3. 传送时会把数据拆分成多个包发送,,数据会进来很多次,所以得累加起来 var str ="",
4. 侦听事件结束
5. 数据从send传送
`应用`
//方式1
var obj = { user: "xietian", password: "xie123456" }
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", loadHandler);
// POST请求
xhr.open("POST", "http://localhost:4000/users/register");
//setRequestHeader请求头
//Content-type内容类型
//application/json 应用json
xhr.setRequestHeader("Content-type", "application/json")
// 发送数据请求给服务器
xhr.send(JSON.stringify(obj));
function loadHandler(e) {
console.log(xhr.response);//服务端响应的数据
}
//方式2
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", loadHandler);
// POST请求
xhr.open("POST", "http://localhost:4000/users/register");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
// 发送数据请求给服务器
xhr.send("user=xietian&password=xie123456");
function loadHandler(e) {
console.log(xhr.response);//服务端响应的数据
}
//方式3 使用FormData 不需要设置请求头
var fd = new FormData();
fd.set("user", "xietian");
fd.set("password", "xie123456");
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", loadHandler);
// POST请求
xhr.open("POST", "http://localhost:4000/users/register");
// 发送数据请求给服务器
xhr.send(fd);
function loadHandler(e) {
console.log(xhr.response);//服务端响应的数据
}
利用fetch
//方式1
init();
async function init() {
var result = await fetch("http://localhost:4000/users/login?user=xietian&age=30").catch(e => console.log(e));
var res = await result.text();
console.log(res);
}
//方法2
var obj = { user: "xietian", password: "xie123456" }
fetch("http://localhost:4000/users/register", {
method: "POST",
body: JSON.stringify(obj),
headers: { "Content-Type": "application/json" }
}).then(function (result) {
return result.text()
}).then(function (res) {
console.log(res);
})
封装ajax
`封装`
function ajax(url, { method = "GET", body = null, headers = {} } = {}) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
for (var key in headers) {
xhr.setRequestHeader(key, headers[key]);
}
method === "GET" ? xhr.send() : xhr.send(body);
xhr.onload = function () {
resolve(xhr.response);
}
xhr.onerror = function (e) {
reject(e)
}
})
}
`调用`
ajax("http://localhost:4000/users/register", {
method: "POST",
body: JSON.stringify({ user: "xietian", password: "xie123456" }),
headers: { "Content-Type": "application/json" }
}).then(function (res) {
console.log(res);
})
服务端与mysql通信
连接数据库
1.访问数据库需要下载
"mysql":"^2.18.1"//低版使用
"mysql2":"^3.9.7"//高版使用
2.//引用下载的包
var mysql = require("mysql2");
3.// 创建链接池
var pool = mysql.createPool({
port: 3306,
database: "game",
user: "root",
password: "root"
});
4。// 在连接池中获取数据库链接
function getConnect() {
return new Promise(function (resolve, reject) {
pool.getConnection(function (err, connect) {
if (err) {
reject(err);
} else {
resolve(connect);
}
})
})
}
对数据库进行增删查改
//向数据库中添加数据
exports.addUser = function (data) {
return new Promise(async function (resolve, reject) {
var connect = await getConnect().catch(e => { console.log(e) });
if (!connect) return;
connect.query("INSERT INTO `user`(`user`, `password`, `name`, `sex`, `age`, `tel`, `email`) VALUES (?,?,?,?,?,?,?)", data, function (err, result) {
console.log(err, result)
if (err) {
reject(err);
} else {
resolve(result);
}
});
})
}
//查询数据库中的数据
exports.selectAll = function () {
return new Promise(async function (resolve, reject) {
var connect = await getConnect().catch(e => { });
if (!connect) return;
connect.query("SELECT * FROM `user` WHERE 1", function (err, result) {
console.log(err, result)
if (err) {
reject(err);
} else {
resolve(result);
}
});
})
}
//用户登录
exports.login = function (user, password) {
return new Promise(async function (resolve, reject) {
var connect = await getConnect().catch(e => { });
if (!connect) return;
connect.query("SELECT * FROM `user` WHERE `user`=? AND `password`=?", [user, password], function (err, result) {
if (err) {
reject(err);
} else {
resolve(result);
}
});
})
}
//删除数据库中的数据
exports.removeUser = function (userId) {
return new Promise(async function (resolve, reject) {
var connect = await getConnect().catch(e => { });
if (!connect) return;
connect.query("DELETE FROM `user` WHERE `pid`=" + userId, function (err, result) {
if (err) {
reject(err);
} else {
resolve(result);
}
});
})
}
//更新数据库中的数据
exports.updateUser = function (userId, data) {
return new Promise(async function (resolve, reject) {
var connect = await getConnect().catch(e => { });
if (!connect) return;
var str = Object.keys(data).map(key => {
return "`" + key + "` = " + ((typeof obj[key] === "number") ? obj[key] : "'" + obj[key] + "'");
}).join(", ");
connect.query("UPDATE `user` SET " + str + " WHERE `pid`=" + userId, function (err, result) {
if (err) {
reject(err);
} else {
resolve(result);
}
});
})
}
前端传入的数据 通过ajax给到服务器 服务器在通过代码把数据放到数据库中
数据在通过服务器向前端中响应
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
