前言

为了模拟项目上线,我们就需要一个服务器去提供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,也可以真实模拟上线数据库。关于本文设计的mongodb数据库,有兴趣可以看我的另一篇文章

快速搭建属于自己的数据库——mongodb

下面会划成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构建桌面应用的框架,。共勉~~~~~

全部源码都在我的博客之中,对我的博客源码有兴趣,可以fork一份自行研究

如果觉得本文对你有所帮助,就star一下吧~大传送之术! 我的博客Github

通过express搭建自己的服务器的更多相关文章

  1. express搭建一个web服务器

    npm install express -g                           express这个库可以使用了. npm install express-generator -g   ...

  2. nodejs+express搭建小程序后台服务器

    本文使用node.js和express来为小程序搭建服务器.node.js简单说是运行在服务端的javascript:而express是node.js的一个Web应用框架,使用express可以非常简 ...

  3. 建立一个node.js服务器(使用express搭建第一个Web环境)

    一.官网下载node.js 下载地址:https://nodejs.org/en/download/ 根据向导,下一步安装就可以了! 二.使用express搭建Web环境 express是一个开源的n ...

  4. express搭建简易web的服务器

    express搭建简易web的服务器 说到express我们就会想到nodejs,应为它是一款基于nodejs平台的web应用开发框架.既然它是基于nodejs平台的框架那么就得先安装nodejs. ...

  5. express搭建服务器

    学习express搭建node服务器 一.安装express框架 1.了解框架(百度) 2.下载框架 (1)使用npm命令下载 npm install express -g //全局安装,安装的是ex ...

  6. vue打包之后在本地运行,express搭建服务器,nginx 本地服务器运行

    一.使用http-server 1.安装http-server npm install -g http-server 2.通过命令进入到dist文件夹 3.运行http-server 以上在浏览器输入 ...

  7. node + express 搭建服务器,修改为自动重启服务器

    1.使用express搭建一个项目,步骤如下(安装node步骤已省略) a.全局安装express-generator和express npm i express-generator -g npm i ...

  8. 使用Node.js搭建静态资源服务器

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...

  9. centos7搭建postfix邮件服务器

    在使用qq等邮件服务器厂商提供的邮件服务后,发现他们的邮件发送数量是有限制的,随着公司的业务的需求下,我们需要搭建一个邮件服务器,邮件服务器可以帮助我们在一些提醒方面和消息推送方面起到帮助. 理论性语 ...

随机推荐

  1. GCC和G++区别

    原文:http://www.cnblogs.com/samewang/p/4774180.html 看的Linux公社的一篇文章,觉得不错,内容复制过来了. 其实在这之前,我一直以为gcc和g++是一 ...

  2. 堆排序—Java

    堆排序: 一棵完全二叉树,如果父节点的值大于等于左右节点的值,则称此完全二叉树为小根堆(小顶堆):如果父节点的值小于等于左右节点的值,则次完全二叉树为大根堆(大顶堆). 堆排序是建立在大顶堆或小顶堆的 ...

  3. 使用 PUTTY 操作 Google Cloud

    目的: 使用putty连接Google Cloud 实例. 总说: 首先要用  PuTTYgen生成 private key  和 public key, 之后 登录Google Cloud 将生成的 ...

  4. hdu 3549最大流Ford-Fulkerson算法

    Ford-Fulkerson算法 戳戳http://www.cnblogs.com/luweiseu/archive/2012/07/14/2591573.html Ford-Fulkerson方法依 ...

  5. mysql添加外键约束变为索引

    今天有位自己填上一坑:mysql储存引擎 原因就是数据库表引擎为:MyISAM,建立主外键关系需要是InnoDB: 解决方案:alter  table table_name1  engine=inno ...

  6. JavaScript二维码生成——qrcode.js

    在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...

  7. 自制STP配置实验

    本图使用Gns模拟器 实验需求: 1.要求利用vtp实现vlan同步设置 2.要求vtp server实现备份冗余 3.创建vlan 1~10要求MLSW1 是奇数vlan主根 MLSW2 是偶数vl ...

  8. 结构体(struct)大小

    结构体(struct)大小 本文参考链接:C语言结构体(struct)常见使用方法,链接中的实例代码经实践有几处不准确,本文在引用时已做更改 注意:在结构体定义时不能申请空间(除非是结构体变量),不可 ...

  9. 201521123084 《Java程序设计》第3周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 本周学习总结 ...

  10. 团队作业8——第二次项目冲刺(Beta阶段)5.27

    1.当天站立式会议照片 会议内容: 本次会议为第七次会议 本次会议在陆大楼2楼召开,本次会议内容: ①:检查总结上次任务完成情况 ②:安排今天的分工 ③:对昨天的问题进行讨论 2. 每个人的工作 (有 ...