Nodejs - Express 新手教程(01-项目创建,目录搭建)

u呼

已于 2024-07-17 12:30:19 修改

阅读量2.8k

点赞数 20

分类专栏： Express 文章标签： express 前端 node.js

于 2024-07-17 12:21:54 首次发布

本文链接：https://blog.csdn.net/weixin_45887198/article/details/140490515

版权

Express 专栏收录该内容

3 篇文章

订阅专栏

练习项目介绍

该项目为一个 nodejs - express 新手练习项目
注意本文为 MVC 模式开发,未涉及前后端分离
用于开发一个简单的个人博客,
帮助前端新手/在校学生/没后端经验的前端开发快速了解后端主要功能

如果你需要做毕业设计,缺苦于不会java,go,python,php 等后端语言,那么,express 你一定不要错过,慢慢学,一步步来,笔者带你完成一个样式虽有些丑陋,但是功能齐全的新手个人博客.

开发环境介绍

此处开发环境是笔者自己的环境,读者可以适当降低

在这里插入图片描述

1. 全局安装 express 生成器

高版本node 使用npm源可能存在安装不上的情况,可能会报错 ssl 协议不对,切换成淘宝源镜像即可

npm install -g express-generator

2. 创建项目

下方命令选项含义自行查看 express --help
在这里插入图片描述

express --force --css less --view ejs

执行上方命令后会出现如下图文件目录结构,为了项目规范一点点,我们全局搜索 var替换为 const

注意不要替换 package.json 相关文件中的内容,此处不在贴图

在这里插入图片描述

3. 项目依赖包安装

npm install nodemon mysql2 redis sequelize sqlite3

包名	概述
nodemon	实时重启项目
mysql2	mysql数据驱动
sequelize	mysql orm 操作包

安装完成后修改一下 package.json

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9e5bcfb279804ba5a86e07162884deb7.png)

4.项目启动

下文所有重启项目都是指运行该命令

npm run start

在这里插入图片描述
项目启动后打开浏览器输入 http://localhost:3000效果如下

5. 启动文件修改

由于项目启动文件 www的命令行输出不够友好,我们对其进行优化,让其可以输出局域网ip地址
打开项目根目录下的 bin/www 文件,将下方内容复制全部替换掉

#!/usr/bin/env node
const app = require("../app");
const debug = require("debug")("express:server");
const http = require("http");
const os = require("os"); // 引入 os 模块

const port = normalizePort(process.env.PORT || "3000");
app.set("port", port);

const server = http.createServer(app);

server.listen(port);
server.on("error", onError);
server.on("listening", onListening);

function normalizePort(val) {
  const port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

function onListening() {
  const addr = server.address();
  const bind = typeof addr === "string" ? "pipe " + addr : "port " + addr.port;
  debug("Listening on " + bind);

  // 获取网络接口的 IP 地址并输出
  const interfaces = os.networkInterfaces();
  for (let iface in interfaces) {
    interfaces[iface].forEach(function (details) {
      if (details.family === "IPv4" && !details.internal) {
        console.log(`Your app is running at http://${details.address}:${port}`);
      }
    });
  }
}

function onError(error) {
  if (error.syscall !== "listen") {
    throw error;
  }

  const bind = typeof port === "string" ? "Pipe " + port : "Port " + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case "EACCES":
      console.error(bind + " requires elevated privileges");
      process.exit(1);
      break;
    case "EADDRINUSE":
      console.error(bind + " is already in use");
      process.exit(1);
      break;
    default:
      throw error;
  }
}

重新运行命令 npm run start 即可看到命令行输入了
在这里插入图片描述

6. 项目目录修改

项目根目录新建 src 目录
src 下新建 utils routes controller middleware
src 下新建 index.js
将项目根目录下的 routes,views 剪切到 src 目录下,保存所有文件,按下下图修改 app.js 主入口内容,重新启动项目

重新核对文件目录是否一致,app.js 主入口是否与图例一致,保证项目正常运行
在这里插入图片描述

完成上方所有修改后,你的网页如果还可以正常访问,说明项目十分正常
在这里插入图片描述

名词解释

对于后端同志来说,下方词语可能很熟悉,直接略过,
前端同志且没有任何后端经验的需要阅读,在以后的文章中可能会出现下方词语,你需要知道其含义

项目	描述
控制器 (controller)	控制器负责接收用户的请求，处理这些请求，并返回相应的响应。它作为模型和视图之间的桥梁，管理数据流和用户界面。
中间件 (middleware)	中间件是在请求处理过程中执行的函数，它可以访问请求和响应对象，用于执行验证、日志记录、请求数据处理等任务。
模型 (model)	模型代表和管理应用的数据逻辑。它负责与数据库交互，处理数据的存储、检索、更新和删除。
视图 (view)	视图负责将数据（通常来自模型）以图形界面的形式展示给用户。在传统的 MVC 架构中，视图显示数据并接收用户操作。
路由 (router)	路由处理不同的 URL 请求，根据请求的 URL 和方法（如 GET、POST）将请求分发给对应的控制器函数。
服务 (service)	服务封装业务逻辑，通常是独立于任何特定的模型或控制器，并可以被应用中的多个控制器重复使用。

代码仓库

https://gitee.com/siri729_admin/public-express.git