企业官网建设流程全解析

最近把一个标注着“可直接运行”的网站信息管理系统源码完整跑了一遍，前后折腾了大半天。这套源码的技术栈是典型的SpringBoot后端 + Vue前端 + MySQL数据库，市场上这类项目很多，但真正能在自己电脑上顺利跑起来的，少之又少。大多数问题根本不在于代码本身，而是环境版本、数据库配置、前后端对接这些看不见的细节。

这套系统定位很清晰：用SpringBoot提供RESTful接口，用Vue做管理后台界面，用MySQL存网站数据。典型使用场景是企业内容运营后台、学校或个人的信息发布平台，核心功能是管理网站上的公告、文章、分类，外加简单的用户权限控制。适合三类人参考：正在写毕业设计或课程设计的学生、想快速搭一套内容后台的开发者、刚接触前后端分离想找完整项目拆解的初学者。

这篇分享我会按照“先看懂架构 -> 准备环境 -> 拆解功能 -> 实际跑通 -> 排查问题 -> 二次开发”的顺序，把这套源码从头到尾拆一遍，包括我踩过的坑和改过的配置。

1. 拿到源码后，第一件事是看懂它的架构

1.1 前后端分离的经典布局

我拿到压缩包后，第一件事不是打开代码，而是先看目录结构。这类源码的布局基本是固定的，一个backend目录（SpringBoot），一个frontend目录（Vue），根目录放README。我这份源码的结构大致是这样的：

website-info-system/ ├── backend/ # SpringBoot 后端工程 │ ├── pom.xml │ └── src/main/ │ ├── java/com/example/info/ │ │ ├── controller/ # 接口层 │ │ ├── service/ # 业务逻辑层 │ │ ├── mapper/ # 数据访问层 │ │ ├── entity/ # 实体类 │ │ └── InfoApplication.java # 启动类 │ └── resources/ │ ├── application.yml # 核心配置 │ └── mapper/ # SQL XML 文件 ├── frontend/ # Vue 前端工程 │ ├── package.json │ └── src/ │ ├── api/ # 接口封装 │ ├── router/ # 路由 │ ├── store/ # 状态管理 │ ├── views/ # 页面组件 │ └── main.js # 前端入口 └── README.md

为什么前后端要拆成两个工程？早期Java Web项目喜欢用JSP或者Thymeleaf，服务器直接渲染页面。但那套模式有一个明显痛点：前端工程师和Java后端工程师没法并行开发，页面稍微改个布局，后端就得重新打包。前后端分离之后，Vue负责页面渲染和用户交互，SpringBoot只负责返回JSON数据，两边通过HTTP接口通信，开发效率和可维护性都上来了。

我读这种项目源码的习惯是：先看README，再看pom.xml和package.json，最后才看业务代码。README里一般写了默认账号密码、数据库脚本位置、启动方式，这些信息能让你少碰很多壁。

1.2 “可直接运行”到底是什么意思

标题里写着“可直接运行”，这四个字我建议这么理解：它指的不是你双击就能跑，而是说只要把基础环境装好，不需要补写代码就能完整运行。真正需要动手改的只有一处，就是数据库连接信息。

我见过很多人拿这种项目卡住，主要是被“可直接运行”误导了，以为MySQL不用装、Node不用配，结果一上来就各种报错。这类项目的“开箱即用”，建立在以下条件上：

• 已经装了JDK（一般是1.8，也有用17的，看pom.xml判断）
• 已经装了Maven，或者用IDEA自带的Maven
• 已经装了MySQL，并且能用账号密码登录
• 已经装了Node.js和npm，前端依赖能顺利装完

这四个条件缺一个，项目就跑不起来。缺两个以上，你可能得花一个下午去处理环境问题。

数据流向也很简单：用户在Vue页面上点击操作，axios发出HTTP请求到SpringBoot的Controller，Controller调用Service，Service调用Mapper，Mapper通过MyBatis操作MySQL，数据再原路返回，最终在页面上渲染成表格或表单。整个过程像一条流水线，读懂这条流水线，这个项目你就掌握了一半。

2. 环境准备：版本搭配比什么都重要

2.1 我在本地推荐的版本组合

很多项目跑不起来，不是代码写得有问题，而是版本搭配出了问题。我整理了一张实战版本表，照着配基本不会踩坑：

这里重点说两个坑。第一，JDK不是越新越好，SpringBoot 2.x系列官方支持JDK 8到17，但很多老项目里的依赖（比如CGLIB、旧版MyBatis）在JDK 17下会有模块化访问限制，启动阶段就报错，处理起来很头疼。第二，Node版本尤其要小心，如果你用Vue 2项目加的node-sass依赖，Node版本超过17基本装不上，必须降回Node 14或16。现在新项目已经逐步换用sass了，但老项目仍大量存在node-sass。

