0
0

快速入门 NodeJS 之『搭建Web服务器』（搭建个人博客相关）

一.搭建开发环境

1.创建一个空文件夹，在vscode中打开

2.开启package文件，因为需要用到npm包

  1.       **npm init -y **

3.创建bin文件夹，也就是程序运行最开始访问的文件夹

4.www.js创建服务器

  1. //创建服务器
  2. const http = require('http');
  4. //将服务器回调函数引入
  5. const serverHandler = require('../app')
  6.     //端口
  7. const PORT = 5000;
  9. const server = http.createServer(serverHandler);
  11. server.listen(PORT, () => {
  12.     // 监听成功执行的回调
  13.     console.log('server running at port 5000.....');
  14. })
  1.    将回调函数单独抽离出来，放在根目录文件app.js 
  1. //写回到函数，将createServer中的回调函数抽离了出来，目的是更好的维护
  2. const serverHandler = (req, res) => {
  3.     //这里面是服务器的业务代码
  5.     //1.设置返回的数据类型
  6.     res.setHeader('Content-Type', 'application/json')
  8.     //2.数据格式
  9.     const responseData = {
  10.         name: 'alva',
  11.         age: 21
  12.     }
  14.     res.end(
  15.         JSON.stringify(responseData)
  16.     )
  17. }
  19. module.exports = serverHandler;

5.启动服务器

  1.  **5.1启动前，将package.json中的main属性修改成bin/www.js设置启动入口**

** 5.2安装工具 **

** npm install nodemon -D**

5.3修改

"scripts": {

** "dev": "nodemon bin/www.js"**

** },**

  1. 当服务器代码发生改变时重新运行最新的代码

** 5.4.启动服务器**

** npm run dev**

6.在浏览器输入 http://locsalhost:5000

  1.      以上开发环境就已经搭建好了

二.路由配置

1.根目录创建src下的routes文件夹，里面创建blog.js文件

  1. //处理博客相关的路由,定义处理路由的逻辑
  2. const handleBlogRoute = (req, res) => {
  3.     const method = req.method;
  4.     const url = req.url;
  5.     const path = url.split('?')[0] //问号分割取前半段
  7.     //如果请求如下就返回下面的结果，这个结果会保存到blogData
  8.     if (method === 'GET' && path === '/api/blog/list') {
  9.         return {
  10.             message: '获取博客列表的接口'
  11.         }
  12.     }
  13. }
  14. module.exports = handleBlogRoute;

接着在服务器的业务代码中接收这个数据

  1.  res.setHeader('Content-Type', 'application/json')
  2.         //路由返回数据结果(将请求和响应传入)
  3.     const blogData = handleBlogRoute(req, res)
  4.     if (blogData) {
  5.         //如果拿到了，就结束请求，返回一个响应
  6.         res.end(
  8.         )
  9.     }

注意： 上面的代码中blogData是一个对象 ，但是服务器返回给浏览器的应该是字符串，所以应该进行转换

  1. if (blogData) {
  2.         //如果拿到了，就结束请求，返回一个响应
  3.         res.end(
  4.             JSON.stringify(blogData)
  5.         );
  6.         //响应之后，下面的代码不再执行，所以return一下
  7.         return;
  8.     }
  1.  **现在我们已经定义好了一个接口，就是 /api/blog/list**

我们尝试在浏览器进行访问

前端拿到这样的字符串就可以进行解析渲染到页面上

2.定义多个接口

  1.    if (method === 'GET' && path === '/api/blog/detail') {
  2.         return {
  3.             message: '获取博客详情的接口'
  4.         }
  5.     }
  6.     if (method === 'POST' && path === '/api/blog/new') {
  7.         return {
  8.             message: '新建博客的接口'
  9.         }
  10.     }
  11.     if (method === 'POST' && path === '/api/blog/update') {
  12.         return {
  13.             message: '更新博客的接口'
  14.         }
  15.     }
  16.     if (method === 'POST' && path === '/api/blog/delete') {
  17.         return {
  18.             message: '删除博客的接口'
  19.         }
  20.     }
  1. **2.2测试接口**

