Node.js+Vue+MySQL全栈实战：乡村旅游系统从设计到部署完整指南

开头部分应该像一个资深开发者在回顾自己的系统开发经历，然后进入正题。我试着写一下，需要注意每段不少于150字，并最终保证主体部分（开头之后）6000字以上。

如果你想找一个能完整跑通前后端分离流程、又贴近真实业务场景的全栈项目练手，那么“乡村旅游系统”是一个很合适的选题。我前段时间用 Node.js + Vue + ElementUI 完整实现了一套这样的系统，后端接口基于 Express 提供，数据库用的 MySQL，整个项目从前端页面、后台管理到 API 设计、数据库建模都走了一遍，算是把全栈开发的主线流程摸透了。这篇文章就基于这个项目，把这套技术组合的选型原因、系统设计、数据库规划、前后端实现以及实实在在踩过的坑全部整理出来。不管你是正在做毕业设计，还是想自己从零搭一个带管理后台的Web系统，这份内容都能直接参照着用。篇幅会比较长，建议先收藏再慢慢看。

1. 项目定位与整体技术架构：为什么选择这套组合

1.1 乡村旅游系统的核心需求

乡村旅游系统本质上是“信息展示 + 在线交易 + 后台管理”三类业务的综合体。游客端需要看到乡村景点、旅游线路、民宿信息、特色农产品等内容，并能完成注册登录、线路查看、民宿预订、特产下单这些操作。管理员端则需要维护景点资料、更新线路信息、管理民宿房态、处理订单、审核评论、发布公告。

我一开始并没有急着写代码，而是先把业务拆成了几个核心模块：内容展示模块、用户模块、预订交易模块、后台管理模块。这样拆分的好处是，开发时可以分阶段推进，数据库设计也更容易对应到具体业务表，不会出现写着写着不知道该把字段放哪张表的问题。

1.2 技术选型背后的逻辑

整套系统的技术栈选型不是拍脑袋决定的，而是综合考虑了开发效率、学习成本、生态成熟度和部署难度。

后端选择 Node.js + Express，核心原因有两个。一是JavaScript语言前后端统一，写前端页面时用的语法和逻辑思维可以直接沿用到后端接口开发，上下文切换成本极低。二是Express非常轻量，中间件机制清晰，路由组织灵活，对于乡村旅游系统这种以CRUD为主的业务系统来说，Express提供的路由、请求解析、响应处理能力已经完全够用，不需要引入Spring Boot这类重型框架。

前端使用 Vue + ElementUI，看中的是组件化开发效率和ElementUI在后台管理系统领域的成熟度。ElementUI的表格、表单、弹窗、分页、菜单等组件都是现成的，写管理端页面时基本不用自己造轮子。Vue的双向绑定和响应式机制让页面状态管理变得很直观，尤其是民宿预订、订单列表这类需要实时更新数据的场景，开发体验很顺畅。

数据库选择 MySQL，主要考虑到业务数据之间有明显的关系结构。用户和订单、订单和民宿、线路和景点之间都存在关联查询需求，MySQL的关系模型和SQL查询能力在这种场景下比NoSQL数据库更合适。同时MySQL的事务支持保证了预订操作中数据的一致性，这在涉及房间状态更新和订单生成的场景中非常关键。

这套组合的优势在于“够用且轻”。整个项目不依赖复杂的中间件，本地装好 Node.js 和 MySQL 就能跑起来，部署时也只需要一台普通云服务器。对于中小体量的管理系统来说，这种轻量级技术栈的维护成本远低于微服务架构，性价比很高。

2. 系统功能模块与数据库设计

2.1 前台用户端功能拆解

前台是游客直接接触的部分，我把它细分成五个功能域。首页聚合展示：放轮播图、热门景点推荐、最新公告、精选线路，让用户一进入网站就能获取到核心信息。景点模块：展示景点列表和详情页，详情页包含景点介绍、地理位置、开放时间、游客评价等内容。线路模块：提供旅游线路的查询和查看，支持按天数、价格区间筛选。民宿模块：展示民宿列表和房型信息，用户可以选择入住日期并提交预订。个人中心：用户注册登录后可以查看自己的订单、修改个人信息。

每个功能域都对应一套独立的API，前后端通过接口交互，页面之间不直接跳转数据。这种设计让我在开发时可以并行推进不同模块，不至于改一个功能就动到一片代码。

2.2 后台管理端功能拆解

