01. 开发博客项目之项目介绍

最新推荐文章于 2024-03-07 23:01:41 发布
最新推荐文章于 2024-03-07 23:01:41 发布
阅读量954 收藏 1
点赞数
分类专栏： Node.js 入门 文章标签： 前端 javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45196863/article/details/125591865
版权

开发博客项目之项目初步开发

1. 项目介绍

1.1 目标

  • 开发一个博客系统，具有博客的基本功能
  • 只开发 server 端，不关心前端

1.2 需求

  • 首页，作者主页，博客详情页
  • 登录页
  • 管理中心，新建页，编辑页

1.3 技术方案

  • 数据存储

    • 博客

    • 用户

      密码后边需要加密

  • 如何与前端对接，即接口设计

  • 关于登录

    业界有统一的解决方案，一般不用再重新设计

    实现起来比较复杂

2. 开发接口

2.1 http 请求概述

  • DNS 解析，简历 TCP 连接，发送 http 请求（http 默认端口 80，https 默认端口 443）
  • server 接收到 http 请求，处理，并返回
  • 客户端接收到返回数据，处理数据（如渲染页面，执行 js）

2.2 处理 get 请求

  • get 请求，即客户端要向 server 端获取数据，如查询博客列表
  • 通过 querystring 来传递数据，如 a.html?a=100&b=200
  • 浏览器直接访问，就发送 get 请求
示例代码
const http = require("http");
const { emitWarning } = require("process");
const qs = require("qs");

const server = http.createServer((req, res) => {
  console.log(req.method); // GET
  const url = req.url; // 获取请求的完整 url
  console.log(url);
  req.query = qs.parse(url.split("?")[1]); // qs 解析 query 为 JS 对象
  res.end(JSON.stringify(req.query)); // 消息发送已完成
});

server.listen(8000, () => {
  console.log("listen on 8000");
});

运行输入 http://localhost:8000/?a=100&b=erere 后，后台输出：

listen on 8000
GET
/?a=100&b=erere
GET
/favicon.ico

/favicon.ico 是浏览器自动会发送的 GET 请求。

浏览器显示结果：

2.3 处理 post 请求

  • post 请求，即客户端要向服务器端传递数据，如新建博客
  • 通过 post data 传递数据
  • 浏览器无法直接模拟，需要手写 js，或者使用 postman
示例代码
const http = require("http");

const server = http.createServer((req, res) => {
  if (req.method === "POST") {
    // 请求的数据格式
    console.log("content-type", req.headers["content-type"]);
    // 接收数据
    let postData = "";
    // 接收数据流，req 发送数据时触发
    req.on("data", (chunk) => {
      postData += chunk.toString();
    });
    // req 传输完成时触发
    req.on("end", () => {
      console.log(postData);
      res.end("hello world"); // 在这里返回，因为是异步
    });
  }
});

server.listen(8000, () => {
  console.log("listen on port 8000");
});

用 postman 发送请求结果：

  1. 客户端收到 hello world

  2. 后端收到客户端发送过来的数据，且得知服务端发送的数据类型为 JSON

2.4 综合案例

const http = require("http");
const qs = require("qs");

const server = http.createServer((req, res) => {
  const method = req.method;
  const url = req.url;
  const path = url.split("?")[0];
  const query = qs.parse(url.split("?")[1]);

  // 设置返回格式为 JSON
  res.setHeader("content-type", "application/json");

  // 返回的数据
  const resData = {
    method,
    url,
    path,
    query,
  };

  // 返回
  if (method === "GET") {
    // 返回 JSON 格式的字符串
    res.end(JSON.stringify(resData));
  }
  if (method === "POST") {
    let postData = "";
    req.on("data", (chunk) => {
      postData += chunk.toString();
    });
    req.on("end", () => {
      resData.postData = postData;
      res.end(JSON.stringify(resData));
    });
  }
});

server.listen(8000, () => {
  console.log("listen on port 8000");
});

GET 返回结果：

POST 返回结果：

3. 搭建开发环境

  • 从 0 开始搭建，不使用任何框架
  • 使用 nodemon 监测文件变化，自动重启 node
  • 使用 cross-env 设置环境变量

