feat: todomvc (#103)

Author: atian25

todomvc/.autod.conf.js

@@ -0,0 +1,30 @@
+'use strict';
+
+module.exports = {
+ write: true,
+ prefix: '^',
+ plugin: 'autod-egg',
+ test: [
+ 'test',
+ 'benchmark',
+ ],
+ dep: [
+ 'egg',
+ 'egg-scripts',
+ ],
+ devdep: [
+ 'egg-ci',
+ 'egg-bin',
+ 'egg-mock',
+ 'autod',
+ 'autod-egg',
+ 'eslint',
+ 'eslint-config-egg',
+ 'webstorm-disable-index',
+ ],
+ exclude: [
+ './test/fixtures',
+ './dist',
+ ],
+};
+

todomvc/.eslintignore

@@ -0,0 +1 @@
+coverage

todomvc/.eslintrc

@@ -0,0 +1,3 @@
+{
+ "extends": "eslint-config-egg"
+}

todomvc/.gitignore

@@ -0,0 +1,14 @@
+logs/
+npm-debug.log
+yarn-error.log
+node_modules/
+package-lock.json
+yarn.lock
+coverage/
+.idea/
+run/
+.DS_Store
+*.sw*
+*.un~
+typings/
+.nyc_output/

todomvc/README.md

@@ -0,0 +1,16 @@
+# TodoMVC powered by Egg
+
+- [TodoMVC](http://todomvc.com/)
+- [Egg](egg)
+
+![](./todomvc.png)
+
+### QuickStart
+
+```bash
+$ npm i
+$ npm run dev
+$ open http://localhost:7001/
+```
+
+[egg]: https://eggjs.org

todomvc/app/controller/home.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const { Controller } = require('egg');
+
+class HomeController extends Controller {
+ async index() {
+ const { ctx } = this;
+ await ctx.render('home.tpl');
+ }
+}
+
+module.exports = HomeController;

todomvc/app/controller/todo.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const { Controller } = require('egg');
+
+class TodoController extends Controller {
+ // list todos, suport filter, `GET /api/todo?completed=true`
+ async index() {
+ const { ctx, service } = this;
+
+ // query value is string, should convert types.
+ let { completed } = ctx.query;
+ if (ctx.query.completed !== undefined) completed = completed === 'true';
+
+ ctx.status = 200;
+ ctx.body = await service.todo.list({ completed });
+ }
+
+ async create() {
+ const { ctx, service } = this;
+
+ // params validate
+ ctx.validate({ title: { type: 'string' } });
+
+ ctx.status = 201;
+ ctx.body = await service.todo.create(ctx.request.body);
+ }
+
+ async update() {
+ const { ctx, service } = this;
+
+ ctx.validate({ title: { type: 'string' } });
+
+ ctx.status = 204;
+ ctx.type = 'json';
+ ctx.body = await service.todo.update(ctx.params.id, ctx.request.body);
+ }
+
+ async destroy() {
+ const { ctx, service } = this;
+ const id = ctx.params.id;
+ ctx.status = 204;
+ ctx.type = 'json';
+ await service.todo.destroy(id);
+ }
+}
+
+module.exports = TodoController;

todomvc/app/middleware/response_time.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = options => {
+ return async function responseTime(ctx, next) {
+ const start = Date.now();
+ await next();
+ const cost = Date.now() - start;
+ ctx.set(options.headerKey, `${cost}ms`);
+ };
+};

todomvc/app/public/main.js

@@ -0,0 +1,60 @@
+'use strict';
+/* global Vue:false, axios:false, Cookies: false */
+/* eslint object-shorthand: 0 */
+
+axios.defaults.headers.common['x-csrf-token'] = Cookies.get('csrfToken');
+axios.defaults.headers.post['Content-Type'] = 'application/json';
+
+new Vue({
+ el: '#app',
+ data: {
+ todoList: [],
+ newTodo: '',
+ completed: 'all',
+ },
+ methods: {
+ listData: function(completed) {
+ // just for showcase, ignore error handler and loading tip
+ axios.get('/api/todo', { params: { completed } })
+ .then(res => {
+ this.todoList = res.data;
+ });
+ },
+
+ addTodo: function() {
+ const value = this.newTodo && this.newTodo.trim();
+ if (!value) return;
+
+ const item = {
+ title: value,
+ completed: false,
+ };
+
+ axios.post('/api/todo', item)
+ .then(res => {
+ this.todoList.push(res.data);
+ this.newTodo = '';
+ });
+ },
+
+ completeTodo: function(todo) {
+ todo.completed = !todo.completed;
+ axios.put(`/api/todo/${todo.id}`, todo)
+ .then(() => {
+ this.newTodo = '';
+ });
+ },
+
+ removeTodo: function(todo) {
+ axios.delete(`/api/todo/${todo.id}`)
+ .then(() => {
+ const index = this.todoList.findIndex(x => x.id === todo.id);
+ this.todoList.splice(index, 1);
+ });
+ },
+ },
+
+ mounted() {
+ this.listData();
+ },
+});

todomvc/app/router.js

@@ -0,0 +1,11 @@
+'use strict';
+
+/**
+ * @param {Egg.Application} app - egg application
+ */
+module.exports = app => {
+ const { router, controller } = app;
+
+ router.get('/', controller.home.index);
+ router.resources('/api/todo', controller.todo);
+};