node通过express搭建自己的服务器


Posted in Javascript onSeptember 30, 2017

前言

为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据。这次我采用express框架去写API接口。所有请求都是通过ajax请求去请求服务器来返回数据。第一次用node写后端,基本就是摸着石头的过河,文中有什么不足不处欢迎指出。

安装express框架

传送门: express官方

然后介绍一下需要引入的中间件,node本身提供了一些库。我们可以直接通过require去引用,对于未提供的库,我们也可以通过手动npm去安装

var fs = require('fs'); 操作文件模块
var http = require('http'); http模块
var url = require('url');  获取url信息模块
var qs = require('querystring'); 处理url参数模块
var path = require('path'); 文件路径模块
var bodyParser = require('body-parser'); 请求体对象化 (必须)否则后台无法解析前端发送的body内容

接下来直接启用模块

app.use(bodyParser.json());

// 访问静态资源文件 这里是访问所有dist目录下的静态资源文件
app.use(express.static(path.resolve(__dirname, '../dist')))
app.use(express.static('public'));

// 因为是单页应用 所有请求都走/dist/index.html
app.get('/', function(req, res) {
 const html = fs.readFile(path.resolve(__dirname, '../dist/index.html'), 'utf-8');
 res.send(html)
});

//处理请求跨域

app.all('*', function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 res.header("Content-Type", "application/json;charset=utf-8");
 res.header("Access-Control-Allow-Headers", "content-type");
 next();
});

准备工作做完可以开始动手写接口了。关于数据库可以模拟一个json,也可以真实模拟上线数据库。

下面会划成3块说明——数据库的对接、请求的操作、文件请求的操作。

数据库连接

这里我假设你已经安装了mongodb数据库并成功启用。仔细阅读express教程你会发现框架提供了对mongodb的支持,mongodb有非常多的扩展插件去使用该数据库 比如mongoose。这里我们使用express官方提供的mongoskin来链接数据库。

$ npm install mongoskin

#####官方实例

var db = require('mongoskin').db('localhost:27017/animals');

db.collection('mamals').find().toArray(function(err, result) {
 if (err) throw err;
 console.log(result);
});

安装成功后 ,我们就首先把使用的数据库引入,代码如下

var db = require('mongoskin').db('mongodb://localhost:27017/blog');
var ObjectId = require('mongodb').ObjectID;

以上代码表示我们成功连接了blog数据库并且启用了私有ID,objectID是mongodb生成数据自动添加的ID。可以直接拿来用。到这里数据库和服务器就已经对接完毕了。

对前端发送的请求进行处理

处理get请求

/**
 * 获取文章信息
 */
app.get('/article/info', function (req, res) {
 >>> 获取请求参数
 var arg = qs.parse(url.parse(req.url).query);
 var id = arg.id;
 >>> 链接数据库根据参数查找文档并返回
 db.collection('articleList').find({ "_id": ObjectId(id)}).toArray(function(err, result) {
  if (err) throw err;
  console.log(result)
  res.end(JSON.stringify(result))
 });
});

以上代码就实现了对一个get请求的处理,通过参数模块获取了url的参数,db也就是已经连接的数据库。根据ID对‘articleList'的数据表进行搜索,处理完毕后 通过res.end()返回数据结束响应。

处理post请求

/**
 * 提交留言信息
 */
app.post('/board/post', function (req, res) {
 >>>> 获取请求参数
 var data = {
  date: req.body.date,
  name: req.body.name,
  content: req.body.content,
  time: req.body.time,
  position: req.body.position
 };
 
 >>> 链接数据库并插入数据
 
 db.collection('board').insert(data, function(err, result) {
  if(err) {
   res.end('Error:'+ err)
  }
  res.end('提交成功')
 });
});

post请求的参数获取和get不同 可以直接通过req.body去获取前端传输的请求体。通过js对象的方式去获取参数。然后根据参数执行数据库操作。到此,基本的请求也就介绍完毕了。下面说下怎么处理图片的上传此类常见的文件操作需求。

