express入门03增删改查

目录

  • 1 搭建服务器
  • 2 静态文件托管
  • 3 引入bootstrap
  • 4 引入jquery
  • 5 编写后端接口
    • 5.1 添加列表查询方法
    • 5.2 添加路由
    • 5.3 添加数据表格
  • 总结

我们前两篇介绍了如何利用express搭建服务器,如何实现静态资源托管。那利用这两篇的知识点,我们就可以实现一个小功能。通常我们的管理系统是由模块组成的,而模块是由功能点组成。功能点分为四个基础的部分,包括增加、修改、删除、查看。

其实开发后台管理系统,就是利用这四个基本功能点来进行各种组合,来实现我们的业务目标,先看一下我们这一次的实战案例的效果
在这里插入图片描述
我们有一个表格,表示用户管理,可以进行添加用户,也可以进行删除。

1 搭建服务器

首先呢需要搭建一下服务器,先创建一个工程目录,我们叫usermanager
在这里插入图片描述
创建好之后用我们的vscode打开这个目录
在这里插入图片描述
先需要初始化一下项目,使用npm init命令进行初始化

npm init

在这里插入图片描述
然后创建一个app.js作为我们服务器的启动文件
在这里插入图片描述
先安装一下express的包,在命令行输入npm i express

npm i express

在这里插入图片描述
然后在app.js里输入启动服务器的命令,启动我们的服务器

const express = require('express')
const app = express()
app.listen(3000, () => {console.log('server is running on port 3000')
})

第一句命令是我们需要引入我们的express的包

第二句是创建express

第三句是启动服务,监听3000端口

代码写好之后,在命令行输入nodemon app.js启动我们的服务器

nodemon app.js

在这里插入图片描述
使用这个插件去启动的好处是,如果我们修改了代码,会自动帮我们重启,省了不少事情

使用之前需要进行一下安装

npm i nodemon -g

后边-g表示全局安装,你下次再创建新项目的时候就不需要再安装这个包了

2 静态文件托管

我们这个实战案例是一个单体架构,所谓的单体架构是前端和后端代码都是在一个目录下,和目前前后端分离,部署两个项目还是不同的。

在项目的根目录下创建一个public文件夹,表示我们的静态文件的目录
在这里插入图片描述
一般静态文件是三种,分别是html、css、js,当然有时候还会有一些图片,我们使用images目录,在public目录下创建css、javascript、images这几个文件夹
在这里插入图片描述
在public目录下创建index.html
在这里插入图片描述
可以下载一些头像,放到images文件夹下
在这里插入图片描述
在app.js中我们将pulbic目录作为我们静态托管的目录,输入如下代码

app.use(express.static('public'))

在这里插入图片描述
这个时侯在浏览器使用http://localhost:3000访问可以看到我们的Html页面的内容已经显示出来
在这里插入图片描述

3 引入bootstrap

表格和新增表单的样式,我们使用bootstrap这个框架来实现,找到bootstarp的官方网址,下载最新版本
bootstrap最新版本
在这里插入图片描述
将下载好的包解压缩
在这里插入图片描述
在public目录下创建一个bootstrap文件夹,将css和js文件夹拷贝进来
在这里插入图片描述

4 引入jquery

操作dom我们使用jquery库,打开jquery的网址官方网站
在这里插入图片描述
在这里插入图片描述
注意这个库的下载方法是在按钮上点击右键,另存为
在这里插入图片描述
将库下载到我们的JavaScript目录下
在这里插入图片描述
回到我们的index.html文件下,将bootstrap和jquery引入到页面中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap/css/bootstrap.css"><script src="./bootstrap/js/bootstrap.bundle.js"></script><script src="./javascript/jquery-3.7.1.min.js"></script>
</head>
<body>静态网页托管
</body>
</html>

5 编写后端接口

