vue http 请求

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}}