<form name="form1" method="post" action="/save/1"></form>
<form name="form2" method="post" action="/save/2"></form>
<form name="form3" method="post" action="/save/3"></form>
<table>
<tbody>
<tr>
<td><input type="text" name="param1" form="form1"></td>
<td><input type="text" name="param2" form="form1"></td>
<tr>
<tr><td><button type="submit" form="form1">Send</button></td><tr>
</tbody>
<tbody>
<tr>
<td><input type="text" name="param1" form="form2"></td>
<td><input type="text" name="param2" form="form2"></td>
<tr>
<tr><td><button type="submit" form="form2">Send</button></td><tr>
</tbody>
<tbody>
<tr>
<td><input type="text" name="param1" form="form3"></td>
<td><input type="text" name="param2" form="form3"></td>
<tr>
<tr><td><button type="submit" form="form3">Send</button></td><tr>
<table>
<form method="post" action="/save">
<table>
<tr>
<td><input type="text" name="data[ОУР][param1]"></td>
<td><input type="text" name="data[ОУР][param2]"></td>
<tr>
<tr>
<td><input type="text" name="data[ОЭБ][param1]"></td>
<td><input type="text" name="data[ОЭБ][param1]"></td>
<tr>
<tr>
<td><input type="text" name="data[ОНК][param1]"></td>
<td><input type="text" name="data[ОНК][param1]"></td>
<tr>
<tr><td><button type="submit">Send</button></td><tr>
</tbody>
<table>
</form>
Стандарт URL использует набор символов US-ASCII. Это имеет серьёзный недостаток, поскольку разрешается использовать лишь латинские буквы, цифры и несколько знаков пунктуации. Все другие символы необходимо перекодировать.
Для этого всё закидываю на гитхаб-пейдж, чтобы по ссылке я мог открыть с телефона или попросить знакомого проверить на другой ОС c телефона
Всё готово, сжимаю CSS, JS. через веб-сервисы.
Я не упомянул SASS-фигас и т. д, так как не увидел практической пользы для проектов на 1-15 страниц.
Ну вот зачем PUG? Как конкретно он помогает на небольших проектах 1-15 шаблонов страниц.
Префиксы? В кодовом редакторе они и так есть.
{
"private": true,
"scripts": {
"site:development": "mix",
"site:watch": "mix watch",
"site:hot": "mix watch --hot",
"site:production": "mix --production",
"dashboard:watch": "cross-env TARGET=dashboard mix watch",
"dashboard:hot": "cross-env TARGET=dashboard mix watch --hot",
"dashboard:production": "cross-env TARGET=dashboard mix --production"
},
"devDependencies": {
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.2.2",
"chalk": "^4.1.0",
"cross-env": "^7.0.3",
"dotenv": "^8.2.0",
"laravel-mix": "^6.0.13",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^10.1.1"
},
"dependencies": {}
}
/** @type {Api} */
const mix = require('laravel-mix');
const path = require('path');
const dotenv = require('dotenv');
/** @type {Chalk} */
const chalk = require('chalk');
const dotEnvLocation = path.resolve('./.env');
dotenv.config({ path: dotEnvLocation });
const WATCH = process.argv.includes('--watch');
const HOT = process.argv.includes('--hot');
const localDomain = process.env.LOCAL_DOMAIN ?? 'localhost';
const target = process.env.TARGET ?? 'site';
let browserSyncPort = 3000;
let hmrPort = 8088;
const logs = {
mode : WATCH ? chalk.red('WATCH') : HOT ? chalk.red('HOT') : 'None',
domain : process.env.LOCAL_DOMAIN ?? chalk.red(localDomain),
frontend: process.env.FRONTEND_DIST ?? chalk.red(process.env.FRONTEND_DIST),
backend : process.env.BACKEND_DIST ?? chalk.red(process.env.BACKEND_DIST),
};
console.log(chalk.cyan('Local domain: ') + logs.domain);
console.log(chalk.cyan('Location .env: ') + dotEnvLocation);
console.log(chalk.cyan('Mode: ') + logs.mode);
console.log(chalk.cyan('Public paths:'));
console.log(chalk.cyan(' Frontend: ') + logs.frontend);
console.log(chalk.cyan(' Backend: ') + logs.backend);
if (target === 'dashboard') {
browserSyncPort = process.env.BACKEND_LOCAL_PORT ?? 3000;
hmrPort = process.env.BACKEND_HMR_PORT ?? 8088;
require('./webpack-dashboard.mix.js');
}
if (target === 'site') {
browserSyncPort = process.env.FRONTEND_LOCAL_PORT ?? 3001;
hmrPort = process.env.FRONTEND_HMR_PORT ?? 8089;
require('./webpack-site.mix.js');
}
/*==
*== Customize options
*== ======================================= ==*/
mix.version();
mix.disableSuccessNotifications();
if (!HOT && WATCH) {
mix.browserSync({
proxy : localDomain,
startPath: target === 'site' ? '/' : '/admin',
browser : ['chrome'],
notify : false,
port : browserSyncPort,
});
}
mix.options({
clearConsole: false,
hmrOptions : {
host: 'localhost',
port: hmrPort,
},
});
const webpackResolveRules = {
extensions: ['*', '.wasm', '.mjs', '.js', '.jsx', '.json', '.vue'],
alias : {
'@': path.join(__dirname, 'resources/js'),
},
};
mix.sourceMaps(false, 'source-map');
if (!mix.inProduction()) {
mix.webpackConfig({
output : { devtoolModuleFilenameTemplate: '[resource-path]' },
resolve: webpackResolveRules,
});
} else {
mix.webpackConfig({
resolve: webpackResolveRules,
});
}
/** @type {Api} */
const mix = require('laravel-mix');
const HOT = process.argv.includes('--hot');
if (!process.env.FRONTEND_DIST) throw Error;
mix.setPublicPath(`public/${process.env.FRONTEND_DIST}`);
if (!HOT) mix.setResourceRoot(`/${process.env.FRONTEND_DIST}`);
mix.js('resources/js/app.js', 'js');
mix.sass('resources/scss/app.scss', 'css');
mix.extract();
/** @type {Api} */
const mix = require('laravel-mix');
const HOT = process.argv.includes('--hot');
if (!process.env.BACKEND_DIST) throw Error;
mix.setPublicPath(`public/${process.env.BACKEND_DIST}`);
if (!HOT) mix.setResourceRoot(`/${process.env.BACKEND_DIST}`);
mix.js('resources/dashboard/js/main.js', 'js');
mix.sass('resources/dashboard/scss/main.scss', 'css');
mix.extract();
LOCAL_DOMAIN=delphinpro.local
FRONTEND_LOCAL_PORT=3000
FRONTEND_HMR_PORT=8003
FRONTEND_DIST=dist/frontend
BACKEND_LOCAL_PORT=3004
BACKEND_HMR_PORT=8004
BACKEND_DIST=dist/backend
<?php
return [
// .....
'frontend' => [
'dist' => env('FRONTEND_DIST'),
],
'backend' => [
'dist' => env('BACKEND_DIST'),
],
];
<link href="{{ mix('css/app.css', config('app.frontend.dist')) }}" rel="stylesheet">
<script src="{{ mix('js/app.js', config('app.frontend.dist')) }}"></script>