xgqfrms commented 5 years ago

vue 2.x api & basic demos

https://vuejs.org/v2/api/index.html#v-on

http://www.runoob.com/vue2/vue-start.html

https://cli.vuejs.org/config/#baseurl

https://www.npmjs.com/package/better-scroll

xgqfrms commented 5 years ago

h5dnd sortable mutil groups

https://codepen.io/webgeeker/pen/JmPXaN

https://codepen.io/webgeeker/pen/mjoWqw

https://codepen.io/webgeeker/pen/wxpBME

xgqfrms commented 5 years ago

browser-sync & port

https://browsersync.io/docs/command-line#start

https://github.com/Browsersync/browser-sync

# Start Browsersync from a config file with overriding flags
$ browser-sync start --config 'conf/browser-sync.js' --port 4000


    "scripts": {
        "dev": "start http://localhost:8888/pages/index.html && npm start",
        "html": "browser-sync start --server --files './build/*.*' --port 8888",
        "app": "npm run build && start http://localhost:8888/pages/index.html && npm run html",
        "json-open": "start http://localhost:3000",
        "json-db": "json-server --watch api/db.json"
    },

http://localhost:3000/build/pages/index.html http://localhost:8888/build/pages/index.html

xgqfrms commented 5 years ago

linux & zip

https://zzk.cnblogs.com/s?w=blog%3Axgqfrms%20zip

# all files in folder

