miox-simple
v4.1.5
Published
miox-simple
Downloads
11
Readme
Miox-Simple
process.env.MIOX_ENV = 'server | client | web';
miox的桌面端核心,承载着客户端与服务端双重解决方案。
客户端
提供一个web service服务。它监听history变化,桥接到web service服务上启动路由变化改变渲染层的生命周期。服务端
SSR 提供一套服务端渲染的机制,利于SEO。
Usage
npm install --save miox-simple
引用后使用最简单的方式来运行(以 VUEJS 为例)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import miox from 'miox-simple';
import { Engine, Component, Webview, life } from 'miox-vue2x';
/**
* 数据源,用户存储数据
*/
const store = new Vuex.Store({
state: {
value: 'my data'
},
mutations: {
SET_DATA(state, value) {
state.value = value;
}
}
})
/**
* 组件 webview 渲染层
*/
@Component
class Page extends Webview {
@life mounted() {
console.log(this.$store.state);
}
render(h) {
return h('h1', 'Hello World!');
}
}
/**
* miox service 核心服务启动
*/
export default miox(app => {
app.set('engine', Engine);
app.set('vuex', store);
app.on('server:start', () => {
console.log('server:start', new Date().toLocaleString());
});
app.on('server:end', () => {
console.log('server:end', new Date().toLocaleString());
});
app.use(async (ctx, next) => {
if (ctx.context) {
// ssr fetch data
const data = await ctx.context.fetchData();
store.commit('SET_DATA', data);
}
await ctx.render(Page);
await next();
});
app.use(async ctx => {
if (ctx.context) {
ctx.context.db.close();
console.log('db closed')
}
})
});
History
启动一个history监听服务,来通知服务进行页面生命周期的切换。该模块核心自动内嵌入服务中,同时也提供了一个触发history改变的方法redirect
。
param <String|Number> url
ctx.history.redirect(-1);
ctx.history.redirect(1);
ctx.history.redirect('/a/b/c/d?a=1&b=2');
- 当参数为数字类型,执行history的
forward
或者back
行为。 - 当参数为字符串类型,必须是一个 非绝对地址 的跳转链接。
Request
服务的 STDIN
输入口,用于接收环境参数。相见参数编译 NPM:url:api
console.log(ctx.req);
Response
服务的 STDOUT
输出口,用于输出处理行为数据。
console.log(ctx.res);
ctx.res.render
在指定渲染引擎后,该方法将根据引擎提供的规则渲染页面。参数如下:
webview
渲染页面的webview对象,根据引擎的不同,对象类型也不同,具体参看引擎说明。args
传入的模板数据。
ctx.res.forward
在具体逻辑中使用这个方法将自动跳转到具体页面,参数见 history:redirect
Middleware
一套简易中间件创建模式
import Miox from 'miox-simple';
const middle = new Miox.middleware();
middle.use(fn1, fn2, fn3, ...);
middle.__defineProcessHandle__();
await middle.__processer__(context);
Server Side Render (SSR)
miox也支持服务端渲染。优势在于我们不用改动任意代码,但是需要在书写代码时候注意一些引擎提供的注意点,这里不多做解释,具体什么引擎就有什么规范。
- miox-koa-vue2x-server-render
- miox-express-vue2x-server-render
- miox-koa-react-server-render
- miox-express-react-server-render
Server Render Data Mock
对服务端渲染数据进行mock。我们以vuejs的vuex为例。
// vuex.js
export default new Vuex.Store({
state: {
data: 'demo'
},
mutations: {
set(state, val) {
state.data = val;
}
},
actions: {
async SET_DATA({ commit }, { fetch, id, key, value }){
commit('set', await fetch({
async client({ ctx }) {
return await ctx.ajax.get('http://api.demo.com', { id, key, value });
},
async server({ service }) {
return await service.getUserInfo(id, key, value);
}
}));
}
}
});
// route.js
import store from './vuex';
route.patch('/demo/:id(\\d+)', async ctx => {
const id = Number(ctx.params.id);
await store.dispatch('SET_DATA', ctx.mock({
id,
key: 'demoKey',
value: 'demoValue'
}));
await ctx.render(demoWebview);
})
Documents
除了上述不同之外,其他方法请参阅 Miox文档教程