3.1 搭建

  1. yarn init -y node 项目初始化

  2. git init 初始化 Git 仓库

  3. 安装所需第三方库

    yarn add nodemon cross-env --dev

  4. 在 package.json 里编写 scripts，简化输入的命令行指令

      "scripts": {
    "dev": "cross-env NODE_ENV=dev nodemon ./bin/www.js"
  },

    这样写完后，在命令行里 yarn dev 或者 npm run dev 就可以代执行上面的命令。

    • cross-env NODE_ENV=dev 当前的环境为开发环境，并且有一个变量为 NODE_ENV 值为 dev。js 文件可以通过 process.env.NODE_ENV 来获取到 dev。
    • nodemon ./bin/www.js nodemon 监听 www.js 的变化，每次变化就重新自动执行。（因为自己自定义了主入口为 www.js）

3.2 代码测试搭建效果

  1. 在 ./bin/www.js 里写如下代码：

    const http = require("http");
const { serverHandle } = require("../app");

const PORT = 8000;

// 创建服务器后的回调放在 app.js 文件里
const server = http.createServer(serverHandle);

// 在 8000 端口上监听
server.listen(PORT);

  2. 在 app.js 文件里写创建服务器的回调，app.js 专注于业务代码。

    const serverHandle = (req, res) => {
  // 设置返回格式 JSON
  res.setHeader("Content-type", "application/json");

  const resData = {
    name: "sjh",
    site: "ssjjhh.com",
    env: process.env.NODE_ENV,
  };

  res.end(JSON.stringify(resData));
};

module.exports = {
  serverHandle,
};

  3. 执行 yarn dev，访问本地的 8000 端口，可以得到服务器返回的 JSON 数据。

4. 初始化路由

4.1 开发接口

  • 初始化路由：根据之前计数法方案的设计，做出路由
  • 返回假数据：将路由和数据处理分离，已符合设计原则

通过查看路由，可以发现接口分成两大类：blog 和 user。可以通过两个文件实现六个接口。

blog 路由

先跑通是最重要的，把每个接口先写一下，返回的内容先不管。

const handleBlogRouter = (req, res) => {
  const method = req.method;

  // 获取博客列表
  if (method === "GET" && req.path === "/api/blog/list") {
    return {
      msg: "这是获取博客列表的接口",
    };
  }

  // 获取博客详情
  if (method === "GET" && req.path === "/api/blog/detail") {
    return {
      msg: "这是获取博客详情的接口",
    };
  }

  // 新建一篇博客
  if (method === "POST" && req.path === "/api/blog/new") {
    return {
      msg: "这是新建博客的接口",
    };
  }

  // 更新一篇博客
  if (method === "POST" && req.path === "/api/blog/update") {
    return {
      msg: "这是更新博客的接口",
    };
  }

  // 删除一篇博客
  if (method === "POST" && req.path === "/api/blog/del") {
    return {
      msg: "这是删除博客的接口",
    };
  }
};

module.exports = {
  handleBlogRouter,
};
user 路由

user 路由同理

const handleUserRouter = (req, res) => {
  const method = req.method;

  // 登录
  if (method === "POST" && req.path === "/api/user/login") {
    return {
      msg: "这是用户登录接口",
    };
  }
};

module.exports = {
  handleUserRouter,
};
app.js 引入路由

将两个路由引入 app.js，并经过解析得到 path 和 query 后，传递给路由。如果请求的路径路由能匹配上的话，就会返回数据，否则不返回。

意义在于，将业务功能分离，提高可维护性。

根据这个原理，如果路由都没匹配上，就是 404 未找到了。在 serverHandle 末尾进行 404 的处理。

const qs = require("qs");
const { handleBlogRouter } = require("./src/router/blog");
const { handleUserRouter } = require("./src/router/user");

