兑现 發表於 2022-3-24 18:42:00

GO后端开发+VUE实列

<p>因为我是从java转到go，代码结构跟我之前用java的很像</p>
<p>在这里只浅显的实战运用，没有过多理论讲解</p>
<p>工作环境：IDE：Goland ， Go 1.17.7框架 Gin+Gorm ，前端VUE</p>
<p>这里不过多讲前端，可以到我的github或者gitee拉取</p>
<h2 id="go的安装配置">Go的安装配置</h2>
<p>在官网下载完，安装后需要配置两个环境变量</p>
<p>一个是GOROOT,也就是Go安装的文件夹，注意不要定位到 /bin里面</p>
<p>还有一个是GOPATH，这个就是存放工作空间的文件夹</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183608278-1042050.png" alt="image-20220307225944541" loading="lazy"></p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183607908-5708793.png" alt="image-20220307230024326" loading="lazy">建议在工作空间里先创多一个pkg文件夹，里面就会存放下载的库，gin_vue是我的项目</p>
<p>我用的IDE是Goland，所以里面还需要配置，建议将Goland自动配置的Go环境变量删掉，除非你的库想安装在C盘</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183607527-410291749.png" alt="image-20220307230313843" loading="lazy">快捷键 Crtl+shift+s 进入设置点击GOPATH配置工作环境</p>
<h2 id="安装框架">安装框架</h2>
<p>在项目文件夹路径里输入 cmd 调出黑窗口输入，或者在Goland下面点击Triminal</p>
<pre><code>go get github.com/gin-gonic/gin //后端框架
</code></pre>
<pre><code class="language-go">go get github.com/jinzhu/gorm //数据库框架
</code></pre>
<h2 id="项目开始">项目开始</h2>
<h3 id="结构">结构</h3>
<p>首先是确定好项目结构，因为之前用过java写后端所以就沿用了一些风格</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183607194-1253323343.png" alt="image-20220324120820181" loading="lazy"></p>
<p>其中bin是放go编译后的文件的，src就是代码存放的文件。config就是存放一些配置信息的文件</p>
<p>controller是对数据库各个表的操作，一个go文件代表一个表的操作</p>
<p>dbUtils是数据库连接初始化的文件</p>
<p>entiy就是存放数据库各个表里面的字段结构</p>
<p>router就是定义后端给前端的接口文件</p>
<p>utils就是工具类</p>
<h3 id="配置文件">配置文件</h3>
<p>config.yml</p>
<pre><code>ip: 127.0.0.1 #ip地址
user: root #数据库用户的名字
pwd: 123456 #这里数据库用户的密码
db_name: gotest #所连接数据库的名字
db_port: 3306 #连接数据库的端口号
</code></pre>
<h3 id="数据库连接">数据库连接</h3>
<p>这是我gotest数据库的一个表user的字段，下面基本就是对这个表的操作</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183606937-2084340715.png" alt="image-20220324123003641" loading="lazy"></p>
<pre><code>var AdminT, UserT, Db *gorm.DB

func Init() {
   var c ymlConfig
   var dbConfig string
   config := c.getYml()
   //"root:root123@tcp(127.0.0.1:3306)/test_gorm?charset=utf8mb4&amp;parseTime=True&amp;loc=Local"
   dbConfig = config.User + ":" + config.Pwd + "@tcp(" + config.Ip + ":" + config.Db_port + ")/" + config.Db_name + "?charset=utf8mb4&amp;parseTime=True&amp;loc=Local"
   db, err := gorm.Open("mysql", dbConfig)
   if err != nil {
      panic(err)
   }

   AdminT = db
   UserT = db
   //绑定数据库表名
   UserT.AutoMigrate(&amp;entiy.User{})

}
</code></pre>
<h4 id="定义表的结构">定义表的结构</h4>
<p>我创建了一个表叫做User，struct作为一个映射对象，对应着user里面的字段</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183606317-1698484595.png" alt="image-20220324122416069" loading="lazy"></p>
<h4 id="对数据库表的操作">对数据库表的操作</h4>
<p>这里的c *gin.Context是后端接口传来的信息</p>
<p>ShouldBindJSON就是将结构体传进去，会将前端发送的JSON数据按照结构体进行数据绑定</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183605674-1349029317.png" alt="image-20220324122359174" loading="lazy"></p>
<h3 id="创建接口">创建接口</h3>
<p>这里就是后端接口的创建，前端访问/user/login 就会访问到这个接口对应的处理函数</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183605267-495159465.png" alt="image-20220324122703537" loading="lazy"></p>
<h3 id="初始化">初始化</h3>
<p>确定后端端口号</p>
<h3 id="_"><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183604955-1513797631.png" alt="image-20220324124703649" loading="lazy"></h3>
<h2 id="拉取项目">拉取项目</h2>
<p>目的是vue项目（后端给他配置好的端口号是9292，要是大家改了前面后端的端口号就会通不了），需要提前安装node.js，</p>
<p>https://nodejs.org/en/</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183604389-1467775257.png" alt="image-20220324123404342" loading="lazy"></p>
<p>一直点击，安装到你指定的文件夹就行了</p>
<p>系统环境 配置这里的地址是你安装nodejs的地址里面的node_modules</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183604079-1298354835.png" alt="image-20220324123443214" loading="lazy"></p>
<p>在系统环境变量里双击path 将你的nodejs地址放进去即可</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183603835-1166920972.png" alt="image-20220324123628813" loading="lazy"></p>
<p>这是我的工程项目，下面放着vue的项目</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183603558-1396671517.png" alt="image-20220324123729658" loading="lazy"></p>
<p>现在为vue添加构造器点击画圈地方</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183603125-1130856141.png" alt="image-20220324124125115" loading="lazy"></p>
<p>按Edit Configuration 进入，点击左上角的+号 找到npm</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183602641-1372176930.png" alt="image-20220324124253177" loading="lazy"></p>
<p>按照我这里配置一下，基本都是上面涉及到的路径，点击确定</p>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183601885-157887176.png" alt="image-20220324124408699" loading="lazy"></p>
<p>在Goland的命令行中</p>
<pre><code>cd vue
npm install
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183601367-1242136487.png" alt="image-20220324124011950" loading="lazy"></p>
<p>等安装完就可以点击这里切换前后端运行了 <img src="https://img2022.cnblogs.com/blog/2718952/202203/2718952-20220324183600787-696249289.png" alt="image-20220324124508698" loading="lazy"></p>
<p>https://github.com/Liu-Rrr/gin_vue<br>
https://gitee.com/Liu-Rrr/gin_vue<br>
欢迎star</p>
<h4 id="若有其他问题可以在评论区讨论">若有其他问题可以在评论区讨论</h4><br><br>
来源：https://www.cnblogs.com/shuffleTime/p/16051256.html
頁: [1]
查看完整版本: GO后端开发+VUE实列