后台管理的核心价值在于让运营人员可以自主维护系统内容。我的后台包含了六个主要模块：仪表盘统计、景点管理、线路管理、民宿管理、订单管理、用户管理。仪表盘展示核心业务指标，比如景点总数、订单数量、新增用户数等。景点管理和线路管理是典型的表格CRUD页面，支持搜索、分页、新增、编辑、删除。民宿管理除了基本信息维护，还需要管理房型和房态。订单管理涉及订单状态的流转，比如待付款、已确认、已入住、已完成。用户管理则负责查看用户列表、启用或禁用账号。

后台页面全部基于ElementUI的布局组件搭建，左侧菜单使用el-menu，右侧内容区根据路由动态渲染。整个后台和前台共用同一套后端API，通过JWT中的角色信息区分权限。

2.3 数据库表结构设计与关系梳理

数据库设计是整个系统的基础，表结构的好坏直接决定后期开发效率。我的数据库中主要包含以下表：用户表、景点表、线路表、民宿表、民宿房型表、订单表、评论表、公告表、管理员表。

以用户表为例，字段设计如下：

订单表的设计则需要特别关注状态字段。我使用了一个整数字段status标识订单状态，0待支付、1待确认、2已确认、3已入住、4已完成、5已取消。相比直接用字符串，整数字段占空间更小、查询效率更高，同时我可以在前端定义枚举映射显示对应的中文状态。

关于索引，我不仅在主键上建立了索引，还在高频查询字段上增加了索引。比如订单表的user_id字段、景点表的热度字段、民宿表的位置字段。因为列表页往往带筛选条件，如果没有索引，数据量上来以后查询会明显变慢。这里有个小技巧：对于需要联合查询的场景，建立复合索引比单个字段索引更高效，比如订单表维护user_id和status的复合索引，查询用户订单列表时数据库可以直接走索引，不需要全表扫描。

表关系方面，我建议在业务层维护逻辑关联而不是强制使用物理外键。因为乡村旅游系统的数据量不大，物理外键会带来额外的约束检查开销，而且后期做数据迁移时容易遇到麻烦。只要在代码中保证关联字段的正确性和一致性，开发效率会更高。

3. 后端接口设计与核心实现

3.1 Express项目初始化和依赖安装

后端项目的创建流程比较固定。首先建立项目目录并初始化，安装核心依赖。我使用的是npm，在项目根目录执行初始化命令后，依次安装express、mysql2、cors、jsonwebtoken、bcryptjs、multer、nodemon等包。

bash复制mkdir tourism-server
cd tourism-server
npm init -y
npm install express mysql2 cors jsonwebtoken bcryptjs multer
npm install -D nodemon

这里有几个细节值得说明。mysql2是MySQL官方Node.js驱动mysql的升级版，支持Promise语法，配合async/await可以让代码非常简洁，不需要再用回调函数一层层嵌套。bcryptjs用来做密码哈希，这是一个纯JavaScript实现的库，不需要编译原生模块，在不同平台上都能直接安装使用，比bcrypt更省心。jsonwebtoken用来签发和验证JWT令牌，实现登录态保持。multer则是用于处理文件上传，景点图片、民宿照片都靠它保存到服务器。

package.json中要配置好启动脚本：

json复制{
  "scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js"
  }
}

3.2 Express路由组织和中间件配置

项目的目录结构我建议这样组织：

code复制tourism-server/
├── app.js
├── config/
│   └── db.js
├── middleware/
│   ├── auth.js
│   └── upload.js
├── routes/
│   ├── user.js
│   ├── attraction.js
│   ├── line.js
│   ├── homestay.js
│   ├── order.js
│   └── admin.js
├── controllers/
│   ├── userController.js
│   ├── attractionController.js
│   └── ...
└── utils/
    └── response.js

app.js 是整个应用的入口，负责中间件注册和路由挂载：

javascript复制const express = require('express');
const cors = require('cors');
const path = require('path');

const app = express();

app.use(cors({
  origin: ['http://localhost:8080', 'http://localhost:5173'],
  credentials: true
}));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

app.use('/api/user', require('./routes/user'));
app.use('/api/attraction', require('./routes/attraction'));
app.use('/api/line', require('./routes/line'));
app.use('/api/homestay', require('./routes/homestay'));
app.use('/api/order', require('./routes/order'));
app.use('/api/admin', require('./routes/admin'));

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

