go语言结合vue不分离,golang vue 前后端分离

81.go + vue实现web应用程序

前端框架越来越丰富，前后端分离已经是大多数软件团队采取的模式了。vue使用的场景也越来越多。

go本来使用template模板来进行前端的表现，现在可以用vue来分担很大一部分工作了。

通常直接使用go语言写后端，然后使用静态模板加载渲染前端，前端获取后端提供的数据是使用{{ }}符号，2个套在一起的花括号。这个也是vue使用的数据表现方式。

如果go+vue来协同工作的话，需要对vue进行一点设置。比如把{{ }}的方式改为[[ ]]的方式。

首先我们要知道，vue的使用，需要在页面中加载vue.js或vue.min.js

纯静态网页使用vue是这样的（给个html例子）

然后我们实现一个go的简单web服务和模板页面

这个go服务器通过端口 1989 展示服务器页面，提供了一个静态文件路径 htmlpage，我们把vue.js和index.html文件都放置在htmlpage路径里。

go服务器还用模板给前台页面提供了一个News结构的数据，数据包括：Title,Content,Author的值。

在index.html页面中，加载vue.js的时候需要带上静态路径 htmlpage

在 new 一个 vue 变量的时候，必须有一句来设置包裹数据的符号，我们这里设置这个符号为[[ ]]

同时，所有需要由 vue 渲染的数据，都写成类似这样的样子

在 go + vue 方式下的完整模板文件 index.html

此页面中{{ }}包裹的数据是由go从后端提供的数据（例如：{{.Title}}），而[[ ]]包裹的数据，是vue渲染的数据。

只是把 Vue里的数据，改为由go后端提供即可。

好吧，作者已经在向月亮示爱了。呵呵 _

运行一下程序，看修改模板后的效果。

前后端不分离意味着你们的页面都是字符串拼出来的

你是不可以用vue的

你只可以用js和html

可以。因为Vue3发布的就是前后端分离，并提供DevOps功能，后台使用Spring Boot 前后端不分离。所以使用vue3可以用于前后端不分离，前后端分离的意思指通过Tomcat+Ngnix有效地进行解耦,是web应用的一种架构模式。

go get -u github.com/mjibson/esc （go 文件嵌入器）

esc -o static.go admin

admin 是vue 打包出来得dist 文件夹。（只不过改了个名字， dist - admin）

使用 vue-admin-template 项目。

// clone the project

git clone

// enter the project directory

cd vue-admin-template

// install dependency

npm install

// develop

npm run dev

执行npm run build:prod

src 同级（项目根目录）目录创建admin 目录

拷贝vue build 出来得内容到admin 目录

gin 框架， / 后边必须有个名字，一般就是/ filepath，表示多级目录

这时候直接 GET /admin/就能访问我们的系统