对于post请求的接口，由于请求体比较大，我们可以使用postman 或者apifox工具进行测试

3.处理错误请求

  1.     if (blogData) {
  2.         //如果拿到了，就结束请求，返回一个响应
  3.         res.end(
  4.             JSON.stringify(blogData)
  5.         );
  6.         //响应之后，下面的代码不再执行，所以return一下
  7.         return;
  8.     }
  10.     //如果不是上面的路由，就会返回下面的结果
  11.     res.writeHead(404, { 'Content-Type': 'text/plain' }); //无格式正文
  12.     res.write('404 Not Found');
  13.     res.end(); //终止响应

4.改造

这个handleBlogRoute只是关于博客的请求处理，如果我们还有别的路由请求需要处理可以进行如下操作

将下面的部分放到 服务器业务代码返回数据之前

  1.     const url = req.url;
  2.     const path = url.split('?')[0] //问号分割取前半段

放入后做改造

  1.     const url = req.url;
  2.     req.path = url.split('?')[0] //问号分割取前半段

在进行请求判断时，应该使用下面的写法 

  1. req.path==='/api/xxx'

三.响应数据格式优化

创建src目录下面的model文件夹，里面新建一个responseModel.js

  1. class BaseModel {
  2.     //构造函数
  3.     constructor(data, message) {
  4.         //数据可能是对象或者string，如果是string，直接message返回
  5.         if (typeof data == 'string') {
  6.             this.message = data
  7.             data = null
  8.             message = null
  9.         }
  10.         if (data) {
  11.             this.data = data
  12.         }
  13.         if (message) {
  14.             this.message = message
  15.         }
  16.     }
  17. }
  19. //根据基类，下面是成功与失败的模型
  21. class SuccessModel extends BaseModel {
  22.     constructor(data, message) {
  23.         super(data, message)
  24.         this.errno = 0;
  25.     }
  26. }
  28. class ErrorModel extends BaseModel {
  29.     constructor(data, message) {
  30.         super(data, message)
  31.         this.errno = -1;
  32.     }
  33. }
  35. module.exports = {
  36.     SuccessModel,
  37.     ErrorModel
  38. }

获取blog列表接口修改示例

  1.  **接口：**

/api/blog/list?author = zhansan&keyword=123

1.先拿到参数

  1.  req.path = url.split('?')[0] //问号分割取前半段
  2.         //解析query
  3.     req.query = querystring.parse(url.split('?')[1]);

2.返回数据改造

  1.   //如果请求如下就返回下面的结果，这个结果会保存到blogData
  2.     if (method === 'GET' && req.path === '/api/blog/list') {
  4.         const author = req.query.author || '';
  5.         const keyword = req.query.keyword || '';
  6.         const listData = getList(author, keyword); //根据参数获取数据
  7.         return new SuccessModel(listData)
  8.             // return {
  9.             //     message: '获取博客列表的接口'
  10.             // }
  11.     }

3.src下创建controller包，新建一个blog.js文件

  1. //博客相关的方法
  2. const getList = (author, keyword) => {
  3.     //从数据库里面拿数据
  4.     //先做假数据
  5.     return [{
  6.             id: 1,
  7.             title: '标题一',
  8.             content: '内容一',
  9.             author: '张三',
  10.             createAt: 161055518935 //date.now()获取的时间戳
  11.         },
  12.         {
  13.             id: 2,
  14.             title: '标题二',
  15.             content: '内容二',
  16.             author: '李四',
  17.             createAt: 161055535044 //date.now()获取的时间戳
  18.         }
  19.     ]
  20. }
  22. module.exports = {
  23.     getList
  24. }

4.测试

