六、项目发布-- 3. Node.js+express 编写书城首页API

news2024/11/25 2:20:53

前面那些准备工作做完之后,现在我们就具体来用Node.js来写一个简单的API

基本API编写:

建个后端文件夹,放到vscode打开

我们之前的代码都是前端代码,现在我们来做一个后端的代码。新建一个新的文件夹叫node_new_book,然后拖到vscode中运行,然后建个app.js

然后通过npm init 对整个项目进行初始化

把它初始化为一个npm项目,然后就会出现package.json文件

初始化完成了后,我们来安装express,我们使用express来作为开发框架。

express是一个非常轻量级的框架,可以简化我们的开发过程,让我们的开发速度提高。通过npm i express -S 来安装express,如下生成node_modules文件夹

接下来我们通过express来写一个最简单的API也就是我们说的Hello Word试试。

注意在node当中我们通常是默认支持Commonjs的模块格式,如果写成ES6的格式不支持。

简单了解一下express是什么

我们可以去看看这个express是什么,可以看到其实express是一个function是createApplication,这个方法中返回一个app,可以看到app就是一个对象是一个function,这个方法当中通过mixin混入了一些另外的方法,然后在app下面加了一个request和response,还做了一个初始化init的操作,最后将app返回。也就是说我们const express = require('express')这里的express就是这里的createApplication,那么我们通过执行express()得到一个app

拿到这个app方法之后,我们就可以使用express为我们添加好的一些预设的方法,比如这里我们使用get方法,我们就可以在浏览器当中通过get请求来获取DOM,调用到这里的方法。参数第一个指的是匹配的路由,也就是说我们传入一个根路径,那么就会调用后面的方法。

我们可以通过app.listen()来监听

比如app.listen(3000)那么就3000端口,后面可以加个回调函数,就是当我们listen成功之后回调这个函数,回调这个函数的时候我们获取app.listen的返回值。

这样就可以完成一个最简单的nodejs应用,然后启动即在终端输入node app.js 

启动完成之后回到浏览器当中,输入localhost:3000,可以看到我们当前的时间就被输出出来了

接下来我们继续来调试连接数据库

因为我们实际API当中数据获取不是静态的形式,不太可能全部采用new Date().toDateString()这种静态的方式来获取数据,而过多的时候是通过从数据库中查询然后将查询的结果封装成一个JSON字符串返回给我们前台页面。

首先安装mysql这个库即npm i mysql -S,安装完后我们来require导入进来

这个库怎么用呢,首先我们需要编写一个function叫做connect,用来连接数据库。

这样的话就能生成连接字符串,之后我们就会通过sql语句来查询数据

所以我们紧接着再来去编写一个接口

这个接口写完后,我们通过node app.js 将这个服务重新启动起来,然后在浏览器当中访问localhost:3000/book/list即可看到如下

在掌握了基本API编写技巧后,我们就可以来写我们的第一个接口,是我们首页的接口

继续编写我们的API

我们仍然提供一个get方法,注意一个就是使用nodejs来做测试的时候每次修改都需要重新node app.js启动才行

编写获取书城首页的API:

1、获取书城首页当中的猜你喜欢数据

首先编写获取书城首页的数据,并且创建一个生成随机数的方法

如下是获取书城首页的API,我们对于猜你喜欢前台是想要随机获取9本书,所以我们做一个方法随机获取9本书,并且编写路径为/book/home的API

然后根据这个随机数去把id等于这个数的电子书获取出来

当前我们只是随机生成了几个数,这个随机数就是书的id这样子,所以我们需要去根据这个随机数去把id=这个数的电子书获取出来

接下来我们根据获取到的随机数的数组通过循环方式来把这些电子书生成,通过forEach来获取到我们获取到的随机数,通过这个key到results当中找到对应的电子书,我们建一个createData方法,通过这个方法我们将所有的results传入进去再将key传入进去,然后我们创建createData方法

这个createData方法是接收key和results,根据key,到results当中把这个key对应的电子书找出来

把数据库中相对路径的cover改成从nginx上获取的cover

我们到数据库中可以看到这个cover是相对路径,这个相对路径返回给前端的话,前端就会在当前这个路径下去找,但是实际上我们的封面是存在nginx上的,那么前端就会找不到就会报404错误,那图片就会显示不出来,所以这里我们要对封面进行加工

