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