https://github.com/vuejs/awesome-vue#http-requests
vue-resource - npm https://www.npmjs.com/package/vue-resource
// global Vue object Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback); // in a Vue instance this.$http.get('/someUrl', [config]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
pagekit/vue-resource https://github.com/pagekit/vue-resource/blob/HEAD/docs/http.md
与echo框架整合
package main
import (
"net/http"
"github.com/labstack/echo"
"io"
"html/template"
"fmt"
)
/*
1.实现 echo.Renderer 接口
*/
type Template struct {
templates *template.Template
}
func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
return t.templates.ExecuteTemplate(w, name, data)
}
/*
4.在 action 中渲染模板
*/
func Hello(c echo.Context) error {
return c.Render(http.StatusOK, "WeUI", "chkUrl")
}
/*
自定义一个 context
Define a custom context
Context - Go/Golang 框架 Echo 文档 http://go-echo.org/guide/context/
*/
type CustomContext struct {
echo.Context
}
func (c *CustomContext) Foo() {
println("foo")
}
func (c *CustomContext) Bar() {
println("bar")
}
type ScriptStruct struct {
Host string
Port int
Path string
ScriptName string
}
var s2 = ScriptStruct{"192.168.3.123", 8088, "/myDir/", "spider.go"}
var ScriptArr [2]ScriptStruct
func (c *CustomContext) DumpScripts() {
println("bar")
ScriptArr[0] = ScriptStruct{"192.168.3.103", 8088, "/home/goDev/spider/", "spiderChkurl.go"}
ScriptArr[1] = ScriptStruct{"192.168.3.110", 8088, "/home/goDev/spider/", "spiderChkurl.go"}
//ScriptArr[2] = ScriptStruct{"192.168.3.123", 8088, "/home/goDev/spider/", "spiderChkurl.go"}
}
// User
type User struct {
Name string `json:"name" xml:"name"`
Email string `json:"email" xml:"email"`
}
func main() {
/*
2.预编译模板
*/
t := &Template{
templates: template.Must(template.ParseGlob("goEchopublic/views/*.html")),
}
/*
3.注册模板
*/
e := echo.New()
e.Renderer = t
/*
静态文件
Echo#Static(prefix, root string) 用一个 url 路径注册一个新的路由来提供静态文件的访问服务。root 为文件根目录。
这样会将所有访问/static/*的请求去访问assets目录。例如，一个访问/static/js/main.js的请求会匹配到assets/js/main.js这个文件。
*/
e.Static("/static", "assets")
/*
创建一个中间件来扩展默认的 context
Create a middleware to extend default context
*/
e.Use(func(h echo.HandlerFunc) echo.HandlerFunc {
return func(c echo.Context) error {
cc := &CustomContext{c}
return h(cc)
}
})
/*
这个中间件要在所有其它中间件之前注册到路由上。
This middleware should be registered before any other middleware.
*/
/*
在业务处理中使用
Use in handler
*/
e.GET("/scriptAdmin01", Hello)
e.GET("/WeUI", func(c echo.Context) error {
fmt.Println("test-")
return c.Render(http.StatusOK, "WeUI", "data--")
})
e.GET("/scriptAdmin", func(c echo.Context) error {
cc := c.(*CustomContext)
cc.Foo()
cc.Bar()
cc.DumpScripts()
fmt.Println(ScriptArr)
return c.Render(http.StatusOK, "hello", s2)
})
e.GET("/chkUrl", func(c echo.Context) error {
fmt.Println("test-chkUrl")
cc := c.(*CustomContext)
cc.DumpScripts()
return c.Render(http.StatusOK, "chkUrl", ScriptArr)
})
e.POST("/chkUid", func(c echo.Context) error {
fmt.Println("chkUid")
uid := c.FormValue("uid")
fmt.Println(uid)
cc := c.(*CustomContext)
cc.DumpScripts()
msg := "uid:" + uid + "处理中。。。进度xxx"
fmt.Println(msg)
return c.Render(http.StatusOK, "tmp", msg)
})
e.GET("/testVue", func(c echo.Context) error {
fmt.Println("testVue")
//uid := c.FormValue("uid")
//fmt.Println(uid)
//cc := c.(*CustomContext)
//cc.DumpScripts()
uid := "12"
msg := "uid:" + uid + "处理中。。。进度xxx"
fmt.Println(msg)
u := &User{
Name: "Jon",
Email: "jon@labstack.com",
}
return c.JSON(http.StatusOK, u)
})
e.Logger.Fatal(e.Start(":1323"))
}
{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>chkUrl--脚本管理</title>
<link rel="stylesheet" href="/static/WeUI_files/weui.css">
<link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;">
<div class="weui-cells page__category-content">
<div class="page__hd">
<h1 class="page__title">chkUrl</h1>
<p class="page__desc">检测url状态信息</p>
</div>
</div>
<div class="weui-cells page__category-content">
{{range .}}
<form action="/chkUid" method="POST">
<div class="weui-cell weui-cell_swiped">
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder">{{.Host}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Port}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Path}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.ScriptName}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*"
value="weui input error"
placeholder="请输入uid（0-9）" style="margin-left: 2em;" name="uid">
</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">
<button class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:"
style="color: #FFF;text-align: center;" type="submit">运行
</button>
</div>
</div>
</div>
</div>
</form>
{{end}}
</div>
<div id="app">
@{message}@
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
var app = new Vue(
{
delimiters: ['@{', '}@'],
el: '#app',
data: {
message: 'Hello Vue!'
},
}
);
app.$http.get('/testVue', {foo: 'bar'}).then(response = > {
// get status
response.status;
// get status text
response.statusText;
// get 'Expires' header
response.headers.get('Expires');
// get body data
//注意服务端为“Email”,
// response.body.Email; 数据不被解析
app.message = response.body.email;
},
response =
>
{
// error callback
}
)
</script>
{{end}}