Express를 통해 서버를 구축하는 노드의 예

이 기사에서는 Express를 통해 자체 서버를 구축하는 노드를 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 살펴보겠습니다

머리말

시뮬레이션 프로젝트를 시작하려면 데이터를 호출할 수 있는 API를 제공하는 서버가 필요합니다. 이번에는 Express 프레임워크를 사용하여 API 인터페이스를 작성했습니다. 모든 요청은 데이터를 반환하기 위해 서버에 대한 ajax 요청을 통해 이루어집니다. 노드를 사용하여 백엔드를 작성하는 것은 기본적으로 돌을 느끼면서 강을 건너는 것과 같습니다. 기사에 부족한 점이 있으면 지적해 주세요.

Express 프레임워크 설치

Portal: expressofficial

그럼 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 데이터베이스를 설치하고 성공적으로 활성화했다고 가정합니다. 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;

위 코드는 블로그 데이터베이스에 성공적으로 연결하고 비공개를 활성화했다는 의미입니다. ID. objectID는 mongodb에 의해 자동으로 생성되는 데이터입니다. 직접 사용할 수 있습니다. 이제 데이터베이스와 서버가 연결되었습니다.

프런트 엔드에서 보낸 요청 처리

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("文件删除成功！");
 });
});

여기에 사진을 업로드하려면 이전에 작성한 업로드 모듈을 직접 사용합니다. 인터페이스 요청이 성공하면 파일이 성공적으로 업로드된 것입니다. 미리보기 프로세스가 필요한 경우 업로드 인터페이스를 직접 호출하면 안 됩니다. 기본 노드 fs 모듈을 통해 추가된 파일을 삭제하고 수정할 수도 있습니다.

온라인 접속 후 발생하는 기록 모드의 새로 고침 문제

온라인 프로세스는 프로그램을 실행하기 위해 컴퓨터를 변경하는 것으로 생각할 수 있습니다. 여기서는 Alibaba Cloud 서버를 사용하고 있습니다. 클라우드 서버에 좋은 환경을 설치하고, 여기에 프로젝트를 복제하고, 영원히와 같은 영구 런타임 라이브러리를 설치하고, 시작 ~ 확인하면 프로젝트가 항상 실행됩니다. www 액세스가 필요한 경우 서버를 가리키는 DNS 확인 및 도메인 이름도 구입해야 합니다.

위 프로젝트를 로컬에서 실행한다면 기본적으로 문제가 없을 것입니다. 하지만 프로젝트가 온라인 상태가 된 후에는 새로 고쳐질 것입니다. 뭐? ? 404 도대체 뭐야? Baidu를 열고 찾아보세요. 엄청나네요~~ 현재 엔드에서는 히스토리 모드가 활성화되어 있고, 백엔드에서도 히스토리 지원이 활성화되어야 합니다. Express 환경은 다음과 같습니다.

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

업데이트 코드 새로고침~ OK 완벽!

요약

뭔가를 잘 배우고 싶다면 장기적인 축적이 필요합니다. 프런트엔드로서 서버 데이터베이스에 대한 일부 지식은 형제(백엔드)와의 더 나은 의사소통에 도움이 될 뿐만 아니라 프런트엔드에게는 물 속의 물고기와도 같습니다.

위 내용은 Express를 통해 서버를 구축하는 노드의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!