morghulis

typescript + vue3 + data management

Requirement

require a developed Valar project (a python django project, see https://pypi.org/project/valar/) to provide data service

connect with Valar in develop environment

• add a proxy in the vite.config.ts
• highly recommend using '/api' as the proxy name

export default defineConfig({
    server: {
        host: '0.0.0.0',
        open: false,
        proxy: {
            '/api': {
                target: `<Valar server url>`,
                changeOrigin: true,
                ws: true,
                rewrite: path => path.replace(/^\/api/, '')
            },
        },
    },
})

Installation

npm install morghulis element-plus

• main.ts

import {createApp} from 'vue'
// install element-plus first
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
// install morghulis
import 'morghulis/style'
import createMorghulis, {MApp} from "morghulis";
import App from "@/App.vue";
import Content1 from "@/contents/Content1.vue";
import Content2 from "@/contents/Content2.vue";
import Content3 from "@/contents/Content3.vue";


const app = createApp(MApp)
app.use(ElementPlus)
app.use(createMorghulis({
    title: 'Valar Morghulis', //系统名称
    // accountLabel: '用户名', // 如果使用邮箱作为用户名，这项请置空
    signInOnly: false, // 是否禁止注册
    routes: [  // 路由
        {
            path: '/',
            name: '欢迎',
            component: App
        },
        {
            path: '/content1',
            name: 'Content1',
            component: Content1
        },
        {
            path: '/content2',
            name: 'Content2',
            component: Content2
        },
        {
            path: '/content3',
            name: 'Content3',
            component: Content3
        },
    ]
}))
app.mount('#app')

getting start

Data Table

• when db equals orm, Valar will provide using SQL database (such as SQLLite, MySQL, Postgresql)
• when db equals mon, Valar will provide using Mongodb
• entity is the path to the relative data model of Valar server
• code is the data view name, Valar will automatically create a data view for you. You can edit the data view in the table

<d-table
    db="orm"
    entity="valar.Valar"
    code="special"
></d-table>

Data Tree

• try to edit the data in Tree, see what will happen in the Table

<el-row>
    <el-col :span="12">
        <d-tree
            db="orm"
            entity="valar.Vmm"
            broadcast
        ></d-tree>
    </el-col>
    <el-col :span="12">
        <d-table
            db="orm"
            entity="valar.Vmm"
            code="tree"
            broadcast
        ></d-table>
    </el-col>
</el-row>

Meta Editor

• a panel to edit the meta data of Valar server

<meta-editor></meta-editor>

Admin Account:

• you can register an admin account for morghulis, using 'admin' as the username, and the SECRET_KEY from your valar settings as the password.
• using the admin account to manager your VM framework