SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы

Примеры кода для приложений mithril.js

--- app1.js
--- app2.js
--- app3.js

app1.js
app2.js
app3.js

app1.js Скачать

<!DOCTYPE html>
<html lang="ru">
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body

m.mount(root, {
    view: function() {
        return m("h1", "Try me out")
    }
})
</script>
</body>
</html>

app2.js Скачать

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="Ремизов Александр" />
    <meta name="generator" content="RemiZOffAlex" />
    <meta name="copyright" lang="ru" content="RemiZOffAlex" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/mithril@2.2.2/mithril.min.js"></script>
</head>
<body>

<section id="app" class="container-fluid"></section>

<script>
let root = document.getElementById("app");

m.mount(root, {
    view: function() {
        return m("h1", "Try me out")
    }
});
</script>
</body>
</html>

app3.js Скачать

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/mithril@2.2.2/mithril.min.js"></script>
</head>
<body>

<section id="app" class="container-fluid"></section>

<script>
let root = document.getElementById("app");

let Home = {
    view: function(vnode) {
        return [
            m('h1', 'Hello world!'),
            m(m.route.Link, {href: '/login'}, 'Войти')
        ];
    }
};

function Login() {
    let data = {
        username: '',
        password: ''
    };
    function login() {
        m.request({
            url: '/api',
            method: "POST",
            body: {
                "jsonrpc": "2.0",
                "method": 'auth.login',
                "params": {
                    "username": data.username,
                    "password": data.password
                },
                "id": 1
            }
        }).then(
            function(response) {
                if ('result' in response) {
                    m.route.set('/');
                }
            }
        )
    };
    function form_submit(e) {
        e.preventDefault();
        login();
    };
    return {
        view: function(vnode) {
            return m('form', {onsubmit: form_submit}, [
                m('div', {class: "input-group mb-3"}, [
                    {tag: '<', children: '<span class="input-group-text"><i class="fa fa-user"></i></span>'},
                    m('input', {class: 'form-control', placeholder: 'Логин', type: 'text', oninput: function (e) {data.username = e.target.value}, value: data.username}),
                ]),
                m('div', {class: "input-group mb-3"}, [
                    {tag: '<', children: '<span class="input-group-text"><i class="fa fa-lock"></i></span>'},
                    m('input', {class: 'form-control', placeholder: 'Пароль', type: 'password', oninput: function (e) {data.password = e.target.value}, value: data.password}),
                ]),
                m('div', {class: "row"},
                    m('div', {class: "col py-2"},
                        m('button', {class: 'btn btn-outline-success float-end', type: 'submit'}, 'Войти') 
                    ),
                ),
            ]);
        }
    }
}

m.route.prefix = '';
m.route(
    root,
    "/", {
        "/": Home,
        "/login": Login,
    }
);
</script>
</body>
</html>