四.异步处理post请求数据

  1. const querystring = require('querystring')
  2. const handleBlogRoute = require('./src/routes/blog')
  4. //处理post数据
  5. const getPostData = (req) => {
  6.         const promise = new Promise((resolve, reject) => {
  7.             if (req.method !== 'POST') {
  8.                 resolve({})
  9.                 return;
  10.             }
  11.             if (req.headers['content-type'] !== 'application/json') {
  12.                 resolve({})
  13.                 return;
  14.             }
  16.             let postData = ''
  17.                 //返回的是数据段
  18.             req.on('data', (chunk) => {
  19.                 postData += chunk.toString();
  20.             })
  22.             req.on('end', () => {
  23.                 if (!postData) {
  24.                     resolve({})
  25.                     return;
  26.                 }
  27.                 resolve(JSON.parse(postData))
  28.             })
  29.         })
  30.         return promise;
  31.     }
  32.     //这里面是服务器的业务代码
  33. const serverHandler = (req, res) => {
  34.     //设置返回的数据类型(响应格式)
  35.     res.setHeader('Content-Type', 'application/json')
  36.         //获取path
  37.     const url = req.url;
  38.     req.path = url.split('?')[0] //问号分割取前半段
  39.         //解析query
  40.     req.query = querystring.parse(url.split('?')[1]);
  42.     //下面的函数返回的是一个promise,这是一个异步的过程，意思是这个还没走完代码就会往下执行别的步骤，
  43.     //这样可能会导致有些路由访问不到，因为数据还没处理完
  44.     getPostData(req).then(
  45.         (postData) => {
  46.             req.body = postData
  47.                 //路由返回数据结果(将请求和响应传入)
  48.             const blogData = handleBlogRoute(req, res)
  49.             if (blogData) {
  50.                 //如果拿到了，就结束请求，返回一个响应
  51.                 res.end(
  52.                     JSON.stringify(blogData)
  53.                 );
  54.                 //响应之后，下面的代码不再执行，所以return一下
  55.                 return;
  56.             }
  57.             //如果不是上面的路由，就会返回下面的结果
  58.             res.writeHead(404, { 'Content-Type': 'text/plain' }); //无格式正文
  59.             res.write('404 Not Found');
  60.             res.end(); //终止响应
  61.         }
  62.     )
  63. }
  65. module.exports = serverHandler;
  67. module.exports = serverHandler;
  1. **例如更新博客的路由**
  1. const handleBlogRoute = (req, res) => {
  2.     const id = req.query.id
  3.     const blogData = req.body
  4.     const method = req.method;
  5.     //如果请求如下就返回下面的结果，这个结果会保存到blogData
  6.     if (method === 'POST' && req.path === '/api/blog/update') {
  8.         const updatedBlogData = updatedBlog(blogData)
  9.         if (updatedBlogData) {
  10.             return new SuccessModel('更新博客成功')
  11.         }
  12.         // return {
  13.         //     message: '更新博客的接口'
  14.         // }
  15.     }
  16. }

上面的操作中，因为许多接口请求时都用到了id和数据，所以将它们提取出来

  1. **方法**
  2. //更新博客 blogData = {}是设置空对象，防止没有传
  3. const updatedBlog = (id, blogData = {}) => {
  4.     console.log('id', id);
  5.     console.log('blogData', blogData);
  6.     return true
  7. }

五.使用MySQL

1.在数据库中新建一个数据库，并创建blogs表

2.nodejs连接mysql-一个测试demo

1.创建index.js

2.终端进入mysql-demo

** npm init -y**

** npm install mysql**

3.index.js实现连接数据库

  1. const mysql = require('mysql')
  3. //创建连接对象
  4. const connection = mysql.createConnection({
  5.     host: 'localhost',
  6.     user: 'root',
  7.     password: '123456',
  8.     'port': 3306,
  9.     database: 'myblog'
  10. })
  12. //开始连接
  13. connection.connect();
  15. //执行sql语句
  16. const sql = `select * from blogs`
  18. connection.query(sql, (err, result) => {
  19.     if (err) {
  20.         console.error('error', err)
  21.         return;
  22.     }
  23.     console.log('result', result);
  24. })
  26. //关闭连接
  27. connection.end()

