实现文件上传和数据库记录、Element+vue登录注册UI
This commit is contained in:
F嘉阳
@@ -3,6 +3,8 @@ server:
|
||||
servlet:
|
||||
context-path: /cms
|
||||
port: 8080
|
||||
serverproperties:
|
||||
port_num: 8080
|
||||
spring:
|
||||
thymeleaf:
|
||||
prefix: classpath:/templates/
|
||||
@@ -16,4 +18,7 @@ spring:
|
||||
hibernate:
|
||||
ddl-auto: update
|
||||
show-sql: true
|
||||
debug: true
|
||||
resources:
|
||||
static-locations: classpath:/templates/
|
||||
debug: true
|
||||
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>主页</title>
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<h1>欢迎访问主页</h1>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
75
src/main/resources/templates/home/home.html
Normal file
75
src/main/resources/templates/home/home.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>主页</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="../dist/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<div id="app">
|
||||
<el-container>
|
||||
<el-aside width="200px">
|
||||
<el-row class="tac">
|
||||
<el-col :span="24">
|
||||
<h5>默认颜色</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>导航一</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">导航三</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">我的工作台</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="index">登出</a></el-menu-item>
|
||||
</el-menu>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<!-- <template>
|
||||
<el-button :plain="true" @click="open">成功</el-button>
|
||||
</template>-->
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
<script src="../dist/js/homePage.js"></script>
|
||||
<script src="../dist/js/msg.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
14
src/main/resources/templates/index.html
Normal file
14
src/main/resources/templates/index.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>导航</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="toOneUpload">单文件上传</a><br><br>
|
||||
<a href="toMoreUpload">多文件上传</a><br><br>
|
||||
<a href="login">登录</a><br><br>
|
||||
<a href="register">注册</a><br><br>
|
||||
<!--<a href="download.html?fileName=1.jpg">文件下载 1.jpg (请确保文件存在)</a><br><br>-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,9 +3,102 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>登录</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="dist/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<center>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<div id="app">
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col
|
||||
:md="12" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<h2>登录系统</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col
|
||||
:md="12" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<template>
|
||||
<el-tabs v-model="activeName"
|
||||
@tab-click="handleClick">
|
||||
<el-tab-pane label="登录"
|
||||
name="login">
|
||||
<el-form :model="ruleForm2" status-icon
|
||||
:rules="rules2" ref="ruleForm2" label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
action="/cms/login/dologin"
|
||||
method="POST" name="loginTest">
|
||||
<el-form-item label="用户名"
|
||||
prop="userName">
|
||||
<el-input
|
||||
v-model="ruleForm2.userName" name="colname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="pass">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.pass" auto-complete="off" name="colpassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
native-type="submit">提交
|
||||
</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="注册" name="register">
|
||||
<el-form
|
||||
:model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"
|
||||
label-width="100px" class="demo-ruleForm"
|
||||
action="/cms/register/doregister"
|
||||
method="POST" name="loginTest">
|
||||
<el-form-item label="用户名"
|
||||
prop="userName">
|
||||
<el-input
|
||||
v-model="ruleForm2.userName" name="userName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="pass">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.pass" auto-complete="off" name="passWord"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input
|
||||
type="password" v-model="ruleForm2.checkPass"
|
||||
auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email" label="邮箱"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
|
||||
]">
|
||||
<el-input v-model="ruleForm2.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
native-type="submit">提交
|
||||
</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<script src="./dist/js/LoginStyle.js"></script>
|
||||
<!--<body>
|
||||
<!–<center>
|
||||
<h1>登录系统</h1>
|
||||
<form action="/cms/login/dologin" method="post">
|
||||
<p>用户名：
|
||||
@@ -13,7 +106,7 @@
|
||||
<p>密码：
|
||||
<input type="password" name="colpassword"></p>
|
||||
<input type="submit" value="登录">
|
||||
</center>
|
||||
</form>
|
||||
</center>–>
|
||||
</form>-->
|
||||
</body>
|
||||
</html>
|
||||
26
src/main/resources/templates/moreUpload.html
Normal file
26
src/main/resources/templates/moreUpload.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>多文件 上传 </title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin: 0 auto;margin-top: 100px; ">
|
||||
|
||||
<form action="/cms/moreUpload.html" method="post" enctype="multipart/form-data">
|
||||
<p>
|
||||
<span>文件1：</span>
|
||||
<input type="file" name="imageFile1">
|
||||
</p>
|
||||
<p>
|
||||
<span>文件2：</span>
|
||||
<input type="file" name="imageFile2">
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
src/main/resources/templates/moreUploadResult.jsp
Normal file
28
src/main/resources/templates/moreUploadResult.jsp
Normal file
@@ -0,0 +1,28 @@
|
||||
<%@page import="java.util.List"%>
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>多文件 上传结果 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="margin: 0 auto;margin-top: 100px; ">
|
||||
|
||||
<%
|
||||
List<String> fileList = (List)request.getAttribute("files");
|
||||
for(String url : fileList){
|
||||
%>
|
||||
<a href="<%=url %>">
|
||||
<img alt="" src="<%=url %>">
|
||||
</a>
|
||||
<%
|
||||
}
|
||||
%>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
31
src/main/resources/templates/oneUpload.html
Normal file
31
src/main/resources/templates/oneUpload.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>单文件 上传 </title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin: 0 auto;margin-top: 100px; ">
|
||||
<form action="/cms/test" method="post" enctype="multipart/form-data">
|
||||
<p>
|
||||
<span>文件路径测试：</span>
|
||||
<input type="file" name="imageFile">
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form action="/cms/oneUpload" method="post" enctype="multipart/form-data">
|
||||
<p>
|
||||
<span>文件：</span>
|
||||
<input type="file" name="imageFile">
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user