Express做后端服务详细步骤,从零到一

news/2024/9/18 6:17:43/

文章目录

  • 一、全局安装脚手架
  • 二、生成项目
    • 1.生成项目
    • 2.目录结构介绍
    • 3.拓展:配置文件热更新(避免改一次文件重启一次服务)
      • 步骤1:安装nodemon
      • 步骤2:创建nodemon.json文件
      • 步骤3:更改启动命令
      • 步骤4:上述步骤全部成功之后重启服务验证
  • 三、做具体需求
    • 1.需求描述
    • 2.前端发送请求(这里笔者是react代码用的window.fetch进行的简单请求)
    • 3.后端跨域配置(不配置的话前端本地服务与后端本地服务由于同源策略的问题是无法通信的)
    • 4.搭建数据库
    • 5.express连接mysql数据库
      • ①安装依赖:
      • ②准备工作代码编写
      • ③实际业务代码编写
    • 6.串联自测功能

一、全局安装脚手架

npm install -g express-generator

二、生成项目

1.生成项目

express myapp

PS: 此命令会在你所在的当前目录下生成一个名为myapp的express项目

然后进入该项目并安包:

cd myapp
npm i

然后启动项目:

npm start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。

2.目录结构介绍

通过脚手架创建的应用一般都有如下目录结构:
在这里插入图片描述
我们一个一个文件先暂时了解一下其作用:

文件名作用
bin/wwwexpress启动文件,里面设置了端口、服务启动监听
node_modules我们执行完npm i后的各种依赖包都在这里
public存放静态文件的地方,可以忽略
routes我们做后端写接口的地方
views展示在浏览器上的内容,可以忽略
app.js入口文件、所有接口的注册以及404、error情况的捕获等
package-lock.json锁定包版本的文件、确保其他同事安的包跟你版本一致
package.json各种配置以及依赖的依赖包名等

3.拓展:配置文件热更新(避免改一次文件重启一次服务)

步骤1:安装nodemon

全局安装nodemon

npm install -g nodemon

或者进到项目目录里安装到项目中

npm install nodemon --save

步骤2:创建nodemon.json文件

然后在项目根目录下创建nodemon.json文件
文件内容:

{"restartable": "rs","ignore": [".git",".svn","node_modules/**/node_modules"],"verbose": true,"execMap": {"js": "node --harmony"},"watch": [],"env": {"NODE_ENV": "development"},"ext": "ejs js json"
}
配置名其意义
restartable设置重启模式
ignore设置热更新忽略的文件
verbose设置日志输出模式,true 详细模式
execMap设置运行服务的后缀名与对应的命令
watch监听哪些文件的变化,当变化的时候自动重启
ext监控指定的后缀文件名

步骤3:更改启动命令

然后我们更改package.json中的启动命令:

找到scripts下的start、把node换成nodemon

{"scripts": {"start": "nodemon ./bin/www"}
}

步骤4:上述步骤全部成功之后重启服务验证

关闭当前服务后我们从新npm start启动服务,启动服务成功后我们修改一个接口的返回内容保存后到界面上试一下是否接口返回值变了,如果变了说明热更新配置成功,如果没变请按照步骤一从新确认一下是否全部操作成功并且保存文件了。

三、做具体需求

1.需求描述

比如我们现在有一个用户发送消息给我们,然后我们存到数据库中的一个需求,我们现在来一起实践一下。

2.前端发送请求(这里笔者是react代码用的window.fetch进行的简单请求)

// 请求方法
export const saveUserInfo = (params) => {return fetch('http://localhost:3000/users/sendDemand', {method: 'POST',body: JSON.stringify(params),headers: {'Content-Type': 'application/json',}}).then(res => res.json()).catch(err => err);
}

PS: params可按照自己具体需求传,笔者这里的params是:

{"userName": "1","email": "2","phone": "3","userDesc": "4"
}

3.后端跨域配置(不配置的话前端本地服务与后端本地服务由于同源策略的问题是无法通信的)

请看:配置指定IP地址允许跨域访问

4.搭建数据库

由于内容过多,请访问:
本地安装Mysql并配置
Navicat for MySQL的使用

5.express连接mysql数据库

①安装依赖:

// 必装项:连接mysql服务的
npm i mysql -S
// 选装项:如果你需要校验请求参数的话就安express-validator
npm i express-validator -S
// 选装项:如果你需要获取用户的详细IP信息的话就安express-ip
npm i express-ip -S

②准备工作代码编写

如果你安装了express-ip,请在app.js中增加:

const expressip = require('express-ip');app.use(expressip().getIpInfoMiddleware);

在这里插入图片描述

