README

包含Laravel框架所需的迷你包。执行CRUD操作、将用户输入的页面保存到文件、保存数据库操作，以及将language中的php数组文件转换为vue-i18n所需的js文件的操作。

安装过程

在控制台运行以下代码后，我们的包将被安装。

composer require dirim/laravel-beginning-packages

所需包

Predis

为了使用标签进行缓存，必须安装Predis。

composer require predis/predis

Image Intervention

为了执行图片缩放操作，您需要安装此包。您可以运行以下代码，或者从以下地址执行安装操作。

composer require intervention/image

//Laravel 5 için
php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

由于图片文件将被保存到storage文件夹中，因此您需要创建public文件夹和storage文件夹之间的链接。否则，系统无法读取这些文件。为此，请运行以下代码。

php artisan storage:link

MongoDB

数据库操作在mongodb中记录，因此请安装以下组件。如果您的项目中已安装mongodb，请跳过此部分。

composer require jenssegers/mongodb

请将以下代码添加到config/app.php文件中的'aliases'部分。

'Moloquent' => Jenssegers\Mongodb\Eloquent\Model::class,

MongoDB 设置

在config/database.php文件中输入以下驱动设置。

'mongodb' => [
    'driver'   => 'mongodb',
    'host'     => env('MONGO_DB_HOST', 'mongo'), // Buraya bağlancağınız host' u yazın.
    'port'     => env('MONGO_DB_PORT', 27017), // Hangi portdan bağlanacağınızı girin.
    'database' => env('MONGO_DB_DATABASE', 'lvcomposertest'), // Collection ismini girin.
    /*'username' => env('MonogoDB_USERNAME'), // Varsa kullanıcı ismi
    'password' => env('MonogoDB_PASSWORD'), // Varsa password
    'options'  => [
        'database' => 'admin' // Buraya database'de yapmasına izin vereceğiniz işlemler için yetki grubunu girin.
    ]*/
],

.env文件

MONGO_DB_CONNECTION=mongodb
MONGO_DB_HOST=mongo
MONGO_DB_PORT=27017
MONGO_DB_DATABASE=lvpacktest
MONGO_DB_USERNAME=root
MONGO_DB_PASSWORD=root

CRUD操作所需的NPM包

对于JavaScript操作，您需要安装以下包。

如果您愿意，可以将以下列表添加到package.json文件中的dependencies部分。

...
"dependencies": {
    ...
    "cropperjs": "^1.4.1",
    "datatables.net-bs4": "^1.10.19",
    "datatables.net-responsive-bs4": "^2.2.3",
    "jquery-ui": "^1.12.1",
    "moment": "^2.22.1",
    "v-tooltip": "^2.0.0-rc.33",
    "vue-i18n": "^8.0.0",
    "vuex": "^3.0.1",
    "vue-notification": "^1.3.16",
    "vue-text-mask": "^6.1.2"
}
...

或者，在控制台中运行以下代码。

npm i --save cropperjs
npm i --save datatables.net-bs4
npm i --save datatables.net-responsive-bs4
npm i --save jquery-ui
npm i --save moment
npm i --save v-tooltip
npm i --save vue-i18n
npm i --save vuex
npm i --save vue-notification

然后，将以下行添加到resources/js/bootstrap.js文件中。

...
try {
    ...
    
    require('jquery-ui/ui/widgets/datepicker.js');
    require('jquery-ui/ui/i18n/datepicker-tr.js');

    require('bootstrap');
    
    /*Datatables*/
    require( 'datatables.net-responsive-bs4' )();
} catch (e) {}

/*Moment*/
window.moment = require('moment');

/*CropperJS*/
window.Cropper = require('cropperjs/dist/cropper.js');

/*Main JS*/
require('./jquery/main.js');
require('./jquery/main-ajax.js');

/* CKEditor 4 */
window.CKEDITOR_BASEPATH = '/ckeditor/ckeditor/';
require('./plugins/ckeditor4/ckeditor.js');
...

所需脚本代码

