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

这篇具有很好参考价值的文章主要介绍了快速入门 NodeJS 之『搭建Web服务器』(搭建个人博客相关)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.搭建开发环境

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

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

          npm init -y 

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

4.www.js创建服务器

//创建服务器
const http = require('http');

//将服务器回调函数引入
const serverHandler = require('../app')
    //端口
const PORT = 5000;


const server = http.createServer(serverHandler);

server.listen(PORT, () => {
    // 监听成功执行的回调
    console.log('server running at port 5000.....');
})

       将回调函数单独抽离出来,放在根目录文件app.js 

//写回到函数,将createServer中的回调函数抽离了出来,目的是更好的维护
const serverHandler = (req, res) => {
    //这里面是服务器的业务代码

    //1.设置返回的数据类型
    res.setHeader('Content-Type', 'application/json')

    //2.数据格式
    const responseData = {
        name: 'alva',
        age: 21
    }

    res.end(
        JSON.stringify(responseData)
    )
}

module.exports = serverHandler;

5.启动服务器 

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

     5.2安装工具

       npm install nodemon -D

    5.3修改

"scripts": {

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

    },

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

   5.4.启动服务器

 npm run dev

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js  

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

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

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

二.路由配置

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

//处理博客相关的路由,定义处理路由的逻辑
const handleBlogRoute = (req, res) => {
    const method = req.method;
    const url = req.url;
    const path = url.split('?')[0] //问号分割取前半段

    //如果请求如下就返回下面的结果,这个结果会保存到blogData
    if (method === 'GET' && path === '/api/blog/list') {
        return {
            message: '获取博客列表的接口'
        }
    }
}
module.exports = handleBlogRoute;

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

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

        )
    }

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

if (blogData) {
        //如果拿到了,就结束请求,返回一个响应
        res.end(
            JSON.stringify(blogData)
        );
        //响应之后,下面的代码不再执行,所以return一下
        return;
    }

     现在我们已经定义好了一个接口,就是 /api/blog/list

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

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

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

2.定义多个接口

   if (method === 'GET' && path === '/api/blog/detail') {
        return {
            message: '获取博客详情的接口'
        }
    }
    if (method === 'POST' && path === '/api/blog/new') {
        return {
            message: '新建博客的接口'
        }
    }
    if (method === 'POST' && path === '/api/blog/update') {
        return {
            message: '更新博客的接口'
        }
    }
    if (method === 'POST' && path === '/api/blog/delete') {
        return {
            message: '删除博客的接口'
        }
    }

    2.2测试接口

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

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

 3.处理错误请求

    if (blogData) {
        //如果拿到了,就结束请求,返回一个响应
        res.end(
            JSON.stringify(blogData)
        );
        //响应之后,下面的代码不再执行,所以return一下
        return;
    }

    //如果不是上面的路由,就会返回下面的结果
    res.writeHead(404, { 'Content-Type': 'text/plain' }); //无格式正文
    res.write('404 Not Found');
    res.end(); //终止响应

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

 4.改造

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

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

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

放入后做改造

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

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

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

三.响应数据格式优化

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

class BaseModel {
    //构造函数
    constructor(data, message) {
        //数据可能是对象或者string,如果是string,直接message返回
        if (typeof data == 'string') {
            this.message = data
            data = null
            message = null
        }
        if (data) {
            this.data = data
        }
        if (message) {
            this.message = message
        }
    }
}

//根据基类,下面是成功与失败的模型

class SuccessModel extends BaseModel {
    constructor(data, message) {
        super(data, message)
        this.errno = 0;
    }
}


class ErrorModel extends BaseModel {
    constructor(data, message) {
        super(data, message)
        this.errno = -1;
    }
}

module.exports = {
    SuccessModel,
    ErrorModel
}

  获取blog列表接口修改示例

     接口:

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

1.先拿到参数

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

2.返回数据改造

  //如果请求如下就返回下面的结果,这个结果会保存到blogData
    if (method === 'GET' && req.path === '/api/blog/list') {

        const author = req.query.author || '';
        const keyword = req.query.keyword || '';
        const listData = getList(author, keyword); //根据参数获取数据
        return new SuccessModel(listData)
            // return {
            //     message: '获取博客列表的接口'
            // }
    }

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

//博客相关的方法
const getList = (author, keyword) => {
    //从数据库里面拿数据
    //先做假数据
    return [{
            id: 1,
            title: '标题一',
            content: '内容一',
            author: '张三',
            createAt: 161055518935 //date.now()获取的时间戳
        },
        {
            id: 2,
            title: '标题二',
            content: '内容二',
            author: '李四',
            createAt: 161055535044 //date.now()获取的时间戳
        }
    ]
}

