go-packages/iris
1
0
Fork 0
mirror of https://github.com/kataras/iris.git synced 2025-03-14 08:26:26 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

finish the first state of the vuejs todo mvc example, a simple rest api - todo: websocket and live updates between browser tabs with the same session id

Browse Source 
Former-commit-id: 0bd859420cff87014479c44a471ec273c621c1a2
This commit is contained in:
Gerasimos (Makis) Maropoulos 2017-12-23 17:07:39 +02:00
parent a2f217be17
commit e1c65d23fb
11 changed files with 232 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_examples/mvc/login/web/controllers/users_controller.go
View File

@ -14,7 +14,7 @@ import (
// DELETE /users/{id:long} | delete by id
// Requires basic authentication.
type UsersController struct {
// context is auto-binded by Iris on each request,
// Optionally: context is auto-binded by Iris on each request,
// remember that on each incoming request iris creates a new UserController each time,
// so all fields are request-scoped by-default, only dependency injection is able to set
// custom fields like the Service which is the same for all requests (static binding).
@ -84,5 +84,5 @@ func (c *UsersController) DeleteBy(id int64) interface{} {
// right here we can see that a method function
// can return any of those two types(map or int),
// we don't have to specify the return type to a specific type.
return 400 // same as `iris.StatusBadRequest`.
return iris.StatusBadRequest // same as 400.
}

24
_examples/tutorial/vuejs-todo-mvc/src/todo/item.go
View File

@ -1,24 +1,8 @@
package todo
type State uint32
const (
StateActive State = iota
StateCompleted
)
func ParseState(s string) State {
switch s {
case "completed":
return StateCompleted
default:
return StateActive
}
}
type Item struct {
OwnerID string
ID int64
Body string
CurrentState State
SessionID string `json:"-"`
ID int64 `json:"id,omitempty"`
Title string `json:"title"`
Completed bool `json:"completed"`
}

58
_examples/tutorial/vuejs-todo-mvc/src/todo/service.go
View File

@ -1,53 +1,31 @@
package todo
type Service interface {
GetByID(id int64) (Item, bool)
GetByOwner(owner string) []Item
Complete(item Item) bool
Save(newItem Item) error
Get(owner string) []Item
Save(owner string, newItems []Item) error
}
type MemoryService struct {
items map[int64]Item
items map[string][]Item
}
func (s *MemoryService) getLatestID() (id int64) {
for k := range s.items {
if k > id {
id = k
func NewMemoryService() *MemoryService {
return &MemoryService{make(map[string][]Item, 0)}
}
func (s *MemoryService) Get(sessionOwner string) (items []Item) {
return s.items[sessionOwner]
}
func (s *MemoryService) Save(sessionOwner string, newItems []Item) error {
var prevID int64
for i := range newItems {
if newItems[i].ID == 0 {
newItems[i].ID = prevID
prevID++
}
}
return
}
func (s *MemoryService) GetByID(id int64) (Item, bool) {
item, found := s.items[id]
return item, found
}
func (s *MemoryService) GetByOwner(owner string) (items []Item) {
for _, item := range s.items {
if item.OwnerID != owner {
continue
}
items = append(items, item)
}
return
}
func (s *MemoryService) Complete(item Item) bool {
item.CurrentState = StateCompleted
return s.Save(item) == nil
}
func (s *MemoryService) Save(newItem Item) error {
if newItem.ID == 0 {
// create
newItem.ID = s.getLatestID() + 1
}
// full replace here for the shake of simplicity)
s.items[newItem.ID] = newItem
s.items[sessionOwner] = newItems
return nil
}

84
_examples/tutorial/vuejs-todo-mvc/src/web/controllers/todo_controller.go
View File

@ -4,9 +4,9 @@ import (
"github.com/kataras/iris/_examples/tutorial/vuejs-todo-mvc/src/todo"
"github.com/kataras/iris"
"github.com/kataras/iris/sessions"
"github.com/kataras/iris/mvc"
"github.com/kataras/iris/sessions"
"github.com/kataras/iris/websocket"
)
// TodoController is our TODO app's web controller.
@ -23,55 +23,39 @@ type TodoController struct {
func (c *TodoController) BeforeActivation(b mvc.BeforeActivation) {
// this could be binded to a controller's function input argument
// if any, or struct field if any:
b.Dependencies().Add(func(ctx iris.Context) todo.Item {
// ctx.ReadForm(&item)
var (
owner = ctx.PostValue("owner")
body = ctx.PostValue("body")
state = ctx.PostValue("state")
)
b.Dependencies().Add(func(ctx iris.Context) (items []todo.Item) {
ctx.ReadJSON(&items)
return
})
}
return todo.Item{
OwnerID: owner,
Body: body,
CurrentState: todo.ParseState(state),
}
// Get handles the GET: /todos route.
func (c *TodoController) Get() []todo.Item {
return c.Service.Get(c.Session.ID())
}
// PostItemResponse the response data that will be returned as json
// after a post save action of all todo items.
type PostItemResponse struct {
Success bool `json:"success"`
}
var emptyResponse = PostItemResponse{Success: false}
// Post handles the POST: /todos route.
func (c *TodoController) Post(newItems []todo.Item) PostItemResponse {
if err := c.Service.Save(c.Session.ID(), newItems); err != nil {
return emptyResponse
}
return PostItemResponse{Success: true}
}
func (c *TodoController) GetSync(conn websocket.Connection) {
conn.Join(c.Session.ID())
conn.On("save", func() { // "save" event from client.
conn.To(c.Session.ID()).Emit("saved", nil) // fire a "save" event to the rest of the clients.
})
// ca.Router.Use(...).Done(...).Layout(...)
}
// Get handles the GET: /todo route.
func (c *TodoController) Get() []todo.Item {
return c.Service.GetByOwner(c.Session.ID())
}
// PutCompleteBy handles the PUT: /todo/complete/{id:long} route.
func (c *TodoController) PutCompleteBy(id int64) int {
item, found := c.Service.GetByID(id)
if !found {
return iris.StatusNotFound
}
if item.OwnerID != c.Session.ID() {
return iris.StatusForbidden
}
if !c.Service.Complete(item) {
return iris.StatusBadRequest
}
return iris.StatusOK
}
// Post handles the POST: /todo route.
func (c *TodoController) Post(newItem todo.Item) int {
if newItem.OwnerID != c.Session.ID() {
return iris.StatusForbidden
}
if err := c.Service.Save(newItem); err != nil {
return iris.StatusBadRequest
}
return iris.StatusOK
conn.Wait()
}

18
_examples/tutorial/vuejs-todo-mvc/src/web/main.go
View File

@ -6,12 +6,14 @@ import (
"github.com/kataras/iris"
"github.com/kataras/iris/sessions"
"github.com/kataras/iris/websocket"
"github.com/kataras/iris/mvc"
)
func main() {
app := iris.New()
// serve our app in public, public folder
// contains the client-side vue.js application,
// no need for any server-side template here,
@ -20,20 +22,28 @@ func main() {
app.StaticWeb("/", "./public")
sess := sessions.New(sessions.Config{
Cookie: "_iris_session",
Cookie: "iris_session",
})
m := mvc.New(app.Party("/todo"))
ws := websocket.New(websocket.Config{})
// create our mvc application targeted to /todos relative sub path.
m := mvc.New(app.Party("/todos"))
// any dependencies bindings here...
m.AddDependencies(
todo.NewMemoryService(),
mvc.Session(sess),
new(todo.MemoryService),
ws.Upgrade,
)
// http://localhost:8080/iris-ws.js
// serve the javascript client library to communicate with
// the iris high level websocket event system.
m.Router.Any("/iris-ws.js", websocket.ClientHandler())
// controllers registration here...
m.Register(new(controllers.TodoController))
// start the web server at http://localhost:8080
app.Run(iris.Addr(":8080"), iris.WithoutVersionChecker, iris.WithOptimizations)
app.Run(iris.Addr(":8080"), iris.WithoutVersionChecker)
}

126
_examples/tutorial/vuejs-todo-mvc/src/web/public/index.html
View File

@ -1,63 +1,71 @@
<!doctype html>
<html data-framework="vue">
<head>
<meta charset="utf-8">
<title>Iris + Vue.js • TodoMVC</title>
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css@2.0.4/index.css">
<!-- this needs to be loaded before guide's inline scripts -->
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/director@1.2.8/build/director.js"></script>
<style>[v-cloak] { display: none; }</style>
</head>
<body>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo"
autofocus autocomplete="off"
placeholder="What needs to be done?"
v-model="newTodo"
@keyup.enter="addTodo">
</header>
<section class="main" v-show="todos.length" v-cloak>
<input class="toggle-all" type="checkbox" v-model="allDone">
<ul class="todo-list">
<li v-for="todo in filteredTodos"
class="todo"
:key="todo.id"
:class="{ completed: todo.completed, editing: todo == editedTodo }">
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed">
<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
<button class="destroy" @click="removeTodo(todo)"></button>
</div>
<input class="edit" type="text"
v-model="todo.title"
v-todo-focus="todo == editedTodo"
@blur="doneEdit(todo)"
@keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)">
</li>
</ul>
</section>
<footer class="footer" v-show="todos.length" v-cloak>
<span class="todo-count">
<strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
</span>
<ul class="filters">
<li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
<li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
<li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
</ul>
<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
Clear completed
</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
</footer>
<script src="/js/app.js"></script>
</body>
<head>
<meta charset="utf-8">
<title>Iris + Vue.js • TodoMVC</title>
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css@2.0.4/index.css">
<!-- this needs to be loaded before guide's inline scripts -->
<script src="https://vuejs.org/js/vue.js"></script>
<!-- $http -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- -->
<script src="https://unpkg.com/director@1.2.8/build/director.js"></script>
<!-- websocket sync between multiple tabs -->
<script src="/todos/iris-ws.js"></script>
<!-- -->
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo">
</header>
<section class="main" v-show="todos.length" v-cloak>
<input class="toggle-all" type="checkbox" v-model="allDone">
<ul class="todo-list">
<li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{ completed: todo.completed, editing: todo == editedTodo }">
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed">
<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
<button class="destroy" @click="removeTodo(todo)"></button>
</div>
<input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)">
</li>
</ul>
</section>
<footer class="footer" v-show="todos.length" v-cloak>
<span class="todo-count">
<strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
</span>
<ul class="filters">
<li>
<a href="#/all" :class="{ selected: visibility == 'all' }">All</a>
</li>
<li>
<a href="#/active" :class="{ selected: visibility == 'active' }">Active</a>
</li>
<li>
<a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a>
</li>
</ul>
<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
Clear completed
</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
</footer>
<script src="/js/app.js"></script>
</body>
</html>

56
_examples/tutorial/vuejs-todo-mvc/src/web/public/js/app.js
View File

@ -1,19 +1,42 @@
// Full spec-compliant TodoMVC with localStorage persistence
// Full spec-compliant TodoMVC with Iris
// and hash-based routing in ~120 effective lines of JavaScript.
// localStorage persistence
var STORAGE_KEY = 'todos-vuejs-2.0'
// var socket = new Ws("ws://localhost:8080/todos/sync");
// socket.On("saved", function () {
// console.log("receive: on saved");
// todoStorage.fetch();
// });
var todos = [];
var todoStorage = {
fetch: function () {
var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
todos.forEach(function (todo, index) {
todo.id = index
})
todoStorage.uid = todos.length
axios.get("/todos").then(response => {
if (response.data == null) {
return;
}
for (var i = 0; i < response.data.length; i++) {
// if (todos.length <=i || todos[i] === null) {
// todos.push(response.data[i]);
// } else {
// todos[i] = response.data[i];
// }
todos.push(response.data[i]);
}
});
return todos
},
save: function (todos) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
axios.post("/todos", JSON.stringify(todos)).then(response => {
if (!response.data.success) {
window.alert("saving had a failure");
return;
}
// console.log("send: save");
// socket.Emit("save")
});
}
}
@ -44,11 +67,18 @@ var app = new Vue({
visibility: 'all'
},
// watch todos change for localStorage persistence
// watch todos change for persistence
watch: {
todos: {
handler: function (todos) {
todoStorage.save(todos)
// // saved by this client.
// if (todos[todos.length - 1].id === 0) {
// todoStorage.save(todos);
// } else {
// console.log("item cannot be saved, already exists.");
// console.log(todos[todos.length - 1]);
// }
todoStorage.save(todos);
},
deep: true
}
@ -90,7 +120,7 @@ var app = new Vue({
return
}
this.todos.push({
id: todoStorage.uid++,
id: 0, // just for the client-side.
title: value,
completed: false
})
@ -140,7 +170,7 @@ var app = new Vue({
})
// handle routing
function onHashChange () {
function onHashChange() {
var visibility = window.location.hash.replace(/#\/?/, '')
if (filters[visibility]) {
app.visibility = visibility

16
mvc/di/func.go
View File

@ -11,6 +11,8 @@ type (
InputIndex int
}
// FuncInjector keeps the data that are needed in order to do the binding injection
// as fast as possible and with the best possible and safest way.
FuncInjector struct {
// the original function, is being used
// only the .Call, which is referring to the same function, always.
@ -27,6 +29,10 @@ type (
}
)
// MakeFuncInjector returns a new func injector, which will be the object
// that the caller should use to bind input arguments of the "fn" function.
//
// The hijack and the goodFunc are optional, the "values" is the dependencies values.
func MakeFuncInjector(fn reflect.Value, hijack Hijacker, goodFunc TypeChecker, values ...reflect.Value) *FuncInjector {
typ := IndirectType(fn.Type())
s := &FuncInjector{
@ -100,10 +106,14 @@ func MakeFuncInjector(fn reflect.Value, hijack Hijacker, goodFunc TypeChecker, v
return s
}
// String returns a debug trace text.
func (s *FuncInjector) String() string {
return s.trace
}
// Inject accepts an already created slice of input arguments
// and fills them, the "ctx" is optional and it's used
// on the dependencies that depends on one or more input arguments, these are the "ctx".
func (s *FuncInjector) Inject(in *[]reflect.Value, ctx ...reflect.Value) {
args := *in
for _, input := range s.inputs {
@ -118,6 +128,12 @@ func (s *FuncInjector) Inject(in *[]reflect.Value, ctx ...reflect.Value) {
*in = args
}
// Call calls the "Inject" with a new slice of input arguments
// that are computed by the length of the input argument from the MakeFuncInjector's "fn" function.
//
// If the function needs a receiver, so
// the caller should be able to in[0] = receiver before injection,
// then the `Inject` method should be used instead.
func (s *FuncInjector) Call(ctx ...reflect.Value) []reflect.Value {
in := make([]reflect.Value, s.Length, s.Length)
s.Inject(&in, ctx...)

21
mvc/di/object.go
View File

@ -5,11 +5,17 @@ import (
"reflect"
)
// BindType is the type of a binded object/value, it's being used to
// check if the value is accessible after a function call with a "ctx" when needed ( Dynamic type)
// or it's just a struct value (a service | Static type).
type BindType uint32
const (
Static BindType = iota // simple assignable value, a static value.
Dynamic // dynamic value, depends on some input arguments from the caller.
// Static is the simple assignable value, a static value.
Static BindType = iota
// Dynamic returns a value but it depends on some input arguments from the caller,
// on serve time.
Dynamic
)
func bindTypeString(typ BindType) string {
@ -21,6 +27,9 @@ func bindTypeString(typ BindType) string {
}
}
// BindObject contains the dependency value's read-only information.
// FuncInjector and StructInjector keeps information about their
// input arguments/or fields, these properties contain a `BindObject` inside them.
type BindObject struct {
Type reflect.Type // the Type of 'Value' or the type of the returned 'ReturnValue' .
Value reflect.Value
@ -29,6 +38,11 @@ type BindObject struct {
ReturnValue func([]reflect.Value) reflect.Value
}
// MakeBindObject accepts any "v" value, struct, pointer or a function
// and a type checker that is used to check if the fields (if "v.elem()" is struct)
// or the input arguments (if "v.elem()" is func)
// are valid to be included as the final object's dependencies, even if the caller added more
// the "di" is smart enough to select what each "v" needs and what not before serve time.
func MakeBindObject(v reflect.Value, goodFunc TypeChecker) (b BindObject, err error) {
if IsFunc(v) {
b.BindType = Dynamic
@ -93,10 +107,13 @@ func MakeReturnValue(fn reflect.Value, goodFunc TypeChecker) (func([]reflect.Val
return bf, outTyp, nil
}
// IsAssignable checks if "to" type can be used as "b.Value/ReturnValue".
func (b *BindObject) IsAssignable(to reflect.Type) bool {
return equalTypes(b.Type, to)
}
// Assign sets the values to a setter, "toSetter" contains the setter, so the caller
// can use it for multiple and different structs/functions as well.
func (b *BindObject) Assign(ctx []reflect.Value, toSetter func(reflect.Value)) {
if b.BindType == Dynamic {
toSetter(b.ReturnValue(ctx))

9
mvc/di/struct.go
View File

@ -18,6 +18,8 @@ type (
FieldIndex []int
}
// StructInjector keeps the data that are needed in order to do the binding injection
// as fast as possible and with the best possible and safest way.
StructInjector struct {
initRef reflect.Value
initRefAsSlice []reflect.Value // useful when the struct is passed on a func as input args via reflection.
@ -42,6 +44,12 @@ func (s *StructInjector) countBindType(typ BindType) (n int) {
return
}
// MakeStructInjector returns a new struct injector, which will be the object
// that the caller should use to bind exported fields or
// embedded unexported fields that contain exported fields
// of the "v" struct value or pointer.
//
// The hijack and the goodFunc are optional, the "values" is the dependencies values.
func MakeStructInjector(v reflect.Value, hijack Hijacker, goodFunc TypeChecker, values ...reflect.Value) *StructInjector {
s := &StructInjector{
initRef: v,
@ -149,6 +157,7 @@ func (s *StructInjector) fillStruct() {
}
}
// String returns a debug trace message.
func (s *StructInjector) String() (trace string) {
for i, f := range s.fields {
elemField := s.elemType.FieldByIndex(f.FieldIndex)

6
mvc/di/values.go
View File

@ -2,8 +2,11 @@ package di
import "reflect"
// Values is a shortcut of []reflect.Value,
// it makes easier to remove and add dependencies.
type Values []reflect.Value
// NewValues returns new empty (dependencies) values.
func NewValues() Values {
return Values{}
}
@ -30,6 +33,7 @@ func (bv Values) CloneWithFieldsOf(s interface{}) Values {
return values
}
// Len returns the length of the current "bv" values slice.
func (bv Values) Len() int {
return len(bv)
}
@ -41,6 +45,8 @@ func (bv *Values) Add(values ...interface{}) {
bv.AddValues(ValuesOf(values)...)
}
// AddValues same as `Add` but accepts reflect.Value dependencies instead of interface{}
// and appends them to the list if they pass some checks.
func (bv *Values) AddValues(values ...reflect.Value) {
for _, v := range values {
if !goodVal(v) {