const serverHandle = (req, res) => {
  // 设置返回格式 JSON
  res.setHeader("Content-type", "application/json");

  // 获取 path
  const url = req.url;
  req.path = url.split("?")[0];

  // 解析 query
  req.query = qs.parse(req.path)

  // 处理 blog 路由
  const blogData = handleBlogRouter(req, res);
  if (blogData) {
    res.end(JSON.stringify(blogData));
    // 需 return，否则会继续往下执行
    return;
  }

  // 处理 user 路由
  const userData = handleUserRouter(req, res);
  if (userData) {
    res.end(JSON.stringify(userData));
    return;
  }

  // 未命中路由：纯文本返回 404 信息
  res.writeHead(404, { "content-type": "text/plain" });
  res.write("404 not found");
  res.end();
};

module.exports = {
  serverHandle,
};
统一成功和失败的返回信息

创建 model 文件夹，创建成功和失败模型：

// src/model/resModel.js
class BaseModel {
  constructor(data, message) {
    // data 可以是对象，也可以是字符串
    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,
};

以后要返回信息，就经过模型的加工，返回的 json 结构预期如下：

{
    "errno": 0,
    "data": {...},
    "message": "xxx"
}

4.2 博客列表路由开发

现在建一个 controller 层，里边写相关的业务。因为还没连接数据库，因此先暂时返回自己造的数据。下面是获取博客列表数据的相关代码：

// src/controller/blog.js
const getList = (author, keyword) => {
  // 返回 Mock 数据（格式是正确的）
  return [
    {
      id: 1,
      title: "标题A",
      content: "内容A",
      createTime: 1654087871762,
      author: "zhangsan",
    },
    {
      id: 2,
      title: "标题B",
      content: "内容B",
      createTime: 1654087879762,
      author: "lisi",
    },
  ];
};

controller 将数据剥离后，router 里只专注数据。下面是博客列表路由的相关代码：

// src/router/blog.js
  // 获取博客列表
  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);
  }

返回结果：

4.3 博客详情路由开发

// src/router/blog.js
  // 获取博客详情
  if (method === "GET" && req.path === "/api/blog/detail") {
    const id = req.query.id;
    const data = getDetail(id);
    return new SuccessModel(data);
  }

controller 和返回结果略。

4.4 路由开发之处理 POST data

app.js 里现在只有解析 path 和 query，POST data 并没有。POST 数据传输是异步的，要特意等 POST 数据传输结束后，路由的相关代码才能运行，确保拿到 POST data。

因为了方便，单独创建一个 处理 POST data 的函数。异步的方法返回 promise 后，可以使用 then/catch 会标或者 await 语法糖来处理异步请求后，才跑下面的代码。

// app.js
const getPostData = (req) => {
  return new Promise((resolve, reject) => {
    // 非 POST 请求不存在 POST data 的问题
    if (req.method !== "POST") {
      resolve({});
      return;
    }
    // 如果 POST data 不是 JSON 格式的数据，直接忽略（本项目的 POST data 都是 JSON 格式）
    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));
    });
  });
};

const serverHandle = async (req, res) => {
  // 设置返回格式 JSON
  res.setHeader("Content-type", "application/json");

  // 获取 path
  const url = req.url;
  req.path = url.split("?")[0];

  // 解析 query
  req.query = qs.parse(req.path);

  // 解析 POST data 后放在 req.body 内
  const postData = await getPostData(req);
  req.body = postData;

  // 处理 blog 路由
  const blogData = handleBlogRouter(req, res);
  if (blogData) {
    res.end(JSON.stringify(blogData));
    // 需 return，否则会继续往下执行
    return;
  }

  // 处理 user 路由
  const userData = handleUserRouter(req, res);
  if (userData) {
    res.end(JSON.stringify(userData));
    return;
  }

  // 未命中路由：纯文本返回 404 信息
  res.writeHead(404, { "content-type": "text/plain" });
  res.write("404 not found");
  res.end();
};

4.5 新建博客路由开发

有了上面的 postData 处理后，路由可以通过 req.body 获取到 post 传递过来的数据了。

// router/blog.js
  // 新建一篇博客
  if (method === "POST" && req.path === "/api/blog/new") {
    const data = newBlog(req.body);
    return new SuccessModel(data);
  }

// controller/blog.js
const newBlog = (blogData = {}) => {
  // blogData 是一个博客对象，包含 title、content 属性
  return {
    ...blogData, // 只是演示 POST data 成功获取了
    id: 3, // 表示新建博客，插入到数据表里面的 id
  };
};

