使用 Vue.js 和 Iris 共建一个简单的 Todo MVC 应用

本文用Golang的Iris框架作为后端服务,vuejs渲染前端UI,用websocket通信。基于监听hash变化 director.js库实现简单路由,axios库与后方沟通,netoffos.js库事件交流,小而美。

数据服务

package todo

import "sync"

// Item 条目数据
type Item struct {
    SessionID string `json:"-"`
    ID        int64  `json:"id,omitempty"`
    Title     string `json:"title"`
    Completed bool   `json:"completed"`
}

// Service 通用接口
type Service interface {
    Get(owner string) []Item
    Save(owner string, newItems []Item) error
}

// MemoryService 内存服务存储结构
type MemoryService struct {
    // 映射键为sessionid,值是携带sesseionid的item类型组成的列表
    items map[string][]Item
    // 并发访问读写锁
    mu sync.RWMutex
}

// NewMemoryService 初始化
func NewMemoryService() *MemoryService {
    return &MemoryService{
        items: make(map[string][]Item, 0),
    }
}

// Get 读
func (s *MemoryService) Get(sessionOwner string) []Item {
    s.mu.RLock()
    items := s.items[sessionOwner]
    s.mu.RUnlock()
    return items
}

// Save 写
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++
        }
    }

    s.mu.Lock()
    s.items[sessionOwner] = newItems
    s.mu.Unlock()
    return nil
}

前端vuejs

        <section class="main" v-show="todos.length" v-cloak="">
            <input type="checkbox" v-model="allDone" class="toggle-all">
            <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 type="checkbox" @click="completeTodo(todo)" class="toggle">
                        <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
                        <button @click="removeTodo(todo)" class="destroy"></button>
                    </div>
                    <input type="text" v-model="todo.title" v-todo-focus="todo==editedTodo" @blur="doneEdit(todo)"
                        @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)" class="edit">
                </li>
            </ul>
        </section>
Image placeholder
Laravel001
未设置
  0人点赞

没有讨论,发表一下自己的看法吧

推荐文章
使用 Vue.js 和 Iris 共建一个简单的 Todo MVC 应用

数据服务 packagetodo import"sync" //Item条目数据 typeItemstruct{ SessionIDstring`json:"-"` IDint64`json:"i

搭建 Spring+SpringMVC+MyBatis 框架

SSM框架整合 pom中添加依赖 添加编辑Spring配置文件 添加编辑SpringMVC配置文件 添加编辑Mybatis配置文件 配置web.xml 1、pom中添加依赖 junit ju

面试问烂的 Spring AOP 原理、SpringMVC 过程

  正文  SpringAOP,SpringMVC,这两个应该是国内面试必问题,网上有很多答案,其实背背就可以。但今天笔者带大家一起深入浅出源码,看看他的原理。以期让印象更加深刻,面试的时候游刃有余。

0103-springmvc的基本流程

背景现在的it研发,已经从管理系统时代迈入了互联网系统时代。页面开发已经从基于JSP+struts转变为为前后端分离的方式(springMVC+JS);思想MVCmvc框架不仅适用于java的开发,也

