图书馆管理系统（一）基于jquery、ajax
前言
同学们前面已经学习了web基础部分了，为了巩固和熟练前面所学的知识，从今天起，我们一起做一个图书馆管理系统的项目。通过项目实战夯实基础，将所学的知识真正用到实战中，强化网页设计的能力，体验使用诸多模块进行网页开发。
单元一 项目简介
图书馆管理系统是一个Web网页，允许用户登录管理员账号进行管理书籍信息。
该项目主要是基于jquery和ajax的一个图书馆管理系统项目。
管理员系统可以新增、编辑、删除书籍及浏览现有书籍的详细信息。
也可以登录用户系统来查看书籍，借书还书，留言等一系列操作，该网页旨在为用户提供一个简单直观的图书馆管理项目体验。
1.技术栈
该项目中将通过前端，后端以及数据储存来实现。
- 前端中我们会使用HTML, CSS, JavaScript (jQuery)，AJAX。
- 后端中我们使用了Node.js, Express,npm。
- 数据储存中我们主要使用本地文本文件 (books.txt) 用于存储书籍信息和本地文本文件 (users.txt) 用于存储账号信息。
2.项目结构
单元二 安装环境、插件及入门
学习目标
- 创建library-management-system文件夹
- 在vscode中下载Live Server插件
- 在Node.js 官网 下载并安装 Node.js
- 下载jQuery.js
任务2.1 创建文件夹
任务描述
主要实现的是项目文件夹的创建。
任务实施
首先我们新建本地新建文件夹。文件夹名为library-management-system
注意：该项目中的所有命名都要保证是英文，避免在后续的安装环境或初始化环境中报错。
如图：
在创建好的文件夹中再创建好静态资源包，两个txt文本，还有后端服务器代码。
如图：
注意：这里面其他的文件或包会在后续搭建环境中再下载好，目前阶段无需准备。
最后在创建好的public包中创建CSS,JS等我们搭建网站所需的静态资源包
如图：
到目前基本的文件夹就创建好了，最后在vscode中打开library-management-system以后的就在这里进行。
任务2.2 下载Live Server插件
任务描述
在vscode中下载Live Server插件，以便后续的服务器搭建。
该插件的主要功能是启动一个具有静态和动态页面实时重新加载功能的开发本地服务器。
任务实施
在vscode中的扩展商店中搜索并安装Live Server并启用；如图：
启用之后我们以后的所有试运行时都需要右键点击Open with Live Server该选项来运行，这样该插件就会为本地创建一个服务器。可以在vscode右下角看到。
后面的数字即为端口名。再次点击此位置就会关闭服务器，点击就会启用服务器。
任务2.3 安装 Node.js并搭建环境
任务描述
由于我们这个项目会连接到后端，所以我们该项目需要一个强大的后端环境来运行，所以这里我们选择安装Node.js环境，来进行，不光Node.js可以运行js语言使得前端和后端都可以使用同一种语言。而且Node.js 自带了 npm，您可以方便地安装并管理许多第三方库和模块。例如我们这个项目里需要使用到Express框架。
所以就有了该任务，安装Node.js。
任务实施
首先进入Node.js官网Node.js — 在任何地方运行 JavaScript点击下载并进行安装。
这里就不带大家安装了，大家可自行寻找教程进行安装。
安装完成之后让我们打开命令符，管理员权限运行，并进行初始化npm，和安装所需依赖。
进入到命令提示符之后先使用cd跳转到我们该项目的路径
进入之后首先在其后面输入npm init -y让其进行npm初始化，等待初始化完成之后在进行安装所需依赖，在其路径后面输入npm install express body-parser cors，安装成功之后就会发现我们该项目的包多了很多文件夹以及文件，这些就是我们刚刚安装的所需依赖。
注意：在这个任务中，特别是命令符这块，我们可能会出现很多错误，这是我们就要检查包是否都为英文，文件夹是否没有程序正在使用。以及其他错误，可以自行上网搜索并解决。
任务2.4 下载jQuery.js
任务描述
下载jQuery.js，以便后续我们使用jQuery语言进行编写。
任务实施
进入官网Download jQuery | jQuery并点击下载按钮
之后会发现进入了页面https://code.jquery.com/jquery-3.7.1.min.js此时我们全选并复制代码，并在vscode中新建一个js文件用来粘贴刚刚复制的jQuery代码，如图所示jQuery就下载完毕。
本章主要讲解初始准备工作，下一章进行页面搭建及功能实现。