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

前言

为了模拟项目上线,我们就需要一个服务器去提供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

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

(0)

相关推荐

  • Express与NodeJs创建服务器的两种方法

    目录 NodeJs创建Web服务器 Express创建Web服务器 NodeJs创建Web服务器 var http = require('http'); var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.write('hello world!'); res.end(); }).listen(80); 这是一个原生式的创建一个we

  • 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

    本文改自非鱼的<[翻译]前端开发人员入门指南,从零开始搭建Node.js, Express, Jade, Mongodb服务器>,之所以把Jade换成Ejs,是因为我觉得ejs更符合WEB编程人员的习惯,更确切说应该是更符合PHP.ASP程序员的使用习惯.好了,废话不多说,直接开始教程. 第1部分 – 15分钟安装 如果你真的是从零开始学,那就花点时间先把环境搭建起来吧.这不难,我用的是Win8,所以这看上去跟那些用Mac和Ubuntu或者其它*nix系统的教程有点区别,不过大致是一样的. 第

  • 用用outlook Express 由于服务器拒绝接受发件人的电子邮件地址,这封邮件无法发送

    由于服务器拒绝接受发件人的电子邮件地址,这封邮件无法发送.发件人的电子邮件地址是"hcs___168@163.com". 主题 '尝学版', 帐户: 'pop3.163.com', 服务器: 'smtp.163.com', 协议: SMTP, 服务器响应: '553 authentication is required,smtp3,wKjRDUYA+QLQRltED6_JAg==.51785S2', 端口: 25, 安全(SSL): 否, 服务器错误: 553, 错误号: 0x800C

  • vue 打包后的文件部署到express服务器上的方法

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins

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

    前言 为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据.这次我采用express框架去写API接口.所有请求都是通过ajax请求去请求服务器来返回数据.第一次用node写后端,基本就是摸着石头的过河,文中有什么不足不处欢迎指出. 安装express框架 传送门: express官方 然后介绍一下需要引入的中间件,node本身提供了一些库.我们可以直接通过require去引用,对于未提供的库,我们也可以通过手动npm去安装 var fs = require('fs'); 操作文件模

  • 使用express搭建一个简单的查询服务器的方法

    本文介绍了使用express搭建一个简单的查询服务器的方法,分享给大家,具体如下: 使用到的技术栈有express.mysql. 项目结构: service --node_modules --app.js --query.js app.js支持调用服务,使用body-parser对request进行处理. query.js实现链接数据库以及查询数据库的功能. app.js代码如下: var express = require('express'); var query = require('./

  • node.js express安装及示例网站搭建方法(分享)

    1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g express npm install -g express-generator 2.创建一个示例工程 windows cmd依次输入如下命令: cd C:\Program Files\nodejs\node_global express -e microblog //即ejs,-j(即jade) cd microblog npm i

  • 利用node.js本地搭建HTTP服务器

    我们的目的比较简单,利用node.js在本地搭建HTTP服务器,实现hello word. 系统环境: win7 64bitIP:127.0.0.1Node.js:v6.10.2Npm:3.10.10Git:2.12.2.2-64-bit 基本安装: 1.Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ Git下载地址为:https://git-scm.com/download/win. 2.按照安装提示操作即可,选择安装路径.npm. 3.环

  • 从零学习node.js之搭建http服务器(二)

    前言 在上篇文章中我们了解了一下不同模块规范之间的联系与区别.本文我们正式开始node的学习,首先我们从搭建一个http服务器,能运行简单的程序开始说起. 一.hello world 最经典的hello world.首先我们创建一个server.js来保存我们的代码: console.log( 'hello world' ); 在终端输入node server.js运行: node server.js 终端就会输出 hello world 的字样.可是我们一个node服务器程序,总是要在浏览器上

  • 教你用Node.js与Express建立一个GraphQL服务器

    目录 前言 GraphQL服务器配置设置 定义模式 嘲弄我们的数据 定义解析器 定义突变 总结 前言 在这篇文章中,我们将对使用Node.js和Express建立GraphQL服务器的整个过程进行演练.我们将使用 Express 的中间件库express-graphql 来协助我们完成这一过程. 如果你还不熟悉GraphQL以及我们使用它的目的,请务必查看这篇文章,我们将深入了解GraphQL是什么以及为什么我们应该在我们的应用程序中使用它. 如果你已经熟悉它了,你可能想看看这篇文章,在这篇文章

  • Node.js创建Web、TCP服务器

    使用http模块创建Web服务器 Web服务器的功能: 接受HTTP请求(GET.POST.DELETE.PUT.PATCH) 处理HTTP请求(自己处理,或请求别的程序处理) 做出响应(返回页面.文件.各类数据等) 常见的Web服务器架构: Nginx.Apache:负责接受HTTP请求,确定谁来处理请求,并返回请求的结果 php-fpm / php模块:处理分配给自己的请求,并将处理结果返回给分配者 常见请求种类: 请求文件:包括静态文件(网页.图片.前端JavaScript文件.css文件

  • nodejs+express搭建多人聊天室步骤

    前言 本文主要是笔者在学习node的时候,作为练手的一个小项目,花了几天空余时间,边码边写教程的一个过程.适用于对node理论知识看的多,实战少的同学,那么现在就让我们开始吧! 准备工作 新建一个文件夹 chatroom 在终端输入以下命令,按照步骤npm(没装过的去官网安装下node和npm)会自动给你生成一个package.json文件 安装express和socket.io package.json文件如下: //package.json { "name": "chat

  • Node.js Express安装与使用教程

    之前我们在安装完Node.js后直接写了个HelloWorld网站,这次呢,我们使用Node.js的Web框架Express来重写一下HelloWorld,看看有什么不同.同时我们还会重写之前的文件服务器,功能更完善而代码更简洁. 安装 express 为了重写我们的HelloWorld,我们需要安装Express模块.Express基于Node.js的一个Web框架,官方网站在这里:http://expressjs.com/.官网对Express的介绍是: Fast, unopinionate

  • Node后端Express框架安装及应用

    目录 其中Express 框架核心特性: Express安装 方式一:安装express-generator 创建项目 项目目录如下 方式二: 自己搭建环境 express 初体验 请求和响应 返回数据 Express 中间件 认识中间件 中间是什么? 中间件中可以执行哪些任务? 使用中间件 日志记录中间件 上传文件中间件 请求和响应 请求解析 方式一:params 方式二:query 方式三:通过post请求中的body的json格式: 方式四:通过post请求中 方式五:通过post请求中的

随机推荐