$ zip -r auth-mamage.zip auth-mamage/*

xgqfrms commented 5 years ago

web ide

https://ace.c9.io/

https://github.com/ajaxorg/ace

xgqfrms commented 5 years ago

web-code-editors

https://superdevresources.com/online-code-editors/

https://ewebdesign.com/web-code-editors/

https://medium.com/level-up-web/best-free-code-editors-for-web-developers-2837ccfd1d

https://www.hongkiat.com/blog/free-code-editors-reviewed/

xgqfrms commented 5 years ago

js & disable form submit

Q: how to disable form submit action refresh page?

https://teamtreehouse.com/community/how-to-disable-submit-form

https://www.w3schools.com/html/html_forms.asp

solution

A: e.preventDefault(); & return false;


const showPasswordModal = (title = `修改密码`) => {
    console.log(`password has been modified!`);
    let formDOM = formGenerator(`password`);
    layer.open({
        title: `<h3>${title}</h3>`,
        content: `<div class="form-box">${formDOM}</div>`,
        area: ["50%", "70%"],
        type: 1,
        btn: ["关闭"],
        yes: function(index, layero){
            let submitBtn = document.querySelector(`button[type="submit"]`),
                restButton = document.querySelector(`button[type="reset"]`);
            submitBtn.addEventListener(`click`, function(e) {
                // e.target
                e.preventDefault();
            });
            layui.use('form', function() {
                let form = layui.form;
                form.on('submit(formDemo)', function(data){
                    console.log(`json =`, JSON.stringify(data.field));
                    // http://10.1.5.202/deploy/http/sign/changepassword?{"old_password":"hongk","new_password":"123456"}
                    return false;
                });
            });
            setTimeout(() => {
                // success
                layer.close(index);
            }, 1000);
        },
        btn2: function(index, layero){
            layer.close(index);
        },
    });
};

xgqfrms commented 5 years ago


<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

<script>
  let submitBtn = document.querySelector(`input[type="submit"]`);
  submitBtn.addEventListener(`click`, function(e) {
      // e.target
      e.preventDefault();
  });

</script>

</body>
</html>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit

xgqfrms commented 5 years ago

https://stackoverflow.com/questions/13798313/set-custom-html5-required-field-validation-message/41239756#41239756

xgqfrms commented 5 years ago


    const getNowTimeStamps = (filename = `速览`, extension = `pdf`, debug = false) => {
        let result = ``,
            date = new Date(),
            name = filename,// "stock 速览" => "stock_速览" ??? Regex
            yyyy = ``,
            MM = ``,
            dd = ``,
            hh = ``,
            mm = ``,
            ss = ``;
        yyyy = date.getFullYear();
        MM = date.getMonth() + 1;// 1 => 01 (zero padding)???
        dd = date.getDate();
        hh = date.getHours();
        mm = date.getMinutes();// 1 => 01 (zero padding)???
        ss = date.getSeconds();
        result = `${name}_${yyyy}${MM}${dd}${hh}${mm}${ss}.${extension}`;
        return result;
    };

xgqfrms commented 5 years ago

download progress & js

how to get download progress in js?

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

https://stackoverflow.com/questions/18126406/how-can-i-get-the-progress-of-a-downloading-script https://stackoverflow.com/questions/16690740/how-to-show-loading-status-in-percentage-for-ajax-response https://stackoverflow.com/questions/18323152/get-download-progress-in-node-js-with-request

https://www.w3schools.com/howto/howto_js_progressbar.asp https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3

https://ourcodeworld.com/articles/read/56/how-to-get-the-progress-of-an-upload-or-download-with-jquery-ajax https://zinoui.com/blog/ajax-request-progress-bar https://coderwall.com/p/je3uww/get-progress-of-an-ajax-request

xgqfrms commented 5 years ago

wangEditor

基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费

http://www.wangeditor.com/index.html

API

https://www.kancloud.cn/wangfupeng/wangeditor3/404586

xgqfrms commented 5 years ago

夏洛克

https://kb.cnblogs.com/page/603697/

https://kb.cnblogs.com/page/573614/

xgqfrms commented 5 years ago

PM2

https://pm2.io/doc/en/runtime/guide/installation/

https://github.com/Unitech/PM2/

https://blog.linuxeye.cn/435.html

$ npm install pm2 -g

https://raw.githubusercontent.com/Unitech/pm2/master/packager/setup.deb.sh

xgqfrms commented 5 years ago

https://oneinstack.com/auto/ https://blog.linuxeye.cn/about https://blog.linuxeye.cn/435.html

xgqfrms commented 5 years ago

https://github.com/cd-dongzi

xgqfrms commented 5 years ago

`webpack.DllPlugin` ?

https://webpack.js.org/plugins/dll-plugin/

https://github.com/cd-dongzi/vue-project/issues/7

https://github.com/cd-dongzi/vue-project

https://github.com/cd-dongzi/vue-node-blog

xgqfrms commented 5 years ago

mongodb

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/

https://stackoverflow.com/questions/2404742/how-to-install-mongodb-on-windows

https://www.tutorialspoint.com/mongodb/ https://www.tutorialspoint.com/mongodb/mongodb_tutorial.pdf

https://docs.mongodb.com/manual/mongo/

xgqfrms commented 5 years ago

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/#use-command-interpreter-not-powershell

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/#follow-the-mdb-edition-installation-wizard

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/#start-mdb-edition-from-the-command-interpreter

xgqfrms commented 5 years ago

https://docs.mongodb.com/manual/mongo/

$ mongo --help

# default port 27017
$ mongo

# port
$ mongo --port 28015

$ help

$ show databases

$ use local

$ show tabels

xgqfrms commented 5 years ago

http://www.runoob.com/mongodb/mongodb-connections.html

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/#start-mdb-edition-from-the-command-interpreter

http://www.runoob.com/mongodb/mongodb-databases-documents-collections.html http://www.runoob.com/mongodb/mongodb-connections.html

xgqfrms commented 5 years ago

windows 10 & how to check user info


$ whoami

# net user "user name"
$ net user "xgqfrms"

$ wmic useraccount list full
$ wmic useraccount list full >"%userprofile%\Desktop\UserAccountDetails.txt"

https://www.windows-commandline.com/current-logged-in-user-name-command/

https://www.tenforums.com/tutorials/3443-view-user-account-details-windows-10-a.html

OK


$ net user administrator

https://www.lifewire.com/net-user-command-2618097

xgqfrms commented 5 years ago

https://dba.stackexchange.com/questions/62976/how-can-i-enter-mongo-as-a-superuser-or-reset-users

https://docs.mongodb.com/manual/reference/built-in-roles/#superuser-roles

https://docs.mongodb.com/manual/tutorial/manage-users-and-roles/#connect-to-mongodb-with-the-appropriate-privileges

https://stackoverflow.com/questions/4881208/how-to-secure-mongodb-with-username-and-password

xgqfrms commented 5 years ago

CURD

https://docs.mongodb.com/manual/crud/

xgqfrms commented 5 years ago

https://www.npmjs.com/package/jsonwebtoken

xgqfrms commented 5 years ago

md5

xgqfrms commented 5 years ago

breadcrumbs & link

https://en.wikipedia.org/wiki/Breadcrumb_(navigation)

https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/

xgqfrms commented 5 years ago

shit layui

https://www.layui.com/doc/modules/form.html#onselect

https://www.layui.com/doc/element/form.html#select

select & re-render bug

form.render("select");


let jsonObj = {};

const editProject = () => {
    let reset = document.querySelector(`button[type="reset"]`);
    layui.use("form", function() {
        let form = layui.form,
            layer = layui.layer;
        // init select
        form.render("select");
        form.on('submit(formDemo)', function(data) {
            let {
                user_name,
                role,
                password,
                email,
            } = data.field;
            let query_obj = {
                user_name,
                role,
                password
            };
            // filter
            if (email) {
                query_obj.email = email;
            }
            let url = `${fetchIP}/http/sign/updateuser?${encodeURIComponent(JSON.stringify(query_obj))}`;
            getDatas(url).then(json => {
                // loading
                let loadingIndex = layer.load(1, {
                    time: 1*1000,
                });
                let resetButton = document.querySelector(`button[type="reset"]`);
                setTimeout(() => {
                    layer.close(loadingIndex);
                    if (json.success) {
                        layer.close(modalIndex);
                        swal({
                            title: "修改服务成功!",
                            text: `${json.message !== null ? json.message : "3 秒后自动关闭!"}`,
                            icon: "success",
                            // button: "关闭",
                            buttons: false,
                            timer: 3000,
                        });
                        resetButton.click();
                        loadList();
                    } else {
                        swal({
                            title: "修改服务失败!",
                            text: `${json.message !== null ? json.message : "3 秒后自动关闭!"}`,
                            icon: "error",
                            // button: "关闭",
                            buttons: false,
                            timer: 3000,
                        });
                    }
                }, 1000);
                // reset
                reset.click();
            }).catch(err  => console.log(`error`, err));
            return false;
        });
        let {
            user_name,
            role,
            // password,
            email,
            // role_desc,
        } = jsonObj;
        let input_name = document.querySelector(`input[name="user_name"]`),
            input_role = document.querySelector(`select[name="role"]`),
            input_email = document.querySelector(`input[name="email"]`);
        input_name.value = `${user_name}`;
        input_name.setAttribute(`disabled`, `disabled`);
        // input_name.setAttribute(`readonly`, `readonly`);
        input_email.value = `${email}`;
        input_role.value = `${role}`;
        // update select
        form.render("select");
    });
};

xgqfrms commented 5 years ago

autocomplate & value

xgqfrms commented 5 years ago

reset & default value.png


    <div class="layui-form-item">
        <label class="layui-form-label" title="服务器 IP">服务器 IP</label>
        <div class="layui-input-block">
            <input type="text" name="server_ip" required lay-verify="required" placeholder="请输入服务器 IP" autocomplete="on" class="layui-input" value="${ip}">
        </div>
    </div>

xgqfrms commented 5 years ago

select & re-render

async & delay bug

    form.render("select");
    // select default value
    reset.addEventListener(`click`, () => {
        // re-render
        setTimeout(() => {
            // async & delay bug
            input_role.value = `${role}`;
            form.render("select");
        }, 100);
    });

xgqfrms commented 5 years ago

multiple select

React

https://ant.design/components/select/#components-select-demo-multiple

xgqfrms commented 5 years ago

window & iframe

https://stackoverflow.com/questions/16018598/how-to-get-a-reference-to-an-iframes-window-object-inside-iframes-onload-handl

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow

xgqfrms commented 5 years ago

https://stackoverflow.com/questions/7027799/access-elements-of-parent-window-from-iframe

xgqfrms-GitHub / vue2.x