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

前面那些准备工作做完之后,现在我们就具体来用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.mfbz.cn/a/567733.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LateX的基础学习

what can i say 在text.tex中写下 \documentclass{article} \begin{document]Hello \LaTeX. \end{document} 关闭记事本,cmd中dir保存,用latex text.tex来编译,可以命令行慢慢编译,这可以做成bat文件 为什么不直接开始在texst…

第八讲:C语言指针(2)

目录 1、数组名的理解 2、使⽤指针访问数组 3、⼀维数组传参的本质 4、冒泡排序 5、⼆级指针 6、指针数组 7、指针数组模拟⼆维数组 1、数组名的理解 其实数组名本来就是地址&#xff0c;⽽且 是数组⾸元素的地址&#xff0c;例如&#xff1a; #include <stdio.h>…

C++信息学奥赛 数据结构认识

数据结构 1.1数据结构分类 1.2基本数据类型 1.3数字编码 1.4字符编码 1.1数据结构分类 数据结构如同一副稳固而多样的框架。为数据的有序组织提供了蓝图&#xff0c;算法得以在此基础上生动起来。 常用的数据结构包括哪些 &#xff0c; &#xff0c; &…

Redis篇:缓存击穿及解决方案

1.何为缓存击穿 缓存击穿问题也叫热点Key问题&#xff0c;就是一个被高并发访问并且缓存重建业务较复杂的key突然失效了&#xff08;有可能是正好过期了&#xff09;&#xff0c;无数的请求访问会在瞬间给数据库带来巨大的冲击。 常见的解决方案有两种&#xff1a; 互斥锁 逻…

书生·浦语大模型实战营之OpenXLab 部署 InternLM2 实践指南

书生浦语大模型实战营之OpenXLab 部署 InternLM2 实践指南 本文档将手把手教您如何在 OpenXLab 部署一个 InternLM2-7B chat 的应用 目录 资料介绍书生浦语 InternLM介绍OpenXLab浦源平台介绍部署 InternLM2-Chat-7B demo模型准备上传模型编写代码部署应用 资料介绍 书生浦语…

揭开ChatGPT面纱(1):准备工作(搭建开发环境运行OpenAI Demo)

文章目录 序言&#xff1a;探索人工智能的新篇章一、搭建开发环境二、编写并运行demo1.代码2.解析3.执行结果 本博客的gitlab仓库&#xff1a;地址&#xff0c;本博客对应01文件夹。 序言&#xff1a;探索人工智能的新篇章 随着人工智能技术的飞速发展&#xff0c;ChatGPT作为…

GITHUB的VB代码无法加载的问题解决

GITHUB里有不少好的VB代码&#xff0c;但是下载之后&#xff0c;经常出现工程加载出错的问题&#xff0c;例如&#xff1a; LOG文件为&#xff1a; 不能加载 0 行 0: 不能加载文件 D:\xxxx\Semi VB API Loader\frmMain.frm 。 原因其实很简单&#xff0c;github里的换行符是u…

OpenFE:开启数据特征工程新时代

OpenFE&#xff1a;开启数据特征工程新时代 数据特征工程是机器学习和数据分析领域中至关重要的一环&#xff0c;它涉及对原始数据进行处理和转换&#xff0c;以提取出有用的特征&#xff0c;为模型构建和预测提供更好的输入。在这个领域中&#xff0c;Python库OpenFE为数据科学…

高级控件4:Spinner

Spinner下拉列表组件 主要集合ArrayAdapter、SimpleAdapter以及自定义的Adapter&#xff08;继承自BaseAdapter&#xff09;配合使用实现下拉选择或者对话框中选择某一条目。下拉使用的更多&#xff0c;所以&#xff0c;接下来的案例也会重在演示下拉效果。 本次基本就是上代…

深入理解高级加密标准(Advanced Encryption Standard)

title: 深入理解高级加密标准&#xff08;Advanced Encryption Standard&#xff09; date: 2024/4/23 20:04:36 updated: 2024/4/23 20:04:36 tags: AES概述加密原理优势特点算法详解安全性应用实践案例分析 第一章&#xff1a;AES概述 AES的历史和背景 历史&#xff1a; 高…

