Ответы пользователя по тегу JavaScript
  • Почему не получается передать данные в компонент Vue?

    @marsdenden
    Я в таких случаях делаю просто - переменная, куда получаем данные для компонента по умолчанию null и компонент оборачиваю в div c v-if="abc!==null". Все. Как только загрузились данные с сервера - так и отрендерился компонент
    Ответ написан
    Комментировать
  • Как сделать так, чтобы шапка сайта не перезагружалась при переходе на другие страницы?

    @marsdenden
    Vue.JS + Vue.Router - легко и просто.
    Ответ написан
    Комментировать
  • С чего начать разрабатывать приложение на NativeScript и Vue.js?

    @marsdenden
    Начать надо с vue.js как такового. Свойства, вычисляемые свойства, компоненты, vuex, написание плагинов и т. д.
    Потом уже вкуривать в nativescript. Причем не получится взять код vue для webapp и просто сбацать нативное приложение, поскольку nativescript-vue совсем не то же самое, что vue.js. Это просто братья, но не близнецы. Хотя бы потому что в nativescript шаблоны vue строятся совсем по иному принципу - это, скорее, оболочка на Android SDK, главный плюс которой - некое приведение к общему стандарту для Android и iOS. Но по граблям потанцевать придется, поскольку нет полной документации и нет исчерпывающих туториалов, приходится рыться на гитхабе.
    Но Playground - просто отличная вещь для попробовать
    Ответ написан
    1 комментарий
  • Javascript-фреймворки/движки для создания сайта, работающего в браузере клиента?

    @marsdenden
    Я пользуюсь vue.js
    Ответ написан
    Комментировать
  • Вопрос по поводу ajax добавления новых записей на страницу при скроллинге и клике?

    @marsdenden
    Такой подход сильно усложняет код, посмотрите в сторону фреймворков - Vue.js, React. Ну или шаблонизатор lodash на худой конец.
    Ответ написан
    Комментировать
  • VueJS + PHP. Как это всё подружить?

    @marsdenden
    vue-router сам по себе, роутер на php - сам по себе, никак между собой не связаны. Если от бэкенда нужны только данные и никакого дополнительного функционала, я бы попробовал сделать сервер на ноде, благо модули готовые есть, по крайней мере писать на одном языке проще и эффективнее, чем на двух (имхо). А так все просто - фронт использует axios, в который передается url, параметры и callback для обработки ответа. Бэк обрабатывает вызов и отправляет JSON с данными и на этом его миссия закончилась, фронт в колбэке получает json и делает свое дело.
    Например, как я это сделал (метод - всегда POST)

    в App.vue в methods
    callApi(url,prms,callback){
      this.setServerError('',''); // это функция, которая в data выставляет определенные поля
      //в результате чего ошибки выводятся прямо на странице, удобно для отладки
      axios({
        method:"post",
        url:url,
        data:prms
      }).then((response) => {
        // в response.data получаем JSON, 
        // в моем случае сервер формирует обязательные поля success,error,buffer
        // в buffer  перед выдачей JSON снимается html-вывод, возможно это отладочная информация,
        // которую выдает backend, возможно PHP-warnings
        let dt=response.data;
        if(!dt.success){
           	this.setServerError(dt.error,dt.buffer);
        }else{
            // ну и, собственно, сам вызов колбека, который происходит только в случае успешного приема данных
            callback(dt);
        }
      }).catch((error) => {
        // эту часть вызывает сам axios при возникновении серверных ошибок, то есть все, что не 200 OK 
        // позволяет увидеть, в частности, ошибку 500, вернее сам факт ее возникновения, если она обрабатывается
        // "стандартным" методом апача - пустая страница и все
        this.setServerError(error.message,error.stack);
      });
    },



    далее в created создается подписка, можно использовать Bus.js, у меня по другому

    this.$root.$on('callApi',(url,prms,callback)=>{this.callApi(url,prms,callback)});


    ну и в компоненте или где еще в проекте делается вызов

    this.$root.$emit('callApi', '/api/goods', {action: 'getgoodsinfo', article: '12345678'}, (dt) => {
             this.articleinfo=dt.data.articleinfo;
          })


    на бэкэнде, соответственно, есть api.php, в котором происходит разбор url, чтение параметров и формирование результата

    заготовка api.php
    <?php
    // регистрируем функцию завершения, чтобы обрабатывать грубые ошибки, 
    //например вызов несуществующего метода у объекта
    register_shutdown_function(function () {
        $error = error_get_last();
        if ($error && ($error['type'] == E_ERROR || $error['type'] == E_PARSE || $error['type'] == E_COMPILE_ERROR)) {
            $res=array(
                'buffer'=>ob_get_contents(),
                'success'=>false,
                'error'=>"PHP Fatal: ".$error['message']." in ".preg_replace('/(.*)\/(.*)/', "$2", $error['file']).":".$error['line']
            );
            ob_clean();
            header('HTTP/1.1 200 Ok');
            header("Access-Control-Allow-Origin: *");
            echo json_encode($res);
            // ... завершаемая корректно ....
        }
    });
    
    // для кроссдоменного CORS, при необходимости - закомментировать или заменить звездочку на требуемое
    if($_SERVER['REQUEST_METHOD']=='OPTIONS' ){
        ob_clean();
        header("Access-Control-Allow-Origin: *");
        header("Content-type: application/json; charset=utf-8");
        header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
        header("Access-Control-Request-Method: POST");
        return true;
    }
    
    // /*
    // протокол обмена
    // - вход - команда по сегменту, например http://site.ru/api/goods - api - попали сюда, goods - команда REST
    // в php://input должен быть json, в котором обязателен параметр action, например getgoodsinfo
    // в результате формируется имя функции класса goods_getgoodsinfo, которая вызывается 
    // с параметром входящего json
    
    // функция класса должна вернуть массив с тремя полями - data & success & error
    // в поле data возвращается непосредственно результат функции, в нашем случае - реестр чеков
    // в поле success возвращается true | false - признак успешного выполнения
    // в поле error возвращается описание ошибки в случае неудачного выполнения функции
    // */
    
    $api=new ApiCls();
    
    // функция, проверяющая залогиненность юзера
    if(is_user_login()){ 
        $api->checkcommand();
    }else{
        $res=array('succes'=>false,'error'=>'Пользователь не авторизован','data'=>'');
        ob_clean();
        header("Content-type: application/json; charset=utf-8");
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
        echo json_encode($res);
    }
    
    return true;
    
    class ApiCls{
        function checkcommand(){ // точка входа для класса api, здесь первичный разбор, 
            //вызов метода и возврат результата
            // главное - определить второй сегмент в url, то есть в случае http://site.ru/api/goods
            $segment=????????; // в $segment должен оказаться 'goods'
    
            $res=array('success'=>false,'error'=>'Empty action'); // сразу проверка на наличие action в параметрах
            if(!$segment){
                $res['error']='Empty command';
            }else{
                if($_SERVER['REQUEST_METHOD']=='PUT' || $_SERVER['REQUEST_METHOD']=='POST'){
                    $reqdata = file_get_contents('php://input'); 
                    $b=json_decode($reqdata);
                    $b=get_object_vars($b);
                    if(isset($b['action'])){
                        $res['error']='no error';
                        $nm=$segment.'_'.$b['action'];
                        $r=$this->$nm($b); // вызов метода по action из пост и дальнейшая обработка результатов
                        // чё-то тут намутил, но работает - и ладно
                        if(!isset($r['success'])){
                            $res['success']=false;
                            $res['error']='No success flag in method '.$nm;
                        }else{
                            if(!isset($r['data'])){
                                $res['success']=false;
                                $res['error']='No result data in method '.$nm;
                            }else{
                                $res['success']=$r['success'];
                                $res['data']=$r['data'];
                                if(!$r['success']){
                                    if(isset($r['error'])){
                                        $res['error']=$r['error'];
                                    }else{
                                        $res['error']='Success is false, but no error message in method '.$nm;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            // непосредственная выдача данных
            $this->_printresponse($res);
        }
        function _printresponse($res){
            // проверяем наличие html-вывода (отладка или warnings)
            $res['buffer']=ob_get_contents();
            if($res['buffer']!=''){
                $res['success']=false;
                isset($res['error'])?$res['error']=implode(',',array('module error',$res['error'])):$res['error']='module error';
            }
            // очищаем буфер вывода и формируем свои заголовки
            ob_clean();
            header("Content-type: application/json; charset=utf-8");
            header("Access-Control-Allow-Origin: *");
            header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
            // ну и, наконец, выдаем результирующий JSON
            echo json_encode($res);
        }
        function __call($name,$post){
            // эта функция вызывается при попытке вызвать несуществующий метод класса, то есть при вызове '/api/blablabla' получим отлуп
            $info=array('method'=>$name,'post'=>$post,'error'=>'Method not found','success'=>false);
            return $info;
        }
        /*********************************************************/
        // начинаем блок методов api
        function goods_getgoodsinfo($prm){
            // формируем заготовку ответа
            $res=array('data'=>array(),'success'=>true,'error'=>'');
            // при необходимости здесь можно вставить проверку наличия полномочий у пользователя
            // и если что не так, то выключить success, прописать "облом!" в error и не возвращать данные
            $res['data']['articleinfo']= getArticleInfo($prm['article']); // вызов функции, 
            //которая собирает требуемые данные для определенного артикула и возвращает, опять же
            // в формате JSON
            return $res;
        }
    }
    ?>



    Вот как-то так... Дальше только вопрос - как прикрутить этот api.php к сайту и вопросы безопасности, но это уже другая тема
    Ответ написан
    1 комментарий
  • Тупой вопрос: Как остановить скрипт в отладчике браузера?

    @marsdenden
    тупой ответ - поискать кнопку паузы. Не допускать ухода в бесконечный цикл. Иначе ваш аппарат никогда не приземлится на Марсе
    Ответ написан
    3 комментария
  • Как отследить изменение текста поля ввода?

    @marsdenden
    Я понимаю, что уже много времени прошло, но на будущее

    $(document).on("input",function(ev){
      console.log($(ev.target).val());
    });


    ловит все изменения, включая копипаст
    Ответ написан
    Комментировать
  • Почему говорят что jquery не нужен?

    @marsdenden
    ну кто-то считает, что и российские машины не нужны, однако нашу Ниву теперь китайцы покупают, да еще и в два раза дороже, чем мы.
    Все зависит от потребностей.
    И один нюанс - лучше грузить не со сторонних ресурсов, а со своего сервера - буквально вчера наткнулся на сайт, который выдал что-то вроде "$ not reference" - то есть тупо не смог подгрузить и все! конечному юзеру облом ))
    Ответ написан