https://gin-vue-admin.com/assets/guide_start-quickly_initialization.md.DCfg-Ysg.lean.js

1import{_ as i,o as s,c as e,a2 as l}from"./chunks/framework.b3K37OPx.js";const n="/first/image-20210710094929206.png",t="/first/image-20210710095126844.png",h="/first/image-20210710095356257.png",r="/first/image-20210710095715145.png",p="/first/image-20210710095814641.png",o="/first/image-20210710095838176.png",f=JSON.parse('{"title":"项目初始化","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start-quickly/initialization.md","filePath":"guide/start-quickly/initialization.md"}'),d={name:"guide/start-quickly/initialization.md"};function c(k,a,g,b,u,m){return s(),e("div",null,[...a[0]||(a[0]=[l(`<h1 id="项目初始化" tabindex="-1">项目初始化 <a class="header-anchor" href="#项目初始化" aria-label="Permalink to &quot;项目初始化&quot;">​</a></h1><p>本指南将详细介绍如何初始化和启动 Gin-Vue-Admin 项目，包括后端服务、前端应用和数据库的配置。</p><div class="gva-video-tip"><p><strong>视频教程</strong></p><p>如果您更喜欢视频学习，可以观看我们的<a class="gva-video-ref" style="margin-left:10px;" href="https://www.bilibili.com/video/BV1kv4y1g7nT?p=3" target="_blank" rel="noopener"><span class="gva-video-ref__play"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"></path></svg></span><span class="gva-video-ref__label">视频教程</span><span class="gva-video-ref__ext"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"></path><path d="M8 7h9v9"></path></svg></span></a></p></div><h2 id="前置条件" tabindex="-1">前置条件 <a class="header-anchor" href="#前置条件" aria-label="Permalink to &quot;前置条件&quot;">​</a></h2><p>在开始之前，请确保您已经完成：</p><ul><li><a href="/guide/start-quickly/env.html">环境准备</a> - 安装 Node.js、Go、MySQL 等必要环境</li><li>克隆项目代码到本地</li><li>数据库服务正常运行</li></ul><h2 id="快速启动" tabindex="-1">快速启动 <a class="header-anchor" href="#快速启动" aria-label="Permalink to &quot;快速启动&quot;">​</a></h2><h3 id="_1-克隆项目" tabindex="-1">1. 克隆项目 <a class="header-anchor" href="#_1-克隆项目" aria-label="Permalink to &quot;1. 克隆项目&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 克隆主分支代码</span></span>
2<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">git</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> clone</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> https://github.com/flipped-aurora/gin-vue-admin.git</span></span>
3<span class="line"></span>
4<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 进入项目目录</span></span>
5<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gin-vue-admin</span></span></code></pre></div><h3 id="_2-项目结构概览" tabindex="-1">2. 项目结构概览 <a class="header-anchor" href="#_2-项目结构概览" aria-label="Permalink to &quot;2. 项目结构概览&quot;">​</a></h3><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>gin-vue-admin/</span></span>
6<span class="line"><span>├── server/          # 后端 Go 项目</span></span>
7<span class="line"><span>│   ├── main.go      # 程序入口</span></span>
8<span class="line"><span>│   ├── config.yaml  # 配置文件</span></span>
9<span class="line"><span>│   └── ...</span></span>
10<span class="line"><span>├── web/             # 前端 Vue 项目</span></span>
11<span class="line"><span>│   ├── src/         # 源代码</span></span>
12<span class="line"><span>│   ├── package.json # 依赖配置</span></span>
13<span class="line"><span>│   └── ...</span></span>
14<span class="line"><span>└── README.md        # 项目说明</span></span></code></pre></div><h2 id="详细教程视频" tabindex="-1">详细教程视频 <a class="header-anchor" href="#详细教程视频" aria-label="Permalink to &quot;详细教程视频&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">学习建议</p><p>强烈建议观看以下分集视频教程，虽然新版UI样式有些许差别，但基础操作无变化。</p></div><h3 id="基础入门" tabindex="-1">基础入门 <a class="header-anchor" href="#基础入门" aria-label="Permalink to &quot;基础入门&quot;">​</a></h3><ul><li><a href="https://www.bilibili.com/video/BV1jx4y1s7xx" target="_blank" rel="noreferrer">1. 克隆项目和安装依赖</a></li><li><a href="https://www.bilibili.com/video/BV1sr421K7sv" target="_blank" rel="noreferrer">2. 初始化项目</a></li><li>

14<a href="https://www.bilibili.com/video/BV1iH4y1c7Na" target="_blank" rel="noreferrer">3. 开启调试工具+创建初始化包</a></li></ul><h3 id="功能开发" tabindex="-1">功能开发 <a class="header-anchor" href="#功能开发" aria-label="Permalink to &quot;功能开发&quot;">​</a></h3><ul><li><a href="https://www.bilibili.com/video/BV1UZ421T7fV" target="_blank" rel="noreferrer">4. 手动使用自动化创建功能</a></li><li><a href="https://www.bilibili.com/video/BV1NE4m1977s" target="_blank" rel="noreferrer">5. 使用已有表格创建业务</a></li><li><a href="https://www.bilibili.com/video/BV17i421a7DE" target="_blank" rel="noreferrer">6. 使用AI创建业务和创建数据源模式的可选项</a></li><li><a href="https://www.bilibili.com/video/BV1Yw4m1k7fg" target="_blank" rel="noreferrer">7. 创建自己的后端方法</a></li></ul><h3 id="前端开发" tabindex="-1">前端开发 <a class="header-anchor" href="#前端开发" aria-label="Permalink to &quot;前端开发&quot;">​</a></h3><ul><li><a href="https://www.bilibili.com/video/BV12y411i7oE" target="_blank" rel="noreferrer">8. 新增一个前端页面</a></li><li><a href="https://www.bilibili.com/video/BV1ZM4m1y7i3" target="_blank" rel="noreferrer">9. 配置一个前端二级页面</a></li><li><a href="https://www.bilibili.com/video/BV1WS42197DZ" target="_blank" rel="noreferrer">10. 配置一个前端菜单参数</a></li><li><a href="https://www.bilibili.com/video/BV1NE4m1979c" target="_blank" rel="noreferrer">11. 菜单参数实战+动态菜单标题+菜单高亮配置</a></li><li><a href="https://www.bilibili.com/video/BV1Sw4m1k746" target="_blank" rel="noreferrer">12. 增加菜单可控按钮</a></li></ul><h3 id="高级配置" tabindex="-1">高级配置 <a class="header-anchor" href="#高级配置" aria-label="Permalink to &quot;高级配置&quot;">​</a></h3><ul><li><a href="https://www.bilibili.com/video/BV1Ki421a7X2" target="_blank" rel="noreferrer">14. 新增客户角色和其相关配置教学</a></li><li><a href="https://www.bilibili.com/video/BV1Lx4y1s77D" target="_blank" rel="noreferrer">15. 发布项目上线</a></li></ul><h2 id="后端服务启动" tabindex="-1">

14后端服务启动 <a class="header-anchor" href="#后端服务启动" aria-label="Permalink to &quot;后端服务启动&quot;">​</a></h2><h3 id="_1-打开后端项目" tabindex="-1">1. 打开后端项目 <a class="header-anchor" href="#_1-打开后端项目" aria-label="Permalink to &quot;1. 打开后端项目&quot;">​</a></h3><p>使用 GoLand 或 VS Code 打开 <code>server</code> 文件夹：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 进入后端目录</span></span>
15<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> server</span></span>
16<span class="line"></span>
17<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 使用 GoLand 打开（如果已安装）</span></span>
18<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">goland</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> .</span></span>
19<span class="line"></span>
20<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 或使用 VS Code 打开</span></span>
21<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">code</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> .</span></span></code></pre></div><h3 id="_2-安装依赖" tabindex="-1">2. 安装依赖 <a class="header-anchor" href="#_2-安装依赖" aria-label="Permalink to &quot;2. 安装依赖&quot;">​</a></h3><p>在项目根目录下运行以下命令安装 Go 模块依赖：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 下载并整理依赖</span></span>
22<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> mod</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tidy</span></span></code></pre></div><details class="details custom-block"><summary>命令说明</summary><ul><li><code>go mod tidy</code>: 添加缺失的模块依赖，移除未使用的依赖</li><li>该命令会根据 <code>go.mod</code> 文件下载所需的第三方包</li></ul></details><h3 id="_3-启动后端服务" tabindex="-1">3. 启动后端服务 <a class="header-anchor" href="#_3-启动后端服务" aria-label="Permalink to &quot;3. 启动后端服务&quot;">​</a></h3><h4 id="方式一-命令行启动" tabindex="-1">方式一：命令行启动 <a class="header-anchor" href="#方式一-命令行启动" aria-label="Permalink to &quot;方式一：命令行启动&quot;">​</a></h4><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 在 server 目录下运行</span></span>
23<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">go</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> main.go</span></span></code></pre></div><h4 id="方式二-goland-启动" tabindex="-1">方式二：GoLand 启动 <a class="header-anchor" href="#方式二-goland-启动" aria-label="Permalink to &quot;方式二：GoLand 启动&quot;">​</a></h4><ol><li>在 GoLand 中打开 <code>main.go</code> 文件</li><li>点击行号旁的绿色三角形按钮</li><li>或使用快捷键 <code>Ctrl+Shift+F10</code> (Windows/Linux) 或 <code>Cmd+Shift+R</code> (macOS)</li></ol><h4 id="方式三-vs-code-启动" tabindex="-1">方式三：VS Code 启动 <a class="header-anchor" href="#方式三-vs-code-启动" aria-label="Permalink to &quot;方式三：VS Code 启动&quot;">​</a></h4><ol><li>按 <code>F5</code> 或点击调试按钮</li><li>选择 &quot;Go: Launch Package&quot;</li></ol><h3 id="_4-验证后端启动" tabindex="-1">4. 验证后端启动 <a class="header-anchor" href="#_4-验证后端启动" aria-label="Permalink to &quot;4. 验证后端启动&quot;">​</a></h3><p>如果看到以下输出，说明后端服务启动成功：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span>

23<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>[GIN-debug] Listening and serving HTTP on :8888</span></span></code></pre></div><p>访问 <code>http://localhost:8888/health</code> 检查服务状态。</p><h2 id="前端应用启动" tabindex="-1">前端应用启动 <a class="header-anchor" href="#前端应用启动" aria-label="Permalink to &quot;前端应用启动&quot;">​</a></h2><h3 id="_1-打开前端项目" tabindex="-1">1. 打开前端项目 <a class="header-anchor" href="#_1-打开前端项目" aria-label="Permalink to &quot;1. 打开前端项目&quot;">​</a></h3><p>使用 VS Code 打开 <code>web</code> 文件夹：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 进入前端目录</span></span>
24<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> web</span></span>
25<span class="line"></span>
26<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 使用 VS Code 打开</span></span>
27<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">code</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> .</span></span></code></pre></div><h3 id="_2-安装依赖-1" tabindex="-1">2. 安装依赖 <a class="header-anchor" href="#_2-安装依赖-1" aria-label="Permalink to &quot;2. 安装依赖&quot;">​</a></h3><div class="warning custom-block"><p class="custom-block-title">Node.js 版本要求</p><p>确保您的 Node.js 版本 &gt;= 20.19 或 &gt;= 22.12</p></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 安装项目依赖</span></span>
28<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
29<span class="line"></span>
30<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 或使用 yarn（如果已安装）</span></span>
31<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
32<span class="line"></span>
33<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 或使用 pnpm（推荐，速度更快）</span></span>
34<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span></code></pre></div><h3 id="_3-启动开发服务器" tabindex="-1">3. 启动开发服务器 <a class="header-anchor" href="#_3-启动开发服务器" aria-label="Permalink to &quot;3. 启动开发服务器&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 启动开发服务器</span></span>
35<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> serve</span></span>
36<span class="line"></span>
37<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 或使用其他包管理器</span></span>
38<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> serve</span></span>
39<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> serve</span></span></code></pre></div><h3 id="_4-验证前端启动" tabindex="-1">4. 验证前端启动 <a class="header-anchor" href="#_4-验证前端启动" aria-label="Permalink to &quot;4. 验证前端启动&quot;">​</a></h3><p>如果看到以下输出，说明前端应用启动成功：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span>

39<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>  App running at:</span></span>
40<span class="line"><span>  - Local:   http://localhost:8080/</span></span>
41<span class="line"><span>  - Network: http://192.168.1.100:8080/</span></span></code></pre></div><h2 id="数据库初始化" tabindex="-1">数据库初始化 <a class="header-anchor" href="#数据库初始化" aria-label="Permalink to &quot;数据库初始化&quot;">​</a></h2><h3 id="_1-访问初始化页面" tabindex="-1">1. 访问初始化页面 <a class="header-anchor" href="#_1-访问初始化页面" aria-label="Permalink to &quot;1. 访问初始化页面&quot;">​</a></h3><p>在浏览器中访问：<code>http://localhost:8080/#/init</code></p><h3 id="_2-配置数据库信息" tabindex="-1">2. 配置数据库信息 <a class="header-anchor" href="#_2-配置数据库信息" aria-label="Permalink to &quot;2. 配置数据库信息&quot;">​</a></h3><p>在初始化页面填写数据库连接信息：</p><ul><li><strong>数据库类型</strong>: 选择 MySQL</li><li><strong>主机地址</strong>: <code>127.0.0.1</code></li><li><strong>端口</strong>: <code>3306</code></li><li><strong>用户名</strong>: <code>root</code></li><li><strong>密码</strong>: 您的数据库密码</li><li><strong>数据库名</strong>: <code>gva</code>（如果不存在会自动创建）</li></ul><h3 id="_3-执行初始化" tabindex="-1">3. 执行初始化 <a class="header-anchor" href="#_3-执行初始化" aria-label="Permalink to &quot;3. 执行初始化&quot;">​</a></h3><ol><li>确认所有信息无误</li><li>点击 &quot;立即初始化&quot; 按钮</li><li>等待初始化完成</li></ol><p><img src="https://qmplusimg.henrongyi.top/gva/gin-vue-admin.png" alt="数据库初始化"></p><h3 id="_4-初始化完成" tabindex="-1">4. 初始化完成 <a class="header-anchor" href="#_4-初始化完成" aria-label="Permalink to &quot;4. 初始化完成&quot;">​</a></h3><p>初始化成功后，系统会：</p><ul><li>创建所有必要的数据表</li><li>插入基础数据（管理员账号、菜单、权限等）</li><li>自动跳转到登录页面</li></ul><p><strong>默认管理员账号</strong>：</p><ul><li>用户名：<code>admin</code></li><li>密码：<code>123456</code></li></ul><h2 id="附-使用goland运行web项目" tabindex="-1">附. 使用Goland运行web项目 <a class="header-anchor" href="#附-使用goland运行web项目" aria-label="Permalink to &quot;附. 使用Goland运行web项目&quot;">​</a></h2><h3 id="附-1-编辑配置" tabindex="-1">附.1 编辑配置 <a class="header-anchor" href="#附-1-编辑配置" aria-label="Permalink to &quot;附.1 编辑配置&quot;">​</a></h3><p><img src="`+n+'" alt="image-20210710094929206"></p><h3 id="附-2-添加npm启动项" tabindex="-1">附.2 添加npm启动项 <a class="header-anchor" href="#附-2-添加npm启动项" aria-label="Permalink to &quot;附.2 添加npm启动项&quot;">​</a></h3><p><img src="'+t+'" alt="image-20210710095126844"></p><h3 id="附-3-配置" tabindex="-1">附.3 配置 <a class="header-anchor" href="#附-3-配置" aria-label="Permalink to &quot;附.3 配置&quot;">​</a></h3><p><img src="'+h+'" alt="image-20210710095356257"></p><h3 id="附-4-配置完成" tabindex="-1">附.4 配置完成 <a class="header-anchor" href="#附-4-配置完成" aria-label="Permalink to &quot;附.4 配置完成&quot;">​</a></h3><p><img src="'+r+'" alt="image-20210710095715145"></p><h3 id="附-5-启动web项目" tabindex="-1">附.5 启动web项目 <a class="header-anchor" href="#附-5-启动web项目" aria-label="Permalink to &quot;附.5 启动web项目&quot;">​</a></h3><p><img src="'+p+'" alt="image-20210710095814641"></p><h3 id="附-6-启动web项目成功" tabindex="-1">附.6 启动web项目成功 <a class="header-anchor" href="#附-6-启动web项目成功" aria-label="Permalink to &quot;附.6 启动web项目成功&quot;">​</a></h3><p><img src="'+o+'" alt="image-20210710095838176"></p>',79)])])}const y=i(d,[["render",c]]);export{f as __pageData,y as default};