SpringMVC加载流程

 这节介绍SpringMVC,SpringMVC是一种基于Java的实现MVC设计模式的请求驱动类型的轻量级Web框架。本章会介绍相关概念,流程,再从源码进行讲解。1.MVC MVC(ModelVie

一个简单的基于 Redis 的分布式任务调度器 —— Java 语言实现

折腾了一周的JavaQuartz集群任务调度,很遗憾没能搞定,网上的相关文章也少得可怜,在多节点(多进程)环境下Quartz似乎无法动态增减任务,恼火。无奈之下自己撸了一个简单的任务调度器,结果只花了

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

通过 Laravel 创建一个 Vue 单页面应用(一)

使用laravel创建一个Vue单页面应用(SPA)可以构建一个整洁的由API驱动的应用。在此教程中,我们将学习如何构建并运行一个以Vue路由为前端,laravel为后端的SPA应用。首先我们将注意

通过 Laravel 创建一个 Vue 单页面应用(三)

我们将通过演示在vue-router进入一个路由之前,如何异步加载数据来继续使用Laravel构建我们的VueSPA。 之前在通过Laravel创建一个Vue单页应用(二)中完成了UsersInde

让AI无处不在:滴滴与蚂蚁金服开源共建SQLFlow

2018年1月,Oracle的官方博客上发表了一篇文章,标题是“It’sPervasive:AIIsEverywhere”。作为全球最著名的商业数据库系统提供商,Oracle在这篇文章里历数了AI在企

元脑生态——加速产业AI化,共建行业大脑

8月28日,由中国工程院信息与电子工程学部主办,浪潮集团承办的2019人工智能计算大会(AICC2019)在北京国际饭店会议中心隆重举行。本届大会以“计算预见AI未来”为主题,旨在围绕人工智能的产业需

使用 Go Wails 框架来构建桌面应用(Go+Vue.js)

众所周知,Go主要用于构建API、web后端和CLI工具。但有趣的是,Go可以用在我们没有预料到的地方。 例如,我们可以使用Wails框架用Go和Vue.js构建一个桌面应用程序。 这是一个新框架,

vue..js 编写的简单音乐播放器

闲暇之余写了一个音乐小应用项目目录代码开始index.html 每日推荐音乐 {{music.title}} {{music.author}} n

网络故障排除的五个简单步骤

长期从事IT工作的人会发现很多网络问题,其中一些问题很容易诊断和纠正,但有些问题很难弄明白。如果遇到这些问题时能够通过一些简单的步骤来排除网络故障,以收集信息并缩小问题的范围。第1步:检查网络配置网络

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

软件架构被高估,清晰简单的设计被低估

软件架构最佳实践、企业架构模式以及系统描述的正式方法都是非常重要且实用的工具,总会有合适的场景让它们发挥作用。但在设计系统时,请从简单始、以简单终,尽可能避免一切会无谓提高复杂度的架构与正式工具。

springboot 多数据源,最简单的整合方式

简介 相信大家有配置过多数据源,或者即将配置多数据的朋友们,会发现网上大概有以下几种方案: 1.使用AOP切片进行动态数据源切换 2.使用MapperScan的basePackages配置不同的map

手摸手教你搭建简单的 Git 的代码自动发布

1.为什么我要弄这个? emmmm,因为有个自己的项目每次发布到线上,都要登录一下服务器,然后pull一下代码,执行一些项目初始化的命令(诸如:gitsubmoudleupdate,phpartisa

使用Go语言在MacOS创建一个自定义的命令行工具

原文链接:https://idoubi.cc/posts/create-a-cli-tool-in-macos/ 使用MacOS做开发的朋友都知道,我们一般会使用Homebrew做软件包管理,经常会用

阿里提出针对多目标优化的全新算法框架,同时提升电商推荐场景 GMV 和 CTR

在推荐系统中,多目标优化一直是热门话题,阿里巴巴的XiaoLin、HongjieChen等人针对推荐中的多目标优化问题提出了一种基于帕累托效率的优化算法框架,并应用在电商推荐场景中,对GMV和CTR

笨办法学 Linux 学习处理文件,`pwd`,`ls`,`cp`,`mv`,`rm`,`touch`

Bash:处理文件,pwd,ls,cp,mv,rm,touch 在Linux中,一切都是文件。但是什么是文件?现在完全可以说,它是一个包含一些信息的对象。它通常定义如下: 计算机文件是用于存储信息的

react是mvvm框架吗?

react是mvvm框架吗?不是。React可以作为MVVM中第二个V,也就是View,但是并不是MVVM框架。MVVM一个最显著的特征:双向绑定。React没有这个,它是单向数据绑定的。React是

MVVM原理(Object.defineProperty和订阅者模式)

想着去了解vue的mvvm数据驱动是怎么实现的,百度中看了这篇文章,demo很好。其他文章只是讲到defineProperty的set,get。彻底理解Vue中的Watcher、Observer、De

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会