node.js+Express框架，前端自己创建接口
前端不使用mock调用接口，也不用写后端代码调用接口，而是通过node+express自己写接口
目录
这篇文章看完如果您觉得有所收获，认为还行的话，就点个赞收藏一下呗
一、安装
1、安装node.js
node就不讲了，你们应该都安装过了
2、安装Express框架
官方给出的概念:Express是基于Node.js平台，快速、开发、极简的Web开发框架
通俗的理解：Express的作用和Node.js内置的http模块类似，是专门用了创建Web服务器的
在项目所处的目录中（输入cmd即可看到终端），运行如下的终端命令，即可将express安装到项目中使用：
（1）全局安装
express npm install -g express-generator
（2）查看是否安装成功
express -v
（3）建立后端服务器文件夹
server express server -e.
（4）进入创建的文件夹
cd server
（5）安装
npm i到这里安装就结束了，目录的介绍如下
然后把文件server用vscode打开，打开控制台输入命令npm start
然后打开浏览器，输入默认地址http://localhost:3000/即可打开网页
若是想要不想使用默认端口3000，可以自己定义端口号
打开server/app.js，在文件中写以下代码
// 监听端口
app.listen(888, () => {
console.log('服务器已经启动');
})然后重新启动服务器
3、安装nodemon
nodemon是一个自动启动node文件的第三方包 。
在编写调试Node.js项目的时候，如果修改了项目的代码，则需要频繁的手动close掉，然后再重新启动，非常繁琐。可以使用nodemon（nodemon - npm）这个工具，他能够监听项目文件的变动，当代码被修改后，nodemon会自动帮我们重启项目，极大方便了开发个调试。
只能在开发阶段使用，因为他是通过watch来进行检测代码，
（1）安装 nodemon
npm install -g nodemon
（2）使用 nodemon
传统的方式是运行node app.js命令启动项目，需要手动重启
现在将node命令替换为nodemon命令，使用nodemon app.js启动项目，会自动重启补充：之前我们是使用npm start命令启动，其实他是运行的node
所以我们现在不使用npm start，而是nodemon app.js
如果出现这个问题，有可能是因为缓存的问题，所以清理一下就可以了
这样就可以啦
二、写接口
（推荐这个） 一种是在server/routes文件下创建路由模块，在模块中写
router.get('/Login', (req, res) => {
// 前端接口/api/Login， 后端这里用/Login
// req 请求对象， res 响应对象
res.send('登录成功'); // 响应'1'回去
})一种是在app.js中写
app.get('/login' ,(req, res) =>{
// 后端收到post传参
console.log(req.body);
res.send('登录成功')
});测试接口使用Postman
注意，server写get接口，是可以获取到的，但是写post则会报错404
那是因为在express中没有获取post请求 的API ，我们要用第三方包来获取body-parser 中间件
安装
npm install --save body-parser
配置
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
使用示例
// 引包
var express = require('express')
var bodyParser = require('body-parser')
var app = express()
// 只要加上这两句配置，则在 post请求对象上会多出一个属性：body
// 也就是可以用 req.body 来获取发送过来的数据
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))//post
// parse application/json
app.use(bodyParser.json())//post
那我们来写一下代码，看看是否可以使用post接口
router.post('/setinfo', (req, res, next) => {
// 后端收到post传参
console.log(req.body);
const { username, password } = req.body
// 在这里执行验证用户名和密码的逻辑
if (username === 'admin' && password === '123456') {
res.send('获取成功')
} else {
res.status(401).send({
code: 401,
msg: '用户名或密码错误',
})
}
})到这里就可以获取到post接口啦
三、连接数据库
前面两步其实就可以完成一些返回简单数据的接口，但如果想要完成一些比较复杂的，那就要连接数据库了。这里我拿MySQL数据库来讲。
步骤分为三步：
① 安装操作 MySQL 数据库的第三方模块（mysql）
② 通过 mysql 模块连接到 MySQL 数据库
③ 通过 mysql 模块执行 SQL 语句
1、安装：
只需要安装MySQL Server和MySQL Workbench或者Navicat软件就可以了
地址：
1、MySQL Server：专门用来提供数据存储和服务的软件。
2、MySQL Workbench 或者 Navicat：可视化的 MySQL 管理工具，通过它，可以方便的操作存储在 MySQL Server 中的数据
参考他的文章，他写的比较详细：
https://blog.csdn.net/weixin_43804496/article/details/115846430
2、打开数据库
我这里有两个，一个是mysql server，一个是mysql front
mysql server直接在服务里面启动那个即可
1、按下Win + R组合键，打开运行对话框，输入cmd进入命令提示符
2、输入services.msc，就可以打开服务管理窗口了
3、找到MySQL，选择启动即可
注意：mysql server的账号和密码在安装的时候就创建好了，一定要保存记录好，不要忘记哦
mysql front是直接打开小皮，启动mysql即可（我这里装的是mysql5.7版本的）
注意：mysql front的账号和密码在小皮的数据库中可以看到，一般默认账号和密码都是root
我这里使用navicat来操作
第一步：打开navicat，点击文件——新建连接——选择mysql——下一步
第二步：输入连接名称——用户名——密码——点击测试连接
注意：测试链接这里，一定要先打开server
第三步：测试连接成功后，点击确定后，就可以在列表中看到了，双击就是打开连接
第四步：鼠标右键——选择新建数据库——输入数据库名称——点击确定即可创建新的数据库了
3、连接数据库
（1）安装mysql模块
npm install mysql2
（2）配置 mysql 模块
创建文件server/conf/db.config.js、server/conf/db.js两个文件
数据库信息：db.config.js
const db = {
host: '192.168.4.155', // 数据库的 IP 地址
// host: 'localhost', // 数据库的 IP 地址
user: 'root', // 登录数据库的账号
password: 'root', // 登录数据库的密码
database: 'nodejs_lianxi', // 指定要操作哪个数据库
// port: 3306, //端口号,默认3306
// options: {
// encrypt: false, //加密,设置为true时会连接失败 Failed to connect to localhost:1433 - self signed certificate
// enableArithAbort: false,
// },
// pool: {
// min: 0,
// max: 10,
// idleTimeoutMillis: 3000,
// },
}
//与 MySQL 数据库的连接
module.exports = db
连接数据库：db.js
const dbConfig = require('./db.config')
const mysql = require('mysql2')
// const mysql = require('mysql')
module.exports = {
query(sql, params, callback) {
return new Promise((resolve, reject) => {
const connection = mysql.createConnection(dbConfig)
connection.connect((err) => {
if (err) {
// console.log('数据库连接失败！')
reject(err)
}
// console.log('数据库连接成功！')
})
connection.query(sql, params, (err, results, fileds) => {
if (err) {
// console.log('数据库连接失败！')
reject(err)
}
// resolve({ results, fileds })
// resolve({ results })
resolve(results)
})
connection.end((err) => {
if (err) {
// console.log('数据库关闭失败！')
reject(err)
}
// console.log('数据库关闭成功！')
})
})
},
}
4、使用数据库
在routes下的文件内引入db.js
var express = require('express')
var router = express.Router()
const db = require('../conf/db')
/*
注释：
1、前端接口/api/Login（根据app.js中引入是怎么写的，把前缀和这里的相加）， 后端这里用/Login
2、req 请求对象， res 响应对象
3、post方法获取参数：req.body
4、调用res.send方法，向客户端响应结果
*/
// 获取用户列表
router.get('/List', async (req, res, next) => {
// // 单独设置此接口的响应头以避免缓存
// res.setHeader('Cache-Control', 'no-store') //适用于HTTP/1.1 的标准
// res.setHeader('Pragma', 'no-cache') //老的服务器上
// res.setHeader('Expires', '0') //老的服务器上
// 数据库
const userSQL = 'select * from user'
const users = await db.query(userSQL, [])
// 返回成功响应
res.json({
code: 200,
success: true,
message: '获取数据成功',
data: users,
})
})
module.exports = router
（4）项目内调用使用即可
四、注意事项
1、全局配置响应头
app.js
// 引入接口文件
var indexRouter = require('./routes/index')
var usersRouter = require('./routes/users')
var homeRouter = require('./routes/home')
var express = require('express')
var app = express()
// 设置全局响应头
app.use(function (req, res, next) {
// 设置响应头以避免缓存
res.setHeader('Cache-Control', 'no-store') //适用于HTTP/1.1 的标准
res.setHeader('Pragma', 'no-cache') //老的服务器上
res.setHeader('Expires', '0') //老的服务器上
res.setHeader(
'Cache-Control',
'no-store, no-cache, must-revalidate, proxy-revalidate'
)
// 跨域
res.setHeader('Access-Control-Allow-Origin', '*')
// res.header('Access-Control-Allow-Origin', '*') // 跨域就这一句话就OK了
next()
})
// 引入所有接口文件,'/api'部分可重复（也可只写/，如app.use('/', indexRouter)，前端调用直接写里面的接口）
app.use('/api', indexRouter) //对应里面的接口要加上/api
app.use('/api/user', usersRouter) //对应里面的接口要加上/api/user
app.use('/api', homeRouter)注意：这个一定要放在引入routes文件的前面才生效
单独的响应头在对应的接口里面加上就行
router.post('/user/emia', (req, res, next) => {
//响应头
res.header("Access-Control-Allow-Origin", "*"); //跨域
// 调用res.send方法，向客户端响应结果
res.send({
status: 0,
code: 200,
msg: 'POST请求成功！',
data: ['123', '456']
})
});
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
10
0- 0
已为社区贡献3条内容
所有评论(0)