Vue-Vben-Admint和Webman-Admin前后端分离项目实战指南

在现代Web开发中，前后端分离已经成为了一种趋势。本文将详细介绍如何使用Vue-Vben-Admint和Webman-Admin这两个优秀的开源项目搭建一个前后端分离的项目。我们将通过详细的操作步骤和代码示例，帮助你快速掌握这两个项目的使用方法。

一、安装Node.js和npm

首先，我们需要在你的计算机上安装Node.js和npm。请访问Node.js官网下载并安装适合你操作系统的版本。

二、创建Vue项目

1. 使用Vue CLI创建一个新项目。在终端中输入以下命令：

vue create my-project

2. 进入项目目录：

cd my-project

3. 安装Vue-Vben-Admint插件：

vue add vben-admin

按照提示完成安装过程。

三、安装Webman-Admin后端项目

1. 克隆Webman-Admin后端项目到本地：

git clone https://github.com/webmandesign/admin.git

2. 进入Webman-Admin项目目录：

cd admin

3. 安装依赖：

npm install

4. 修改数据库配置文件：

在config/database.php文件中，修改数据库连接信息为你自己的数据库信息。

四、配置前后端交互接口

1. 在Vue项目中，打开src/api/index.js文件，添加一个新的接口请求函数：

import request from '@/utils/request'
export function fetchData() {
  return request({
    url: 'http://localhost:9528/api/data', // Webman-Admin后端项目的API接口地址
    method: 'get'
  })
}

2. 在Vue组件中，调用刚刚创建的接口请求函数，获取数据并显示：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>
<script>
import { fetchData } from '@/api'
export default {
  data() {
    return {
      data: null,
    }
  },
  methods: {
    async fetchData() {
      const res = await fetchData() // 调用接口请求函数获取数据
      this.data = res.data // 将获取到的数据赋值给data属性，用于显示在页面上
    },
  },
}</script>```