基于go和Vue的web前后端开发调试环境搭建

搭建基于go和Vue的web前后端开发环境

目录

• 搭建基于go和Vue的web前后端开发环境
  • • 一、 核心需求
    • 二、 方案选择
    • 三、部署方式
    • 四、创建一个交互页面

---

一、 核心需求

1. 降低上手门槛（少写代码、多复用）
2. 可视化反馈（快速看到效果）
3. 贴近实际开发

二、 方案选择

1. Go 代码开发：VSCode
2. 页面设计与开发： Vue框架 + Element Plus组件库
   • 基于 Vue框架 语法（模板、数据绑定、事件处理）
   • 通过 Vue语法 设计前端页面（结构、交互、样式）
   • Element Plus 提供了现成的组件（按钮、表单等）可以使用
   • Element Plus 是基于Vue开发的（专门适配Vue的语法和生命周期）
   • 无需从零写样式和基础交互。
3. 实时预览与开发环境：Vite
   • Vite 提供了 开发服务器（npm run dev启动）
   • 实时将 Vue 代码编译成浏览器可识别的 HTML/CSS/JS，并在浏览器中显示
   • Vite 会处理项目依赖（比如自动引入 Element Plus 组件）
   • 解决跨域问题（开发时可配置代理，让前端能直接调用 Go 后端接口）
   • Vue 代码中的 JavaScript 逻辑（如fetch、axios）来调用 Go 后端的 HTTP 接口
4. 问题调试：Thunder Client 的定位
   • Thunder Client 可以绕过前端直接发送请求到Go接口
   • 调用成功，说明问题在前端代码
   • 调用失败，说明问题在 Go 后端

三、部署方式

1. 下载并安装 Node.js(LTS)
2. 管理员身份运行 PowerShell，执行如下命令修改策略：

   Set-ExecutionPolicy RemoteSigned
   

   提示 “是否更改执行策略”时，输入 Y 并回车（允许运行本地签名的脚本）
3. 重启VSCode或终端使 Node.js 路径生效。
4. 创建前端项目
   • 打开VSCode终端（Ctrl+`）
   • 输入并运行如下代码, 注意将 my_frontend 替换为想要的项目名称

   npm create vite@latest my_frontend -- --template vue  # 创建Vue项目
   cd my_frontend                              # 进入项目目录
   npm install element-plus                    # 安装Element Plus组件库
   npm install vuedraggable@next               # 实现拖拽功能
   npm run dev                                 # 启动开发服务器
   

5. 确认项目创建成功
   • 预览页面：终端会显示http://localhost:5173
   • 点击链接在浏览器打开
   • 看到默认页面即表示成功

四、创建一个交互页面

1. 编辑 app.vue, 输入如下代码

<template>
  <!-- 居中显示的登录表单 -->
  <div style="margin: 100px auto; width: 300px;">
    <el-card title="用户登录">
      <el-form :model="user" label-width="80px">
        <!-- 用户名输入框 -->
        <el-form-item label="用户名">
          <el-input v-model="user.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item label="密码">
          <el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElCard, ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';

// 定义用户数据（类似Go结构体）
const user = ref({
  name: '',
  password: ''
});

// 登录按钮点击事件（调用后端API的逻辑）
const login = () => {
  if (!user.value.name || !user.value.password) {
    ElMessage.error('请输入用户名和密码');  // 自带的提示弹窗
    return;
  }
  // 这里替换为你的Go后端登录接口（示例）
  fetch('http://localhost:8080/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user.value)
  })
  .then(res => res.json())
  .then(data => {
    ElMessage.success('登录成功');
    console.log('后端返回数据:', data);  // 在浏览器控制台查看返回结果
  })
  .catch(err => ElMessage.error('登录失败'));
};
</script>

2. 实时预览效果： 保存后浏览器自动更新，会看到一个带输入框和按钮的登录表单
3. 测试后端接口： 用 Thunder Client 插件发送 POST 请求到http://localhost:8080/api/login，确认接口正常返回数据。
4. 修改前端代码： 将上述代码中的fetch地址替换为Go后端实际接口，即可实现表单提交到后端。