Git Product home page Git Product logo

cheft

a riot isomorphic framework base on riot & express

Fatures

  • JS fast rendering
  • SEO friendly
  • Support html5 pushState
  • Support hashchange if IE < 10
  • Support IE9+

Login Index

npm install

npm run watch

tip: username/password is admin/admin

Notes

library

Cheft Element

client

client.js

var client = require('./lib/client');
var config = require('./config');
var router = require('./app/router');
var app = window.app = client(config, router);
...
app.start();

server

server.js

var server = require('./lib/server');
var config = require('./config');
var router = require('./app/router');
var dbconfig = require('./db');
var app = root.app = server(config, router, dbconfig);
...
app.start();

common router

app/router.js

module.exports = function(router) {
	router.get('/', function(req, rep) {
		return rep.render('messages');
	});

	router.get('/login', function(req, rep) {
		return rep.render('login', {template: 'login.html'});
	});

    router.get('/messages/:id', function(req, rep) {
        return rep.render('message-detail', {params: [req.params.id]});
    });

    router.get('/news/:id', function(req, rep) {
        return rep.render('new-detail', {params: [req.params.id]});
    });

	router.get('/:tagName', function(req, rep) {
		return rep.render(req.params.tagName, {params: [req.params.tagName]});
	});
}
  • template - public/*.html, default index.html
  • params - tag.opts.params

tag

{tagName}/index.html

<{tagName}>
	<script>app.mixin(this, require('mixin'));</script>
	<div>
		...
	</div>
	<style</style>
</{tagName}>

{tagName}/mixin.js

module.exports = {
	on: {
		init    :  function() {}
		load    :  function() {}
        mount   :  function() {}
        update  :  function() {}
        updated :  function() {}
        unmount :  function() {}
        custom  :  function(data) {}
	},
	do: {
		clicked : function(e) {
			this.trigger('custom', 'hello');
		}
	}
}

server only run init and initData event, such window, docuemnt don't use on init and initData

server router

{tagName}/router.js

module.exports = function(router) {
 
    router.get('/:id', function(req, rep) {
    	...
    });

    router.get('/', function(req, rep) {
        ...
    });

    router.post('/', function(req, rep) {
        ...
    });

    router.put('/:id', function(req, rep) {
        ...
    });

    router.delete('/:id', function(req, rep) {
        ...
    });
};

router's access uri: config.apiPrefix + {tagName} + current route

model

{tagName}/model.js

module.exports = {
    identity: 'messages',
    connection: 'myLocalDisk',
    autoRoute: true,
    attributes: {
        name: 'string',
        email: 'string',
        subject: 'string',
        message: 'string'
    }
}
  • autoRoute is true, Can auto generate CRUD route.
  • base waterline, call method such: app.model.user.find({}, cb)

rest, support client and server

base superagent, app.rest.

  • get(url, data, cb)
  • post(url, data, cb)
  • put(url, data, cb)
  • del(url, data, cb)

早晨海风's Projects

apps icon apps

Basic Polkadot/Substrate UI for interacting with a Polkadot and Substrate node. This is the main user-facing application, allowing access to all features available on Substrate chains.

coala icon coala

A simple web framework base jquery like vue&react&riot&backbone

document-collect icon document-collect

Document all in one , suport doc, docx, xls, xlsx, ppt, pttx, pdf, images and more

dt-net icon dt-net

socket data transmission module

eventstore icon eventstore

The stream-oriented database optimised for event sourcing

fast-reader icon fast-reader

Document is converted to Flash to quickly open the view in the browser

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.