【八股文】Spring 谈谈你对AOP的理解

AOP AOP(Aspect-Oriented Programming&#xff0c;面向切面编程)&#xff1a;是一种新的方法论&#xff0c;是对传统 OOP(Object-Oriented Programming&#xff0c;面向对象编程)的补充。 面向对象是纵向继承&#xff0c;面向切面是横向抽取。 OOP思想是一种垂直纵向的继承体…

上网行为管理软件怎么选 三款好用的上网行为管理软件

上网行为管理软件怎么选 三款好用的上网行为管理软件 一款优秀的上网行为管理软件可以满足企业的多种需求&#xff0c;帮助企业有效监督员工的行为&#xff0c;提升工作效率和企业效益&#xff0c;但是这些软件差异较大&#xff0c;选择的时候需要考虑这些因素。 1、明确需求 …

基于一款最多能够支持10000路的 modbus RS485 led灯光控制板做灯控程序

背景 介绍一款之前用过的一款设备&#xff0c;基于RS485通讯协议&#xff0c;控制LED灯或RGB灯带。 设备介绍 之前用它来做智能中药柜的灯控板&#xff0c;结合物联网网关&#xff0c;modbus采集&#xff0c;mqtt转发&#xff0c;以及mqtt的rpc指令下发 设备图片 功能说明 …

Java基本语法(基础部分)

Java基本语法 文章目录 Java基本语法前言一、准备工作1.1 计算机软件与硬件1.2 计算机编程语言1.3 Java语言概述&程序分析1.4 Java环境搭建&Java API1.5 Java核心机制JVM 二、变量2.1 关键字&标识符2.2 变量2.3 数据类型(基本数据类型)2.3.1 基本数据类型2.3.2 基本…

互联网营销两大宗师:周鸿祎和雷军做个人IP有什么不同?

前几天周鸿祎说要把自己的迈巴赫卖了,准备换国产新能源,还喊话让各个车企给他送车去体验。不少车企都送去了自己的最新车型,只有雷军直接回答,“等SUV出”。我们是在吃瓜,作者却是从中看到了新老营销宗师的手法不同。 最近,在纪念互联网30周年的座谈会上,发生了一件趣事…

JAVA网络编程、项目验证码实现

什么是网络编程? 在网络通信协议下&#xff0c;不同计算机上运行的程序&#xff0c;进行的数据传输。 应用场景&#xff1a;即时通信、网游对战、金融证券、国际贸易、邮件、等等 不管是什么场景&#xff0c;都是计算机跟计算机之间通过网络进行数据传输 Java中可以使用ja…

wordpress建网站主题案例推荐

wordpress企业网站主题案例 https://www.mymoban.com/wordpress/ wordpress公司官网主题案例 https://www.wowsoho.com/jianzhan wordpress外贸主题案例 https://www.wpniu.com/moban

一维递归:递去

示例&#xff1a; /*** brief how about recursive-forward-1? show you here.* author wenxuanpei* email 15873152445163.com(query for any question here)*/ #define _CRT_SECURE_NO_WARNINGS//support c-library in Microsoft-Visual-Studio #include <stdio.h>…

深度学习-数据操作

目录 张量通过shape属性访问张量的形状通过shape属性访问张量中元素的总数reshape改变张量的形状&#xff08;不改变元素数量和元素值&#xff09;使用全0、全1、其他常量或者从特定分布中随机采样的数字通过提供包含数值的Python列表为所需张量中的每个元素赋予确定值。张量的…

记录交叉编译环境配置--海思开发板的 嵌入式nginx和 php的移植

嵌入式 lnmp搭建的记录 一些交叉编译的配置环境思路分享&#xff1a;P&#xff1a;php编译PHP可能遇到的问题configure阶段&#xff1a;Makefile-make阶段&#xff1a;Makefile-make install阶段&#xff1a; N&#xff1a;Nginx 文章比较水&#xff0c;并没有没解决什么实际问…
最新文章