在根目录创建db文件夹,然后创建connection.js文件
文件内容如下:

//引入mysql
const mysql = require("mysql");// 连接数据库的信息
const db = {host: 'localhost', //数据库地址,上线了之后替换你的服务器IP地址即可port: '3306',//端口号user: 'root',//用户名password: '',//填写你的数据库root账户的密码database: 'official_website'//要访问的数据库名称
};// 封装数据库连接方法
const connectionDB = (sql, params, cb) => {// 创建数据库连接const connection = mysql.createConnection(db);// 连接数据库connection.connect((err, conn) => {if (err) {console.log("数据库连接失败");return;}console.log("数据库连接成功");connection.query(sql, params, cb)})
}module.exports = connectionDB;

③实际业务代码编写

const DB = require('../db/connection');
const { body, validationResult } = require('express-validator');
var express = require('express');
var router = express.Router();/* 接收用户需求接口 */
router.post('/sendDemand',body('userName').notEmpty().withMessage('用户名不能为空'),body('phone').notEmpty().withMessage('手机号不能为空'),body('demand').notEmpty().withMessage('需求描述不能为空'),function (req, res, next) {// 校验参数const errors = validationResult(req);if (!errors.isEmpty()) {return res.status(400).json({ errMsg: errors.array()[0]?.msg });}// END-校验参数// 解构参数并执行SQLconst { userName, phone, email, demand } = req.body;DB('insert into user_demand(name, phone, email, demand, ip_info) values(?, ?, ?, ?, ?)',[userName, phone, email, demand, JSON.stringify(req.ipInfo)],function (err, result) {if (err) {console.log('[SELECT ERROR]:');res.status(500).json({ msg: err.message });} else {res.send({code: 200,msg: '发送成功~我们会尽快联系您!',});}});// END-解构参数并执行SQL});module.exports = router;

6.串联自测功能

当前端的参数后端服务都接收到了且存到数据库了就证明没问题了~
在这里插入图片描述
在这里插入图片描述

全部完成~~


http://www.ppmy.cn/news/12716.html

相关文章

Python基础(二十四):面向对象核心知识

文章目录 面向对象核心知识 一、面向对象三大特性 1、封装 2、继承 3、多态 二、多态 1、了解多态 2、体验多态 三、类属性和实例属性 1、类属性 2、实例属性 四、类方法和静态方法 1、类方法 2、静态方法 面向对象核心知识 一、面向对象三大特性 1、封装 将…

Java中的包装类

基本数据类型的豪华版---包装类基本数据类型包装类基本数据类型 在我们刚开始学习Java的时候,我们学习的应该就是Java中的八种基本数据类型: byte short int long float double char boolean 当时我们还说过Java是面向对象编程的语言,一切皆对象,但是受到当时知识的限制,我们还…

校招求职HR常问问题汇总

前言 前言:面试是一次重要的自我销售的过程,只不过销售的产品是你自己,你要做的就是说服面试官认为你是优秀的,从而给你一个工作机会。 文章目录前言一、回答问题的原则二、自我介绍1、注意2、模板3、达到的效果三、你还有什么问题…

卷积神经网络中特征图大小计算公式总结

W:输入特征图的宽,H:输入特征图的高K:kernel size卷积核宽和高,P:padding(特征图需要填充的0的个数),S:stride步长width_out:卷积后输出特征图的宽…

回首2022展望2023

回首2022,虽然经历反复的居家办公,但仍然努力客服家庭与工作的时间冲突,很好的完成了开发任务。并在疫情变换间隙,带着部门同事做了几次团建,锻炼了队伍,提高了凝聚力。我同时坚信迟早会全面放开。在闲暇之…

Go语言运算符

Go语言运算符 参考资料主要来源于菜鸟教程。 运算符用在程序运行时执行数学逻辑运算。 Go语言内置的运算符有: 算术运算符关系运算符逻辑运算符位运算符赋值运算符其它运算符 算术运算符 下表列出所有Go语言的算术运算符。假定A值为10,B值20。 运算符…

理解CSS

CSS 作为前端技术栈中关键一环,对页面元素及样式呈现起到了直接作用。本节课旨在通过对 CSS 的工作流程及原理、页面中 CSS 使用方法等详细解读,帮助前端新手建立对 CSS 的全面而深刻的认知。 CSS概念 CSS 即 Cascading Style Sheets,是用来…

[idekCTF 2023] Malbolge I Gluttony,Typop,Cleithrophobia,Megalophobia

这些题名字我都不认识,这是什么语呀。这个比赛感觉太难了,加上春节将近比较忙,仅作了4个简单题。记录一下。Misc/Malbolge I Gluttony这是个虚拟机的题,放入misc感觉有点不可思忆,题目给了7个命令,有"…

【初阶数据结构】——写了将近 5 万字,终于把 二叉树 初阶的内容讲清楚了

文章目录前言1. 树的概念及结构1.1 树的概念1.2 树与非树1.3 树的相关概念1.4 树的表示1.5 树在实际中的运用(表示文件系统的目录树结构)2. 二叉树概念及结构2.1 概念2.2 现实中的二叉树2.3 特殊的二叉树2.3.1 满二叉树2.3.1 完全二叉树2.4 二叉树的性质…

计讯物联数字乡村解决方案赋能乡村振兴

项目背景 数字乡村是乡村振兴的战略方向,是推动农村现代化的重要途径。当前,数字乡村建设正在加速推进,打造乡村数字治理新模式,提升乡村的数字化水平,进一步推动乡村振兴进入高质量发展新赛道。计讯物联作为数字乡村…

3.Python基础之流程控制

文章目录Python基础之流程控制顺序结构分支(选择)结构单项分支双项分支多项分支巢状分支循环结构whilefor ... in(字典的特殊使用)[https://blog.csdn.net/yaoyuanna/article/details/126009259]流程控制语句breakcontinuepassPython基础之流程控制 流程分类: 流程…

SpringBoot 注册自己的Servlet(三种方式)

SpringBoot 注册自己的Servlet(三种方式) 目录SpringBoot 注册自己的Servlet(三种方式)方法1:使用servlet3.0规范提供的注解方式注册Servlet1,声明servlet及映射2,加上ServletComponentScan 才会扫描加了这个注解运行结…

HTTP/HTTPS协议介绍

数据来源 HTTP简介 01 什么是HTTP 超文本传输协议(HyperTextTransferProtocol缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。 HTP( Hyper Text Transfer Protocol超京本传输协议) 是一个基于请求与响应 无状态的,应…

《Stealth秘密行动》游戏开发记录

游戏开发的学习记录项目:Stealth秘密行动开始时间:2022.12.30一、新学到的:二、遇到的问题:三、成品部分展示:游戏开发的学习记录⑧ 项目:Stealth秘密行动 开始时间:2022.12.30 (…

【ESP 保姆级教程】玩转emqx篇 ——初识emqx

忘记过去,超越自己 ❤️ 博客主页 单片机菜鸟哥,一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-01-15 ❤️❤️ 本篇更新记录 2022-01-15 ❤️🎉 欢迎关注 🔎点赞 👍收藏 ⭐️留言📝🙏 此博客均由博主单独编写,不存在任何商业团队运营,如发现错误,请…

AtCoder Beginner Contest 285解题报告

A - Edge Checker 2 Problem Statement Determine if there is a segment that directly connects the points numbered a and b in the figure below. Constraints 1≤a<b≤15a and b are integers.Input The input is given from Standard Input in the following for…

详解数据库的锁机制及原理

详解数据库的锁机制及原理1.数据库锁的分类2.行锁共享锁&#xff08;读锁S锁&#xff09;排他锁&#xff08;写锁X锁&#xff09;更新锁3.意向锁&#xff08;IX/IS锁&#xff09;4.锁机制解释数据库隔离级别5.间隙锁1.数据库锁的分类 本图源自CSDN博主&#xff1a;Stephen.W 数…

LeetCode刷题模版:111 - 120

目录 简介111. 二叉树的最小深度112. 路径总和113. 路径总和 II114. 二叉树展开为链表115. 不同的子序列116. 填充每个节点的下一个右侧节点指针117. 填充每个节点的下一个右侧节点指针 II118. 杨辉三角119. 杨辉三角 II120. 三角形最小路径和结语简介 Hello! 非常感谢您阅读海…

Go语言并发编程及依赖管理

目录&#x1f9e1;并发编程GoroutineCSP(Communicating Sequential Processes)&#x1f9e1;依赖管理依赖演变依赖管理三要素&#x1f49f;这里是CS大白话专场&#xff0c;让枯燥的学习变得有趣&#xff01; &#x1f49f;没有对象不要怕&#xff0c;我们new一个出来&#xff0…

Http客户端 Feign 的使用 (黑马springcloud笔记)

Feign基本使用 目录Feign基本使用一、Feign代替RestTemplate二、自定义配置三、Feign使用优化1. 底层优化2. 日志优化四、最佳实践方式一&#xff1a;继承方式二&#xff1a;抽取一、Feign代替RestTemplate 步骤&#xff1a; 引入依赖 <dependency><groupId>org.s…