module.exports = {
    getList
}

4.测试

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

四.异步处理post请求数据

const querystring = require('querystring')
const handleBlogRoute = require('./src/routes/blog')

//处理post数据
const getPostData = (req) => {
        const promise = new Promise((resolve, reject) => {
            if (req.method !== 'POST') {
                resolve({})
                return;
            }
            if (req.headers['content-type'] !== 'application/json') {
                resolve({})
                return;
            }

            let postData = ''
                //返回的是数据段
            req.on('data', (chunk) => {
                postData += chunk.toString();
            })

            req.on('end', () => {
                if (!postData) {
                    resolve({})
                    return;
                }
                resolve(JSON.parse(postData))
            })
        })
        return promise;
    }
    //这里面是服务器的业务代码
const serverHandler = (req, res) => {
    //设置返回的数据类型(响应格式)
    res.setHeader('Content-Type', 'application/json')
        //获取path
    const url = req.url;
    req.path = url.split('?')[0] //问号分割取前半段
        //解析query
    req.query = querystring.parse(url.split('?')[1]);

    //下面的函数返回的是一个promise,这是一个异步的过程,意思是这个还没走完代码就会往下执行别的步骤,
    //这样可能会导致有些路由访问不到,因为数据还没处理完
    getPostData(req).then(
        (postData) => {
            req.body = postData
                //路由返回数据结果(将请求和响应传入)
            const blogData = handleBlogRoute(req, res)
            if (blogData) {
                //如果拿到了,就结束请求,返回一个响应
                res.end(
                    JSON.stringify(blogData)
                );
                //响应之后,下面的代码不再执行,所以return一下
                return;
            }
            //如果不是上面的路由,就会返回下面的结果
            res.writeHead(404, { 'Content-Type': 'text/plain' }); //无格式正文
            res.write('404 Not Found');
            res.end(); //终止响应
        }
    )
}

module.exports = serverHandler;

module.exports = serverHandler;

    例如更新博客的路由

const handleBlogRoute = (req, res) => {
    const id = req.query.id
    const blogData = req.body
    const method = req.method;
    //如果请求如下就返回下面的结果,这个结果会保存到blogData
    if (method === 'POST' && req.path === '/api/blog/update') {

        const updatedBlogData = updatedBlog(blogData)
        if (updatedBlogData) {
            return new SuccessModel('更新博客成功')
        }
        // return {
        //     message: '更新博客的接口'
        // }
    }
}

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

    方法


//更新博客 blogData = {}是设置空对象,防止没有传
const updatedBlog = (id, blogData = {}) => {
    console.log('id', id);
    console.log('blogData', blogData);
    return true
}

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

 五.使用MySQL

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

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

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

1.创建index.js

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

2.终端进入mysql-demo

  npm init -y

  npm install mysql

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

const mysql = require('mysql')

//创建连接对象
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '123456',
    'port': 3306,
    database: 'myblog'
})

//开始连接
connection.connect();

//执行sql语句
const sql = `select * from blogs`

connection.query(sql, (err, result) => {
    if (err) {
        console.error('error', err)
        return;
    }
    console.log('result', result);
})

//关闭连接
connection.end()

 4.终端输入node index.js

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

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

     src下面创建db文件夹,新建mysql.js文件
     终端输入 

     PS E:\node> npm install mysql

    mysql.js

const mysql = require('mysql')

//创建连接对象
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '123456',
    'port': 3306,
    database: 'myblog'
})

//开始连接
connection.connect();

//执行sql语句的函数
function execSQL(sql) {
    const promise = new Promise((resolve, reject) => {
        connection.query(sql, (err, result) => {
            if (err) {
                reject(err)
                return;
            }
            resolve(result)
        })
    })
    return promise;
}

module.exports = {
    execSQL
}

  测试获取列表接口

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

 访问路由,控制台输出

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

 完善请求接口

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

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

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

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js 

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js 

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

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

nodejs搭建web服务器,服务器,前端,服务器,javascript,node.js

 文章来源地址https://www.toymoban.com/news/detail-753298.html