** 4.终端输入node index.js**

3.封装执行sql语句的工具函数

  1.  **src下面创建db文件夹，新建mysql.js文件**

** 终端输入 **

  1.  PS E:\node> **npm install mysql**
  3. **mysql.js**
  1. const mysql = require('mysql')
  3. //创建连接对象
  4. const connection = mysql.createConnection({
  5.     host: 'localhost',
  6.     user: 'root',
  7.     password: '123456',
  8.     'port': 3306,
  9.     database: 'myblog'
  10. })
  12. //开始连接
  13. connection.connect();
  15. //执行sql语句的函数
  16. function execSQL(sql) {
  17.     const promise = new Promise((resolve, reject) => {
  18.         connection.query(sql, (err, result) => {
  19.             if (err) {
  20.                 reject(err)
  21.                 return;
  22.             }
  23.             resolve(result)
  24.         })
  25.     })
  26.     return promise;
  27. }
  29. module.exports = {
  30.     execSQL
  31. }

测试获取列表接口

  1.  if (method === 'GET' && req.path === '/api/blog/list') {
  2.         const sql = `select * from blogs`
  3.         execSQL(sql).then(result => {
  4.             console.log(result);
  5.         })
  6.         const author = req.query.author || '';
  7.         const keyword = req.query.keyword || '';
  8.         const listData = getList(author, keyword); //根据参数获取数据
  9.         return new SuccessModel(listData)
  10.             // return {
  11.             //     message: '获取博客列表的接口'
  12.             // }
  13.     }

访问路由，控制台输出

完善请求接口

  1. const handleBlogRoute = (req, res) => {
  2.     const id = req.query.id
  3.     const blogData = req.body
  4.     const method = req.method;
  5.     //如果请求如下就返回下面的结果，这个结果会保存到blogData
  6.     if (method === 'GET' && req.path === '/api/blog/list') {
  7.         const author = req.query.author || '';
  8.         const keyword = req.query.keyword || '';
  9.         const listData = getList(author, keyword); //根据参数获取数据，这里返回的是一个promise对象
  10.        return listData.then(listData => {
  11.             return new SuccessModel(listData)
  12.         })
  13.     }
  1. //博客相关的方法
  2. const getList = (author, keyword) => {
  3.   //从数据库里面拿数据(根据用户以及关键字)
  4.     //由于我们要做拼接，改成let
  5.     let sql = `select * from blogs where`
  6.     if (author) {
  7.         sql += ` author =  '${author}' `
  8.     }
  9.     if (keyword) {
  10.         sql += `and title like '%${keyword}%' ` //模糊查询
  11.     }
  12.     return execSQL(sql)
  13. }

接下来在app.js文件中使用了handleBlogRoute的地方修改返回结果代码

  1.    req.body = postData
  2.                 //路由返回数据结果(将请求和响应传入)
  3.             const blogData = handleBlogRoute(req, res)
  4.             if (blogData) {
  5.                 //这是一个promise对象
  6.                 blogData.then(blogData => {
  7.                         //如果拿到了，就结束请求，返回一个响应
  8.                         res.end(
  9.                             JSON.stringify(blogData)
  10.                         );
  11.                     })
  12.                     //响应之后，下面的代码不再执行，所以return一下
  13.                 return;
  14.             }

注意 如果我们没有输入参数，会报错，因为我们的sql语句中where后面没有内容，语句错误，为避免这样的问题，我们可以进行下面的小技巧

  1.  let sql = `select * from blogs where 1=1`

标签： 前端 服务器 javascript
本文转载自: https://blog.csdn.net/m0_58467275/article/details/129465063
版权归原作者 亦菲小机灵 所有， 如有侵权，请联系我们删除。
登录后发布评论

“快速入门 NodeJS 之『搭建Web服务器』（搭建个人博客相关）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。