admin 管理员组文章数量: 887021
1.使用node.js搭建服务
1.1创建http.js文件
// 第一步引入http服务 目的:搭建/开启本地服务器(让自己的电脑成为一台服务器)
const http = require("http")
// 第二步创建服务器 目的:前端请求这个服务,服务返回前端响应的数据
// http(超文本传输协议)是一个用于传输超文本到本地浏览器的协议
// 要创建http服务器(满足 Web 浏览器与 Web 服务器之间的通信需求)
// 需要使用http.createServer()方法
const server = http.createServer((req, res) => {
// req--request 请求 res--response 响应
// 设置HTTP响应的状态码为200,表示请求成功
res.statusCode = 200
// 设置HTTP响应头的Content-Type字段为"text/plain;charset=UTF-8",表示响应内容的类型为纯文本,字符集为UTF-8(可以避免中文乱码)
res.setHeader("Content-Type", "text/plain;charset=UTF-8")
// 在HTTP响应中结束并发送一段HTML内容"<h1>Hello World</h1>"到客户端
res.end("<h1>Hello World</h1>")
})
// 监听端口号
server.listen(3000, "localhost", () => {
// 会在3000端口号开启服务器,并且运行在localhost上
console.log("服务器开启成功");
})
1.2第四步.在终端进入http.js文件中,然后运行http.js文件
1.3浏览器访问3000端口
2.Commonjs模块规范
js与js文件之间相互引用以及导出
2.1index01.js文件(用于导出使用)
// 数据资源
const obj = {
use: "zhangsan",
age: 18,
habby: ["打篮球", "听音乐", "跑步"]
}
// 函数
function say() {
console.log("hello world");
}
// 要想供别的文件使用,必须导出
// 直接导出obj
module.exports = obj
// 直接导出一个对象
module.exports = {
obj: obj,
name: "对象数据",
say
}
2.2index02.js文件(用于引入使用)
// 使用index01.js里面的数据
// 要使用obj'先导入(文件后缀名可加可不加)
// 引入自己编写的文件需要加"./",内置的服务引入不需要加
const data = require("./index01")
console.log(data);
2.3在控制台运行index02.js文件
3.querystring库
用于解析和格式化网址查询字符串的实用工具
例如某一个地址为:url?userName=zhangsan&password=123456,可以将该地址中的字符串拼接参数转为对象,也可以将对象转成字符串拼接
// 功能:接受用户输入的url地址,传递的参数
// 导入querystring库
const { log } = require("console");
const qs = require("querystring");
const { age } = require("./index01");
// 设置一个某认的url参数
let params = "useName=admin&password=123456"
// qs.parse()方法将查询字符串参数转换为JavaScript对象
const data = qs.parse(params)
console.log(data)
console.log(data.useName);
let params2 = {
useName: "zhangsan",
password: "123456",
age: 18,
sex: "男",
hobby: ["打篮球", "踢足球"]
}
// qs.stringify()用于将对象序列化为查询字符串
console.log(qs.stringify(params2));
4.node.js模块url
4.1url模块提供了网址处理和解析的实用工具
// 导入url模块,请求url地址
// const url = require("url")
const { log } = require("console");
// 声明一个url地址
let address = "http://www.baidu:8080/api/banner?id=info"
// url.parse()方法将URL字符串解析为一个对象,第二个参数true表示解析查询字符串为对象
// 输出结果包含URL的各个组成部分,如协议、主机、路径、查询参数等
// console.log(url.parse(address, true))
// 输出查询参数部分的值
// console.log(url.parse(address).query);
// 新方法
const myUrl = new URL(address)
console.log(myUrl);
log(myUrl.searchParams.get("id"))
5.npm常用的命令
- npm -v : 查看npm当前的版本号
- npm init : 初始化项目(会创建package.json文件)
- npm install 模块名称 : 下载模块(简写: npm i 模块名称)
- npm install 模块名@版本号 : 下载指定版本号的模块
- npm install --global 模块名称 : 下载全局的模块(类似于下载电脑中,无论项目在那个文件中都可以使用,简写: npm i -g 模块名称)
- npm uninstall 模块名 : 卸载模块
- npm update 模块名 : 更新模块
- npm uninstall 模块名@版本号 : 卸载模块(带版本号)
6.自动更新node.js代码
6.1安装nodemon包(全局)
npm i nodemon -g
6.2运行node.js文件(文件内容发生改变,会自动更新运行)
nodemon index.js
7.安装cnpm
npm服务器在国外,下载速度比较慢,可以使用cnpm,cnpm是淘宝镜像,服务器在国内,下载速度快
7.1安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao
遇到SSL证书问题,可以尝试更新你的系统证书,或者暂时禁用 SSL 严格验证
如果要禁用,可以使用以下命令:
npm config set strict-ssl false
再重新安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao
安装完 cnpm
后,记得重新启用 SSL 验证:
npm config set strict-ssl true
7.2测试安装cnpm是否安装成功
cnpm -v
7.3安装依赖
项目中node_modules文件中包含了所有的依赖,可以在package.json里面查看所有的依赖信息,当使用别人的项目,或者自己项目中没有node_module文件时,可以使用 cnpm i 命令来安装
8.express---接口
8.1stu.js学生信息文件
let stu = {
info: "学生信息",
arr: [
{
id: 1,
name: "张三",
age: 18
},
{
id: 2,
name: "李四",
age: 19
},
{
id: 3,
name: "王五",
age: 20
}
]
}
module.exports = stu
8.2index.js入口文件
// 导入模块
const express = require("express")
const app = express()
const stuDate = require("./stu")
// 主页接口访问
app.get("/", (req, res) => {
res.send("hello")
})
// 学生信息接口访问
app.get("/stuDate", (req, res) => {
res.send(stuDate)
})
// 监听端口号
app.listen(3000, () => {
console.log("server is running at port 3000")
})
8.3浏览器访问结果:
8.4作业(模拟编写轮播和新闻的接口)
banner.js轮播图文件
module.exports = {
info: "轮播图",
content: [
{
id: 100,
url: "http://www.baidu",
desc: "第一张",
href: "http://www.baidu"
},
{
id: 101,
url: "http://www.baidu",
desc: "第二张",
href: "http://www.baidu"
},
{
id: 102,
url: "http://www.baidu",
desc: "第三张",
href: "http://www.baidu"
},
{
id: 103,
url: "http://www.baidu",
desc: "第四张",
href: "http://www.baidu"
}
]
}
news.js新闻文件
module.exports = {
news: "新闻数据",
arr: [
{
id: 1,
name: "新闻1",
},
{
id: 2,
name: "新闻2",
},
{
id: 3,
name: "新闻3",
}
]
}
index.js入口文件
// 搭建本地node.js服务
const express = require("express")
// 创建本地服务
const app = express()
// 导入轮播图数据
const banner = require("./banner")
// 导入新闻数据
const news = require("./news")
// 首页接口
app.get("/", (req, res) => {
res.send("首页接口")
})
// 轮播接口
app.get("/banner", (req, res) => {
res.send({
status: 200,
message: "请求成功",
data: banner
})
}
)
// 新闻接口
app.get("/news", (req, res) => {
res.send({
status: 200,
message: "请求成功",
data: news
})
}
)
// 监听端口号
app.listen(3000, () => {
// 在终端打印
console.log("server is running at port 3000")
})
浏览器访问
9.express---路由
路由是指确定应用程序如何响应特定端口的客户请求(页面的走向),这是一个URL(或路径)和一个特定的http请求方法(GET,POST)
9.1路由配置文件
路由器类来创建模块化,可以挂载的路由处理程序
路由模块
router.js路由文件
// 配置路由文件---路由模块
// 1.导入express
const express = require('express');
// 2.创建路由对象(路由器)
const router = express.Router()
// 导入学生信息
const stu = require("./stu")
// 3.创建路由地址---配置路由
// 首页
router.get("/", (req, res) => {
res.send("首页")
})
//轮播接口
router.get("/banner", (req, res) => {
res.send("轮播图")
})
// 学生接口
router.get("/stu", (req, res) => {
res.send(stu)
})
// 导出路由对象,供首页使用
module.exports = router
news.js新闻路由文件
// 配置路由文件---路由模块
// 1.导入express
const express = require('express');
// 2.创建路由对象(路由器)
const router = express.Router()
// 3.创建路由地址---配置路由
// 首页
router.get("/", (req, res) => {
res.send("新闻首页")
})
//轮播接口
router.get("/banner", (req, res) => {
res.send("新闻的轮播图")
})
// 导出路由对象,供首页使用
module.exports = router
stu.js学生信息数据文件
module.exports = {
info: "学生信息",
arr: [
{
id: 1,
name: "张三",
age: 18
},
{
id: 2,
name: "李四",
age: 19
},
{
id: 3,
name: "王五",
age: 20
}
]
}
入口文件(使用路由)
index.js入口文件
const express = require("express")
const app = express()
// 静态文件托管
app.use("/", express.static("../public"))
// 导入路由文件
const router = require("./router")
// 使用路由
// http://localhost:3000 首页地址
// http://localhost:3000/banner 轮播图页面
// app.use('/', router)
// http://localhost:3000/api 首页地址
// http://localhost:3000/api/banner 轮播图页面
app.use("/api", router)
const newRouter = require("./news")
app.use("/news", newRouter)
app.listen(3000, () => {
console.log("server is running at port 3000")
})
10.express---传递参数
10.1接口接受参数
10.1.1get接受参数(使用req.query)
router.js路由配置文件
const express = require("express")
const router = express.Router()
// 配置路由
// get--请求传递参数
router.get("/", (req, res) => {
// 查询参数会被解析并存储在req.query对象中
// console.log(req);
console.log(req.query);
let userName = req.query.userName
let password = req.query.password
if (userName == "zhangsan" && password == "123456") {
res.send({
info: "登录成功",
userName: userName,
password: password
})
} else {
res.send({
info: "登录失败"
})
}
})
module.exports = router
index.js入口文件
const express = require("express")
const app = express()
// 导入router
const router = require("./router")
app.use("/", router)
app.listen(3000, () => {
console.log("server is running at port 3000");
})
postman模拟传递数据
10.1.2post接收参数(使用req.body)
router.js路由配置文件
const express = require("express")
const router = express.Router()
// 配置路由
// get--请求传递参数
router.get("/", (req, res) => {
// 查询参数会被解析并存储在req.query对象中
// console.log(req);
console.log(req.query);
let userName = req.query.userName
let password = req.query.password
if (userName == "zhangsan" && password == "123456") {
res.send({
info: "登录成功",
userName: userName,
password: password
})
} else {
res.send({
info: "登录失败"
})
}
})
// post 传递参数
router.post("/login", (req, res) => {
// post请求参数会被解析并存储在req.body对象中
console.log(req.body);
let userName = req.body.userName
let password = req.body.password
// 模拟登录效果
if (userName == "zhangsan" && password == "123456") {
res.send({
info: "登录成功",
userName: userName,
password: password
})
} else {
res.send({
info: "登录失败"
})
}
})
module.exports = router
index.js入口文件
const express = require("express")
const app = express()
// 使用Express的urlencoded中间件来解析表单数据
// 允许解析扩展的表单数据格式,提高灵活性
// 实现post请求传递数据,表单序列化
// 一定要放在使用路由的前面
app.use(express.urlencoded({ extended: true }))
// 导入router
const router = require("./router")
app.use("/", router)
app.listen(3000, () => {
console.log("server is running at port 3000");
})
postman模拟传递数据
11.express---静态文件托管
为了提供如图片,css文件和js文件之类的静态文件,可以使用express.static内置中间件函数,默认浏览器是无法访问本地的资源,当使用express.static函数托管后,就可以在浏览器后访问,可以在线读这些资源
index.js入口文件
// 搭建本地node.js服务
const express = require("express")
// 创建本地服务
const app = express()
// 静态资源托管 ---让服务器上的静态资源css/js/img等资源可以被在线访问
// 写法一:(以当前文件为目标文件,一定要写清楚静态文件public的路径所在)
// app.use("/", express.static("../public"))
// 例如:(访问路径不用写静态文件夹的路径,直接写文件名即可)
// http://localhost:3000/imgs/0.jpg
// http://localhost:3000/css/bath.css
// 写法二:
app.use("/static", express.static("../public"))
// 例如:(静态文件托管的专门访问路由地址static)
// http://localhost:3000/static/css/bath.css
// 导入轮播图数据
const banner = require("./banner")
// 导入新闻数据
const news = require("./news")
// 首页接口
app.get("/", (req, res) => {
res.send("首页接口")
})
// 轮播接口
app.get("/banner", (req, res) => {
res.send({
status: 200,
message: "请求成功",
data: banner
})
}
)
// 新闻接口
app.get("/news", (req, res) => {
res.send({
status: 200,
message: "请求成功",
data: news
})
}
)
// 监听端口号
app.listen(3000, () => {
// 在终端打印
console.log("server is running at port 3000")
})
12.express---前后端交互
index.html前端文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn/ajax/libs/jquery/3.7.1/jquery.js"></script>
<title>学生信息</title>
</head>
<body>
<button id="look">查看学生信息</button>
<script>
// 点击按钮获取所有学生信息
$("#look").click(function () {
$.ajax({
url: "http://localhost:3000/list",
type: "get",
success: function (res) {
console.log(res);
}
})
})
</script>
</body>
</html>
router.js路由配置文件
const express = require("express")
const router = express.Router()
// 配置路由
// get--请求传递参数
router.get("/", (req, res) => {
// 查询参数会被解析并存储在req.query对象中
// console.log(req);
console.log(req.query);
let userName = req.query.userName
let password = req.query.password
if (userName == "zhangsan" && password == "123456") {
res.send({
info: "登录成功",
userName: userName,
password: password
})
} else {
res.send({
info: "登录失败"
})
}
})
// post 传递参数
router.post("/login", (req, res) => {
// post请求参数会被解析并存储在req.body对象中
console.log(req.body);
let userName = req.body.userName
let password = req.body.password
// 模拟登录效果
if (userName == "zhangsan" && password == "123456") {
res.send({
info: "登录成功",
userName: userName,
password: password
})
} else {
res.send({
info: "登录失败"
})
}
})
// 学生信息接口
const stu = require("./data/stu")
router.get("/list", (req, res) => {
// 设置资源共享 cors配置
// 设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin", "*")
res.send(stu)
})
module.exports = router
stu.js学生信息文件
let stu = {
info: "学生信息",
arr: [
{
id: 1,
name: "张三",
age: 18
},
{
id: 2,
name: "李四",
age: 19
},
{
id: 3,
name: "王五",
age: 20
}
]
}
module.exports = stu
index.js入口文件
// 搭建本地node.js服务
const express = require("express")
// 创建本地服务
const app = express()
// 静态资源托管 ---让服务器上的静态资源css/js/img等资源可以被在线访问
// 写法一:(以当前文件为目标文件,一定要写清楚静态文件public的路径所在)
// app.use("/", express.static("../public"))
// 例如:(访问路径不用写静态文件夹的路径,直接写文件名即可)
// http://localhost:3000/imgs/0.jpg
// http://localhost:3000/css/bath.css
// 写法二:
app.use("/static", express.static("../public"))
// 例如:(静态文件托管的专门访问路由地址static)
// http://localhost:3000/static/css/bath.css
// 导入router
const router = require("./router")
app.use("/", router)
// 监听端口号
app.listen(3000, () => {
// 在终端打印
console.log("server is running at port 3000")
})
浏览器访问结果
13.node资源共享cors配置
13.1接口单独设置共享资源(别的接口不可以共享)
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*")
13.2给所有的接口配置共享资源
router.all("*",function(req,res,next){
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*")
//允许header类型
res.header("Access-Control-Allow-Headers","content-type")
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS")
if(res.method.toLowerCase()=="options"){
res.send(200)
}else{
next()
}
})
13.3安装cors实现资源共享
13.3.1 安装
cnpm i cors --save
13.3.2 导入和使用(在入口/主js文件中导入和使用)
// 导入资源共享模块(一定要在导入router之前)
const cors = require("cors")
// 使用cors中间件
app.use(cors())
14.express---连接数据库
14.1安装mysql模块
cnpm i mysql --save
14.2引入模块
14.3连接数据库
14.4编写sql语句
14.5执行sql语句
// 通过node.js连接本地数据库
// 导入mysql模块
const mysql = require('mysql');
// 连接数据库
const content = mysql.createConnection({
host: 'localhost', //数据域名 xampp里面的数据
user: 'root', //数据库的用户名
password: '123456', //该用户名的密码
database: 'book', //数据库的名
port: 3306 //数据库端口号,默认是3306跨域不用写
});
// 编写sql语句
const sql = "select * from book"
// 执行sql语句
/**
* 执行SQL查询
*
* 通过content对象执行指定的SQL查询语句。查询的结果或错误将通过回调函数处理。
* 这是一个异步操作,它不会阻塞代码的执行。
*
* @param {string} sql - 要执行的SQL查询语句。
* @param {Function} callback - 查询完成后的回调函数。接受两个参数:错误对象(err)和查询结果(result)。
* 如果查询过程中有错误,err将包含错误信息;否则,result将包含查询结果。
*/
content.query(sql, (err, result) => {
if (err) {
// 如果查询出错,打印错误信息
console.log(err);
} else {
// 如果查询成功,打印查询结果
console.log(result);
}
})
运行结果
14.6编写查看所有的书本信息的案例
router.js路由配置文件
const express = require("express")
const router = express.Router()
// 导入数据库
const mysql = require("mysql")
// 连接数据库
const connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "123456",
port: "3306",
database: "book"
})
// 配置路由
// get--请求传递参数
router.get("/", (req, res) => {
res.send("欢迎来到首页")
})
// 接口:查看所有书籍信息
router.get("/book", (req, res) => {
// 查询sql语句
const sqlStr = "select * from book"
// 执行sql语句
connection.query(sqlStr, (err, result) => {
if (err) return res.send("err:" + err.message)
res.send(result)
})
})
module.exports = router
index.js入口文件
// 搭建本地node.js服务
const express = require("express")
// 创建本地服务
const app = express()
// 导入router
const router = require("./router")
app.use("/", router)
// 监听端口号
app.listen(3000, () => {
// 在终端打印
console.log("server is running at port 3000")
})
浏览器访问
14.6编写插入管理员信息的案列
router.js路由配置文件
const express = require("express")
const router = express.Router()
// 导入数据库
const mysql = require("mysql")
// 连接数据库
const connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "123456",
port: "3306",
database: "book"
})
// 配置路由
// get--请求传递参数
router.get("/", (req, res) => {
res.send("欢迎来到首页")
})
// // 接口:查看所有书籍信息
// router.get("/book", (req, res) => {
// // 查询sql语句
// const sqlStr = "select * from book"
// // 执行sql语句
// connection.query(sqlStr, (err, result) => {
// if (err) return res.send("err:" + err.message)
// res.send(result)
// })
// })
// 注册接口: 参数传递使用到get
router.get("/book/add", (req, res) => {
// 接收前端传递的数据
let { user, pwd } = req.query
// 编写sql插入语句
const sqlStr = `insert into admin(user,pwd) values('${user}','${pwd}')`
// 执行sql 获取结果
connection.query(sqlStr, (err, result) => {
if (err) return res.send("err:" + err.message)
console.log(result);
res.send(result)
})
})
module.exports = router
index.js入口文件
// 搭建本地node.js服务
const express = require("express")
// 创建本地服务
const app = express()
// 导入router
const router = require("./router")
app.use("/", router)
// 监听端口号
app.listen(3000, () => {
// 在终端打印
console.log("server is running at port 3000")
})
postman模拟访问
affectRows为1表示成功执行命令 的条数,即表明插入数据成功
14.7封装函数(将公共的执行sql语句的代码封装成一个函数)
router.js路由配置文件
const express = require("express")
const router = express.Router()
// 导入数据库
const mysql = require("mysql")
// 连接数据库
const connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "123456",
port: "3306",
database: "book"
})
// 封装函数
function sqlFn(sql, callback) {
// 执行sql语句
connection.query(sql, (err, result) => {
if (err) {
console.log("数据库操作失败", err);
return
}
// 把成功的result返回给调用者去处理
// 调用一个之前作为参数传递进来的函数,称为回调函数
callback(result)
})
}
// 配置路由
// get--请求传递参数
router.get("/", (req, res) => {
res.send("欢迎来到首页")
})
// 查询接口:查看所有书籍信息
router.get("/book", (req, res) => {
// 查询sql语句
const sqlStr = "select * from book"
// 执行sql语句
sqlFn(sqlStr, (result) => {
// console.log(result);
// 把查询结果返回给前端
res.send(result)
})
})
// 注册接口: 参数传递使用到get
router.get("/book/add", (req, res) => {
// 接收前端传递的数据
let { user, pwd } = req.query
// 编写sql插入语句
const sqlStr = `insert into admin(user,pwd) values('${user}','${pwd}')`
// 执行sql 获取结果
sqlFn(sqlStr, (result) => {
if (result.affectedRows > 0) {
res.send("注册成功")
} else {
res.send("注册失败")
}
}
)
})
module.exports = router
index.js入口文件
// 搭建本地node.js服务
const express = require("express")
// 创建本地服务
const app = express()
// 导入router
const router = require("./router")
app.use("/", router)
// 监听端口号
app.listen(3000, () => {
// 在终端打印
console.log("server is running at port 3000")
})
浏览器访问
postman模拟
14.8(重点)将数据库的部分提出单独做一个文件使用
mysql.js文件(独立数据库模块)
// 通过node.js连接本地数据库
// 导入mysql模块
const mysql = require('mysql');
// 连接数据库
const content = mysql.createConnection({
host: 'localhost', //数据域名 xampp里面的数据
user: 'root', //数据库的用户名
password: '123456', //该用户名的密码
database: 'book', //数据库的名
port: 3306 //数据库端口号,默认是3306跨域不用写
});
// 封装函数
function sqlFn(sql, callback) {
// 执行sql语句
content.query(sql, (err, result) => {
if (err) {
console.log("数据库操作失败", err);
return
}
// 把成功的result返回给调用者去处理
// 调用一个之前作为参数传递进来的函数,称为回调函数
callback(result)
})
}
module.exports = sqlFn;
router.js路由设置模块(里面只有路由设置代码)
const express = require("express")
const router = express.Router()
// 导入数据库执行模块
const sqlFn = require("./mysql")
// 配置路由
// get--请求传递参数
router.get("/", (req, res) => {
res.send("欢迎来到首页")
})
// 查询接口:查看所有书籍信息
router.get("/book", (req, res) => {
// 查询sql语句
const sqlStr = "select * from book"
// 执行sql语句
sqlFn(sqlStr, (result) => {
// console.log(result);
// 把查询结果返回给前端
res.send(result)
})
})
// 注册接口: 参数传递使用到get
router.get("/book/add", (req, res) => {
// 接收前端传递的数据
let { user, pwd } = req.query
// 编写sql插入语句
const sqlStr = `insert into admin(user,pwd) values('${user}','${pwd}')`
// 执行sql 获取结果
sqlFn(sqlStr, (result) => {
if (result.affectedRows > 0) {
res.send("注册成功")
} else {
res.send("注册失败")
}
}
)
})
module.exports = router
index.js入口文件
// 搭建本地node.js服务
const express = require("express")
// 创建本地服务
const app = express()
// 导入router
const router = require("./router")
app.use("/", router)
// 监听端口号
app.listen(3000, () => {
// 在终端打印
console.log("server is running at port 3000")
})
本文标签: 项目 JS Node Express MySQL
版权声明:本文标题:node.js+mysql+express搭建一个项目 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1726804428h1031535.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论