这个封面图片是存在于我们nginx服务器上面的嘛,我们需要把数据库中cover的路径改为从nginx上img中获取的cover,怎么改,就是在数据库返回的cover中加入如下即可,访问nginx的路径就是http://localhost:8081嘛,然后要访问nginx下的img所以加上img

这个resUrl我们后面会频繁进行使用,我们可以单独建一个模块把这些数据全部放进去,这样统一方便管理,如下我们建一个const.js目录

然后我们再加一些其他的属性,这样前端要用的话就可以直接取到

成功获取猜你喜欢数据

然后node app.js,然后访问这个localhost:3000/book/home,回到终端可以看到随机获取的9本书数据已经打印回来了,而且里面的cover也和我们想要的那样生成了,把它复制出来到浏览器中访问,说明这个路径在我们本地是可以取到的

我们创建一个方法来接createDate的数据,并且加到我们建的gussYouLike数组中。

因为猜你喜欢不一样,因为猜你喜欢需要加一些多少人正在读某书、对某图书感兴趣的人也在读、与什么同作者,所以要增加一些字段,猜你喜欢获取回来的数据中需要有type属性和results属性,即据type来判断result是什么,所以要加上这个createGuessYouLike方法,作用是往猜你喜欢回来的电子书数据中添加这两个字段,从而使得前端可以展示“ 多少人正在读某书、对某图书感兴趣的人也在读、与某书同作者 ”

2、接下来编写推荐图书、精选图书、随机图书的接口

3、接下来我们做随机展示几个学科,然后每个学科展示4本该学科下的电子书嘛

首先学科们的数据获取即categories(即那些学科们)

获取这个全部学科的信息是做书城首页全部学科的展示的,即如下这个分类

我们就要获取出数据库的图书们有啥学科,然后写进静态资源中,如下先把category静态数据建好

然后categories中直接造虚拟数据进去,其中catorage:1 2 3这些是学科编号即1指体育学 2指经济学这种意思,然后num是指这个学科中有多少本书,img是学科的图片。

然后某学科的图书们的数据

是做书城首页如下部分的:

categoryList即某学科的图书们这个比categories即学科们还复杂,categoryList是有两层数据结构

因为我们前端书架那里是固定展示6个学科的图书的,都是不是固定展示具体哪6个学科分类的,分类中展示的图书也不是固定的,而是随机选6个学科,然后选这6个学科中的随机4本图书

那怎么做呢,你要随机获取几个学科还是随机获取几本图书,怎么随机,随机一般是通过random随机生成几个数字来做随机的,所以需要把学科、图书与数字对应上,然后我们随机选数字中,这个数字又对应这个学科、图书,就能实现随机选择学科、图书的想法。

但是静态资源学科中都是学科名,没有数字,所以就先通过循环静态资源中的category学科们,利用数组中的index给它们对应的编号,每个学科名称对应一个自己的编号。

然后获取几个随机数,而且这里还要保证获取的随机数不能重复,展示的学科应该不一样嘛

最后返回随机选的n个学科编号

随机选好图书后,我们就在这些学科中各随机选好4本图书,怎么做呢

首先要知道,数据库中的数据电子书们都有category为某数字这种,即表示它们属于哪个分类,数据库中的category编号和学科名称 ,与我们静态数据category的数据的分类名是对应的,我们前面也给静态资源这些学科对应的编号了

也就是说通过我们上面给静态资源中的学科们编号了后,这样就可以根据静态资源中随机选的学科编号去对应找到这个学科下的图书们。

所以接下来我们就找到这个学科的全部图书,然后获取其中4本书

接口做好了以后,前端怎么调用

那么现在这个首页接口生成好了之后我们怎么来调用呢,我们到前端项目中调用。

如下我们把通过mock获取的数据注释掉

然后我们再去修改一下.env.develement的BASE_URL

原来:不是从本地8081端口获取就是从别人的线上地址获取

全部修改成本地的端口,如下epub和RES_URL的是从本地nginx中获取的所以是改成本地8081端口,其他的那些比如说book、BASE_URL等等都是从本地后端的3000端口获取的数据

然后npm run serve运行起来,目前我们做了书城首页的接口,我们来刷新书城首页,看看能不能正常展示,发现如下有CORS的跨域问题

