寫在前面：第一篇主要寫Vue，第二篇主要寫SpringBoot（可能沒第二篇了。。）

一、基本思維
整個系統所採用的是前後端分離的理念，vue負責頁面展示，SpringBoot負責業務邏輯處理，這樣在編寫的過程中很容易發現問題的所在以及給後期維護減少了許多麻煩。

二、部分截圖

四、Vue的入門
一、vue安裝。vue的安裝其實官網寫的很清楚了。這裡注意的是安裝過程中這個選項要選擇no。

二、Vue的架構

Index.html==>>main.js==>>app.vue==>>hello.vue，這個是vue的流動過程，我們在編寫自己的vue時，只需要在app.vue中寫好跳轉便可。

四、具體實現

1、主介面
位置在src-danger-main.vue，從主要程式碼( 不要了css部分)跟圖片結合來講。

<template>
<div class="main">
      <!--頭部-->
      <el-row :gutter="0">
          <!--頭部左邊-->
          <el-col :span="4">
            <div class="main-top main-top-left">
              <h1
 
>危險辨識系統</h1>
            </div>
            <!--頭部右邊-->
          </el-col>
          <el-col :span="20">
            <div class="main-top main-top-right">
              <h2>{{ username }},歡迎您!!!</h2>
            </div>
          </el-col>
      </el-row
 
>
      <!--中部-->
      <el-row>
         <!--中部左邊-->
        <el-col :span="4">
          <div class="main-middle-left">
            <el-menu default-active="2" class="main-middle-left-menu"  theme="dark" router>
              <el-menu-item index="/DeptInfo">單位資訊</el-menu-item>
              <el-menu-item index="/FileQuire">法規檔案查詢</el-menu-item>
              <el-menu-item index="/CriticalQuire">臨界值查詢</el-menu-item>
              <el-menu-item index="/DangerQuire">危險源辨識</el-menu-item>
              <el-menu-item index="/RecordQuire">查詢記錄</el-menu-item>
            </el-menu>
            <el-menu default-active="2" class="el-menu-vertical-demo"  theme="dark" >   
             <el-menu-item index="1" @click="end">
              退出系統
               </el-menu-item>

             </el-menu>
          </div><!-- 中部左邊部分結束-->
        </el-col>

         <!--中部右邊-->
      <div class="main-middle-right">
      <transition name="fade" mode="out-in">
                            <router-view></router-view>
                        </transition>
      </div>

      </el-row>

</div>
</template>
<script>
export default {
  data () {
    return {
      isrouter:true,
      username:this.$store.state.username
    }
  },
  methods:{
      end(){

        this.$confirm('確定退出系統嗎？','提示',{})
        .then(() =>{
          this.$store.state.username='遊客';
           this.$router.push('/');
        }).catch(() =>{

        });
      },
       isUser(){
         if(this.$store.state.username=='遊客'){
          this.$alert('對不起，請先登入', '提示', {
          confirmButtonText: '去登入',
          type: 'warning'
        }).then(() => {
          this.$router.push('/')
        }).catch(() => {    
        });
          }

          }
  },
  mounted(){
      this.isUser();
      this.$router.push({ path: '/DeptInfo' });
  }

}
</script>

上圖再加上程式碼塊裡的註釋應該很容易理解了整體結構。下面具體分析：
注意，希望結合著element-ui的文件來看這篇東西效果更好.
主介面的頭部左邊只是一個系統標題，寫死的，我們看頭部右邊實現

 <!--頭部右邊-->
          </el-col>
          <el-col :span="20">
            <div class="main-top main-top-right">
              <h2>{{ username }},歡迎您!!!</h2>
            </div>
          </el-col>

這個“陸濤，歡迎您”，陸濤是我在使用者登陸時就獲取了他的使用者名稱，然後用vuex儲存這個名字，也就是this.$store.state.username，我們去看看vuex裡的資訊，位置是src-vuex-stroe.js（Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化，要先在根目錄install才能用）

這裡我設定了使用者名稱為遊客是變相地簡化這個系統安全效能，也就是未經登陸的使用者是不能通過url直接進入系統的。陸濤就是存在這裡了。

 isUser(){
         if(this.$store.state.username=='遊客'){
          this.$alert('對不起，請先登入', '提示', {
          confirmButtonText: '去登入',
          type: 'warning'
        }).then(() => {
          this.$router.push('/')
        }).catch(() => {    
        });

以上的程式碼就是main.vue裡判斷是不是非使用者，非使用者直接彈框讓他跳轉去登陸介面。那如何實現在開啟主介面時就引用這個isUser（）方法呢，vue提供了mounted（）{}給我們，如下程式碼，這個就是能夠在進去這個vue時自動執行裡面的isUser（）了。

 mounted(){
      this.isUser();
      this.$router.push({ path: '/DeptInfo' });
  }

然後我們看看主介面的中部左邊和右邊

  <!--中部左邊-->
        <el-col :span="4">
          <div class="main-middle-left">
            <el-menu default-active="2" class="main-middle-left-menu"  theme="dark" router>
              <el-menu-item index="/DeptInfo">單位資訊</el-menu-item>
              <el-menu-item index="/FileQuire">法規檔案查詢</el-menu-item>
              <el-menu-item index="/CriticalQuire">臨界值查詢</el-menu-item>
              <el-menu-item index="/DangerQuire">危險源辨識</el-menu-item>
              <el-menu-item index="/RecordQuire">查詢記錄</el-menu-item>
            </el-menu>
            <el-menu default-active="2" class="el-menu-vertical-demo"  theme="dark" >   
             <el-menu-item index="1" @click="end">
              退出系統
               </el-menu-item>
             </el-menu>
          </div><!-- 中部左邊部分結束-->
        </el-col>
         <!--中部右邊-->
      <div class="main-middle-right">
      <transition name="fade" mode="out-in">
                            <router-view></router-view>
                        </transition>
      </div>

點選左邊的選單，然後內容在右邊展示。
先說中部右邊，回頭看可以看到我在mounted(){ this.$router.push({ path: ‘/DeptInfo’ });是直接設定跳轉到單位資訊的，所以一進去系統，右邊自動顯示單位資訊內容。
再來講左邊的選單，這裡用的是el-menu，每個功能模組就對應自己的url，然後用vue-router來路由跳轉，直接跳轉到對應功能的vue，這裡也可以看出vue的強大，每個功能都能寫成一個vue，然後在頁面的某個部分引用即可，在後期維護時對整體的分佈是十分清晰的。

下一篇結合“法規檔案查詢”來講一下某一些重要的功能。