对前端的文件请求进行处理

为了简化操作,我们可以引入multer模块来处理文件,代码如下

var multer = require('multer');
var storage = multer.diskStorage({
 //设置上传后文件路径,uploads文件夹会自动创建。
 destination: function (req, file, cb) {
  cb(null, './public/uploads')
 },
 //给上传文件重命名,获取添加后缀名
 filename: function (req, file, cb) {
  var fileFormat = (file.originalname).split(".");
  cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
 }
});
//生成上传模块,让API调用
var upload = multer({
 storage: storage
}).single('file');

以上代码就成功引入了文件上传模块,通过该模块我们可以快速生成相应内容,具体使用方法可以查看官方文档。准备工作完成后,在项目中使用:

/**
 * 图片上传
 */
app.post('/upload', function (req, res) {
 upload(req, res, function (err) {
  if (err) {
   console.log(err)
   return
  }
  console.log(req.file)
  res.end(JSON.stringify(req.file))
 })
});

//图片上传到服务器 ,向客户端返回文件信息
  比如文件的存储位置,之后就可以通过地址访问服务器的图片

/**
 * 图片删除
 */
app.post('/image/delete', function (req, res) {
 fs.unlink(req.body.path, function(err) {
  if (err) {
   return console.error(err);
  }
  res.end("文件删除成功!");
 });
});

这里上传图片我们就直接使用了直接之前已经写好的upload模块,当该接口请求成功时 ,文件就已经上传成功了,如果你需要一个预览过程,那不应该直接调用上传接口 。通过原生node fs模块 我们也能对添加的文件进行删除,修改操作。

上线以及上线后遇到的history模式的刷新问题

上线过程我们可以当作就是换一台电脑跑程序,这里我用的是阿里云的服务器。在云服务器安装好环境好,把项目克隆进去 ,再装个forever之类的永久运行库,start ~ok 这样你的项目就永远在运行了。如果需要www访问 ,还需要买个dns解析 和域名,指向你的服务器。

以上我们如果在本地跑项目基本已经可以没问题。但项目上线后一刷新。啊啦??404什么鬼?打开百度一查。那炉火多~~当前端启用hisory模式,后台也必须开启对history的支持。express 环境如下:

var history = require('connect-history-api-fallback');
var connect = require('connect');
///////
app.use(history());

更新代码刷新~OK 完美!

总结

想学好一样东西,需要长久的积累。作为一个前端,一些服务器数据库的知识除了可以帮助我们更好的跟兄弟(后端)交流,对前端来说也是如鱼得水一般的存在。

下一篇文章准备写electron入门,electron是通过js构建桌面应用的框架,。共勉~~~~~

Github:https://github.com/xu455255849/myBlog

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
Javascript节点关系实例分析
May 15 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
react-native中ListView组件点击跳转的方法示例
Sep 30 #Javascript
详解在Vue中有条件地使用CSS类
Sep 30 #Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 #Javascript
vue按需引入element Transfer 穿梭框
Sep 30 #Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 #Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
JS设计模式之数据访问对象模式的实例讲解
Sep 30 #Javascript
You might like
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
canvas时钟效果
2017/02/16 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
Vuex新手的理解与使用详解
2019/05/31 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
使用Python处理BAM的方法
2018/09/28 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python3.6数独问题的解决
2019/01/21 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
如何解决python多种版本冲突问题
2020/10/13 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
python包的导入方式总结
2021/03/02 Python
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
国贸专业个人求职信范文
2014/01/08 职场文书
大学生党员自我批评
2014/02/14 职场文书
毕业证代领委托书
2014/09/26 职场文书
老人节标语大全
2014/10/08 职场文书
机动车登记业务委托书
2014/10/08 职场文书
工程款催款函
2015/06/24 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL