452 lines
18 KiB
HTML
Executable File
452 lines
18 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<title>{$Think.config.app.app_name}简易安装向导</title>
|
||
<link rel="stylesheet" href="__STATIC__/elementui/element-ui.css">
|
||
<script src="__STATIC__/js/vue.js"></script>
|
||
<script src="__STATIC__/js/jquery-2.0.3.min.js"></script>
|
||
<script src="__STATIC__/elementui/element-ui.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="el-app">
|
||
<el-card class="box-card header-card" style="margin-bottom: 20px;">
|
||
<header class="header" align="center">
|
||
<div class="header-content">
|
||
<div class="header-logo">
|
||
<el-avatar src="{$Think.config.app.app_logo}" :size="50">
|
||
</el-avatar>
|
||
</div>
|
||
<div class="contact-us" align="left">
|
||
<div><a class="main-color" href="http://img.raingad.com/index.html"> {$Think.config.app.app_name} </a>for {$Think.config.app.app_verison} 安装向导</div>
|
||
<div>QQ交流群： <a href="https://jq.qq.com/?_wv=1027&k=jMQAt9lh" target="_blank">336921267</a></div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
</el-card>
|
||
|
||
<el-card class="container box-card" style="padding:0">
|
||
<el-steps :active="action" simple finish-status="success">
|
||
<el-step title="IM介绍"> </el-step>
|
||
<el-step title="环境检测"> </el-step>
|
||
<el-step title="连接数据库"> </el-step>
|
||
<el-step title="安装完成"> </el-step>
|
||
</el-steps>
|
||
<div class="step-item" v-if="action==0">
|
||
<div class="setting-version">
|
||
<b> 免责申明：</b>
|
||
<p><span class="main-color"> {$Think.config.app.app_name} </span>是由个人开发者《<a href="https://gitee.com/lvzhe-lcoce" target="_blank">raingad@foxmail.com</a>》开发，以下简称“本软件”，用户出于自愿而使用本软件，必须了解使用本软件的风险，本软件只用作学习交流使用，我们不承诺对免费用户提供任何形式的技术支持， 并且不能作为商业用途使用，若因为使用本软件产生的侵权行为一律与作者无关。如果本软件有侵权行为，请联系作者删除！
|
||
</p>
|
||
<b> 软件地址：</b>
|
||
<p>前端地址：<a href="https://gitee.com/raingad/im-chat-front" target="_blank">https://gitee.com/raingad/im-chat-front</a></p>
|
||
<p>后端地址：<a href="https://gitee.com/raingad/im-instant-chat" target="_blank">https://gitee.com/raingad/im-instant-chat</a></p>
|
||
|
||
<b> 支持功能：</b>
|
||
<ul>
|
||
<li v-for="item in funcList">${item.text}</li>
|
||
</ul>
|
||
|
||
</div>
|
||
<div class="setting-version" style="color: #a6a6a6">
|
||
<p>后端技术栈：thinkphp6+workerman+redis</p>
|
||
<p>前端技术栈：vue+Lemon-IMUI+element-UI</p>
|
||
</div>
|
||
</div>
|
||
<div class="step-item" v-if="action==1">
|
||
<h4>环境状态</h4>
|
||
<el-table :data="env" border style="width: 100%" size="mini">
|
||
<el-table-column prop="name" label="检查项" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="description" label="建议要求" width="300px" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="value" label="当前环境" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="status" label="是否通过" align="center">
|
||
<template slot-scope="scope">
|
||
<span :class="scope.row.status === 'ok' ? 'fc-success' : 'fc-danger'">${scope.row.status}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
<h4>文件夹权限</h4>
|
||
<el-table :data="dir" border style="width: 100%" size="mini">
|
||
<el-table-column prop="dir" label="目录检查项" width="300px" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="value" label="当前环境" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="status" label="是否通过" align="center">
|
||
<template slot-scope="scope">
|
||
<span :class="scope.row.status === 'ok' ? 'fc-success' : 'fc-danger'">${scope.row.status}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div align="center" style="margin-top:15px;">
|
||
<el-button round @click="reCheckEnv" :loading="loading">重新检测</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="step-item" v-if="action==2" align="center">
|
||
<div class="step-form">
|
||
<el-alert
|
||
title="如果未设置成功，请将根目录下[example.env]更名为为[.env]，并填写好相关参数"
|
||
type="warning">
|
||
</el-alert>
|
||
<h4>请填写数据库信息</h4>
|
||
<el-form ref="form" :model="form" label-width="120px">
|
||
<el-form-item label="服务器地址">
|
||
<el-input v-model="form.hostname">
|
||
<template slot="append">数据库地址一般为：127.0.0.1</template>
|
||
</el-input>
|
||
|
||
</el-form-item>
|
||
<el-form-item label="数据库">
|
||
<el-input v-model="form.database"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="表前缀">
|
||
<el-input v-model="form.prefix">
|
||
<template slot="append">默认为yu_</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据库用户名">
|
||
<el-input v-model="form.username">
|
||
<template slot="append">生产环境建议创建独立账户</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据库密码">
|
||
<el-input v-model="form.password"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="端口">
|
||
<el-input v-model="form.hostport">
|
||
<template slot="append">数据库端口一般为：3306</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<h4>redis配置</h4>
|
||
<el-form-item label="服务器地址">
|
||
<el-input v-model="form.redishost">
|
||
<template slot="append">默认为127.0.0.1</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="端口">
|
||
<el-input v-model="form.redisport">
|
||
<template slot="append">默认为6379</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="密码">
|
||
<el-input v-model="form.redispass">
|
||
<template slot="append">可以为空</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="step-item" v-if="action==3">
|
||
<p>开始安装...</p>
|
||
<div id='install-process'>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="step-item" v-if="action==4">
|
||
<div class="setting-version">
|
||
<p>您已成功安装本程序，现在您还需最后一步即可使用聊天程序！</p>
|
||
<p>管理员账号：<b style="font-size:18px">administrator</b>；密码：<b style="font-size:18px">123456</b>；进入后再聊天界面的左下角可以进入后台。</p>
|
||
<h4>启动消息推送</h4>
|
||
<p>第一种方式：进入终端，输入[ <code>php think worker:gateway start -d</code> ] 或者 [ <code>php start.php start -d</code> ] 即可启动服务</p>
|
||
<p>第二种方式：linux上可以直接在后台启动服务，首次启动必须要先进行第一种方式调试没问题后才能用这种方式</p>
|
||
<p>windows启动直接运行根目录的start_for_win.bat，推送服务不建议在windows上运行，不稳定，生产环境请使用linux。</p>
|
||
<p>PS：消息推送的服务器必须开启8282端口，并在nginx配置文件中配置反向代理。如需更改，请修改[ <b>app\worker\start_gateway.php</b> ]中的8282端口</p>
|
||
<h4>前台地址：</h4>
|
||
<p>浏览器访问：<a href="{:request()->domain()}/index.html">{:request()->domain()}/index.html</a></p>
|
||
<div>QQ交流群： <a href="https://jq.qq.com/?_wv=1027&k=jMQAt9lh" target="_blank">336921267</a></div>
|
||
</div>
|
||
</div>
|
||
<hr style="border: 1px solid #f5f5f5;">
|
||
<div class="next-button" align="center" v-if="!isDone">
|
||
<el-button @click="pre" :disabled="preDisabled" v-text="preText"></el-button>
|
||
<el-button type="primary" @click="next" :disabled="nextDisabled" v-text="nextText"></el-button>
|
||
</div>
|
||
<div class="next-button" align="center" v-if="isDone">
|
||
<el-button type="success" @click="openSys" v-text="doneText"> </el-button>
|
||
</div>
|
||
|
||
</el-card>
|
||
|
||
<div class="footer-wrapper" align="center">
|
||
<footer class="footer">
|
||
©{:date("Y")} {$Think.config.app.app_name} for {$Think.config.app.app_version}
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
<script>
|
||
var app = new Vue({
|
||
delimiters: ['${', '}'],
|
||
el: '#el-app',
|
||
data() {
|
||
return {
|
||
action: 0,
|
||
preDisabled: true,
|
||
nextDisabled: false,
|
||
preText: "上一步",
|
||
nextText: "下一步",
|
||
isDone: false,
|
||
doneText: '进入系统',
|
||
env: [],
|
||
dir: [],
|
||
database: [],
|
||
status: 1,
|
||
loading: false,
|
||
form: {
|
||
hostname: '127.0.0.1',
|
||
database: 'im',
|
||
username: 'root',
|
||
password: '',
|
||
hostport: 3306,
|
||
prefix: 'yu_',
|
||
redishost: '127.0.0.1',
|
||
redisport: '6379',
|
||
redispass: '',
|
||
},
|
||
funcList:[
|
||
{
|
||
icon:'el-icon-chat-line-round',
|
||
text:'支持单聊和群聊，支持发送表情、图片、语音、视频和文件消息',
|
||
},
|
||
{
|
||
icon:'el-icon-potato-strips',
|
||
text:'单聊支持消息已读未读的状态显示，在线状态显示',
|
||
},
|
||
{
|
||
icon:'el-icon-user',
|
||
text:'群聊创建、删除和群成员管理、群公告、群禁言等',
|
||
},
|
||
{
|
||
icon:'el-icon-ice-cream-round',
|
||
text:'支持置顶联系人，消息免打扰；支持设置新消息声音提醒，浏览器通知',
|
||
},
|
||
{
|
||
icon:'el-icon-video-camera',
|
||
text:'支持一对一音视频通话（和移动端不互通）',
|
||
},
|
||
{
|
||
icon:'el-icon-milk-tea',
|
||
text:'支持文件、图片和绝大部分媒体文件在线预览',
|
||
},
|
||
{
|
||
icon:'el-icon-mobile-phone',
|
||
text:'支持移动端（H5和APP），支持简易后台管理',
|
||
}
|
||
|
||
]
|
||
}
|
||
},
|
||
watch: {
|
||
action(val) {
|
||
this.status = 1;
|
||
if (val == 0) {
|
||
this.preDisabled = true;
|
||
} else {
|
||
this.preDisabled = false;
|
||
}
|
||
if (val == 1) {
|
||
this.getEnv();
|
||
}
|
||
if (val == 3) {
|
||
this.process('正在写入数据库...');
|
||
var _this = this;
|
||
setTimeout(function() {
|
||
_this.install()
|
||
}, 1000);
|
||
} else {
|
||
$('#install-process').html('');
|
||
}
|
||
if (val == 4) {
|
||
this.isDone = true;
|
||
}
|
||
},
|
||
status(val) {
|
||
if (val == 0) {
|
||
this.nextDisabled = true;
|
||
} else {
|
||
this.nextDisabled = false;
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
next() {
|
||
if (this.action == 2) {
|
||
this.checkDatabase();
|
||
} else if (this.action < 4) {
|
||
this.action++;
|
||
}
|
||
},
|
||
pre() {
|
||
if (this.action > 0) {
|
||
this.action--;
|
||
}
|
||
},
|
||
openSys() {
|
||
window.location.href = "{:request()->domain()}/index.html";
|
||
},
|
||
getEnv() {
|
||
var _this = this;
|
||
$.post("{:url('install/getEnv')}", {}, function(res) {
|
||
if (res.code == 0) {
|
||
_this.env = res.data.env;
|
||
_this.dir = res.data.dir;
|
||
_this.status = res.data.status;
|
||
}
|
||
_this.loading = false;
|
||
})
|
||
},
|
||
checkDatabase() {
|
||
var _this = this;
|
||
$.post("{:url('install/checkDatabase')}", {
|
||
form: this.form
|
||
}, function(res) {
|
||
if (res.code == 0) {
|
||
_this.status = res.data.status;
|
||
_this.action++;
|
||
} else {
|
||
_this.$message.error(res.msg);
|
||
}
|
||
_this.loading = false;
|
||
})
|
||
},
|
||
install() {
|
||
this.status = 0;
|
||
var _this = this;
|
||
$.post("{:url('install/install')}", {}, function(res) {
|
||
if (res.code == 0) {
|
||
setTimeout(function() {
|
||
_this.process('数据库写入成功，执行sql语句 ' + 1 + ' 条！');
|
||
setTimeout(function() {
|
||
_this.process('正在跳转...');
|
||
setTimeout(function() {
|
||
_this.action++;
|
||
}, 1000);
|
||
}, 1000);
|
||
}, 1000);
|
||
_this.status = res.data.status;
|
||
} else {
|
||
setTimeout(_this.process("<span class='fc-danger'>" + res.msg + "</span>"), 1000);
|
||
_this.isDone = true;
|
||
}
|
||
_this.loading = false;
|
||
})
|
||
},
|
||
reCheckEnv() {
|
||
this.loading = true;
|
||
this.getEnv();
|
||
},
|
||
process(text) {
|
||
var html = "<p>" + text + "</p>";
|
||
this.$nextTick(() => {
|
||
$('#install-process').append(html);
|
||
});
|
||
|
||
}
|
||
|
||
}
|
||
})
|
||
</script>
|
||
<style>
|
||
body {
|
||
background-color: #f5f5f5;
|
||
margin: 0;
|
||
padding: 0
|
||
}
|
||
|
||
.header-card {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.header-card .el-card__body {
|
||
padding: 10px;
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
width: 320px;
|
||
}
|
||
|
||
.header-logo {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.contact-us {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.main-color {
|
||
color: #409eff;
|
||
}
|
||
|
||
.step-item {
|
||
height: 550px;
|
||
overflow: auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.container .el-card__body {
|
||
padding: 0
|
||
}
|
||
|
||
.next-button {
|
||
margin: 12px 0;
|
||
}
|
||
|
||
.setting-version,
|
||
.install-process {
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.step-form {
|
||
width: 600px
|
||
}
|
||
|
||
.el-input-group__append {
|
||
width: 190px;
|
||
}
|
||
|
||
.footer-wrapper {
|
||
margin: 15px auto;
|
||
color: #888888
|
||
}
|
||
|
||
.fc-danger {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.fc-warning {
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.fc-success {
|
||
color: #67c23a;
|
||
}
|
||
|
||
.fc-info {
|
||
color: #909399;
|
||
}
|
||
|
||
.fc-primary {
|
||
color: #409eff;
|
||
}
|
||
</style>
|
||
|
||
</html> |