lisone/EasyAdmin8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(install): optimize installation page and add .env configuration support

Browse Source 
- Update installation page layout and styling
- Add support for reading database configuration from .env file
- Improve error handling and user feedback during installation process
- Refactor JavaScript code for better readability and performance
This commit is contained in:
wolfcode
2025-01-08 13:53:24 +08:00
parent 31c06cff69
commit 57ea9a3f47
3 changed files with 74 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/index/controller/Install.php
View File

@@ -22,8 +22,8 @@ class Install extends BaseController
// $this->redirect('/');
$isInstall = true;
$errorInfo = '已安装系统，如需重新安装请删除文件：/config/install/lock/install.lock，或者删除 /install 路由';
}elseif (version_compare(phpversion(), '8.0.0', '<')) {
$errorInfo = 'PHP版本不能小于8.0.0';
}elseif (version_compare(phpversion(), '8.1.0', '<')) {
$errorInfo = 'PHP版本不能小于8.1.0';
}elseif (!extension_loaded("PDO")) {
$errorInfo = '当前未开启PDO，无法进行安装';
}
@@ -31,8 +31,16 @@ class Install extends BaseController
$errorInfo = '.env 文件不存在，请先配置 .env 文件';
}
if (!$request->isAjax()) {
$envInfo = [
'DB_HOST' => $isInstall ? '' : env('DB_HOST', '127.0.0.1'),
'DB_NAME' => $isInstall ? '' : env('DB_NAME', 'easyadmin8'),
'DB_USER' => $isInstall ? '' : env('DB_USER', 'root'),
'DB_PASS' => $isInstall ? '' : env('DB_PASS', 'root'),
'DB_PORT' => $isInstall ? '' : env('DB_PORT', 3306),
'DB_PREFIX' => $isInstall ? '' : env('DB_PREFIX', 'ea8_'),
];
$currentHost = '://';
$result = compact('errorInfo', 'currentHost', 'isInstall');
$result = compact('errorInfo', 'currentHost', 'isInstall', 'envInfo');
return view('index/install/index', $result);
}
if ($errorInfo) $this->error($errorInfo);

65
public/static/common/css/insatll.css → public/static/common/css/install.css
View File

