实现表单异步提交并显示消息

src/main/java/com/fjy/spring/controller/DataController.java

@@ -26,9 +26,4 @@ public class DataController {
         new UserException(ResultEnum.EMPTY_DATA);
         return null;
     }
-
-    @PostMapping("/home/dofeedback")
-    public void doFeedback(){
-
-    }
 }

src/main/java/com/fjy/spring/controller/FeedBackController.java

@@ -0,0 +1,49 @@
+package com.fjy.spring.controller;
+
+import com.fjy.spring.domain.TbFeedBack;
+import com.fjy.spring.domain.TbUser;
+import com.fjy.spring.properties.ServerProperties;
+import com.fjy.spring.service.FeedBackService;
+import com.fjy.spring.untils.RedirectUtil;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import javax.annotation.Resource;
+import javax.servlet.http.HttpServletRequest;
+import java.text.SimpleDateFormat;
+import java.util.Date;
+
+import static com.fjy.spring.constant.GlobalConstant.USER_SESSION_KEY;
+
+@RestController
+public class FeedBackController {
+
+    @Autowired
+    private FeedBackService feedBackService;
+
+    @Autowired
+    private ServerProperties serverProperties;
+
+    @Resource
+    HttpServletRequest request;
+
+    @PostMapping("/home/dofeedback")
+    public void doFeedBack(@RequestParam(value = "content") String content){
+        Date date = new Date();
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+        String dateNowStr = sdf.format(date);
+        TbFeedBack feedBack = new TbFeedBack();
+        feedBack.setContent(content);
+        feedBack.setTime(dateNowStr);
+        TbUser user = (TbUser)request.getSession().getAttribute(USER_SESSION_KEY);
+        feedBack.setUserid(user.getColuserid());
+        RedirectUtil red = new RedirectUtil();
+        if (feedBackService.addContent(feedBack)){
+            System.out.println("写入数据库成功");
+        }
+
+    }
+}

src/main/java/com/fjy/spring/controller/LoginController.java

