主页 > 软件开发 >

express+Vue2进行项目实战-景点后台管理系统（上篇）

软件开发
2025-08-23 00:21:01

合理安排学习进度，因此项目实战的内容分为上中下三篇，本篇为上篇。

（暂定）

上篇：项目介绍以及准备、初始化工作

中篇：前端功能开发

下篇：后端接口开发+调试+项目完结

前言

前面做了一个express专栏，从入门：搭建一个简单的后端服务器，再到进阶：使用数据库集成（增删改查）操作。然后就结束专栏内容。后期考虑补充项目实战，做一个大家都能从0到1上手的项目实战，于是这次的项目实战来了！

一、项目介绍

本项目做一个景点后台管理系统，采用前后端分离，前端使用Vue2进行开发，后端使用express搭建本地服务器，数据库用mysql。

前端使用vue-admin-template后台模板，我们在此基础上进行功能开发。

GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template

这里膜拜一下大佬！！！这个后台模板真的很实用。

后端使用express框架，可以看我的express专栏进行学习

blog.csdn.net/orbit4/category_12879955.html

数据库使用mysql（我用的是8.0版本）。

1、功能介绍 1.1、前端主要功能：

景点内容管理模块：

组件：条件筛选、景点列表功能：搜索、添加、编辑、文件（图片）上传、删除。 1.2、页面展示 1.2.1、登录页

（后台模板已做好这部分功能）

1.2.2、景点管理

这部分包括核心功能：搜索、添加、编辑、文件（图片）上传、删除。

1.2.3、新增

1.2.4、编辑

1.2.5、删除

1.2.6、搜索

二、准备工作 1、安装和下载工作

请特别注意这部分的内容，关系到后续整个项目的开发！！！

前端部分：拉取vue-admin-template的代码，初始化项目，确保项目可以正常启动

后端部分：安装express和express-generator（一个脚手架，用于快递搭建express应用程序）

npm install express express-generator

node版本：18.16.1 （这里建议使用nvm，一个node版本管理工具，自行查看如何使用）

//安装 npm install nvm -g //常用指令 nvm list availabel // 查看可下载的node版本 nvm ls //查看已下载的node版本 nvm use xx //使用特定版本的node nvm install xx //下载某个版本的node nvm uninstall xx //卸载已安装的某个node版本

apipost工具：用于测试http方法（测试接口）

数据库可视化管理工具navicat：用于快捷操作数据表。

上面提到的工具自行安装使用，实在找不到，请私信我。

2、前置知识

本项目实战需要有一定的vue2开发基础和element-ui组件库使用基础和express使用基础（知道如何使用数据库集成：增删改查操作）。

如果是零基础也不用担心，跟着步骤做，有不懂的地方留言提问，或者自行查阅相关知识点。

三、初始化工作

这部分进行代码拉取，初始化项目。

1、拉取前端模板代码

大佬的github上已有详细介绍

// 克隆项目 git clone github /PanJiaChen/vue-admin-template.git //进入项目目录 cd vue-admin-template //安装依赖 npm install //建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry= registry.npm.taobao.org //启动服务 npm run dev 2、创建|初始化本地服务器

新建一个目录，安装和创建express项目

安装指令

npm install express express-generator

创建项目指令

（xx 则表示你项目的名称）

express xx

按步骤进行初始化和启动项目

可以在文件中修改启动端口（默认是3000）

在文件中新增一条打印语句

启动项目(这里用了nodemon，没安装的，请自行安装使用 npm install nodemon -g）

nodemon npm start

（注意：我将端口改成了4000）