在 postman 发送 post 请求以及响应结果：

4.6 更新博客路由开发

更新路由也是用 post 方法，但是和新建博客不一样的地方是，更新博客时需要携带 id 参数才能进行修改。

// controller/blog.js
/**
 * 更新指定 id 的博客内容
 * @param {number} id 要更新博客的对应 id
 * @param {object} blogData 博客对象，包含 title、content 属性
 */
const updateBlog = (id, blogData = {}) => {
  console.log("update blog", blogData);
  return true;
};

// router/blog.js
  // 更新一篇博客
  if (method === "POST" && req.path === "/api/blog/update") {
    const result = updateBlog(id, req.body);
    if (result) {
      return new SuccessModel();
    } else {
      return new ErrorModel("更新失败");
    }
  }

4.7 删除博客路由

// controller/blog.js
const delBlog = (id) => {
  return true;
};

// router/blog.js
  // 删除一篇博客
  if (method === "POST" && req.path === "/api/blog/del") {
    const result = delBlog(id);
    if (result) {
      return new SuccessModel();
    } else {
      return new ErrorModel("删除博客失败");
    }
  }

4.8 登录路由完成

// controller/user.js
const loginCheck = (username, password) => {
  // 先使用假数据
  if (username === "admin" && password === "123456") {
    return true;
  }
  return false;
};

module.exports = {
  loginCheck
};

// router/user.js
const { loginCheck } = require("../controller/user");
const { SuccessModel, ErrorModel } = require("../model/resModel");

const handleUserRouter = (req, res) => {
  const method = req.method;

  // 登录
  if (method === "POST" && req.path === "/api/user/login") {
    const { username, password } = req.body;
    const result = loginCheck(username, password);
    if (result) {
      return new SuccessModel();
    }
    return new ErrorModel("登录失败");
  }
};

module.exports = {
  handleUserRouter,
};

4.9 路由和 API 的区别

  • API：前端和后盾，不同端之间对接的一个术语
    • url （路由），输入，输出
  • 路由：
    • API 的一部分，接口地址
    • 后端系统内部的一个定义