在页面上操作的时候,其实是需要访问后端接口的,我们这里使用模块来开发后端接口。在根目录下创建一个model文件夹
在这里插入图片描述
下边创建一个UserModel.js
在这里插入图片描述
先用对象的语法创建我们的类

class UserModel{constructor(){this.userList = [{id:1,name:'zhangsan',age:20,sex:'男',address:'北京',phone:'13800000000',email:'233888@qq.com',avatar:'images/1.png'},{id:2,name:'lisi',age:18,sex:'女',address:'上海',phone:'13900000000',email:'233888@qq.com',avatar:'images/2.png'},{id:3,name:'wangwu',age:21,sex:'男',address:'广州',phone:'13700000000',email:'233888@qq.com',avatar:'images/3.png'}];}
}module.exports = UserModel;

我们先用class关键字创建了一个类,用构造方法我们初始化了一组用户的数据,最后用模块的导出语法将类导出,这样在其他模块中可以进行导入

5.1 添加列表查询方法

在类中我们添加一个查询全部数据的方法

getUsers(){return {code:200,msg:'获取成功',data:this.userList};}

这个方法比较简单直接返回我们的用户列表就可以,这里我们按照json的格式构造了返回的结果,code用200表示成功,data是我们具体的数据
在这里插入图片描述

5.2 添加路由

接口有了之后,需要创建路由来调用我们的接口,在app.js里我们创建一个获取用户的路由,路由地址为/user/list

app.get('/user/list', (req, res) => {const users = userModel.getUsers()res.send(users)
})

在这里插入图片描述
路由添加好之后,我们用PostMan测试一下我们的接口
在这里插入图片描述
可以看到我们的接口已经正常返回数据了

5.3 添加数据表格

在html页面里,我们使用table组件来展示我们的列表的内容,因为已经引入了bootstrap,所以可以添加一些样式让页面变得更好看一点

<div class="container"><h2>用户管理</h2><table class="table"><thead><th>用户名</th><th>年龄</th><th>性别</th><th>地址</th><th>手机</th><th>邮箱</th><th>操作</th></thead><tbody></tbody></table></div>

现在表格已经显示出了表头
在这里插入图片描述
页面加载的时候我们要访问后端接口获取数据,我们定义一个getUserList方法用来请求后端的数据

function getUserList(){$.ajax({url:BASE_URL+'/user/list',type:'get',dataType:'json',success:function(res){const userList = res.datalet htmlStr ='';htmlStr = userList.reduce((html,item)=>{return html+=`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.sex}</td><td>${item.address}</td><td>${item.phone}</td><td>${item.email}</td><td><image src="${item.avatar}" width="40" height="40"/></td><td><button>删除</button></td></tr>`},"");$('tbody').html(htmlStr);}})}

这里通过jquery发送异步请求,来调用后端的接口获取数据,返回的数据我们通过模板字符串来拼接我们的表格的行数据,最终将拼接好的字符串渲染到tbody里

然后在页面加载的时候,调用我们的方法用来初始化表格数据

$(()=>{getUserList();})

这个时候再刷新页面的时候数据就被加载出来了
在这里插入图片描述
删除和添加的思路和列表查询类似,也是遵循先写后端接口,然后实现前端的调用

总结

本篇我们以一个实际的案例重新复习了一下我们前两篇学习过的知识点,在自己做架构的时候需要按照业务述求选用合适的前后端框架,其实使用bootstarp+jquery也是一种不错的选择。

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

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

相关文章

c++中main(int argc, char* argv[])参数详解

目录 一、main函数形式 1.无参数&#xff1a; 2.带有两个参数&#xff1a; 二、参数详解 1.int argc 2.char* argv[] 三、示例演示 一、main函数形式 在C中&#xff0c;main 函数可以有两种常见的参数形式&#xff1a; 1.无参数&#xff1a; 代码如下&#xff1a; i…

私域运营技术干货 | 基于精准用户分群的个性化智能外呼策略实践

