当前位置：首页 > news >正文

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

news 来源：原创 2025/6/2 11:07:09

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

（暂定）

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

中篇：前端功能开发

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

前言

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

一、项目介绍

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

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

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

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

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

https://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 https://github.com/PanJiaChen/vue-admin-template.git

//进入项目目录
cd vue-admin-template

//安装依赖
npm install

//建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

//启动服务
npm run dev