Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
FLIPPED-AURORA
gin-vue-admin
提交
fcabd7e0
G
gin-vue-admin
项目概览
FLIPPED-AURORA
/
gin-vue-admin
大约 1 年 前同步成功
通知
333
Star
18155
Fork
5506
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
fcabd7e0
编写于
6月 11, 2021
作者:
D
Devil
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
全新init页面,提升用户体验
上级
e9b2d1ab
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
258 addition
and
5 deletion
+258
-5
web/src/router/index.js
web/src/router/index.js
+1
-1
web/src/style/init.sass
web/src/style/init.sass
+0
-0
web/src/style/newLogin.scss
web/src/style/newLogin.scss
+13
-3
web/src/view/init/index.vue
web/src/view/init/index.vue
+241
-0
web/src/view/login/index.vue
web/src/view/login/index.vue
+3
-1
未找到文件。
web/src/router/index.js
浏览文件 @
fcabd7e0
...
...
@@ -18,7 +18,7 @@ const baseRouters = [
{
path
:
'
/init
'
,
name
:
'
Init
'
,
component
:
()
=>
import
(
'
@/view/init/in
it
'
)
component
:
()
=>
import
(
'
@/view/init/in
dex
'
)
},
{
path
:
'
/login
'
,
...
...
web/src/style/init.sass
0 → 100644
浏览文件 @
fcabd7e0
web/src/style/newLogin.scss
浏览文件 @
fcabd7e0
...
...
@@ -32,10 +32,20 @@
border-radius
:
10px
;
box-shadow
:
2px
3px
7px
rgba
(
0
,
0
,
0
,.
2
);
.login_panle_form_title
{
display
:
flex
;
align-items
:
center
;
margin
:
30px
0
;
padding-left
:
20px
;
font-size
:
40px
;
border-left
:
4px
solid
#409EFF
;
.login_panle_form_title_logo
{
width
:
90px
;
height
:
72px
;
}
.login_panle_form_title_p
{
font-size
:
40px
;
padding-left
:
20px
;
}
}
.vPic
{
width
:
33%
;
...
...
web/src/view/init/index.vue
0 → 100644
浏览文件 @
fcabd7e0
<
template
>
<div
class=
"init_page"
>
<div
class=
"init_page_panle"
>
<div
v-if=
"hello
<
2"
id=
"hello"
:class=
"[hello
<
1
?
'
slide-in-fwd-top
'
:
'
slide-out-right
']"
class=
"hello "
@
click=
"showNext"
>
<div>
<div
class=
"hello_title"
>
GIN-VUE-ADMIN
</div>
<p
class=
"in-two a-fadeinT"
>
您需要初始化您的数据库并且填充初始数据
</p>
<p
class=
"init_p"
>
点击进入初始化
</p>
</div>
</div>
<div
v-if=
"hello > 0 "
:class=
"[(hello > 0 && !out)? 'slide-in-left' : '' , out ? 'slide-out-right' : '']"
class=
" form"
>
<el-form
ref=
"form"
:model=
"form"
label-width=
"100px"
>
<el-form-item
label=
"数据库类型"
>
<el-select
v-model=
"form.sqlType"
disabled
placeholder=
"请选择"
>
<el-option
key=
"mysql"
label=
"mysql(目前只支持mysql)"
value=
"mysql"
/>
</el-select>
</el-form-item>
<el-form-item
label=
"host"
>
<el-input
v-model=
"form.host"
placeholder=
"请输入数据库链接"
/>
</el-form-item>
<el-form-item
label=
"port"
>
<el-input
v-model=
"form.port"
placeholder=
"请输入数据库端口"
/>
</el-form-item>
<el-form-item
label=
"userName"
>
<el-input
v-model=
"form.userName"
placeholder=
"请输入数据库用户名"
/>
</el-form-item>
<el-form-item
label=
"password"
>
<el-input
v-model=
"form.password"
placeholder=
"请输入数据库密码(没有则为空)"
/>
</el-form-item>
<el-form-item
label=
"dbName"
>
<el-input
v-model=
"form.dbName"
placeholder=
"请输入数据库名称"
/>
</el-form-item>
<el-form-item>
<div
style=
"text-align: right"
>
<el-button
type=
"primary"
@
click=
"onSubmit"
>
立即初始化
</el-button>
</div>
</el-form-item>
</el-form>
</div>
</div>
</div>
</
template
>
<
script
>
import
{
initDB
}
from
'
@/api/initdb
'
export
default
{
name
:
'
Init
'
,
data
()
{
return
{
hello
:
0
,
out
:
false
,
form
:
{
sqlType
:
'
mysql
'
,
host
:
'
127.0.0.1
'
,
port
:
'
3306
'
,
userName
:
'
root
'
,
password
:
''
,
dbName
:
'
gva
'
}
}
},
created
()
{
// setInterval(() => {
// if (this.hello
<
3
)
{
// this.hello = this.hello + 1
// }
// }, 2000)
},
methods
:
{
showNext
()
{
this
.
hello
=
this
.
hello
+
1
console
.
log
(
this
.
hello
)
},
async
onSubmit
()
{
this
.
out
=
true
const
loading
=
this
.
$loading
({
lock
:
true
,
text
:
'
正在初始化数据库,请稍候
'
,
spinner
:
'
el-icon-loading
'
,
background
:
'
rgba(0, 0, 0, 0.7)
'
})
try
{
const
res
=
await
initDB
(
this
.
form
)
if
(
res
.
code
===
0
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
res
.
msg
})
this
.
$router
.
push
({
name
:
'
Login
'
})
}
loading
.
close
()
}
catch
(
err
)
{
loading
.
close
()
}
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.init_page
{
margin
:
0
;
padding
:
0
;
background-image
:
url("~@/assets/login_background.svg")
;
background-size
:
cover
;
width
:
100%
;
height
:
100%
;
position
:
relative
;
.init_page_panle
{
position
:
absolute
;
top
:
3vh
;
left
:
2vw
;
width
:
96vw
;
height
:
94vh
;
background-color
:
rgba
(
255
,
255
,
255
,.
8
);
backdrop-filter
:
blur
(
5px
);
border-radius
:
10px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-evenly
;
.hello
{
position
:
absolute
;
z-index
:
2
;
text-align
:
center
;
width
:
100%
;
height
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
cursor
:
pointer
;
.hello_title
{
font-size
:
32px
;
line-height
:
98px
;
}
.in-two
{
font-size
:
22px
;
}
.init_p
{
margin-top
:
20px
;
color
:
#777777
;
}
}
.form
{
position
:
absolute
;
z-index
:
3
;
margin-top
:
60px
;
width
:
600px
;
height
:
auto
;
padding
:
20px
;
border-radius
:
6px
;
}
}
}
.slide-in-fwd-top
{
-webkit-animation
:
slide-in-fwd-top
0
.4s
cubic-bezier
(
0
.250
,
0
.460
,
0
.450
,
0
.940
)
both
;
animation
:
slide-in-fwd-top
0
.4s
cubic-bezier
(
0
.250
,
0
.460
,
0
.450
,
0
.940
)
both
;
}
.slide-out-right
{
-webkit-animation
:
slide-out-right
0
.5s
cubic-bezier
(
0
.550
,
0
.085
,
0
.680
,
0
.530
)
both
;
animation
:
slide-out-right
0
.5s
cubic-bezier
(
0
.550
,
0
.085
,
0
.680
,
0
.530
)
both
;
}
.slide-in-left
{
-webkit-animation
:
slide-in-left
0
.5s
cubic-bezier
(
0
.250
,
0
.460
,
0
.450
,
0
.940
)
both
;
animation
:
slide-in-left
0
.5s
cubic-bezier
(
0
.250
,
0
.460
,
0
.450
,
0
.940
)
both
;
}
@-webkit-keyframes
slide-in-fwd-top
{
0
%
{
-webkit-transform
:
translateZ
(
-1400px
)
translateY
(
-800px
);
transform
:
translateZ
(
-1400px
)
translateY
(
-800px
);
opacity
:
0
;
}
100
%
{
-webkit-transform
:
translateZ
(
0
)
translateY
(
0
);
transform
:
translateZ
(
0
)
translateY
(
0
);
opacity
:
1
;
}
}
@keyframes
slide-in-fwd-top
{
0
%
{
-webkit-transform
:
translateZ
(
-1400px
)
translateY
(
-800px
);
transform
:
translateZ
(
-1400px
)
translateY
(
-800px
);
opacity
:
0
;
}
100
%
{
-webkit-transform
:
translateZ
(
0
)
translateY
(
0
);
transform
:
translateZ
(
0
)
translateY
(
0
);
opacity
:
1
;
}
}
@-webkit-keyframes
slide-out-right
{
0
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
opacity
:
1
;
}
100
%
{
-webkit-transform
:
translateX
(
1000px
);
transform
:
translateX
(
1000px
);
opacity
:
0
;
}
}
@keyframes
slide-out-right
{
0
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
opacity
:
1
;
}
100
%
{
-webkit-transform
:
translateX
(
1000px
);
transform
:
translateX
(
1000px
);
opacity
:
0
;
}
}
@-webkit-keyframes
slide-in-left
{
0
%
{
-webkit-transform
:
translateX
(
-1000px
);
transform
:
translateX
(
-1000px
);
opacity
:
0
;
}
100
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
opacity
:
1
;
}
}
@keyframes
slide-in-left
{
0
%
{
-webkit-transform
:
translateX
(
-1000px
);
transform
:
translateX
(
-1000px
);
opacity
:
0
;
}
100
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
opacity
:
1
;
}
}
</
style
>
web/src/view/login/index.vue
浏览文件 @
fcabd7e0
...
...
@@ -2,7 +2,9 @@
<div
id=
"userLayout"
>
<div
class=
"login_panle"
>
<div
class=
"login_panle_form"
>
<div
class=
"login_panle_form_title"
>
GIN-VUE-ADMIN
</div>
<div
class=
"login_panle_form_title"
>
<img
class=
"login_panle_form_title_logo"
src=
"@/assets/logo_login.png"
alt=
""
><p
class=
"login_panle_form_title_p"
>
GIN-VUE-ADMIN
</p>
</div>
<el-form
ref=
"loginForm"
:model=
"loginForm"
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录