智能外呼产品经过了近几年的发展&#xff0c;作为一种用户触达的手段&#xff0c;普及率越来越高。但是智能外呼产品本身的劣势就是客户黏性差&#xff0c;迁移成本低&#xff0c;导致市场竞争非常激烈&#xff0c;各家都是拼价格拼线路资源&#xff0c;同质化严重。如何建立云…

flink学习-容错机制

checkpoint&#xff08;检查点&#xff09; 在flink中最重要的容错机制&#xff0c;就是checkpoint机制&#xff0c;使用checkpoint可以将之前某个时间点的所有的状态进行保存&#xff0c;这个存档就是checkpoint。 检查点的保存 周期性存储保存&#xff0c;间隔时间可以由用…

游戏报错steam_api.dll丢失怎么解决?steam_api.dll缺失的7种靠谱解决方法

steam_api.dll 是一个由 Valve Corporation 开发的动态链接库文件&#xff0c;专门用于其 Steam 游戏平台。这个文件是 Windows 操作系统下的一个重要组件&#xff0c;它确保了通过 Steam 平台发布的游戏能够正常运行&#xff0c;并且能够使用 Steamworks API 提供的各种功能。…

TIA博途Wincc_如何实现开机画面等待几秒后,自动跳转到主画面?

TIA博途Wincc_如何实现开机画面等待几秒后,自动跳转到主画面? 想要实现的功能: 上电开机后,在开机画面等待几秒后,自动跳转到主画面, 如下图所示,新建一个项目后,添加一个开机画面和主画面 如下图所示,在HMI变量中添加一个int型变量BitTime, 如下图所示,设置该变量…

怎么把pdf格式文件其中几页单独弄出来

在现代办公和学习环境中&#xff0c;pdf格式的文件因其跨平台兼容性和良好的保持原样特性而备受欢迎。然而&#xff0c;有时我们可能只需要pdf文件中的某几页&#xff0c;而不是整个文件。这时&#xff0c;将PDF文件中的特定页面单独提取出来就显得尤为重要。 搜索一下&#xf…

IDEA 高效插件工具

文章目录 LombokMaven Helper 依赖冲突any-rule(正则表达式插件)快速生成javadocGsonFormat (Aits) 将json解析成类Diagrams使用 类图SequenceDiagram时序图GenerateAllSetter&#xff08;AltEnter&#xff09;大小写转写String ManipulationGitToolBox 代码提交人activate-pow…

Flutter- AutomaticKeepAliveClientMixin 实现Widget保持活跃状态

前言 在 Flutter 中&#xff0c;AutomaticKeepAliveClientMixin 是一个 mixin&#xff0c;用于给 State 类添加能力&#xff0c;使得当它的内容滚动出屏幕时仍能保持其状态&#xff0c;这对于 TabBarView 或者滚动列表中使用 PageView 时非常有用&#xff0c;因为这些情况下你…

诊所管理系统如何重塑患者就医流程

随着信息技术的快速发展&#xff0c;诊所管理系统的应用正在为医疗服务带来革命性的变化。这一系统不仅仅是一种管理工具&#xff0c;更是一种全方位的健康管理解决方案&#xff0c;从诊前、诊中到诊后&#xff0c;为患者提供了一系列便捷、高效的服务&#xff0c;让患者的就医…

Oracle数据库面试题-12

41. 描述Oracle中的位图索引及其用途。 Oracle中的位图索引&#xff1a; 位图索引是Oracle数据库中的一种特殊类型的索引&#xff0c;它适用于包含大量重复值的列。位图索引使用位图数据结构来存储这些值&#xff0c;从而提供了一种快速查找特定值是否存在于索引列中的方法。…

信息收集---网站目录和CMS指纹识别

一. 网站目录收集 1. 常见网站敏感文件 网站的备份文件/数据库备份文件 wwwroot.zip Db.zip 后台登陆的目录 manage login 安装包&#xff08;源码&#xff09; 上传的目录uploads mysql的管理界面 phpmyadmin 程序的安装路径 2. Dirb 工具 工具介绍 dirb 是一款用…

ICC2:如何获取get_xx -filter后可用的属性有哪些?

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 report_attribute -app -class cell $instname 这种直接告诉你指定cell有哪些属性&#xff0c;以及对应的值是什么 或者直接用list_attribute也可以 list_attribute -help可以…

迅为3A6000_7A2000开发板龙芯全国产处理器LoongArch架构核心主板

性能强→采用全国产龙芯3A6000处理器&#xff0c;基于龙芯自主指令系统(LoongArch)的LA464微结构&#xff0c;并进一步提升频率&#xff0c;降低功耗&#xff0c;优化性能。 桥片→采用龙芯 7A2000&#xff0c;支持PCIE3.0、USB3.0和 SATA 3.0、显示接口2 路、HDMI和1路 VGA&a…

编程猫电脑怎么安装不了:深入剖析原因与解决方案

编程猫电脑怎么安装不了&#xff1a;深入剖析原因与解决方案 在数字化时代的浪潮中&#xff0c;编程教育日益受到重视&#xff0c;而编程猫作为一款备受欢迎的编程学习软件&#xff0c;却在安装过程中遭遇了不少困扰。今天&#xff0c;我们就来深入剖析编程猫电脑版安装不了的…

积累和消耗,人生本质的两件事

人生的本质其实就两件事&#xff0c;消耗和积累。 纵观你身边所有的人&#xff0c;他们做的所有的事&#xff0c;基本都可以分为两类。 一、积累 二、消耗 比如说感情&#xff0c;在我们每一个人的青春回忆里&#xff0c;都或多或少有一段刻骨铭心的感情&#xff0c;有些人的感…

Linux进程间通信---使用【共享内存+信号量+消息队列】的组合来实现服务器进程与客户进程间的通信

IPC结合实现进程间通信实例 下面将使用【共享内存信号量消息队列】的组合来实现服务器进程与客户进程间的通信。 共享内存用来传递数据&#xff1b;信号量用来同步&#xff1b;消息队列用来 在客户端修改了共享内存后通知服务器读取。 server.c&#xff1a;服务端接收信息 …

如何解除内存卡的写保护并格式化为exFAT文件系统

最近有客户提问内存卡提示写保护&#xff0c;且无法格式化为exFAT格式的问题&#xff0c;可能是由于多种原因引起的。以下是一些可能的解决方法&#xff1a; 1. 检查物理写保护开关 一些SD卡和MicroSD卡适配器上有一个小的物理开关&#xff0c;可以启用或禁用写保护。确保这个…

C# WPF 读写CAN数据

C# WPF 读写CAN数据 CAN 分析仪 分析仪资料下载 官方地址&#xff1a;https://www.zhcxgd.com/1.html CSDN&#xff1a; 项目配置 复制Dll库文件 文件在上面的资料里面 设置不安全代码 CAN C#工具类 CAN_Tool.cs using Microsoft.VisualBasic; using System; using Sys…

任务3.8.2 利用RDD计算总分与平均分

实战&#xff1a;使用RDD 计算学生成绩的总分与平均分 项目背景 本项目旨在利用 Apache Spark 的强大数据处理能力&#xff0c;对存储在 HDFS 上的学生成绩文件进行处理&#xff0c;计算每个学生的总分和平均分。 项目目标 读取存储在 HDFS 上的成绩文件。计算每个学生的总…

MySQL 触发器(实验报告)

一、实验名称&#xff1a; 触发器 二、实验日期&#xff1a; 2024 年 6月 8日 三、实验目的&#xff1a; 掌握MySQL触发器的创建及调用&#xff1b; 四、实验用的仪器和材料&#xff1a; 硬件&#xff1a;PC电脑一台&#xff1b; 配置&#xff1a;内存&#xff0c;…