@@ -1,31 +1,37 @@
body{
body {
text-align: center;
}
h1{
h1 {
margin-top: 20px;
}
h1 img{
h1 img {
width: 120px;
height: 120px;
}
h2 {
font-size: 28px;
font-weight: normal;
color: #3C5675;
margin-bottom: 0
}
.content{
.content {
margin-top: 20px;
}
.content p{
.content p {
margin: 20px;
}
.content form{
margin:0 auto;
.content form {
width: 500px;
margin-bottom: 20px;
margin: 0 auto 20px;
}
.content form .bg{
.content form .bg {
margin-top: 20px;
background-color: #fff;
border: 1px solid #fff;
@@ -33,51 +39,68 @@ h2 {
padding: 14px 14px;
box-shadow: 0 0 8px #cccccc;
}
.content form .layui-form-item:last-child{
margin-bottom:0!important;
.content form .bg .layui-card {
background-color: #fafafa;
color: #ff8080;
font-size: 15px;
font-weight: bold;
}
.content form .layui-btn{
.content form .layui-form-item:last-child {
margin-bottom: 0 !important;
}
.content form .layui-btn {
margin-top: 20px;
}
.content .layui-elem-field legend{
.content .layui-elem-field legend {
font-size: 16px;
color: #8a8a8a;
}
.content .tips{
.content .tips {
float: left;
margin-top: 5px;
margin-bottom: 5px;
font-size: 12px;
color: #eca6a6
}
.content .admin-tips{
.content .admin-tips {
float: left;
margin-top: 5px;
margin-bottom: 5px;
font-size: 12px;
color: #eca6a6
}
.content .desc{
.content .desc {
font-size: 16px;
color: #4E5465;
margin-bottom: 30px;
}
.content .desc a{
.content .desc a {
color: #07adeb;
margin-right: 10px;
}
.content .desc a:first-child{
.content .desc a:first-child {
margin-left: 10px;
}
.error{
.error {
background: #D83E3E;
color: #fff;
padding: 15px 20px;
border-radius: 5px;
margin-bottom: 20px;
}
@media screen and (max-width:768px) {
.content form{
@media screen and (max-width: 768px) {
.content form {
width: 95%;
}
}

33
view/index/install/index.html
View File

@@ -6,8 +6,8 @@
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/static/plugs/layui-v2.x/css/layui.css?v={:time()}" media="all">
<link rel="stylesheet" href="/static/common/css/insatll.css?v={:time()}" media="all">
<link rel="stylesheet" href="/static/plugs/layui-v2.x/css/layui.css" media="all">
<link rel="stylesheet" href="/static/common/css/install.css?v={:time()}" media="all">
</head>
<body>
<h1><img src="/static/common/images/logo-1.png" alt="" style="width: 100px;height: 100px;"></h1>
@@ -32,45 +32,50 @@
</div>
{/if}
<div class="bg">
<div class="layui-card">
<div class="layui-card-body">
自动读取 .env 配置，不需要手动创建数据库
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库地址</label>
<div class="layui-input-block">
<input class="layui-input" name="hostname" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库地址" placeholder="请输入数据库地址" value="127.0.0.1">
<input class="layui-input" name="hostname" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库地址" placeholder="请输入数据库地址" value="{$envInfo.DB_HOST}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库端口</label>
<div class="layui-input-block">
<input class="layui-input" name="hostport" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库端口" placeholder="请输入数据库端口" value="3306">
<input class="layui-input" name="hostport" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库端口" placeholder="请输入数据库端口" value="{$envInfo.DB_PORT}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库名称</label>
<div class="layui-input-block">
<input class="layui-input" name="database" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库名称" placeholder="请输入数据库名称" value="easyadmin8">
<input class="layui-input" name="database" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库名称" placeholder="请输入数据库名称" value="{$envInfo.DB_NAME}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据表前缀</label>
<div class="layui-input-block">
<input class="layui-input" name="prefix" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据表前缀" placeholder="请输入数据表前缀" value="ea8_">
<input class="layui-input" name="prefix" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据表前缀" placeholder="请输入数据表前缀" value="{$envInfo.DB_PREFIX}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库账号</label>
<div class="layui-input-block">
<input class="layui-input" name="db_username" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库账号" placeholder="请输入数据库账号" value="root">
<input class="layui-input" name="db_username" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库账号" placeholder="请输入数据库账号" value="{$envInfo.DB_USER}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库密码</label>
<div class="layui-input-block">
<input type="password" class="layui-input" name="db_password" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库密码" placeholder="请输入数据库密码">
<input type="text" class="layui-input" name="db_password" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库密码" placeholder="请输入数据库密码" value="{$envInfo.DB_PASS}">
</div>
</div>
@@ -111,11 +116,11 @@
</div>
</form>
</div>
<script src="static/plugs/layui-v2.x/layui.js?v={:time()}" charset="utf-8"></script>
<script src="static/plugs/layui-v2.x/layui.js" charset="utf-8"></script>
<script>
let isInstall = '{$isInstall? 1 : 0}'
layui.use(['form', 'layer'], function () {
var $ = layui.jquery,
let $ = layui.jquery,
form = layui.form,
layer = layui.layer;
if (isInstall > 0) {
@@ -129,7 +134,7 @@
})
}
$("#admin_url").bind("input propertychange", function () {
var val = $(this).val();
let val = $(this).val();
$("#admin_name").text(val);
});
@@ -137,8 +142,8 @@
if ($(this).hasClass('layui-btn-disabled')) {
return false;
}
var _data = data.field;
var loading = layer.msg('正在安装...', {
let _data = data.field;
let loading = layer.msg('正在安装...', {
icon: 16,
shade: 0.2,
time: false
@@ -157,7 +162,7 @@
window.location.href = '/admin';
});
} else {
layer.msg(data.msg, {icon: 2});
layer.msg(data.msg, {icon: 2, shade: 0.2, time: 3000, shadeClose: true});
}
},
error: function (xhr, textstatus, thrown) {