API中需要支持跨域

所以在我们API当中,需要去支持跨域,这样才能解决问题,所以如下到API中做改造

我们到后端项目中 npm i -S cors 安装这个cors库,然后引入这个库

然后我们通过app.use(cors()) 来使用这个插件

然后node app.js运行,然后可以看到获取数据没有问题

但是还有一些问题就是如下,它有一些学科就一本书,所以就会出现下面这种场景,所以我们可以在API里面做一些过滤,还有一个问题就是顶部的大图片banner没有出来

顶部大图片这个是因为我们nginx上没有加入这个banner图片,所以获取不到,所以我们到nginx上加入图片即可,如下

然后到API中

然后把图书数量少于4本的学科分类过滤掉

而且我们可以发现,我们每次刷新,接口返回的数据都是不一样的

目前书城首页我们就开发好了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1626714.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

二 SSM整合实操

SSM整合实操 一 依赖管理 数据库准备 mysql8.0.33 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIMARY KEY(emp_id) );INSERT INTO t_emp(emp_name,emp_salary) VALUE…

数字旅游:通过科技赋能,创新旅游服务模式,提供智能化、个性化的旅游服务,满足游客多元化、个性化的旅游需求

目录 一、数字旅游的概念与内涵 二、科技赋能数字旅游的创新实践 1、大数据技术的应用 2、人工智能技术的应用 3、物联网技术的应用 4、云计算技术的应用 三、智能化、个性化旅游服务的实现路径 1、提升旅游服务的智能化水平 2、实现旅游服务的个性化定制 四、数字旅…

可视化+多人协同技术原理和案例分享

前言 hi,大家好,我是徐小夕,之前和大家分享了很多可视化低代码的技术实践,最近也做了一款非常有意思的文档搭建引擎——Nocode/Doc: 也做了一些分享: Nocode/Doc,可视化 零代码打造下一代文件编…

Flink学习(八)-Flink 集群搭建

1,准备三台机器 装好 jdk 等必要的组件。 注意,由于本身没有额外的 dns做转发。因此,需要在每台机器的 host 文件里,配置好相关 ip 具体方法 vim /etc/hosts 2,flink做配置 2.1 资源规划 节点服务器 node01 nod…

VScode Failed to parse remote port from server output