如果您在控制台中运行以下代码，则该包将自动为您执行以下操作。（在执行此操作时，请注意不要有同名文件，因为这些文件将被覆盖。您的文件将被删除。）

php artisan vendor:publish --force --tag=scriptSnippets

您将安装的文件

• resources/js/jquery/main.js
• resources/js/jquery/main-ajax.js
• resource/js/app.js
• resource/js/store/mainStore.js
• resource/js/store/index.js
• resource/js/globalMixin.js

但是，如果您想自己操作，您可以编辑以下文件。您可以选择将以下main.js和main-ajax.js文件中的脚本代码添加到主页面的脚本文件中。

resources/js/jquery/main.js

// Document ready start
$(function () {
	$('[data-toggle="tooltip"]').tooltip({
		trigger: "hover",
	});
})
// Document ready end

或者

php artisan vendor:publish --force --tag=mainjs

resources/js/jquery/main-ajax.js

var ajaxRun = true;

$.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
  },
  beforeSend: (xhr, opts) => {

  	if (ajaxRun)
  		ajaxRun = false;
  	else
  		xhr.abort();
  },
  complete: () => {
  	ajaxRun = true;
  }
});

或者

php artisan vendor:publish --force --tag=mainajaxjs

resource/js/app.js

require('./bootstrap');

import Vue from 'vue';

/*VueI18n*/
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: document.documentElement.lang, // set locale
  messages: require('../../lang/translate.js'), // set locale messages
});

/*Vuex*/
import Vuex from 'vuex';
Vue.use(Vuex);

import storeObj from './store';
const store = new Vuex.Store(storeObj(i18n));

/*Global Components Start*/
import succeedNotifyMsgComponent from './components/SucceedNotifyMsgComponent';
import errorNotifyMsgListComponent
from './components/ErrorNotifyMsgListComponent';

import succeedMsgComponent from './components/SucceedMsgComponent';
import errorMsgListComponent from './components/ErrorMsgListComponent';
import errorMsgComponent from './components/ErrorMsgComponent';
import formComponent from './components/form/FormComponent';

Vue.component('succeed-notify-msg-component', succeedNotifyMsgComponent);
Vue.component('error-notify-msg-list-component', errorNotifyMsgListComponent);
Vue.component('succeed-msg-component', succeedMsgComponent);
Vue.component('error-msg-list-component', errorMsgListComponent);
Vue.component('error-msg-component', errorMsgComponent);
Vue.component('form-form-component', formComponent);
/*Global Components End*/

/*Components*/
import components from './components';

/*Global Mixin*/
import globalMixin from './globalMixin';
Vue.mixin(globalMixin);

/*VTooltip*/
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)

/* Vue Notification */
import Notifications from 'vue-notification'
Vue.use(Notifications)

/*SharedState*/
const sharedState = {
	currentLocallang: document.documentElement.lang,
}

const app = new Vue({
	el: "#app",
	store,
	sharedState,
	components,
	i18n,
})

或者

php artisan vendor:publish --force --tag=appjs

resource/js/store/mainStore.js

export const state = i18n => ({
	routes: {},
	langs: [],
	errors: {},
	succeed: '',
	old: {},
	authUser: {},
	token: document.head.querySelector('meta[name="csrf-token"]').content,
	lang: document.documentElement.lang,
	formModalBody: {},
	imgFilters: {},
});

export const getters = i18n => ({
	filtLangErrorMsg: (state) => {
		let errors = state.errors;
		let matchReg = new RegExp(/langs\.(.+)\.(.+)/, 'g');
    let replaceReg = new RegExp(/(.+)langs\.(.+)\.(\S+)(\s{1}.+)/, 'g');

    for(let errorKey in errors){
      let match = errorKey.match(matchReg);

      if (match) {
        errors[errorKey] = errors[errorKey].map((index, error) => {

          return errors[errorKey][error].replace(
            replaceReg, 
            (match, eq1, eq2, eq3, eq4, offset, string) => {
              return eq1 + '(' + eq2 + ') ' + 
                    i18n.t('messages.'+eq3) + eq4; 
            }
          );// end replace error value
        });// end errors map
      }// end if match
    }// end for in errors

    return errors;
	}
});