这里我重点说明cors中间件的配置。开发环境前后端分端口运行，前端在8080端口，后端在3000端口，如果不配置跨域规则，浏览器会把所有请求拦截掉。cors中间件允许指定origin数组，我只放行了本地开发地址，加上credentials为true是为了支持携带Cookie场景（虽然实际项目中token主要放在Authorization头中，但保留这个配置可以应对更多场景）。

express.json()中间件用来解析前端提交的JSON格式请求体，没有它的话req.body会是undefined。express.urlencoded则处理表单格式的数据，Multer处理文件上传时会用到这个配置基础。

3.3 数据库连接池配置

数据库连接这一块，我强烈建议使用连接池而不是每次都新建连接。连接池可以复用数据库连接，避免频繁建立和销毁连接带来的性能开销。直接上代码：

javascript复制// config/db.js
const mysql = require('mysql2/promise');

const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'tourism_db',
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0,
  multipleStatements: false
});

module.exports = pool;

connectionLimit设为10对于乡村旅游系统这个量级的应用已经够用。waitForConnections为true表示当连接池满时请求进入等待队列而不是直接报错。multipleStatements必须设为false，防止SQL注入。

实际操作中我遇到过一个很坑的问题：MySQL默认的编码可能是latin1，导致写入中文出现乱码。解决方案是创建数据库时指定utf8mb4字符集，并在连接配置中加上charset字段：

bash复制CREATE DATABASE tourism_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

3.4 核心接口实现：用户登录、分页查询、民宿预订

用户登录接口是系统的核心之一。流程分为三步：接收用户名密码、查询数据库比对密码、签发JWT返回前端。

javascript复制// controllers/userController.js
const pool = require('../config/db');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

async function login(req, res) {
  const { username, password } = req.body;

  if (!username || !password) {
    return res.status(400).json({ code: 400, message: '用户名和密码不能为空' });
  }

  const [rows] = await pool.query('SELECT * FROM user WHERE username = ?', [username]);

  if (rows.length === 0) {
    return res.status(401).json({ code: 401, message: '用户名或密码错误' });
  }

  const user = rows[0];
  const isMatch = bcrypt.compareSync(password, user.password);

  if (!isMatch) {
    return res.status(401).json({ code: 401, message: '用户名或密码错误' });
  }

  if (user.status === 0) {
    return res.status(403).json({ code: 403, message: '账号已被禁用' });
  }

  const token = jwt.sign(
    { id: user.id, username: user.username, role: 'user' },
    'your-secret-key',
    { expiresIn: '7d' }
  );

  res.json({
    code: 200,
    message: '登录成功',
    data: {
      token,
      userInfo: {
        id: user.id,
        username: user.username,
        nickname: user.nickname,
        avatar: user.avatar
      }
    }
  });
}

这里我用了pool.query执行参数化SQL语句。这里说明一下原因：直接用字符串拼接SQL是极其危险的做法，用户输入的内容一旦包含SQL片段就可能被注入攻击。参数化查询会把参数和SQL语句分开传递，是防止SQL注入最基本的手段。另外bcryptjs校验密码时用compareSync而不是把密文解密，因为哈希算法是单向的，只能通过重新计算对比判断密码是否匹配。

民宿预订接口涉及事务处理。因为预订操作包含两个步骤：创建订单记录、更新民宿房型的状态。任何一个步骤失败都必须回滚，否则会出现订单创建了但房间状态没更新、或者房间状态更新了但订单丢失的情况。

javascript复制async function createOrder(req, res) {
  const { homestayId, roomTypeId, checkInDate, checkOutDate, days, totalPrice } = req.body;
  const userId = req.user.id;

  const connection = await pool.getConnection();
  try {
    await connection.beginTransaction();

    const [insertResult] = await connection.query(
      `INSERT INTO order (order_no, user_id, homestay_id, room_type_id, 
       check_in_date, check_out_date, days, total_price, status)
       VALUES (?, ?, ?, ?, ?, ?, ?, ?, 0)`,
      [generateOrderNo(), userId, homestayId, roomTypeId, checkInDate, checkOutDate, days, totalPrice]
    );

    await connection.query(
      'UPDATE room_type SET booked_count = booked_count + ? WHERE id = ?',
      [days, roomTypeId]
    );

    await connection.commit();
    res.json({ code: 200, message: '预订成功', data: { orderId: insertResult.insertId } });
  } catch (error) {
    await connection.rollback();
    res.status(500).json({ code: 500, message: '预订失败，请稍后重试' });
  } finally {
    connection.release();
  }
}

列表页的接口通常需要支持分页、关键词搜索、按条件筛选。以景点列表为例，前端会传入page（页码）、pageSize（每页条数）、keyword（关键词）、category（分类）。接口内部需要做两个查询：一个是查总数，一个是查当前页的数据。

javascript复制async function list(req, res) {
  const { page = 1, pageSize = 10, keyword = '', category = '' } = req.query;
  const offset = (page - 1) * pageSize;

  let whereSql = 'WHERE 1=1';
  const params = [];

  if (keyword) {
    whereSql += ' AND (name LIKE ? OR intro LIKE ?)';
    params.push(`%${keyword}%`, `%${keyword}%`);
  }

  if (category) {
    whereSql += ' AND category = ?';
    params.push(category);
  }

  const [countRows] = await pool.query(`SELECT COUNT(*) AS total FROM attraction ${whereSql}`, params);
  const total = countRows[0].total;

  params.push(Number(pageSize), Number(offset));
  const [rows] = await pool.query(
    `SELECT * FROM attraction ${whereSql} ORDER BY create_time DESC LIMIT ? OFFSET ?`,
    params
  );

  res.json({
    code: 200,
    data: {
      list: rows,
      total: total,
      page: Number(page),
      pageSize: Number(pageSize)
    }
  });
}

这里有个细节容易踩坑：params数组里的pageSize和offset即使传过来是字符串类型，也必须用Number()转换为数字。因为MySQL的LIMIT和OFFSET子句如果接收到字符串类型的参数，在某些驱动版本下会报语法错误。

3.5 鉴权中间件和上传接口

管理端接口和用户的个人中心接口都需要身份验证。我用JWT实现了一个简单的鉴权中间件：

javascript复制// middleware/auth.js
const jwt = require('jsonwebtoken');

function auth(req, res, next) {
  const token = req.headers.authorization?.split(' ')[1];

  if (!token) {
    return res.status(401).json({ code: 401, message: '未登录或登录已过期' });
  }

  try {
    const decoded = jwt.verify(token, 'your-secret-key');
    req.user = decoded;
    next();
  } catch (error) {
    return res.status(401).json({ code: 401, message: 'token无效或已过期' });
  }
}

module.exports = auth;

前端请求时会在Axios请求拦截器中自动携带Authorization头，后端通过中间件对需要保护的接口做统一校验。上传接口的multer配置也很关键，需要限制文件类型和大小：

javascript复制const multer = require('multer');
const path = require('path');

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname);
    cb(null, Date.now() + '-' + Math.round(Math.random() * 1e9) + ext);
  }
});

const upload = multer({
  storage: storage,
  limits: { fileSize: 2 * 1024 * 1024 },
  fileFilter: function (req, file, cb) {
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (allowedTypes.includes(file.mimetype)) {
      cb(null, true);
    } else {
      cb(new Error('只能上传图片文件'));
    }
  }
});

文件名使用时间戳加随机数的组合可以避免中文文件名在服务器上导致的乱码问题。文件大小限制在2MB以内，防止大文件占用过多磁盘空间。

4. 前端页面开发与ElementUI实践

4.1 Vue项目创建与工程结构

前端部分我使用的Vue CLI创建项目。如果你的机器上已经安装了Node.js，使用如下命令创建项目：

bash复制npm install -g @vue/cli
vue create tourism-client

创建过程中会提示选择预设，我选择的是Manually select features，然后勾选Babel、Router、Vuex。创建完成后进入项目目录安装ElementUI：

bash复制cd tourism-client
npm install element-ui
npm install axios

这里有一个版本上的建议：如果你使用的是Vue 2项目，装element-ui没问题；但如果项目初始化时选择了Vue 3，则需要使用element-plus而非element-ui。ElementUI的完整引入方式比较省心，直接在main.js中注册：

javascript复制import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

完整引入的缺点是打包体积较大，但对于这种管理系统项目来说，换来的是开发时不需要反复import各种组件，代价完全可以接受。如果追求极致性能，可以按需引入，不过需要额外安装babel-plugin-component等配置，对新手并不友好。

前端项目的目录结构我这样组织：