2.2 MySQL脚本导入的三个关键点

数据库脚本一般在backend的resources目录下，或者单独一个sql目录。导入这件事，看起来就三步，但我在实际中见过至少五种失败方式。

第一步，先建库再导入。很多人直接打开脚本就执行，脚本开头可能没有CREATE DATABASE语句，会报Unknown database错误。所以一定要先执行建库语句，再导入数据。确认一下脚本里有没有CREATE DATABASE，没有就手动补上：

CREATE DATABASE website_info DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

第二步，导入时注意字符集。如果你用Navicat或者命令行导入中文乱码，大概率是连接没指定UTF-8，或者库建的时候用了默认的latin1。我习惯在命令行里这样导入：

mysql -uroot -p --default-character-set=utf8mb4 website_info < init.sql

第三步，导入完了一定要验证。用show tables;看看有没有生成表，再看一眼关键表里的数据条数：

USE website_info; SHOW TABLES; SELECT COUNT(1) FROM t_user;

如果能看到你预期的表，甚至能看到默认的管理员账号记录，数据库部分才算是真正搞定了。我见过很多人导入时看到密密麻麻的绿色输出就以为成功了，其实根本没有表字段，后面代码一启动立马报错。

3. 核心功能与模块拆解

3.1 系统里到底有哪些业务模块

网站信息管理系统，不管细节怎么变，核心业务模块基本逃不开这几块：用户登录认证、网站信息管理、分类管理、状态控制。我拿到这份源码后，就是按这几个维度去读代码的。

登录认证模块，前端一般有个Login.vue页面，提交用户名密码到后端；后端Controller校验账号，成功后返回一个token（这里可能是一次性token，也可能是JWT），前端把token存在localStorage里，后续所有请求都在Header里带上它。这个模块是整个系统的入口，也是权限控制的基础。

信息管理模块是最核心的部分，典型功能包括：信息列表分页查询、按标题或分类搜索、新增信息、编辑信息、删除信息、上下架或发布状态切换。后端对应着一套完整的增删改查接口，前端对应着一个或多个表格页。

分类管理模块一般是一张独立的分类表，通过外键关联到信息表。如果这套代码里没有独立的分类页面，也正常，有些简化版会直接把分类做成下拉框，把选项写死在配置里。

我在读代码前会先看一眼数据库脚本里有哪些表。表名就能暴露系统的模块边界，比如看到t_user、t_info、t_category，心里就大概有数了。

3.2 后端的分层和核心代码

这套后端代码走的是标准的三层结构：Controller接收请求、Service处理业务、Mapper操作数据库。我读代码时重点关注三个位置。

Controller层看接口设计。以信息管理为例，常见的接口命名是这样的：

@RestController @RequestMapping("/api/info") public class InfoController { @Autowired private InfoService infoService; /** * 分页查询信息列表 */ @GetMapping("/list") public Result list(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size, @RequestParam(required = false) String keyword) { return Result.ok(infoService.pageList(page, size, keyword)); } /** * 新增或编辑信息 */ @PostMapping("/save") public Result save(@RequestBody Info info) { infoService.save(info); return Result.ok(); } /** * 删除信息 */ @DeleteMapping("/delete/{id}") public Result delete(@PathVariable Integer id) { infoService.deleteById(id); return Result.ok(); } }

我判断一个接口写得好不好，不看实现，先看URL是不是RESTful风格，再看返回结构是不是统一封装。一般这种项目会有一个Result类，里面包含code、msg、data三个字段，前端拿到code为200才认为请求成功，这样的好处是前后端沟通成本低，全项目一个风格。

Service层重点看事务和业务校验。比如删除分类时必须先判断分类下有没有信息，有就拒绝删除；保存信息时标题是否必填、封面图是否存在，这些逻辑都写在Service而不是Controller里。

Mapper层用的是MyBatis或MyBatis-Plus。如果你看到实体类上有@TableName、@TableId这样的注解，说明用的是MyBatis-Plus，那增删改查可以少写很多XML。像这样：

public interface InfoMapper extends BaseMapper<Info> { // 复杂查询可以用 @Select 注解，或者写XML IPage<Info> selectPageInfo(IPage<Info> page, @Param("keyword") String keyword); }

MyBatis-Plus的好处是单表操作不用手写SQL，内置的selectById、insert、updateById、deleteById直接能用，大大减少了样板代码。但连锁查询、动态条件这些还是要写XML，所以resources/mapper目录下通常还会有几个XML文件。

3.3 前端的几个核心文件

前端Vue项目里，我建议按这个顺序读源码：先看main.js，再看router/index.js，然后看store和api封装，最后再看views页面。

main.js决定项目用了什么框架体系。如果是Vue 2，大概率配ElementUI；如果是Vue 3，可能是Element Plus。这决定了我后面读页面写的代码风格。

axios封装也是一个关键点。几乎每个项目都会在src/api目录下做一层封装，统一处理baseURL、超时时间、token注入和错误提示。常见的样子是这样：

import axios from 'axios' const request = axios.create({ baseURL: '/api', timeout: 10000 }) // 请求拦截器：每次请求都带上token request.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = 'Bearer ' + token } return config }) // 响应拦截器：统一处理错误 request.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { Message.error(res.msg || '请求失败') return Promise.reject(new Error(res.msg)) } return res }, error => { if (error.response && error.response.status === 401) { router.push('/login') } Message.error('网络异常') return Promise.reject(error) } ) export default request

路由守卫是整个前端的权限关卡。它的作用很简单：用户没登录，就不能访问后台页面。典型代码长这样：

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (to.path !== '/login' && !token) { next('/login') } else { next() } })

有了这一层，即使有人直接手动输入后台地址，也会被弹回登录页。

3.4 为什么这种分层设计值得学

我特别想强调一件事：这套系统真正的价值不在功能多，而在分层清晰。Controller只做参数接收和结果封装，不写业务逻辑；Service只做业务处理和事务控制，不写SQL；Mapper只做数据访问，不处理业务。各层职责单一，改动不会牵一发动全身。

对我这种看代码超过写代码的人来说，清淅的分层意味着：想改逻辑，只要进Service；想改接口，只需要看Controller；想加查询条件，往Mapper的XML里补SQL就行。这也是企业里多人协作的基础——后端拆成模块、前端拆组件，各管各的，互不踩踏。

4. 从零跑通：一次完整的启动实操记录

4.1 后端启动全过程

我现在假设你已经按前面的配置装好了环境，接下来开始实操。第一步是打开application.yml，把数据库连接信息改成你自己的：

server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/website_info?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: 你的数据库密码

这里有两个关键点。如果你的MySQL是8.0版本，driver-class-name必须写成com.mysql.cj.jdbc.Driver，这是新版驱动类的完整名字；如果是MySQL 5.7，用com.mysql.jdbc.Driver也能跑，但用cj那个也没问题。URL里一定带serverTimezone=Asia/Shanghai，否则可能会在启动时报时区异常。

用IDEA打开backend目录，等到Maven把依赖都下载完（首次下载可能比较久，取决于网络环境），找到启动类InfoApplication，右键直接运行。启动成功的标志是控制台输出类似这样的日志：

Tomcat started on port(s): 8080 (http) Started InfoApplication in 8.432 seconds

看到Started这个单词，后端就算搞定了。但先别急，打开浏览器访问一下接口验证：

http://localhost:8080/api/info/list

如果返回JSON数据（哪怕是一个空列表），说明后端和数据库的链路已经通了。

4.2 前端启动全过程

前端启动相对麻烦一点，因为要安装大量npm依赖。我通常先在frontend目录下执行依赖安装：

npm install

这一步极其考验耐心。几万个依赖包从npm仓库下载，速度取决于你的网络。如果npm install中途报错挂了，再跑一次往往能续上，有时候单元文件损坏，我习惯先删掉node_modules目录再来一遍。安装完成后，启动开发服务器：

npm run serve

启动日志会显示一个本地访问地址，一般是http://localhost:8081。这时候我建议你先别急着点，而是检查vue.config.js里的跨域代理配置。

前后端分离最大的现实问题就是跨域。你的页面在8081端口，接口在8080端口，浏览器会认为是两个来源，直接请求会被拦截。解决办法是在开发环境配置代理，把前端的/api开头的请求转发到后端的8080：