export const mutations = i18n => ({
	setRoutes(state, routes){
		state.routes = routes
	},
	setLangs(state, langs){
		state.langs = langs
	},
	setErrors(state, errors){
		state.errors = errors
	},
	setSucceed(state, succeed){
		state.succeed = succeed
	},
	setOld(state, old){
		state.old = old
	},
	setAuthUser(state, authUser){
		state.authUser = authUser
	},
	setFormModalBody(state, formModalBody){
		state.formModalBody = formModalBody;
	},
	setImgFilters(state, imgFilters){
		state.imgFilters = imgFilters;
	},
});

export const actions = i18n => ({
	addDataToAuthUser({commit, state}, addData){

		if (!_.isEmpty(state.authUser)) {

			let authUser = state.authUser;

			authUser[addData.key] = addData.val;
			
			commit('setAuthUser', authUser);
		}
	},
});

export const namespaced =  true;

或者

php artisan vendor:publish --force --tag=mainStorejs

resource/js/store/index.js

import {state, getters, mutations, actions} from './mainStore';

export default i18n => ({
	state: state(i18n),
	getters: getters(i18n),
	mutations: mutations(i18n),
	actions: actions(i18n),
	modules: {},
	// strict: true,
});

或者

php artisan vendor:publish --force --tag=mainStoreIndexjs

resource/js/globalMixin.js

export default {
  data () {
    return {
      currentLocallang: document.documentElement.lang,
    };
  },

  methods: {
    getQueryParameters: function(name){
      name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
      var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
      var results = regex.exec(location.search);
      return results === null ? 
      '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    },

    isActiveTab: function(tabName){
      return tabName === this.activeTab?'active show':'';
    },

    getImageFiltUrl: function(url, filt = 'raw'){
      
      if(url && url.indexOf('img/') < 0) 
        url = `/storage/upload/images/${filt}${url}`;
        
      return url;
    },

    convertTime(loginTime){
      if(!loginTime) return '';

      let nowTime = new Date().getTime();
      let onlineTime = nowTime - loginTime;

      if (onlineTime < 60000) {
        return 'NEW';

      } else if(onlineTime < 3600000 ) {

        return 'before '+Math.floor( (onlineTime/60000) )+' minute';

      }else if(onlineTime < 86400000){

        return 'before '+Math.floor( (onlineTime/3600000) )+' hour';
      }else
        return 'before '+Math.floor( (onlineTime/86400000) )+' day';

    },

    unixTimestamp(unix, format = 'short'){

      let date = new Date(unix*1000);
      let timestamp;

      switch(format){
        case 'time':
          timestamp = this.unixTime(date);
          break;
        case 'short': 
          timestamp = this.unixShortTime(date);
          break;
        case 'long': 
          timestamp = this.unixLongTime(date);
          break;
      }

      return timestamp;
    },

    unixTime(date){
      let hours = date.getHours();
      let minutes = "0" + date.getMinutes();
      let seconds = "0" + date.getSeconds();
      return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
    },

    unixShortTime(date){
      let day = "0" + date.getDate();
      let month = "0" + (date.getMonth() + 1);
      let year = date.getFullYear();
      return `${day.substr(-2)}/${month.substr(-2)}/${year}`;
    },

    unixLongTime(date){
      let time = this.unixTime(date);
      let shortTime = this.unixShortTime(date);
      return `${shortTime} ${time}`;
    },

    showModalBody(selector){
      let $this = this;
      let store = this.$store;
      $(selector).on('show.bs.modal', function (event){

        let button = $(event.relatedTarget)
          , datas = button.data('datas')
          , component = button.data('component');

        store.commit('setFormModalBody', {datas, component, show: true});
      });

      $(selector).on('hide.bs.modal', function (event){
        store.commit('setErrors', {});
        store.commit('setSucceed', '');
        store.commit('setFormModalBody', {show: false});
      });
    },

    setModalOption(selector, options){
      $(selector).modal(options);
    },

    dataTableRun(config = null){
      return $(config.jQDomName).DataTable({
        responsive: config.responsive || true,
        processing: config.processing || true,
        serverSide: config.serverSide || true,
        ajax: {
          url: config.url || '',
          type: config.method || 'POST',
        },
        columns: config.columns,
        "drawCallback": function( settings ) {
          $('[data-toggle="tooltip"]').tooltip({
            trigger: "hover",
          });
        }
      });
    },

    datepicker(config){
      
      let altField = `${config.id}Alt`;
      let dateFormatArgs = ['option', 'dateFormat', 'dd/mm/yy'];
      dateFormatArgs =  config.dateFormat || dateFormatArgs;

      let settings = {
        showOtherMonths: true,
        selectOtherMonths: false,
        changeMonth: true,
        changeYear: true,
        altField: altField,
        altFormat: "@",
        
      };

      if(config.settings)
        settings = Object.assign(settings, config.settings);
      
      $(config.id).datepicker(settings);
      
      $(config.id).datepicker(
        'option', 
        $.datepicker.regional[this.currentLocallang]
      );

      $(config.id).datepicker(...dateFormatArgs);

      if (config.value) {

        let date = this.unixTimestamp(config.value);

        $(config.id).datepicker( 
          "setDate", date
        );

        $(altField).val(config.value);
      }

    },

    uniqueID(prefix = ''){
      let unixTime = new Date().getTime();
      let uniqueID = unixTime.toString(36).substr(2, 16);
      return prefix + uniqueID;
    },

    uniqueDomID(idName) {
      idName = _.kebabCase(_.toLower(idName));
      return  idName + '-form-' + this.uniqueID();
    },
  },

  computed: {},

  filters: {
    capitalize: function (value) {
      if (!value) return '';

      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
    camelCaseToString(str){
      
      str = str.replace(/[a-z][A-Z]/g, function(item){
        return item.slice(0,1) + ' ' + item.slice(1);
      });

      return _.upperFirst(str);
    }
  }
}

或者

php artisan vendor:publish --force --tag=globalMixinjs

css和scss文件

php artisan vendor:publish --force --tag=beginningPackScss

通用组件

php artisan vendor:publish --force --tag=stablePublicComponents

注意：如果您不想执行这些操作，可以按照以下标题下所述，通过运行以下代码自动执行。如果您只想自动执行某些文件，请在控制台中运行要自动执行的文件的代码。（在执行此操作时，请注意不要有同名文件，因为这些文件将被覆盖。您的文件将被删除。）

php artisan vendor:publish --force --tag=scriptSnippets

通用用法

在控制台中，它将首先向您提出以下问题

Do you want to generate crud processes it manually or from file? Default: [manual]

如果您在config文件中创建CRUD文件并填写以下

'books' => [
'crudType' => 'all',
'modelPath' => 'Admin/Books',
'imgModelPath' => 'Admin/Images',
'imgReqRules' => 'Admin/UpdateImagesPost',
'fieldIDName' => 'bks_id',
'addFields' => [
    [
	'name' => 'bks_edition',
	'type' => 'text',
    ],
    [
	'name' => 'bks_salary',
	'type' => 'text',
    ],
    [
	'name' => 'bks_start_date',
	'type' => 'date',
    ],
],
'reqRules' => 'Admin/BooksRequest',
'advancedReqRules' => 'Admin/BooksAdvancedRequest',
'langInfoTblPath' => 'Languages',
'langModelPath' => 'Admin/BooksLang',
'fieldDependsOnLang' => 'bksl_lang',
'langFieldIDName' => 'bksl_id',
'addLangFields' => [
    [
	'name' => 'bksl_name',
	'type' => 'text',
    ],
    [
	'name' => 'bksl_subject',
	'type' => 'text',
    ],
],
]

信息，系统将自动识别所有信息。如果您想从控制台手动填写信息，请选择手动选项。

新信息