code复制src/
├── api/
│   ├── user.js
│   ├── attraction.js
│   ├── homestay.js
│   └── order.js
├── assets/
├── components/
├── router/
│   └── index.js
├── store/
│   └── index.js
├── utils/
│   └── request.js
├── views/
│   ├── front/
│   │   ├── Home.vue
│   │   ├── AttractionList.vue
│   │   ├── AttractionDetail.vue
│   │   ├── HomestayList.vue
│   │   └── OrderList.vue
│   └── admin/
│       ├── Dashboard.vue
│       ├── AttractionManage.vue
│       ├── LineManage.vue
│       ├── HomestayManage.vue
│       └── OrderManage.vue
└── App.vue

4.2 基于ElementUI的后台管理页面搭建

后台管理页面搭建在ElementUI的Container布局上，左侧使用el-menu作为侧边栏菜单，顶部用el-header放面包屑和用户信息，中间内容区用el-main配合router-view渲染子页面。

核心的列表页面我统一使用了el-card包裹，内容分四块：筛选区域用el-form的inline模式、操作按钮区、el-table数据表格、el-pagination分页组件。以民宿管理为例，模板核心代码如下：

html复制<template>
  <div class="homestay-manage">
    <el-card shadow="never">
      <el-form :inline="true" :model="queryForm" class="search-form">
        <el-form-item label="民宿名称">
          <el-input v-model="queryForm.name" placeholder="请输入民宿名称" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
            <el-option label="营业中" :value="1" />
            <el-option label="已下架" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="action-bar">
        <el-button type="primary" icon="el-icon-plus" @click="openDialog()">新增民宿</el-button>
      </div>

      <el-table :data="tableData" v-loading="loading" border stripe>
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="name" label="民宿名称" min-width="180" show-overflow-tooltip />
        <el-table-column prop="location" label="所在位置" min-width="200" show-overflow-tooltip />
        <el-table-column prop="price" label="参考价格" width="100">
          <template slot-scope="scope">￥{{ scope.row.price }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? '营业中' : '已下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="openDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" style="color: #f56c6c" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page.sync="queryForm.page"
        :page-size.sync="queryForm.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        @current-change="loadData"
        @size-change="handleSizeChange"
      />
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" @closed="resetForm">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="民宿名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入民宿名称" />
        </el-form-item>
        <el-form-item label="所在位置" prop="location">
          <el-input v-model="form.location" placeholder="请输入所在位置" />
        </el-form-item>
        <el-form-item label="参考价格" prop="price">
          <el-input-number v-model="form.price" :min="0" :precision="2" style="width: 100%" />
        </el-form-item>
        <el-form-item label="民宿介绍" prop="intro">
          <el-input type="textarea" v-model="form.intro" :rows="4" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

这个页面用到的ElementUI组件让两个高频需求的实现变得非常简单。

第一个是表格内容超出省略、鼠标悬浮时显示完整文字。直接给el-table-column加上show-overflow-tooltip属性即可，ElementUI会自动处理：文字超出列宽时用省略号显示，鼠标悬停时出现tooltip浮层展示完整内容。这个功能在景点介绍、民宿地址等长文本列中非常实用，省去了手动写CSS和tooltip的麻烦。

第二个是弹窗表单的新增和编辑复用。我用一个dialogVisible控制弹窗显隐，通过判断form中是否有id来决定是新增还是编辑。表单的校验规则写在rules对象中，提交时通过this.$refs.form.validate()触发校验，只有校验通过才允许提交。这个方法非常常见，几乎所有ElementUI后台管理系统都会用到。

4.3 前端路由、状态管理与Axios封装

路由配置分前台和后台两套，使用路由守卫保护需要登录的页面。前台路由包括首页、景点列表、景点详情、民宿列表、登录注册、个人中心。后台路由包括仪表盘、各管理页。我在router中配置meta字段标记需要登录的页面：

javascript复制const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/attraction', name: 'AttractionList', component: AttractionList },
  { path: '/attraction/:id', name: 'AttractionDetail', component: AttractionDetail },
  { path: '/login', name: 'Login', component: Login },
  { path: '/user', name: 'UserCenter', component: UserCenter, meta: { requiresAuth: true } },
  {
    path: '/admin',
    component: AdminLayout,
    children: [
      { path: 'dashboard', name: 'Dashboard', component: Dashboard, meta: { requiresAuth: true, role: 'admin' } },
      { path: 'attraction', name: 'AttractionManage', component: AttractionManage, meta: { requiresAuth: true, role: 'admin' } },
      { path: 'homestay', name: 'HomestayManage', component: HomestayManage, meta: { requiresAuth: true, role: 'admin' } },
      { path: 'order', name: 'OrderManage', component: OrderManage, meta: { requiresAuth: true, role: 'admin' } }
    ]
  }
]