module.exports = { devServer: { port: 8081, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }

配置完代理，重新npm run serve，浏览器访问http://localhost:8081，能看到登录页面就说明前端环境全部打通了。

4.3 用管理员账号跑通完整业务流

进入登录页后，输入README或数据库脚本里预设的管理员账号。我这份源码里默认是admin/123456，你拿到手的项目可能不一样，去数据库t_user表里查一下就知道。登录成功后，找一个菜单点进去，比如“信息管理”，试着新增一条记录。

填写标题、选择分类、写内容、上传封面，点击提交。如果数据能正确出现在列表里，且刷新页面数据还在，说明前端页面 -> 后端接口 -> 数据库 -> 返回前端这一整条链路都是通的。

再试试编辑、删除、上下架。如果你发现某个按钮点了没反应，首选打开浏览器开发者工具（F12），看Network面板里那个XHR请求的结果。后端返回的错误信息都在响应体里，看懂那一条信息，排查效率比瞎猜高一百倍。

5. 避坑手册：我踩过的那些雷

5.1 高频报错与解决方案

我把这个项目运行过程中最容易碰到的报错整理成了一张速查表，每一个我都亲自踩过：

5.2 容易被忽略的配置细节

有一类问题不报错，但表现很奇怪。比如后端启动成功，前端也启动成功，页面却一直转圈，数据加载不出来。这种时候九成是跨域问题，直接用浏览器访问一下后端接口地址看有没有数据，再访问前端地址看效果，就能定位出问题出在哪一层。

另一个容易忽略的是端口占用。SpringBoot默认8080，Vue默认8081，但你的电脑上可能已经有其他服务占用了。端口占用时日志会报“Port already in use”，解决办法就是改端口。后端改application.yml里的server.port，前端改vue.config.js里的devServer.port，注意前端改了端口后，代理target里的后端地址别写错。

还有登录失效的问题。你会发现刚部署完一切正常，隔一段时间再点某个功能，突然跳回登录页。这不一定是系统bug，很可能是token过期了。正常情况下系统会要求你重新登录，这是合理的权限行为，如果你希望登录有效时间长一点，去后端代码里找token过期时间的配置（可能是一个常量或配置文件里的expire字段），调大它就行。

6. 二次开发实操：新增一个“友情链接”模块

跑通只是第一步，把这套系统改成自己的，才是真正的收获。我拿“友情链接”这个模块举例，手把手演示二次开发的全过程。一个完整模块需要动三层：数据库、后端接口、前端页面。

6.1 数据库加一张表

首先在数据库里新建友情链接表：

CREATE TABLE t_link ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL COMMENT '链接名称', url VARCHAR(500) NOT NULL COMMENT '链接地址', sort INT DEFAULT 0 COMMENT '排序权重', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='友情链接表';

我特意加了一个sort字段，这样前端可以按权重排序，业务上更实用。

6.2 后端补齐接口

后端要补的东西按这个顺序来：先建实体类Link，再建Mapper接口LinkMapper，然后在Service里写增删改查，最后在Controller里暴露接口。

如果你用的是MyBatis-Plus，Mapper接口特别简洁：

public interface LinkMapper extends BaseMapper<Link> { }

Controller配合前端页面提供四个接口：

@RestController @RequestMapping("/api/link") public class LinkController { @Autowired private LinkMapper linkMapper; // 查询全部链接 @GetMapping("/list") public Result list() { return Result.ok(linkMapper.selectList( new QueryWrapper<Link>().orderByAsc("sort") )); } // 新增链接 @PostMapping("/save") public Result save(@RequestBody Link link) { linkMapper.insert(link); return Result.ok(); } // 删除链接 @DeleteMapping("/delete/{id}") public Result delete(@PathVariable Integer id) { linkMapper.deleteById(id); return Result.ok(); } }

这里没有写Service层，是因为模块太简单，直接在Controller里调Mapper就够了。如果后面业务复杂了，比如删除前要校验有没有关联数据，再抽Service层也不迟。

6.3 前端加页面和路由

前端要做四件事：建一个LinkView.vue页面，在router里注册路由，在侧边栏菜单里加一项，在api目录下封装接口。

新建文件frontend/src/views/LinkView.vue，用ElementUI或Element Plus的表格就行，全套逻辑抄一遍已有的信息管理页面，把字段换成name和url。

然后在router/index.js里加路由：

{ path: '/link', name: 'Link', component: () => import('@/views/LinkView.vue'), meta: { title: '友情链接管理' } }

再去布局组件里的菜单数组加一项，加完菜单就能点进去了。最后在api目录下加一个link.js，封装好增删改查的请求方法。

前后端都改完，后端重启一次（IDEA里点重启按钮），前端热更新会自动生效。刷新页面，进到友情链接菜单，新增两条数据试试，整个流程就通了。

做完这个模块你会有一个很直观的体验：这套系统本质上是个脚手架，所有页面长得都差不多，CRUD的套路是通用公式。你只要理解了一个模块，其他模块都是复制改字段的事。这就是“信息管理系统”这类项目最值得学习的地方——业务的重复性高，但技术覆盖全面，足够让你把SpringBoot、Vue、MySQL这几个核心环节串起来。

我个人实际操作下来的体会是：这套源码拿来做学习和二次开发的起点，比拿来做生产环境要合适得多。跑通它只是第一步，真正让你长本事的，是动手改第一个模块、加第一个新功能的那个过程。等你独立加完一个模块，再回来看这套源码，SpringBoot + Vue + MySQL这条链路，其实也就那么回事。