🦖我是Sam9029,一个前端
Sam9029的CSDN博客主页:
**🐱🐉🐱🐉恭喜你,定制小程序开发若此文你认为写的不错,定制小程序开发不要吝啬你的赞扬,求收藏,求评论,定制小程序开发求一个大大的赞!👍**
思路
可以 使用 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 setupapp.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 handlerapp.use(function(req, res, next) { next(createError(404));});// error handlerapp.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 (即服务器 暴露 给前端的 接口 )
对应的 使用 了 三层架构
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
项目源码
/
https://gitee.com/sam9029/vue-student-system.git
🦖我是Sam9029,一个前端
文章若有错误,敬请指正🙏
**🐱🐉🐱🐉恭喜你,都看到这了,求收藏,求评论,求一个大大的赞👍!不过分吧**
Sam9029的CSDN博客主页: