文章目录
- 前言
- 一、使用Node+Express创建服务,利用EXpress路由进行模块划分?
- 1.引入Express搭建服务
- 2.利用路由进行后端模块划分
- 二、连接数据库
- 1.引入mongoose插件
- 2.进行按照模块进行二次封装、创建对应数据表Schema模板
- 3.按照需求书写接口
- 三、前端调用接口(前端主要用Vue3.0+axios实现)
- 1.Vue3.0中引入axios
- 2.接口调用
- 总结
前言
这篇文章主要给大家介绍如何使用Node搭建后台服务,并利用Express框架、mongose来操作数据库、完成后台系统所需的接口,实现全栈开发。
一、使用Node+Express创建服务,利用EXpress路由进行模块划分?
1.引入Express搭建服务
Express 是基于Node.js的HttpRequest模块的一个插件,类似的插件还有koa、egg等等,这次选择Express的主要原因是因为Express相对其他两者对于初学者来说,更易理解、更易上手。
关于Express创建服务我在之前的很多文章中都有介绍大家可以参考以下文章、进行操作,在这里就不做过多的赘述。
- 如何使用Node搭建一个属于自己的服务器
2.利用路由进行后端模块划分
着重给大家介绍如何利用Express的router模块,对项目进行路由划分以及如何实现对同模块的封装。
首先我们要先新建一个router文件夹,然后根据项目的需求创建对应的路由文件,比如:我这后台项目主要分三个主要导航(商品信息管理、新闻管理、权限管理),我会将后台划分成这三个主要的模块然后创建对应的js文件,这样我们路由的基本模型就ok了,然后再index.js中利用Express的路由进行划分。
const express = require('express')
//获取前端传参插件
const bodyParser = require('body-parser');
//创建服务
const app = express()
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// 获取请求参数
app.use(bodyParser.urlencoded({
extended: true
}));
// 定义参数的格式
app.use(bodyParser.json());
// 配置路由模块
//路由模块
// 权限模块接口
const admin = require('./router/admin');
// 商品模块接口
const goods = require('./router/goods');
// 新闻资讯模块
const news = require('./router/news')
// 管理权限模块
app.use('/admin',admin);
// 商品模块
app.use('/goods',goods);
// 新闻资讯
app.use('/news',news)
app.listen(3001,()=>console.log('服务器启动成功'))
在对应的路由文件中适应Express路由,比如权限模块admin.js中
const express = require('express');
//使用路由模块
const admin = express.Router();
const adminDB = require('../module/admin')
admin.get('/list', (req, res) => {
res.send('admin用户列表页');
})
module.exports = admin;
大体项目目录如下:
按照不同的功能点进行模块划分,会让你的项目后期维护变得很简单
二、连接数据库
1.引入mongoose插件
数据库这个项目选择的收mongdb,选择mongdb的主要原因是因为这个项目对性能的要求比较高,众所周知,mongodb是非关系数据库,最大的优势就是再处理高并发方面有先天优势。。
为什么选择mongoose插件,因为mongoose插件相对mongoCLient插件无论是再使用上还是理解上都相对简单,所以果断放弃了mongoClient插件
// 引入mongose
const mongose = require('mongoose')
// 建立连接
const url = "mongodb://localhost:27017/nuxt"
mongose.connect(url,{useNewUrlParser:true,useUnifiedTopology:true},function(err){
if(err){
console.log(err);
return
}
console.log("数据库链接成功");
})
module.exports = mongose
2.进行按照模块进行二次封装、创建对应数据表Schema模板
对数据库连接在项目中的使用频率是非常高的,所以建议进行二次封装,并且在操作mongodb时,我们也需要创建对应的Schema模板,建立Schema模板的主要原因时Schema模板可以让我们的数据库操作变得更加的规范、安全。
比如:我们的新闻列表Schema模板:
var mongoose = require('./db')
// 新闻的Schema
var newSchema = mongoose.Schema({
title:String,
type:Number,
content:String,
auth:String,
reder:Number,
type_desc:String
})
//使用Schema模板进行数据库连接
var newModel = mongoose.model('News',newSchema,'news')
module.exports = newModel
二次封装的大体目录:
db.js中主要存放连接数据可的代码,其他的文件主要定义我们操作数据库需要的Schema模板。
3.按照需求书写接口
根据页面以及需求文档进行接口编写,接口主要就书写在router文件中对应的路由文件。
以新闻模块的部分接口为例展示:
//请求、响应模块引入
const { response, request } = require('express');
const express = require('express')
//使用路由
const newsExpress = express.Router();
// 引入news连接数据库模块
const newsMoedl = require('../module/news')
// 引入newsType连接数据库模块
const newType = require('../module/newType')
// 返回数据的模板格式
const Templete = require('./templete')
// 获取新闻分頁列表
newsExpress.get('/newsList', (request, response) => {
// 获取前端传递的分页参数
let pageCurrent = parseInt(request.query.pageCurrent)
let pageSize = parseInt(request.query.pageSize)
// 连接News模块数据库
newsMoedl.find({}).skip(pageSize*(pageCurrent-1)).limit(pageSize).exec(function (err, res) {
// 连接出错
if (err) {
// 打印错误日志
console.log(err);
return
}
Templete.pageCurrent = pageCurrent
Templete.pageSize = pageSize
Templete.total = res.length
// 将数据返回给前端
Templete.data = res
response.send(Templete)
})
})
// 根据不同的新闻类型进行展示 1
newsExpress.get('/newsType', (request, response) => {
// 获取前端传递的分页参数
let pageCurrent = parseInt(request.query.pageCurrent)
let pageSize = parseInt(request.query.pageSize)
// 获取前端路由参数 (id)
let type = request.query.type
// 连接数据库,根据id查找
newsMoedl.find({ 'type': type }).skip(pageSize*(pageCurrent-1)).limit(pageSize).exec(function (err, res) {
// 连接错误
if (err) {
console.log(err);
return
}
// 将数据返回给前端
Templete.pageCurrent = pageCurrent
Templete.pageSize = pageSize
Templete.total = res.length
Templete.data = res
response.send(Templete)
})
})
// 获取新闻类型列表
newsExpress.get('/typeList', (request, response) => {
newType.find({}, function (err, res) {
// 连接出错
if (err) {
// 打印错误日志
console.log(err);
return
}
console.log(res);
// 将数据返回给前端
Templete.data = res
response.send(Templete)
})
})
module.exports = newsExpress
主要就是一些分页、详情、修改接口的书写,没有过于复杂的接口实现。
还有商品管理模块一些简单的接口实现,后期会不断的进行更新
// 路由模块
const express = require('express')
const goods = express.Router();
// 连接数库模块
const goodsModel = require('../module/goods')
// 返回数据的模板格式
const Templete = require('./templete')
goods.get('/goodslist', (request, respone) => {
// 分页查询数据
// 获取前端传递的分页参数
let pageCurrent = parseInt(request.query.pageCurrent)
let pageSize = parseInt(request.query.pageSize)
// 连接News模块数据库
goodsModel.find({}).skip(pageSize*(pageCurrent-1)).limit(pageSize).exec(function (err, res) {
// 连接出错
if (err) {
// 打印错误日志
console.log(err);
return
}
Templete.pageCurrent = pageCurrent
Templete.pageSize = pageSize
Templete.total = res.length
// 将数据返回给前端
Templete.data = res
response.send(Templete)
})
})
module.exports = goods
三、前端调用接口(前端主要用Vue3.0+axios实现)
1.Vue3.0中引入axios
在Vue3.0中引入axios,并利用axios进行数据请求,获取Node服务数据,实现前后端数据交互
这里没有对axios进行二次封装,这个项目的主要目的是为了学习Node写后端所以前端部分写的比较简单
npm install axios --save
安装完成之后之间在页面进行引入
import {baseUrl} from '../../axios/apiConfig'
import axios from 'axios'
apiConfig.js文件内容,以后肯定还是要对其进行封装
export const baseUrl = 'http://localhost:3001'
2.接口调用
这是接口调用
// 获取数据
getData(){
axios.get(baseUrl+'/news/newsList').then(res=>{
this.tableData = res.data.data
})
}
页面渲染
这是我们mongodb中的数据库对比,没有遗漏的数据完全一致
这样我们就可以尽情发挥,写更多的接口,来对我们的数据库进行操作,并且可以模拟更多商业场景,来不断捶打自身的技术,希望大家早日成为一名全栈工程师。
总结
这篇文章给大家介绍使用Node搭建全栈开发平台,可以对自身的技术有很大的提升,也可以扩宽自己的知识面。希望大家看完之后有所收获。。