关于vue路由参数，这个项目里用了两种传参方式。一种是路径参数，比如景点详情页/attraction/123，路由定义时写: /attraction/:id，组件内通过this.$route.params.id获取。另一种是查询参数，比如列表页筛选条件的传递，通过this.$router.push({ path: '/attraction', query: { category: '古镇' } })跳转，组件内通过this.$route.query.category读取。路径参数适合标识某个资源，查询参数适合传递筛选条件，两者各有适用场景。

路由守卫的全局前置钩子用来做登录判断：

javascript复制router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth && !token) {
    next({ path: '/login', query: { redirect: to.fullPath } });
  } else {
    next();
  }
});

状态管理方面，我使用Vuex存储用户的基本信息和登录状态。登录成功后把token存到localStorage，把用户信息存到Vuex中，这样各个页面都能直接读取而不用反复请求后端。

Axios封装是前端工程化的标配。统一配置baseURL、请求拦截器、响应拦截器：

javascript复制import axios from 'axios';
import { Message } from 'element-ui';

const service = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000
});

service.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  return config;
});

service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 200) {
      Message.error(res.message || '请求失败');
      if (res.code === 401) {
        localStorage.removeItem('token');
        location.href = '/login';
      }
      return Promise.reject(new Error(res.message));
    }
    return res;
  },
  error => {
    if (error.response && error.response.status === 401) {
      localStorage.removeItem('token');
      location.href = '/login';
    }
    Message.error(error.response?.data?.message || '网络错误，请稍后重试');
    return Promise.reject(error);
  }
);

export default service;

这个封装带来的实际好处是：每个页面调用接口时不用重复处理token拼接、错误提示、登录过期跳转这些通用逻辑。代码里所有接口请求都会自动携带token，任何接口返回401时统一跳转登录页，而页面本身的error handling只需要关心业务层面的成功或失败。

4.4 ElementUI高级场景：弹窗加载PDF

运营后台有时需要查看上传的旅游宣传资料，我在项目中做了一个“查看详情”功能，需要在一个弹窗中加载PDF文件。这个需求用ElementUI的el-dialog加HTML的iframe标签就能解决：

html复制<el-dialog title="查看介绍资料" :visible.sync="pdfDialogVisible" width="800px">
  <iframe :src="pdfUrl" style="width: 100%; height: 600px; border: none;"></iframe>
</el-dialog>

需要注意一个坑：点击某一行时动态设置pdfUrl，如果iframe的src在dialog打开前后没有变化，pdf内容不会刷新。解决办法是每次打开dialog前先清空pdfUrl，再通过this.$nextTick重新赋值。

还有一个比较隐蔽的问题，如果PDF地址是后端接口返回的二进制流，直接给iframe的src赋值接口地址可能无法解析。这种情况需要先获取blob数据，再用URL.createObjectURL生成临时地址。不过我在这个项目中是直接返回了静态文件的访问路径，所以用iframe的src直连胜搞定。

5. 环境搭建、部署与常见问题排查

5.1 Node.js安装与环境配置

这个项目从零搭建时，第一步就是安装Node.js。Node.js的安装包可以直接从官网下载，选择LTS版本。这里要强调一句，新手一定不要追新，LTS版本是长期支持版本，稳定性和生态兼容性都更好。安装过程基本是下一步下一步，但有一个检查点必须做。

安装完成后，打开命令行工具执行：

bash复制node -v
npm -v

正常情况下会显示版本号，比如v16.20.0和8.19.4。如果出现“node不是内部或外部命令”的提示，说明Node.js的安装路径没有加到系统环境变量PATH中。解决方法是手动把Node.js的安装目录添加到PATH变量里，Windows上一般是C:\Program Files\nodejs。

新手在Windows上经常遇到的另一个问题，就是npm命令报错，提示“npm : 无法加载文件...因为在此系统上禁止运行脚本”。这个报错是因为PowerShell的执行策略限制了.ps1脚本的运行。解决方案有两种：

第一种，以管理员身份打开PowerShell，执行：

bash复制Set-ExecutionPolicy RemoteSigned

然后输入Y确认。RemoteSigned策略允许本地创建的脚本运行，远程下载的脚本需要签名，这是比较安全的折中方案。

第二种，如果不想修改系统的执行策略，可以改用cmd而不是PowerShell来运行npm命令。cmd没有这个限制，但每次都要切换终端也比较麻烦。我还是推荐第一种方案。

5.2 MySQL安装与建库

MySQL的安装路径可以自己选择，这里特别推荐安装时包含MySQL Workbench，因为它是图形化管理工具，查看表结构、执行SQL、调试查询都非常方便。安装完MySQL之后，首先要做的是初始化root用户的密码，安装过程中会让设置，这个密码要记住，后续连接数据库都要用。

创建项目数据库和执行建表SQL有两种方式，一种是直接在Workbench的SQL窗口中执行，另一种是在命令行客户端中执行。我更推荐Workbench，因为可以看到查询结果和执行日志。建库语句：

sql复制CREATE DATABASE tourism_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE tourism_db;

然后依次执行建表语句。建好表后可以通过Workbench的“Table Inspector”功能直观看到表结构和索引信息，排查字段类型问题很方便。

有些场景下需要创建测试数据来验证接口，可以在SQL窗口中一次性插入多条记录。这里提醒一个小问题：插入中文数据时必须保证连接编码是utf8mb4，否则会出现中文乱码。在Workbench中可以在连接配置中设置字符集，在Node.js连接配置中则要显式指定charset字段。

5.3 开发联调阶段高频坑位

后面前端和后端联调的时候，我踩了几个记忆深刻的坑，这里整理成速查表。

还有一个比较烦人的是vue打包后布局异常。本地运行一切正常，打包后图片加载不出来、路由跳转404、页面白屏。这种情况大部分是资源路径问题。Vue CLI默认的publicPath是/，打包后资源路径指向根目录，部署到子目录下就会找不到资源。解决办法是在vue.config.js中设置publicPath为相对路径：

javascript复制module.exports = {
  publicPath: './'
}

路由如果用了history模式，部署到服务器后直接访问二级路由会404，因为服务器没有配置对应的重写规则。解决方案有两种：部署时在Nginx配置try_files指令把请求重写到index.html，或者前端把路由模式改成hash模式。

5.4 性能优化与安全加固

系统做完基础功能后，我做了一些性能优化和安全加固。性能方面，MySQL查询加了复合索引之后，列表接口的响应时间明显下降。安全方面，用户密码使用bcryptjs加盐哈希存储、接口统一使用JWT认证、文件上传做类型和大小限制、数据库查询全部使用参数化SQL，这些步骤虽然基础但都是必不可少的。

另外把接口返回格式统一为code、message、data三层结构，前端在拦截器里只判断code，再根据code做针对性处理。这样的统一规范让前后端协作变得很顺畅，新加接口时不需要重新约定格式，直接照抄模板就行。

6. 项目部署上线与后续扩展思路

部署方面，我采用的是前后端分离部署。前端打包后生成dist目录，交给Nginx托管；后端代码放在服务器上，使用pm2进程管理器守护运行；MySQL数据库单独在服务器上运行，通过配置文件指定连接信息。

Nginx配置示例：

nginx复制server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /var/www/tourism-client/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /uploads/ {
        alias /var/www/tourism-server/uploads/;
    }
}

这个配置的关键是location /下的try_files指令，它解决了history路由刷新404的问题。后端API通过/api前缀转发到Node.js进程，图片等静态文件则直接走Nginx的alias，不经过后端处理。

系统跑通基础功能后，有很多可扩展的方向：增加支付功能接入微信支付或支付宝；引入Redis缓存高频访问的景点和民宿数据；增加数据可视化大屏，用Echarts展示游客数据和分析报表；接入地图API展示景点位置和线路规划。这些扩展都建立在现有的技术架构上，不会伤筋动骨。

我个人在完成这个项目后最大的体会是，技术选型不重要，重要的是整个系统的数据流和业务逻辑要理清楚。前端组件再花哨，后端接口设计不合理，项目最终还是会出问题。对于想练全栈的朋友，我的建议是不要急着写代码，先把数据库表和接口文档设计好，前后端约定清楚数据结构，后面实现起来会顺畅很多。项目里我把接口文档统一维护在项目的README中，每次改动后及时更新，避免了前后端互相猜数据结构的情况。这个小习惯强烈推荐沿用。