cover

node.js使用express框架搭建服务器——设置前后端接口——实现数据请求

基于Node.js 的服务器搭建框架。

Sam9029

1797人浏览 · 2022-11-12 10:51:11

Sam9029 · 2022-11-12 10:51:11 发布

🦖我是Sam9029，一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

思路

可以使用 express 框架快速搭建一个服务器

在项目中安装

npm i express

通过 express 服务器写接口

（前端访问该接口后满足条件就执行 send 返回数据）

文章目录

思路
@[toc]
新建一个项目（使用 npm 管理依赖）
Express介绍
！！前提：局部和全局都行
Express 应用程序生成器：`express-generator`
！！前提：全局安装`express-generator`

Express 项目创建
一：命令创建
二：注意创建完成后--安装npm依赖
三：启动项目
四：默认端口更改

Express--创建的domo
项目初始文件目录

这是一个简单 node.js后端发送数据给前端的例子
在app.js文件引入 express
创建接口层 router （即服务器暴露给前端的接口）

前台访问接口获取数据
项目源码
[SAM9029](https://gitee.com/sam9029) / [Vue-student-system](https://gitee.com/sam9029/vue-student-system)

🦖我是Sam9029，一个前端

新建一个项目（使用 npm 管理依赖）

npm init -y

Express介绍

https://blog.csdn.net/zzsan/article/details/79578132

https://www.jianshu.com/p/69e7f3734eb5

https://www.bilibili.com/video/BV1Yh411q7aP?p=346&spm_id_from=pageDriver

基于Node.js 的服务器搭建框架

！！前提：局部和全局都行

npm install -g express

Express 应用程序生成器：`express-generator`

作用：为开发者快速创建一个 express项目

！！前提：全局安装`express-generator`

npm i -g express-generator

Express 项目创建

!!!注意： express（框架） 和 express-generator（骨架生成器工具） 两者都要安装

一：命令创建

#目标文件路径 cmd 中
express 项目名称

二：注意创建完成后–安装npm依赖

#目标文件路径 cmd 中
npm i

三：启动项目

#默认启动3000端口
npm start

拓展：启动端口

浏览器地址栏启动
localhost:3000
本机IP:3000

四：默认端口更改

端口配置文件路径 ./bin/www

// 15行
var port = normalizePort(process.env.PORT || '3000');
// 3000可改！！

Express–创建的domo

项目初始文件目录

│  app.js
│  nodemon.json
│  package-lock.json
│  package.json
│
├─bin 
│      www  // 配置端口
│
├─public  // 放置前端文件
│  ├─images
│  ├─javascripts
│  └─stylesheets
│          style.css
│
├─routes   // 作为服务端，接收处理前端Ajax的请求
│      index.js
│      users.js
│
└─views   //了解
        error.jade   //模板引擎
        index.jade
        layout.jade

这是一个简单 node.js后端发送数据给前端的例子

使用上诉的 express 框架搭建的项目文件快速构架一个 node.js 的后端

在app.js文件引入 express

（这是用于控制 node.js 中的环境配置的主要文件）

写入如下内容

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

//连接数据库----------------有顺序要求
require('./dao/database.js');

//引入路由-------------------
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var studentsRouter = require('./routes/students');
var teachersRouter = require('./routes/teachers');
var classesRouter = require('./routes/classes');
var imagesRouter = require('./routes/images');
var usersRouter = require('./routes/users');

//引入token验证-----------------有顺序要求
const jwtAuth = require('./utils/jwt.js');

var app = express();

//开启跨域
var allowCrossDomain = function (req, res, next) {
    // 设置允许哪一个源（域）可以进行跨域访问，* 表示所有 源（可指定）
    res.header("Access-Control-Allow-Origin", "*");
    // 设置允许跨域访问的 请求头
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept,Authorization");
    // 设置允许跨域访问的 请求类型
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    // 设置允许 cookie 发送到服务器 
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
};
app.use(allowCrossDomain); // 使用该跨域的 中间件函数

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//配置并使用token验证-----------------有顺序要求
app.use(jwtAuth);

//配置后端一级路由---------------------
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/students', studentsRouter);
app.use('/teachers', teachersRouter);
app.use('/classes', classesRouter);
app.use('/images', imagesRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

// module.exports = app;
app.listen(3000, err =>{
  if(err) console.log('error:',err);
  else console.log('3000端口成功启动')
})

创建接口层 router （即服务器暴露给前端的接口）

对应的使用了三层架构三层架构详解_潘小蓝的博客-CSDN博客

router 数据业务层的接口暴露

业务层的接口暴露–使用 send 发送数据

//路由文件要配置express，和 express.Router()
//暴露路由
var express = require('express');
var router = express.Router();
module.exports = router;


//引入服务层--------------------------------------------------
//引入服务层--------------------------------------------------
const {
	addClass,
	getClasses,
} = require('../service/ClassesService.js');


//获取所有班级信息
router.get('/getClasses', async function (req, res){
    const data = await getClasses();
    res.send(data);
})

//新增班级信息
router.post('/addClass', async function (req, res){
    const data = await addClass(req.body);
    res.send(data);
})

业务层的数据处理

const {
	addClass,
	getClasses,
} = require('../dao/ClassesDao.js');

//获取所有班级信息
module.exports.getClasses = async function(){
	const data = await getClasses();
	return {
		message:'获取所有班级信息成功',
		status:1,
		data
	}
}

//新增班级信息
module.exports.addClass = async function(params){	
	//params.teachers={name，teachers}
	//name 班级name，teachers （undefined 或String 或Array）
	// 老师的情况有: //空的时候 undifined 不通过 //一个老师 String 通过 //两个及以上 Array 通过
	//直接使用 params.teachers 判断
	if(params.name && params.teachers){
		const data = await addClass(params);
		return {
			message:'添加班级信息成功',
			status:1,
			// data
		};	
	}else{
		return{
			message:'请确认班级信息和老师信息不为空',
			status:0		
		}
	
	}	
}

持久层的数据库操作

//引入model
//引入model 一定要解构来引入 
const {classesModel} = require('./models/classesModel');
const {studentsModel} = require('./models/studentsModel');


// ========================================= 版本一 
/// //获取所有班级信息
// module.exports.getClasses = async function(){
// 	const result = await classesModel
// 	.find()
// 	.populate({path:'teachers'});
// 	return result;
// }

// //新增班级信息
// module.exports.addClass = async function(params){
// 	const result = await classesModel.create(params);
// 	return result;
// }


// //获取某个班级的学生个数
// module.exports.getClassStudentCount = async function(params){
// 	console.log(this)
// 	// const count = await this.getClasses();
// 	// console.log(count)
//     // const result = await studentsModel.countDocuments({classId:_id});
//     // return result;
// }


/// 版本二 =================================================================
module.exports={
	//获取所有班级信息
	getClasses: async function(){
		const result = await classesModel
		.find()
		.populate({path:'teachers'});


		//遍历班级个数
		for(let i=0; i<result.length; i++){
			//！！！！取出班级id，以对象形式存入result对应的班级数组
			
			//result 中 class中_id 是 new ObjectId() 对象类型
			//将 new ObjectId() 转换成字符串
			const classId = (result[i]._id).toString();

			//利用classIdData通过studentsModel获取每个班的人数
			const classTotalStudent = await studentsModel.countDocuments({classId});

			result[i] = {
				//注意 mongoose 方法 返回的查询后对象中 ._doc 才是查询值 result[i]
				...result[i]._doc,
				classTotalStudent
			}
		}
		return result;
	},

	//新增班级信息
	addClass: async function(params){
		const result = await classesModel.create(params);
		return result;
	},

}

前台访问接口获取数据

此处是本地文件（前端页面文件写在 public中）的接口直接访问 app.js 配置中暴露的接口

//获取所有班级信息
function getClasses(){
	$.ajax({
		url:'/classes/getClasses',
		type:'get',
		// data,
		success(res){
			console.log(res);

			if(res.status){
				//使用渲染函数
				renderClasses(res.data);
			}else{
				alert('未知错误，请检测网络，或刷新页面！');
			}
		}
	})
}

项目源码

SAM9029 / Vue-student-system

https://gitee.com/sam9029/vue-student-system.git

🦖我是Sam9029，一个前端

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

cover

动物识别系统 python实现+UI

腾讯云开发者社区

Linux下安装MySQL8.0(超详细)

Linux下安装MySQL8.0(超详细)

腾讯云开发者社区

cover

光模块问题查看并保证光模块收发功率

腾讯云开发者社区

所有评论(0)

查看更多评论

Sam9029

已为社区贡献3条内容