前后端交互

System/src/components/Home.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <nav-menu></nav-menu>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import NavMenu from './common/NavMenu'
+export default {
+  name: 'Home',
+  components: {NavMenu}
+}
+</script>
+
+<style scoped>
+
+</style>
+

System/src/components/Login.vue

@@ -12,7 +12,7 @@
                 auto-complete="off" placeholder="密码"></el-input>
     </el-form-item>
     <el-form-item style="width: 100%">
-      <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
+      <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login" >登录</el-button>
     </el-form-item>
   </el-form>
   </body>
@@ -22,14 +22,13 @@
 <script>
 
 import store from "../store";
-
 export default {
   name: 'Login',
   data () {
     return {
       loginForm: {
         username: store.state.user.username,
-        password: ''
+        password: store.state.user.password
       },
       responseResult: []
     }

System/src/components/combatants/Combatants.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-table :data="tableData"
+            style="width: 100%"
+            stripe>
+    <el-table-column prop="name" label="部门" size="medium" align="center"></el-table-column>
+    <el-table-column prop="establish" label="成立日期" align="center"></el-table-column>
+    <el-table-column prop="head" label="负责人" align="center"></el-table-column>
+    <el-table-column prop="chief" label="人员总数" align="center"></el-table-column>
+    <el-table-column prop="incumbent" label="在位人员数" align="center"></el-table-column>
+    <el-table-column prop="departure" label="离位人员数" align="center"></el-table-column>
+    <el-table-column prop="state" label="战备状态" align="center"></el-table-column>
+    <el-table-column label="操作" align="center">
+      <!--
+      slot-scope：作用域插槽，可以获取表格数据
+        scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
+      -->
+      <template slot-scope="scope">
+        <el-button type="text" size="medium" @click="handleUpdate(scope.row)">编辑</el-button>
+        <el-button type="text" size="medium" @click="handleDelete(scope.row)">查看</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "Combatants",
+  data() {
+    return {
+      tableData: [{
+        name: '作战部', establish: '', head: '', chief: '', incumbent: '', departure: '', state: ''
+      }, {
+        name: '航空部', establish: '', head: '', chief: '', incumbent: '', departure: '', state: ''
+      }, {
+        name: '航海部', establish: '', head: '', chief: '', incumbent: '', departure: '', state: ''
+      }, {
+        name: '武器部', establish: '', head: '', chief: '', incumbent: '', departure: '', state: ''
+      }, {
+        name: '轮机部', establish: '', head: '', chief: '', incumbent: '', departure: '', state: ''
+      }, {
+        name: '医务部', establish: '', head: '', chief: '', incumbent: '', departure: '', state: ''
+      }, {
+        name: '供应部', establish: '', head: '', chief: '', incumbent: '', departure: '', state: ''
+      }, {
+        name: '安全部', establish: '', head: '', chief: '', incumbent: '', departure: '', state: ''
+      }, {
+        name: '维修部', establish: '', head: '', chief: '', incumbent: '', departure: '', state: ''
+      }],
+      responseResult: []
+    }
+  },
+  mounted() {
+    this.getCombatants()
+  },
+  methods: {
+    getCombatants () {
+      this.$axios
+        .post('/combatants', {
+          request: 'init'
+        })
+        .then(response => {
+          if (response !== null){
+            this.responseResult = response.data
+            console.log(JSON.parse(JSON.stringify(this.responseResult)))
+            this.responseResult = JSON.parse(JSON.stringify(this.responseResult))
+            for (let i = 0; i < this.responseResult.length; i++){
+              for (let j = 0; j < this.tableData.length; j++){
+                if(this.responseResult.at(i).name === this.tableData.at(j).name){
+                  this.tableData.at(j).establish = this.responseResult.at(i).establish
+                  this.tableData.at(j).head = this.responseResult.at(i).head
+                  this.tableData.at(j).chief = this.responseResult.at(i).chief
+                  this.tableData.at(j).departure = this.responseResult.at(i).departure
+                  this.tableData.at(j).incumbent = this.responseResult.at(i).incumbent
+                  this.tableData.at(j).state = this.responseResult.at(i).state
+                  break
+                }
+              }
+            }
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

System/src/components/combatants/CombatantsIndex.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-container>
+    <el-aside style="width: 200px;margin-top: 20px">
+      <switch></switch>
+      <SideMenu></SideMenu>
+    </el-aside>
+    <el-main>
+      <Combatants class="combatants-area"></Combatants>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import SideMenu from "./SideMenu";
+import Combatants from "./Combatants";
+export default {
+  name: "CombatantsIndex",
+  components: {SideMenu, Combatants}
+}
+</script>
+
+<style scoped>
+  .combatants-area {
+    width: 990px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>

System/src/components/combatants/SideMenu.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-menu
+    class="categories"
+    default-active="0"
+    select="handleSelect"
+    active-text-color="red">
+    <el-menu-item index="0">
+      <i class="el-icon-menu"></i>
+      <span slot="title">部总览</span>
+    </el-menu-item>
+    <el-menu-item index="1">
+      <i class="el-icon-menu"></i>
+      <span slot="title">作战部</span>
+    </el-menu-item>
+    <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-menu"></i>
+      <span slot="title">航海部</span>
+    </el-menu-item>
+    <el-menu-item index="4">
+      <i class="el-icon-menu"></i>
+      <span slot="title">武器部</span>
+    </el-menu-item>
+    <el-menu-item index="5">
+      <i class="el-icon-menu"></i>
+      <span slot="title">轮机部</span>
+    </el-menu-item>
+    <el-menu-item index="6">
+      <i class="el-icon-menu"></i>
+      <span slot="title">医务部</span>
+    </el-menu-item>
+    <el-menu-item index="7">
+      <i class="el-icon-menu"></i>
+      <span slot="title">供应部</span>
+    </el-menu-item>
+    <el-menu-item index="8">
+      <i class="el-icon-menu"></i>
+      <span slot="title">安全部</span>
+    </el-menu-item>
+    <el-menu-item index="9">
+      <i class="el-icon-menu"></i>
+      <span slot="title">维修部</span>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+export default {
+  name: 'SideMenu'
+}
+</script>
+
+<style scoped>
+.categories {
+  position: fixed;
+  margin-left: 50%;
+  left: -900px;
+  top: 100px;
+  width: 150px;
+}
+</style>
+

System/src/components/common/NavMenu.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-menu
+    :default-active="'/index'"
+    router
+    mode="horizontal"
+    background-color="white"
+    text-color="#222"
+    active-text-color="red"
+    style="min-width: 1300px">
+    <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
+      {{ item.navItem }}
+    </el-menu-item>
+    <a href="#nowhere" style="color: #222;float: right;padding: 20px;">更多功能</a>
+    <i class="el-icon-menu" style="float:right;font-size: 45px;color: #222;padding-top: 8px"></i>
+    <span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">White Jotter - Your Mind Palace</span>
+  </el-menu>
+</template>
+
+<script>
+export default {
+  name: 'NavMenu',
+  data () {
+    return {
+      navList: [
+        {name: '/index', navItem: '首页'},
+        {name: '/combatants', navItem: '作战人员'},
+        {name: '/weaponry', navItem: '武器装备'},
+        {name: '/admin', navItem: '管理中心'}
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+a{
+  text-decoration: none;
+}
+
+span {
+  pointer-events: none;
+}
+</style>
+

System/src/main.js

@@ -18,14 +18,12 @@ Vue.config.productionTip = false
 Vue.use(ElementUI)
 
 
+
 router.beforeEach((to, from, next) => {
     if (to.meta.requireAuth) {
-      console.log(store.state.user.username)
       if (store.state.user.username !== "") {
-        console.log("success")
         next()
       } else {
-        console.log("fail")
         next({
           path: '/login',
           query: {redirect: to.fullPath}
@@ -37,8 +35,6 @@ router.beforeEach((to, from, next) => {
   }
 )
 
-store.state.user.username = ""
-
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

System/src/router/index.js

@@ -3,6 +3,8 @@ import Router from 'vue-router'
 // 导入刚才编写的组件
 import AppIndex from '../components/home/AppIndex'
 import Login from '../components/Login'
+import Home from "../components/Home"
+import CombatantsIndex from "../components/combatants/CombatantsIndex";
 
 Vue.use(Router)
 
@@ -21,14 +23,30 @@ export default new Router({
       redirect: '/login'
     },
     {
-      path: '/index',
+      path: '/home',
-      name: 'AppIndex',
+      name: 'Home',
-      component: AppIndex,
+      component: Home,
-      meta: {
+      redirect: '/index',
-        // 在需要拦截的路由中加一条元数据，设置一个 requireAuth 字段
+      children: [
-        requireAuth: true
+        {
-      }
+          path: '/index',
-    }
+          name: 'AppIndex',
+          component: AppIndex,
+          meta: {
+            // 在需要拦截的路由中加一条元数据，设置一个 requireAuth 字段
+            requireAuth: true
+          }
+        },
+        {
+          path: '/combatants',
+          name: 'Combatants',
+          component: CombatantsIndex,
+          meta: {
+            requireAuth: true
+          }
+        }
+      ]
+    },
   ]
 })
 

demo/pom.xml

@@ -16,10 +16,20 @@
     </properties>
 
     <dependencies>
+        <dependency>
+            <groupId>net.sf.json-lib</groupId>
+            <artifactId>json-lib</artifactId>
+            <version>2.4</version>
+            <classifier>jdk15</classifier>
+        </dependency>
+        <dependency>
+            <groupId>com.google.code.gson</groupId>
+            <artifactId>gson</artifactId>
+        </dependency>
         <dependency>
             <groupId>org.apache.commons</groupId>
             <artifactId>commons-lang3</artifactId>
-            <version>3.4</version>
+            <version>3.12.0</version>
         </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>

demo/src/main/java/com/example/demo/DemoApplication.java

@@ -1,9 +1,33 @@
 package com.example.demo;
 
-import com.example.demo.login.User;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 
+
+/**
+ *      ......................我佛慈悲......................
+ *                            _oo0oo_
+ *                           o8888888o
+ *                          88\" . \"88
+ *                           (| -_- |)
+ *                          0\\  =  /0
+ *                         ___/‘---’\\___
+ *                       .' \\|       |/ '.
+ *                     / \\\\|||  :  |||// \\
+ *                      / _||||| -卍-|||||_ \\
+ *                  |   | \\\\\\  -  /// |   |
+ *                   | \\_|  ''\\---/''  |_/ |
+ *                   \\  .-\\__  '-'  ___/-. /
+ *                ___'. .'  /--.--\\  '. .'___
+ *             .\"\" ‘<  ‘.___\\_<|>_/___.’ >’ \"\".
+ *            | | :  ‘- \\‘.;‘\\ _ /’;.’/ - ’ : | |
+ *            \\  \\ ‘_.   \\_ __\\ /__ _/   .-’ /  /
+ *          =====‘-.____‘.___ \\_____/___.-’___.-’=====
+ *                            ‘=---=’
+ *
+ *      ..................佛祖开光 ,永无BUG...................
+ *
+ */
 @SpringBootApplication
 public class DemoApplication {
 

demo/src/main/java/com/example/demo/JDBC/ConnectDB.java

@@ -1,7 +1,23 @@
 package com.example.demo.JDBC;
 
+import com.google.gson.JsonArray;
+import com.google.gson.JsonObject;
+
 import java.sql.*;
 
+
+/**
+ *      佛曰:
+ *              写字楼里写字间，写字间里程序员；
+ *              程序人员写程序，又拿程序换酒钱。
+ *              酒醒只在网上坐，酒醉还来网下眠；
+ *              酒醉酒醒日复日，网上网下年复年。
+ *              但愿老死电脑间，不愿鞠躬老板前；
+ *              奔驰宝马贵者趣，公交自行程序员。
+ *              别人笑我忒疯癫，我笑自己命太贱；
+ *              不见满街漂亮妹，哪个归得程序员？
+ */
+
 public class ConnectDB {
     public Connection getConn()
     {
@@ -29,13 +45,13 @@ public class ConnectDB {
         }
         return conn;
     }
+    Connection conn = getConn();//此处为通过自己写的方法getConn()获得连接
+    PreparedStatement preparedStatement = null;
 
     public String loginSystem(String loginname)
     {
         String sql = "select * from test.user where username = ?";
 
-        Connection conn = getConn();//此处为通过自己写的方法getConn()获得连接
-        PreparedStatement preparedStatement = null;
         String username = "";
         String password = "";
         try
@@ -57,4 +73,23 @@ public class ConnectDB {
         }
         return (password);
     }
+
+    public JsonArray initCombatants() throws SQLException {
+        String sql = "select * from combat_system.combatants";
+        preparedStatement = conn.prepareStatement(sql);
+        ResultSet rs = preparedStatement.executeQuery();
+        JsonArray Departments = new JsonArray();
+        while(rs.next()){
+            JsonObject Department = new JsonObject();
+            Department.addProperty("name",rs.getString(2));
+            Department.addProperty("establish",rs.getString(3));
+            Department.addProperty("head", rs.getString(4));
+            Department.addProperty("chief", rs.getString(5));
+            Department.addProperty("incumbent", rs.getString(6));
+            Department.addProperty("departure", rs.getString(7));
+            Department.addProperty("state", rs.getString(8));
+            Departments.add(Department);
+        }
+        return Departments;
+    }
 }

demo/src/main/java/com/example/demo/home/combatants/CombatantsController.java

@@ -0,0 +1,47 @@
+package com.example.demo.home.combatants;
+
+import com.example.demo.JDBC.ConnectDB;
+
+import org.springframework.web.bind.annotation.*;
+
+import java.sql.SQLException;
+
+
+/**
+ *
+ * ━━━━━━神兽出没━━━━━━
+ * 　　　┏┓　　　┏┓
+ * 　　┏┛┻━━━┛┻┓
+ * 　　┃　　　　　　　┃
+ * 　　┃　　　━　　　┃
+ * 　　┃　┳┛　┗┳　┃
+ * 　　┃　　　　　　　┃
+ * 　　┃　　　┻　　　┃
+ * 　　┃　　　　　　　┃
+ * 　　┗━┓　　　┏━┛Code is far away from bug with the animal protecting
+ * 　　　　┃　　　┃    神兽保佑,代码无bug
+ * 　　　　┃　　　┃
+ * 　　　　┃　　　┗━━━┓
+ * 　　　　┃　　　　　　　┣┓
+ * 　　　　┃　　　　　　　┏┛
+ * 　　　　┗┓┓┏━┳┓┏┛
+ * 　　　　　┃┫┫　┃┫┫
+ * 　　　　　┗┻┛　┗┻┛
+ *
+ * ━━━━━━感觉萌萌哒━━━━━━
+ */
+
+@CrossOrigin
+@RestController
+@ResponseBody
+public class CombatantsController {
+
+    @PostMapping(value = "/combatants")
+    public String initCombatants() throws SQLException {
+        ConnectDB connectDB = new ConnectDB();
+        System.out.println("init");
+        System.out.println(connectDB.initCombatants().toString());
+        return connectDB.initCombatants().toString();
+    }
+
+}

demo/src/main/java/com/example/demo/home/combatants/CombatantsResult.java

@@ -0,0 +1,12 @@
+package com.example.demo.home.combatants;
+
+import com.google.gson.JsonArray;
+
+
+public class CombatantsResult {
+    private JsonArray Departments;
+
+    public CombatantsResult(JsonArray Department) {
+        this.Departments = Department;
+    }
+}

demo/src/main/java/com/example/demo/home/combatants/Department.java

@@ -0,0 +1,14 @@
+package com.example.demo.home.combatants;
+
+import com.google.gson.JsonArray;
+import com.google.gson.JsonObject;
+
+
+public class Department {
+
+    int id;
+
+    JsonArray departments = new JsonArray();
+
+
+}

demo/src/main/java/com/example/demo/login/LoginController.java

@@ -7,6 +7,25 @@ import org.springframework.web.bind.annotation.*;
 import org.springframework.web.util.HtmlUtils;
 
 import javax.servlet.http.HttpSession;
+import java.sql.SQLException;
+
+/**
+ * ┌───┐   ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┐
+ * │Esc│   │ F1│ F2│ F3│ F4│ │ F5│ F6│ F7│ F8│ │ F9│F10│F11│F12│ │P/S│S L│P/B│  ┌┐    ┌┐    ┌┐
+ * └───┘   └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┘  └┘    └┘    └┘
+ * ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───────┐ ┌───┬───┬───┐ ┌───┬───┬───┬───┐
+ * │~ `│! 1│@ 2│# 3│$ 4│% 5│^ 6│& 7│* 8│( 9│) 0│_ -│+ =│ BacSp │ │Ins│Hom│PUp│ │N L│ / │ * │ - │
+ * ├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─────┤ ├───┼───┼───┤ ├───┼───┼───┼───┤
+ * │ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{ [│} ]│ | \ │ │Del│End│PDn│ │ 7 │ 8 │ 9 │   │
+ * ├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤ └───┴───┴───┘ ├───┼───┼───┤ + │
+ * │ Caps │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter  │               │ 4 │ 5 │ 6 │   │
+ * ├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────────┤     ┌───┐     ├───┼───┼───┼───┤
+ * │ Shift  │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│  Shift   │     │ ↑ │     │ 1 │ 2 │ 3 │   │
+ * ├─────┬──┴─┬─┴──┬┴───┴───┴───┴───┴───┴──┬┴───┼───┴┬────┬────┤ ┌───┼───┼───┐ ├───┴───┼───┤ E││
+ * │ Ctrl│    │Alt │         Space         │ Alt│    │    │Ctrl│ │ ← │ ↓ │ → │ │   0   │ . │←─┘│
+ * └─────┴────┴────┴───────────────────────┴────┴────┴────┴────┘ └───┴───┴───┘ └───────┴───┴───┘
+ */
+
 
 @CrossOrigin
 @RestController
@@ -17,7 +36,7 @@ public class LoginController {
     UserService userService;
 
     @PostMapping(value = "/login")
-    public Result login(@RequestBody User requestUser, HttpSession session) {
+    public Result login(@RequestBody User requestUser, HttpSession session) throws SQLException {
         // 对 html 标签进行转义，防止 XSS 攻击
         String username = requestUser.getUsername();
         username = HtmlUtils.htmlEscape(username);
@@ -31,13 +50,9 @@ public class LoginController {
         if (!pwd.equals(password)) {
             String message = "账号密码错误";
             System.out.println(message);
-            String a = (String) session.getAttribute("user");
-            System.out.println(a);
             return new Result(400);
         } else {
             session.setAttribute("user", username);
-            String a = (String) session.getAttribute("user");
-            System.out.println(a);
             return new Result(200);
         }
 

demo/src/main/java/com/example/demo/login/LoginInterceptor.java

@@ -7,6 +7,31 @@ import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import javax.servlet.http.HttpSession;
 
+/**
+ *
+ *           _____                    _____                    _____                    _____
+ *          /\    \                  /\    \                  /\    \                  /\    \
+ *         /::\____\                /::\    \                /::\    \                /::\    \
+ *        /:::/    /                \:::\    \              /::::\    \              /::::\    \
+ *       /:::/    /                  \:::\    \            /::::::\    \            /::::::\    \
+ *      /:::/    /                    \:::\    \          /:::/\:::\    \          /:::/\:::\    \
+ *     /:::/____/                      \:::\    \        /:::/__\:::\    \        /:::/__\:::\    \
+ *    /::::\    \                      /::::\    \      /::::\   \:::\    \      /::::\   \:::\    \
+ *   /::::::\    \   _____    ____    /::::::\    \    /::::::\   \:::\    \    /::::::\   \:::\    \
+ *  /:::/\:::\    \ /\    \  /\   \  /:::/\:::\    \  /:::/\:::\   \:::\____\  /:::/\:::\   \:::\    \
+ * /:::/  \:::\    /::\____\/::\   \/:::/  \:::\____\/:::/  \:::\   \:::|    |/:::/__\:::\   \:::\____\
+ * \::/    \:::\  /:::/    /\:::\  /:::/    \::/    /\::/   |::::\  /:::|____|\:::\   \:::\   \::/    /
+ *  \/____/ \:::\/:::/    /  \:::\/:::/    / \/____/  \/____|:::::\/:::/    /  \:::\   \:::\   \/____/
+ *           \::::::/    /    \::::::/    /                 |:::::::::/    /    \:::\   \:::\    \
+ *            \::::/    /      \::::/____/                  |::|\::::/    /      \:::\   \:::\____\
+ *            /:::/    /        \:::\    \                  |::| \::/____/        \:::\   \::/    /
+ *           /:::/    /          \:::\    \                 |::|  ~|               \:::\   \/____/
+ *          /:::/    /            \:::\    \                |::|   |                \:::\    \
+ *         /:::/    /              \:::\____\               \::|   |                 \:::\____\
+ *         \::/    /                \::/    /                \:|   |                  \::/    /
+ *          \/____/                  \/____/                  \|___|                   \/____/
+ */
+
 public class LoginInterceptor implements HandlerInterceptor {
     @Override
     public boolean preHandle (HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {