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

    🦖我是Sam9029，一个前端

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

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

    思路

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

    在项目中 安装

    npm i express

    • 1

    通过 express 服务器 写接口

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

    文章目录

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

    npm init -y

    • 1

    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

    • 1

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

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

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

    npm i -g express-generator

    • 1

    Express 项目创建

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

    一：命令创建

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

    • 1
    • 2

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

    #目标文件路径 cmd 中
npm i

    • 1
    • 2

    三：启动项目

    #默认启动3000端口
npm start

    • 1
    • 2

    拓展：启动端口

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

    • 1
    • 2
    • 3

    四：默认端口更改

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

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

    • 1
    • 2
    • 3

    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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    这是 一个简单 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端口成功启动')
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81

    创建接口层 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);
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 业务层的数据 处理
    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		
		}
	
	}	
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 持久层的 数据库操作
    //引入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;
	},

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    前台访问接口 获取数据

    • 此处是 本地文件（前端页面文件写在 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('未知错误，请检测网络，或刷新页面！');
			}
		}
	})
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    项目源码

    SAM9029 / Vue-student-system

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

    🦖我是Sam9029，一个前端

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

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

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

  • 相关阅读:
    Linux---编辑器vim的认识与简单配置
    神经网络梯度爆炸与梯度消失及其解决方法＋实例
    远程登录sshd服务
    Docker安装与应用全套讲解
    【ASP.NET Core】应用脱机文件 (app_offline.htm)
    Netty+SpringBoot 打造一个 TCP 长连接通讯方案
    Biotin-NHS LC（72040-63-2）生物素接头|站点特定探针
    @requestmapping注解的作用及用法
    docker编译一个支持flv的nginx镜像
    问题：EventSource 收不到流数据及 EventSource 的 onmessage 方法为null
  • 原文地址：https://blog.csdn.net/m0_61486963/article/details/127817654