到了这里,关于快速入门 NodeJS 之『搭建Web服务器』(搭建个人博客相关)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 教你如何使用Nodejs搭建HTTP web服务器并发布上线公网

    转载自内网穿透工具的文章:使用Nodejs搭建HTTP服务,并实现公网远程访问「内网穿透」 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation(原为 Node.js Foundation,已与 JS Foundation 合并)持有和维护,亦为 Linux 基金会的项目。Node.js

    2024年02月05日
    浏览(50)
  • 本地搭建web服务器、个人博客并发布公网访问

    在现代社会,网络已经成为我们生活离不开的必需品,而纷繁多样的个人博客网站,也成为了个人展示的最好平台。在以往,想要搭建一个个人博客网站需要较深的专业知识,但得益于软件技术的发展,就算普通人也可以在几个软件的帮助下,在自己的电脑或电子设备上,建

    2024年02月14日
    浏览(52)
  • 「阿里云」幻兽帕鲁个人服务器已上线,3分钟快速搭建

    基于阿里云搭建幻兽帕鲁服务器方法,1到2分钟部署完成,稳定运行无卡顿,阿里云服务器网aliyunfuwuqi.com分享保姆级手把手教程,基于阿里云计算巢、云服务器或无影云桌面都可以: 基于阿里云1分钟自建教程 https://t.aliyun.com/U/DKivPS 此教程是基于阿里云计算巢服务,以Palwor

    2024年01月25日
    浏览(47)
  • docsify快速部署搭建个人知识库(支持本地、服务器、虚拟机运行)

    🏠 服务器与网站部署知识体系目录 我们先在本地运行体会与获取 docsify 结构,后面再部署到服务器上运行。 部署一个个人知识库只需要按照本文的指令直接 cv 即可。但请注意打开服务器防火墙的 80 端口。 Docsify即时生成您的文档网站。与 GitBook 不同,它不会生成静态 htm

    2024年02月04日
    浏览(47)
  • WEB通讯技术。前端实现SSE长连接,nodejs+express搭建简单服务器,进行接口调试,通过curl请求数据

    长连接(Keep-Alive)是一种HTTP/1.1的持久连接技术,它允许客户端和服务器在一次TCP连接上进行多个HTTP请求和响应,而不必为每个请求/响应建立和断开一个新的连接。长连接有助于减少服务器的负载和提高性能。 长连接的HTTP请求方法与普通HTTP请求方法相同,可以使用GET、P

    2024年02月09日
    浏览(52)
  • 树莓派本地快速搭建web服务器,并发布公网访问

    随着科技的发展,电子工业也在不断进步,我们身边的电子设备也在朝着小型化和多功能化演进,以往体积庞大的电脑也在逐渐缩小体积。树莓派作为一台功能完备的硬件设备,其功耗和体积远小于传统的台式电脑,并且在大部分功能上并不逊于台式机,因此被开发出多种应

    2024年02月15日
    浏览(55)
  • Linux -- Web服务器 快速搭建静态网站,替换默认网页目录

    先简单写个 页面          我们给网页写了一行内容 作为 静态网页的内容 ( 当然了,写的相当简单,您先理解着看)         可以看到的是,我们将内容 定向到了一个文件里,         这个文件的路径 (  /var/www/html  )熟悉不熟悉???         ===            

    2023年04月19日
    浏览(59)
  • 无云服务器,Linux本地快速搭建web网站,并内网穿透发布上线

    转载自cpolar文章:Linux CentOS本地搭建Web站点,并实现公网访问 在web项目中,部署的web站点需要被外部访问,则需要一个媒介,通过把资源放在这个媒介中,再通过所暴露的端口指向这个站点,当外部访问这个媒介所对应的端口时,媒介指向站点,完成访问,像这种类似的媒介,常用的有

    2024年02月02日
    浏览(62)
  • 无云服务器,Linux本地快速搭建web网站,并内网穿透发布上线(1)

    转载自cpolar文章:Linux CentOS本地搭建Web站点,并实现公网访问 在web项目中,部署的web站点需要被外部访问,则需要一个媒介,通过把资源放在这个媒介中,再通过所暴露的端口指向这个站点,当外部访问这个媒介所对应的端口时,媒介指向站点,完成访问,像这种类似的媒介,常用的有

    2024年02月03日
    浏览(50)
  • 宝塔面板快速搭建贪吃蛇小游戏web网站 - 无需云服务器,网站发布上线

    转载自远程内网穿透的文章:Linux使用宝塔面板搭建网站,并内网穿透实现公网访问 宝塔面板作为简单好用的服务器运维管理面板,它支持Linux/Windows系统,我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等,通过Web端轻松管理服务器。 以下教程,我们将演示使用宝塔

    2024年02月05日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包