John是橘红
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客平台开发全攻略：从后端到前端，再到部署上线
sybh的博客
04-12 379
本篇文章全面介绍了博客平台的开发过程，包括后端开发、前端开发、测试与调试、性能优化与安全测试以及部署上线。通过这三层的分离，我们可以实现代码的高内聚、低耦合，便于维护与扩展。通过配置Nginx，我们可以将用户的请求分发到不同的后端服务器，提高系统的可扩展性。本篇文章将全面介绍开发过程，包括后端开发、前端开发、测试与调试、性能优化与安全测试以及部署上线。在博客平台的开发过程中，我们需要利用Vue3编写可复用的组件，提高开发效率。在博客平台的开发过程中，我们需要充分考虑用户体验，设计简洁、美观的界面。
后端开发个人博客，简单而又不失美感的技术博客
04-13
技术栈：SpringBoot，MyBatis-Plus，MySQL，Markdown，Thymeleaf，semantic-ui 项目介绍：一个小而美的技术博客，可以直接进行云上部署，项目支持普通用户注册和发布博客，非系统用户只能查看。适合初学者练手和搭建一个自己的博客系统。 阅览地址：http://110.40.186.129/ywj 由于本人是后端开发为主，对前端的应用掌握不够，前端ui参考Github上的一个大佬。项目下载之后，导入数据库便可直接运行
博客系统项目详解
weixin_46429649的博客
09-02 1565
1.创建maven项目 2.导入写好的前端代码 3.设计数据库 4.封装数据库操作 1）创建 DBUtil 类 2）创建 Blog类 3）创建 User 4 ）创建BlogDao类 5）创建UserDao类 5.实现博客主界面 1）约定前后端交互接口 2）编写服务器代码 3）编写客户端代码 6.实现博客详细界面 1）约定前后端交互接口 2）编写服务器代码 3）编写客户端代码 7.实现博客登陆页面 1）约定前后端交互接口 2）编写服务器代码 3）编写客户端代码 8.实现用户状态判定功能 1）约定前后端交互接口
个人博客系统项目总结
最新发布
qq_50977605的博客
03-07 815
个人博客系统：注册、登录、博客展示、发布博客、查看博客以及退出等
个人博客系统(SSM版 前端+后端)
小白的博客
07-21 2104
SSM 版博客系统
从零开始创建一个个人博客前端Vue，后端node.js（第一天）
weixin_52153452的博客
01-30 3859
开发个人博客第一天
博客系统前端页面（项目实战系列1）
weixin_61599986的博客
08-24 460
博客系统前端页面的展示！！！
个人博客项目——项目简介及工程搭建
weixin_46631713的博客
03-30 3834
我的Blog项目 一、项目简介 1、技术 (1)、后端：SpringBoot + Mybatis-plus + redis + mysql (2)、前端：Vue 2、项目讲解说明 提供前端工程，只需要实现后端接口即可 项目以单体架构入手，先快速开发，不考虑项目优化，降低开发负担 开发完成后，开始优化项目，提升编程思维能力 比如页面静态化，缓存，云存储，日志等 docker部署上线 云服务器购买，域名购买，域名备案等 二、前端工程搭建 下载 Hbuilder X [外链图片转存失败
blogs博客系统项目介绍
热门推荐
H_233的博客
03-18 2万+
blogs博客系统项目介绍blogs项目简介项目展示项目详述 blogs 一个简易的博客系统 GitHub地址：点击查看项目源码 Gitee地址：点击查看项目源码 项目简介 该项目是我之前学习的一个项目，一个较为完整的博客系统，具备了常见的博客相关功能，初衷就是为了解决日常的学习记录与总结。 该博客系统大概包含了以下功能：用户的登录与注册、系统的权限管理、发表编辑博客、博客查阅、博客删除、博客评论...
我的博客系统——项目介绍
m0_63793861的博客
11-02 306
我的博客系统采用前后端分离的方法实现，使用数据库存储相关的数据，通过Tomcat进行项目部署。主要包含用户登录与退出、博客查询与浏览、博客编写与删除、博客数量统计以及强制登陆的功能。
个人博客项目
qq_44773719的博客
05-18 8971
一.项目功能描述： 主要分为4大功能模块，用户登录功能，文章评论功能，发布和修改文章功能，文章分类。登录首页之后可以查看所有文章的信息，但是此时只能查看，不能修改。如果想要对文章进行操作，就需要用户登录(利用数据库保存的用户名和密码)。用户登陆之后可以对文章进行评论，发布新的文章，修改和删除已经发布的文章，创建和删除新的文章类型。 二.项目流程 首先在输入url，根据不同的url调用后台 Controller 中的方法，Controller 中的方法再调用 Servise 逻辑层中的方法，Service 中
推荐15个有用的前端技术博客
前端开发博客
04-08 2713
作为前端开发人员，持续学习和了解最新的前端技术和趋势是非常重要的。以下是我推荐的15个前端技术博客，这些博客涵盖了各种前端技术和话题，包括CSS、JavaScript、HTML、Web设计和开发等。Smashing Magazine: 这是一个著名的前端技术博客，提供有关Web设计和开发的最新趋势、工具和技术的文章。该博客的内容涵盖了各种前端技术和话题，包括CSS、JavaScript、HTML、...
个人博客系统开发实例
05-16
个人博客系统开发实例 英勇Jsp Servlet DAO Struts等技术
Node.js开发博客项目.zip
01-15
软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备...
node.js博客项目开发手记
10-18
本篇文章给大家总结了node.js博客项目开发的相关步骤以及知识点分享，有兴趣的朋友参考下。
node.js博客项目.zip
01-15
软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备...
node开发的博客项目 .zip
01-16
软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备...
node.js开发web server博客项目.zip
01-15
软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备...
HTML做一个个人博客页面（纯html代码）
qq_524614081的博客
12-23 531
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
基于vue.js的个人博客网站项目源码
08-02
基于Vue.js的个人博客网站项目源码是一个完整的前端项目源代码，使用Vue.js作为前端框架来开发个人博客网站。 该源码包含了博客网站的各个页面和组件，以及相关的样式和功能实现。博客网站通常包括首页、文章列表、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值