在使用VScode 在连接AutoDL 过程中一直连接不上,显示 Failed to parse remote port from server output 在网上查了很多资料,貌似的没啥用。和我有相同 error 的可以尝试修改setting.json 文件。 添加这条命令(我的json文件里面没有&#…

Spring Cloud OpenFeign 开启 httpclient5

环境介绍 java&#xff1a;17 SpringBoot&#xff1a;3.2.0 SpringCloud&#xff1a;2023.0.0 knife4j &#xff1a; 4.4.0 开始工作 pom文件引入配置 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-start…

探索设计模式的魅力:AI赋能分层模式,解构未来,智领风潮

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 探索设计模式的魅力&#xff1a;AI赋能分层模式&#xff0c;解构未来&#xff0c;智领风潮 ✨欢迎…

【优秀AI项目】每日跟踪 OpenVoice ,AI快站,OpenVoice

持续更新好玩的开源AI项目或AI商业应用体验 一起来玩转AI&#xff01;&#xff01; 1 huggingface 国内镜像站&#xff1a;AI 快站 HUggingface被墙了&#xff0c;emmmmm 所以我之前玩模型的一大感觉就是 下载什么模型之类的太难受了&#xff01;服了 看到一个镜像站——…

leetcode1143. 最长公共子序列(ACM模式解法)

题目描述 给你一个序列X和另一个序列Z&#xff0c;当Z中的所有元素都在X中存在&#xff0c;并且在X中的下标顺序是严格递增的&#xff0c;那么就把Z叫做X的子序列。 例如&#xff1a;Z是序列X的一个子序列&#xff0c;Z中的元素在X中的下标序列为<1,2,4,6>。 现给你两个…

HarmonyOS-Next开源三方库 MPChart:打造出色的图表体验

点击下载源码https://download.csdn.net/download/liuhaikang/89228765 简介 随着移动应用的不断发展&#xff0c;数据可视化成为提高用户体验和数据交流的重要手段之一。在 OpenAtom OpenHarmony&#xff08;简称“OpenHarmony”&#xff09;应用开发中&#xff0c;一个强大而…

边缘计算在视频监控领域的应用

一、边缘计算在视频监控领域的应用 运用边缘计算解决视频监控问题&#xff0c;可以带来许多优势。以下是一些具体的应用示例&#xff1a; 实时分析与处理&#xff1a;在视频监控系统中&#xff0c;边缘计算盒子可以实时处理和分析视频流&#xff0c;实现对监控画面的智能识别…

2024电子、电路与控制工程国际学术会议(IACECIE2024)

2024电子、电路与控制工程国际学术会议&#xff08;IACECIE2024) 会议简介 2024年国际电子、电路与控制工程学术会议&#xff08;IACCECIE2024&#xff09;将于2024年在重庆隆重举行。本次会议汇集了来自全球电子、电路和控制工程领域的杰出学者、研究人员和行业代表&#…

底层逻辑(1) 是非对错

底层逻辑(1) 是非对错 关于本书 这本书的副标题叫做&#xff1a;看清这个世界的底牌。让我想起电影《教父》中的一句名言&#xff1a;花半秒钟就看透事物本质的人&#xff0c;和花一辈子都看不清事物本质的人&#xff0c;注定是截然不同的命运。 如果你看过梅多丝的《系统之美…

Power BI数据刷新 - 网关 数据源凭据详解

众所周知&#xff0c;如果在Power BI云服务中设置数据源自动刷新&#xff0c;有两种方式供你选择, 分别是&#xff1a; Gateway and cloud connections&#xff08;网关和云连接&#xff09;&#xff1b;Data Source Credentials&#xff08;数据源凭据&#xff09;&#xff1…

Linux——NFS网络文件系统

在生产环境中共享宿主目录可以用于集中管理账户 一、存储设备 DAS 是直连存储相当于移动硬盘 NAS 是网络文件系统&#xff0c;挂载后可以直接访问 SAN 存储区域网络 IPSAN 网线连接 共享的是设备&#xff0c;需要挂载后分区使用 FCSAN 光纤连接 二、服务的管理 1、安…

如何在PostgreSQL中创建一个新的数据库,并指定所有者?

文章目录 解决方案示例代码 PostgreSQL是一个强大的开源关系型数据库管理系统&#xff0c;它允许用户创建和管理多个数据库。在PostgreSQL中创建一个新的数据库并指定所有者是一个常见的操作。下面&#xff0c;我们将详细解释如何执行这一操作&#xff0c;并提供示例代码。 解…

OpenHarmony鸿蒙南向开发案例:【智能加湿器】

样例简介 智能加湿器具有实时监控其所处环境温度、湿度&#xff0c;并通过数字管家设置日程&#xff0c;自动打开加湿器控制湿度功能。显示界面使用DevEco Studio 编写的js应用&#xff0c;具有很好的兼容和移植特性。硬件上采用了带有HDF框架的驱动模型&#xff0c;通过GPIO和…

信号带宽和上升沿时间

我们在抽取高速信号的S参数时避不开的一个环节是设置仿真带宽,经常听到有人讲要设置基频(奈奎斯特频率)的4倍or 5倍带宽,如果是这样,就有一个问题:如果是56Gbps的NRZ信号,那仿真带宽真要设置到100G以上吗?这么宽的带宽,计算时间和所耗费的资源可想而知!第二个常见的问…

【Win】PsPing:深入网络性能测试与故障排查

在维护 Azure 虚拟机的过程中&#xff0c;可能会遇到一些网络连通性的问题。例如&#xff0c;当您尝试从个人 PC 上 ping 虚拟机的公网 IP 地址时&#xff0c;可能会发现出现 “Request time out” 的信息&#xff0c;导致无法 ping 通。这种情况的发生&#xff0c;通常是因为在…

python基础之元组、集合和函数的定义与返回值

1.元祖 1.元祖的定义 元组的数据结构跟列表相似 特征&#xff1a;有序、 有序&#xff1a;有&#xff08;索引/下标/index&#xff09; 正序、反序标识符&#xff1a; ( ) 里面的元素是用英文格式的逗号分割开来关键字&#xff1a;tuple 列表和元组有什么区别&#xff1f; 元组…