VueBlog 项目安装和配置指南

VueBlog 项目安装和配置指南

vueblog 一个前后端分离的简单博客案例，适合刚入门vue，学前后端分离的童鞋！ 项目地址: https://gitcode.com/gh_mirrors/vu/vueblog

1. 项目基础介绍和主要编程语言

VueBlog 是一个基于 SpringBoot 和 Vue 开发的前后端分离的简单博客案例。该项目适合刚入门 Vue 和前后端分离开发的童鞋。主要编程语言包括 Java 和 JavaScript。

2. 项目使用的关键技术和框架

• 后端技术栈:

  • SpringBoot: 用于构建后端服务。
  • MySQL: 用于数据存储。
  • MyBatis: 用于数据库操作。

• 前端技术栈:

  • Vue.js: 用于构建用户界面。
  • Vue Router: 用于前端路由管理。
  • Vuex: 用于状态管理。
  • Axios: 用于与后端进行 HTTP 通信。

3. 项目安装和配置的准备工作和详细安装步骤

3.1 准备工作

在开始安装之前，请确保你的开发环境已经配置好以下工具和软件：

• Java 开发环境:

  • JDK 1.8 或更高版本。
  • Maven 3.x 或更高版本。

• 前端开发环境:

  • Node.js 12.x 或更高版本。
  • npm 或 yarn。

• 数据库:

  • MySQL 5.7 或更高版本。

3.2 安装步骤

3.2.1 克隆项目

首先，从 GitHub 克隆 VueBlog 项目到本地：

git clone https://github.com/MarkerHub/vueblog.git
cd vueblog

3.2.2 配置后端

1. 导入项目: 使用你喜欢的 IDE（如 IntelliJ IDEA 或 Eclipse）导入 vueblog-java 目录下的 Maven 项目。

2. 配置数据库: 在 vueblog-java/src/main/resources 目录下找到 application.properties 文件，配置你的 MySQL 数据库连接信息：

   spring.datasource.url=jdbc:mysql://localhost:3306/vueblog?useSSL=false&serverTimezone=UTC
   spring.datasource.username=root
   spring.datasource.password=yourpassword
   

3. 运行后端服务: 在 IDE 中运行 VueblogApplication 类，启动 SpringBoot 服务。默认情况下，服务会在 http://localhost:8080 启动。

3.2.3 配置前端

1. 安装依赖: 进入 vueblog-vue 目录，安装前端依赖：

   cd vueblog-vue
   npm install
   

2. 配置 API 地址: 在 vueblog-vue/src/config/index.js 文件中，配置后端 API 的地址：

   module.exports = {
     apiUrl: 'http://localhost:8080/api'
   }
   

3. 运行前端服务: 启动 Vue.js 开发服务器：

   npm run serve
   

   默认情况下，前端服务会在 http://localhost:8081 启动。

3.3 访问项目

打开浏览器，访问 http://localhost:8081，你应该能够看到 VueBlog 的登录页面。输入默认的用户名和密码（如果有），即可开始使用博客系统。

4. 结语

通过以上步骤，你应该已经成功安装并配置了 VueBlog 项目。如果你在安装过程中遇到任何问题，可以参考项目的 GitHub 页面或相关文档进行排查。祝你开发愉快！

vueblog 一个前后端分离的简单博客案例，适合刚入门vue，学前后端分离的童鞋！ 项目地址: https://gitcode.com/gh_mirrors/vu/vueblog