@@ -46,7 +46,7 @@ public class LoginController {
             Date date = new Date();
             SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
             String dateNowStr = sdf.format(date);
-            System.out.println("当前时间："+dateNowStr);
+            //System.out.println("当前时间："+dateNowStr);
             TbLog log = new TbLog();
             log.setUserid(user.getColuserid());
             log.setColtime(dateNowStr);

src/main/java/com/fjy/spring/domain/TbFeedBack.java

@@ -0,0 +1,53 @@
+package com.fjy.spring.domain;
+
+import javax.persistence.*;
+
+@Entity
+@Table(name = "tb_feedback")
+public class TbFeedBack {
+    @Id
+    @Column(name = "feedbackid")
+    @GeneratedValue
+    private Integer id;
+
+    @Column(name = "coluserid")
+    private Integer userid;
+
+    @Column(name = "feedbackcontent")
+    private String content;
+
+    @Column(name = "issuetime")
+    private String time;
+
+    public Integer getId() {
+        return id;
+    }
+
+    public void setId(Integer id) {
+        this.id = id;
+    }
+
+    public Integer getUserid() {
+        return userid;
+    }
+
+    public void setUserid(Integer userid) {
+        this.userid = userid;
+    }
+
+    public String getContent() {
+        return content;
+    }
+
+    public void setContent(String content) {
+        this.content = content;
+    }
+
+    public String getTime() {
+        return time;
+    }
+
+    public void setTime(String time) {
+        this.time = time;
+    }
+}

src/main/java/com/fjy/spring/repository/TbFeedBackRepository.java

@@ -0,0 +1,8 @@
+package com.fjy.spring.repository;
+
+import com.fjy.spring.domain.TbFeedBack;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+
+public interface TbFeedBackRepository extends JpaRepository<TbFeedBack,Integer> {
+}

src/main/java/com/fjy/spring/service/FeedBackService.java

@@ -0,0 +1,23 @@
+package com.fjy.spring.service;
+
+import com.fjy.spring.domain.TbFeedBack;
+import com.fjy.spring.enums.ResultEnum;
+import com.fjy.spring.exception.UserException;
+import com.fjy.spring.repository.TbFeedBackRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+@Service
+public class FeedBackService {
+    @Autowired
+    TbFeedBackRepository feedBackRepository;
+
+    public boolean addContent(TbFeedBack feedBack){
+        TbFeedBack feed=feedBackRepository.save(feedBack);
+        if (feed!=null){
+            return true;
+        }
+        new UserException(ResultEnum.ADD_ERROR);
+        return false;
+    }
+}

src/main/java/com/fjy/spring/untils/RedirectUtil.java

@@ -0,0 +1,16 @@
+package com.fjy.spring.untils;
+
+import com.fjy.spring.properties.ServerProperties;
+import org.springframework.beans.factory.annotation.Autowired;
+
+import javax.servlet.http.HttpServletRequest;
+
+public class RedirectUtil {
+    @Autowired
+    private ServerProperties serverProperties;
+
+    public String Redirect(HttpServletRequest request,String url){
+        return "redirect:" + request.getScheme() + "://" + request.getServerName() + ":"
+                + serverProperties.getPortNum() + request.getContextPath() + "/"+url;
+    }
+}

src/main/resources/static/js/admin.js

@@ -0,0 +1,46 @@
+var Main = {
+    data() {
+        return {
+            activeIndex: '1',
+            formInline: {
+                user: '',
+                region: ''
+            },
+            form: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            feedbackData:[
+                {
+                    content:'bug',
+                    time:'2018-2-3',
+                    username:'root'
+                }
+            ],
+            logData:[
+                {
+                    ip:'127.0.0.1',
+                    header:'bug',
+                    time:'2018-2-3',
+                    username:'root'
+                }
+            ],
+        }
+    },
+    methods: {
+        handleSelect(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        onSubmit() {
+            console.log('submit!');
+        }
+    }
+}
+var Ctor = Vue.extend(Main)
+new Ctor().$mount('#app')

src/main/resources/static/js/homePage.js

@@ -160,16 +160,50 @@ var Main = {
 
     },
     methods: {
+        openNotiSuccess(title,content) {
+            this.$notify({
+                title: title,
+                message: content,
+                type: 'success'
+            });
+        },
+        openSuccess(content) {
+            this.$message({
+                message: content,
+                type: 'success'
+            });
+        },
         uploadURL(row){
             return "http://localhost:8080/cms/moreUpload?courseName="+row.coursename+"&folder="+row.workfolder;
         },
         limitTime(row){
             return DateDiff(row.worktime.replace(/([^\s]+)\s.*/, "$1"),  cur);
         },
-        submitForm(formName) {
+        submitForm(formName,url) {
             this.$refs[formName].validate((valid) => {
                 if (valid) {
-                    alert('submit!');
+                    axios({
+                        url: 'http://localhost:8080/cms/'+url,
+                        method: 'post',
+                        data: {
+                            content: this.$refs.content.value
+                        },
+                        transformRequest: [function (data) {
+                            // Do whatever you want to transform the data
+                            let ret = ''
+                            for (let it in data) {
+                                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
+                            }
+                            return ret
+                        }],
+                        headers: {
+                            'Content-Type': 'application/x-www-form-urlencoded'
+                        }
+                    })
+                    console.log(this.$refs.content.value)
+                    this.openSuccess("成功","反馈成功！")
+                    //this.$options.methods.openNotiSuccess.bind(this)();
+                    //alert('submit!');
                 } else {
                     console.log('error submit!!');
                     return false;
@@ -189,7 +223,7 @@ var Main = {
         console.log(file, fileList);
     },
     ClickToJump(targe){
-        window.open("http://localhost:8080/cms/" + targe);
+        window.location.href="http://localhost:8080/cms/" + targe;
     },
     handleDownload(row) {
         /*var url = window.location.protocol+"://"+window.location.host+":"+window.location.port+"/"*/

src/main/resources/templates/home/about.html

@@ -13,7 +13,35 @@
                 <el-col :md="4" :lg="4" :xl="4" class="hidden-sm-and-down">
                     <el-card th:include="dist/thymeleaf/layout :: userbox"></el-card>
                 </el-col>
-                <el-col :md="14" :lg="14" :xl="14" :sm="18" :xs="23" :offset="1"></el-col>
+                <el-col :md="14" :lg="14" :xl="14" :sm="18" :xs="23" :offset="1">
+                    <h2>作业提交系统</h2>
+                    <br>
+                    <ul>
+                        <h3>功能说明</h3>
+                        <li>自动识别未提交人员</li>
+                        <li>提供作业格式模板下载</li>
+                        <li>作业作者可以下载已提交的作业，作业保留一学期</li>
+                        <li>实现作业提交，支持多文件上传，文件自动命名为学号+姓名，省去大量烦恼</li>
+                    </ul>
+                    <br>
+                    <ul>
+                        <h3>技术说明</h3>
+                        <li>SpringBoot2.0 MVC后台开发框架，使用SpringJpa持久层api，底层为hibernate实现</li>
+                        <li>vue2.5前端框架，element2.1前端组件，前后端分离的开发方法</li>
+                        <li>用户名密码使用最高安全性的SHA加密算法进行存储，任何人无法获取</li>
+                        <li>具备完整开发和维护文档，提供错误码、数据字典</li>
+                        <li>URL为RESTful API风格，便于开发和维护</li>
+                        <li>异常统一管理</li>
+                    </ul>
+                    <br>
+                    <ul>
+                        <h3>友情链接</h3>
+                        <li><a href="http://web.fjy8018.top:8080/blog/">F嘉阳 博客</a></li>
+                        <li><a href="http://www.fjy8018.top:8080/orderbook/">订书系统</a></li>
+                        <li><a href="https://www.imis2.top/">班级网站</a></li>
+                        <li><a href="http://git.fjy8018.top:8080/users/sign_in">班级代码托管网站（私人）</a></li>
+                    </ul>
+                </el-col>
                 <el-col :md="5" :lg="5" :sm="5" :xl="5" class="hidden-xs-only"></el-col>
             </el-main>
             <el-footer th:include="dist/thymeleaf/layout :: footer"></el-footer>

src/main/resources/templates/home/admin.html

@@ -0,0 +1,194 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>后台</title>
+    <!--
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        -->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui@2.1.0/lib/theme-chalk/display.css">-->
+    <link rel="stylesheet" href="../../static/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>
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+<div id="app">
+    <el-container>
+        <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" @click="ClickToJump('about')">关于</el-menu-item>
+                    <el-menu-item index="4" @click="ClickToJump('feedback')">意见反馈</el-menu-item>
+                    <el-menu-item index="5"><a href="login.jsp">登出</a></el-menu-item>
+                </el-menu>
+            </el-header>
+            <el-main>
+                <el-col :md="4" :lg="4" :xl="4" class="hidden-sm-and-down">
+                    <el-card class="box-card">
+                        <div slot="header" class="clearfix">
+                            <span>用户名</span><br>
+                            <span>学号</span>
+                        </div>
+                        <div class="item">
+                            <el-button type="text" @click="ClickToJump('home')">首页</el-button><br>
+                            <el-button type="text" @click="ClickToJump('user')">个人中心</el-button><br>
+                            <el-button type="text" @click="ClickToJump('about')">关于</el-button><br>
+                            <el-button type="text" @click="ClickToJump('feedback')">意见反馈</el-button>
+                        </div>
+                    </el-card>
+                </el-col>
+                <el-col :md="12" :lg="12" :xl="12" :sm="16" :xs="23" :offset="1">
+                    <h4>添加老师</h4>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                        <el-form-item label="老师名字">
+                            <el-input v-model="formInline.user" placeholder="老师名字"></el-input>
+                        </el-form-item>
+                        <el-form-item label="用户号">
+                            <el-select v-model="formInline.region" placeholder="用户号">
+                                <el-option label="区域一" value="shanghai"></el-option>
+                                <el-option label="区域二" value="beijing"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="onSubmit">添加</el-button>
+                        </el-form-item>
+                    </el-form>
+                    <h4>添加课程</h4>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                        <el-form-item label="课程名">
+                            <el-input v-model="formInline.user" placeholder="课程名"></el-input>
+                        </el-form-item>
+                        <el-form-item label="教师名">
+                            <el-select v-model="formInline.region" placeholder="教师名">
+                                <el-option label="区域一" value="shanghai"></el-option>
+                                <el-option label="区域二" value="beijing"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="onSubmit">添加</el-button>
+                        </el-form-item>
+                    </el-form>
+                    <h4>添加作业</h4>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                        <el-form-item label="作业名称">
+                            <el-input v-model="formInline.user" placeholder="作业名称"></el-input>
+                        </el-form-item>
+                        <el-form-item label="模板文件名称">
+                            <el-select v-model="formInline.region" placeholder="模板文件名称">
+                                <el-option label="区域一" value="shanghai"></el-option>
+                                <el-option label="区域二" value="beijing"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="课程名称">
+                            <el-select v-model="formInline.region" placeholder="课程名称">
+                                <el-option label="区域一" value="shanghai"></el-option>
+                                <el-option label="区域二" value="beijing"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="存储文件夹">
+                            <el-input v-model="formInline.user" placeholder="存储文件夹"></el-input>
+                        </el-form-item>
+                        <el-form-item label="作业内容">
+                            <el-input v-model="formInline.user" placeholder="作业内容" type="textarea"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="onSubmit">添加</el-button>
+                        </el-form-item>
+                    </el-form>
+                    <h4>发布公告</h4>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                        <el-form-item label="公告内容">
+                            <el-input v-model="formInline.user" placeholder="公告内容" type="textarea"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="onSubmit">添加</el-button>
+                        </el-form-item>
+                    </el-form>
+                    <h4>添加管理员</h4>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                        <el-form-item label="管理员名">
+                            <el-input v-model="formInline.user" placeholder="管理员名"></el-input>
+                        </el-form-item>
+                        <el-form-item label="用户号">
+                            <el-select v-model="formInline.region" placeholder="用户号">
+                                <el-option label="区域一" value="shanghai"></el-option>
+                                <el-option label="区域二" value="beijing"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="onSubmit">添加</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+                <el-col :md="7" :lg="7" :sm="7" :xl="7" class="hidden-xs-only">
+                    <el-row>
+                        <el-col :span="24">
+                            <div class="grid-content">
+                                <el-card class="box-card hidden-xs-only">
+                                    <div slot="header" class="clearfix">
+                                        <span>用户反馈</span>
+                                    </div>
+                                    <div class="text item">
+                                        <el-table :data="feedbackData" style="width: 100%"
+                                                  :default-sort="{prop: 'time', order: 'descending'}">
+                                            <el-table-column prop="content" label="内容" sortable>
+                                            </el-table-column>
+                                            <el-table-column prop="time" label="时间" sortable>
+                                            </el-table-column>
+                                            <el-table-column prop="username" label="用户名" sortable>
+                                            </el-table-column>
+                                        </el-table>
+                                    </div>
+                                </el-card>
+                            </div>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <div class="grid-content">
+                                <el-card class="box-card hidden-xs-only">
+                                    <div slot="header" class="clearfix">
+                                        <span>近期登陆日志</span>
+                                    </div>
+                                    <div class="text item">
+                                        <el-table :data="logData" style="width: 100%"
+                                                  :default-sort="{prop: 'time', order: 'descending'}">
+                                            <el-table-column prop="username" label="用户名" sortable>
+                                            </el-table-column>
+                                            <el-table-column prop="header" label="请求头" sortable>
+                                            </el-table-column>
+                                            <el-table-column prop="time" label="时间" sortable>
+                                            </el-table-column>
+                                            <el-table-column prop="ip" label="ip地址" sortable>
+                                            </el-table-column>
+                                        </el-table>
+                                    </div>
+                                </el-card>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-main>
+            <el-footer>
+                <div class="footer">
+                    © 2018 作业提交系统
+                </div></el-footer>
+        </el-container>
+    </el-container>
+</div>
+<script src="../../static/js/admin.js"></script>
+<script src="../../static/js/msg.js"></script>
+</body>
+</html>

src/main/resources/templates/home/feedback.html

@@ -14,14 +14,17 @@
                     <el-card th:include="dist/thymeleaf/layout :: userbox"></el-card>
                 </el-col>
                 <el-col :md="14" :lg="14" :xl="14" :sm="18" :xs="23" :offset="1">
-                    <el-form :model="feedbackForm" ref="feedbackForm"  class="demo-ruleForm" action="/cms/home/dofeedback">
+                    <el-form :model="feedbackForm" ref="feedbackForm"  class="demo-ruleForm"
+                             method="POST"
+                             action="/cms/home/dofeedback">
                         <el-form-item label="反馈内容" prop="content" :rules="[
       { required: true, message: '反馈内容不能为空'}
     ]">
-                            <el-input type="textarea" v-model.number="feedbackForm.content" auto-complete="off"></el-input>
+                            <el-input type="textarea" v-model.number="feedbackForm.content"
+                                      auto-complete="off" name="content" ref="content"></el-input>
                         </el-form-item>
                         <el-form-item>
-                            <el-button type="primary" @click="submitForm('feedbackForm')">提交</el-button>
+                            <el-button type="primary" @click="submitForm('feedbackForm','home/dofeedback')">提交</el-button>
                             <el-button @click="resetForm('feedbackForm')">重置</el-button>
                         </el-form-item>
                     </el-form>

src/main/resources/templates/home/home.html

@@ -260,11 +260,24 @@
                                 <el-card class="box-card hidden-xs-only">
                                     <div slot="header" class="clearfix">
                                         <span>作业提交倒计时</span>
+                                        <span style="color: red"> 功能未完成</span>
                                     </div>
-                                    <div v-for="o in 4" :key="o" class="text item">
-                                        {{'倒计时 ' + o }}
+                                    <div class="text item">
+
+                                        <el-table :data="tableHomeworkData" style="width: 100%"
+                                                  :default-sort="{prop: 'coursename', order: 'descending'}">
+                                            <el-table-column prop="coursename" label="科目" sortable width="180">
+                                            </el-table-column>
+                                            <el-table-column label="倒计时" sortable>
+                                                <template slot-scope="scope">
+                                                    {{limitTime(scope.row)}}
+                                                </template>
+                                            </el-table-column>
+                                        </el-table>
+
+                                        <!--<span>{{ limitTime[0].coursename }}{{ limitTime[0].workname }}</span><br>
+                                       距离提交日期还有<span> {{ limitTime[0].time }}</span>天-->
                                     </div>
-                                </el-card>
                                 <!--<template>
                                     <el-table :data="tableData2" style="width: 100%">
                                         <el-table-column prop="date" label="作业提交倒计时">

src/main/resources/templates/home/home2.html

@@ -237,15 +237,15 @@
                                     </el-table-column>
                                     </el-table-column>
                                 </el-table>
-                                <el-form :model="feedbackForm" ref="feedbackForm"  class="demo-ruleForm">
+                                <el-form :model="feedbackForm" ref="feedbackForm"  class="demo-ruleForm" id="feedbackForm">
                                     <el-form-item label="反馈内容" prop="content" :rules="[
       { required: true, message: '反馈内容不能为空'}
     ]">
                                         <el-input type="textarea" v-model.number="feedbackForm.content"
-                                                  auto-complete="off"></el-input>
+                                                  auto-complete="off" ref="content"></el-input>
                                     </el-form-item>
                                     <el-form-item>
-                                        <el-button type="primary" @click="submitForm('feedbackForm')">提交</el-button>
+                                        <el-button type="primary" @click="submitForm('feedbackForm','http://localhost:8080/cms/home/dofeedback')">提交</el-button>
                                         <el-button @click="resetForm('feedbackForm')">重置</el-button>
                                     </el-form-item>
                                 </el-form>
@@ -263,14 +263,18 @@
                                         <span style="color: red"> 功能未完成</span>
                                     </div>
                                     <div class="text item">
-                                        <template  slot-scope="props">
-                                            <el-table :data="tableHomeworkData" style="width: 100%" :default-sort="{prop: 'worktime', order: 'descending'}">
+
+                                            <el-table :data="tableHomeworkData" style="width: 100%"
+                                                      :default-sort="{prop: 'coursename', order: 'descending'}">
                                                 <el-table-column prop="coursename" label="科目" sortable width="180">
                                                 </el-table-column>
-                                                <el-table-column @prop="limitTime(props.row)" label="日期" sortable width="180">
-                                                </el-table-column>
+                                                    <el-table-column label="倒计时" sortable>
+                                                        <template slot-scope="scope">
+                                                        {{limitTime(scope.row)}}
+                                                        </template>
+                                                    </el-table-column>
                                             </el-table>
-                                        </template>
+
                                         <!--<span>{{ limitTime[0].coursename }}{{ limitTime[0].workname }}</span><br>
                                        距离提交日期还有<span> {{ limitTime[0].time }}</span>天-->
                                     </div>