Springcloud微服務項目——人力資源管理(HRM)Day03 後臺服務前端的搭建&機構類型CRUD&機構入駐

前言

之前我們做了後臺的CRUD 今天我們來實現後臺前端的CRUD

今日任務

後臺管理前端搭建-系統管理

搭建項目

前端我們採用的是 vue + elementui來實現 因爲這裏我們不是專業的前端 所以我們就直接用idea寫就可以了

前端的界面就不需要我們去編寫了 我們只需要在網上下載一個前端的模板就可以了 這裏我也給大家提供一個我用的模板比較簡潔
碼雲地址：

---

首先我們創建一個靜態的Web工程 hrm-web-parent 作爲父工程
因爲我們之後還會有許多的web工程 所以就需要統一的進行管理

---

創建一個子模塊 hrm-web-system 作爲後臺服務的前端

我們將項目中的目錄拷貝到這個模塊中

也可以直接在碼雲上克隆下來

https://gitee.com/leryoo/vue_template.git`

在控制檯中執行命令 npm install

如果覺得慢的話可以去配置淘寶鏡像 但是我覺得這樣就ok了 所以我就不配了

啓動項目 npm run dev

修改設置

如果需要改端口的在這個位置改

改名字在這個位置


我們今天暫時還用不到登錄模塊 可以先將登錄那塊的代碼先註釋掉 這樣方便我們調試代碼

---

編寫界面 以租戶類型爲例

數據庫結構

接下來我們在views中創建一個文件夾sysmanage 將module文件夾中的department.vue文件改爲機構類型文件tenantType.vue

將文件中所有的Department替換成TenantType 小寫的也替換一下

下一步將分頁查詢的地址換成你自己的地址

因爲我們是通過網關訪問的 所以我們還需要將main.js中的全局路徑改一下 改成網關的訪問路勁

然後在 router.js中添加路由

注意 ：這兩個地方的地址要和之前我們用postman測試的後臺接口的地址一樣

跨域問題

然後我們啓動服務 訪問機構類型 會報一個錯

這是什麼問題呢
沒錯 就是跨域問題 同源策略

同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。所以xyz.com下的js腳本採用ajax讀取abc.com裏面的文件數據是會被拒絕的。

同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。

解決

處理同源方式的種類有很多種 一種是在Controller的類上加一個註解@CrossOrigin
但是這種方法有一點不好就是 如果類有很多的話就很麻煩 而且也將這樣也將代碼耦合在了我們的程序中了

跨域配置 在zuul進行配置
雖然原理比較複雜 但是操作起來卻比較簡單

瀏覽器端都有瀏覽器自動完成，我們無需操心
服務端可以通過攔截器統一實現，不必每次都去進行跨域判定的編寫

事實上，SpringMVC已經幫我們寫好了CORS的跨域過濾器：CorsFilter ,內部已經實現了剛纔所講的判定邏輯，我們直接用就好了 這樣也能實現解耦

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允許的域,不要寫*，否則cookie就無法使用了
        config.addAllowedOrigin("http://127.0.0.1:6001");
        config.addAllowedOrigin("http://localhost:6001");
        //2) 是否發送Cookie信息
        config.setAllowCredentials(true);
        //3) 允許的請求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允許的頭信息
        config.addAllowedHeader("*");
        //2.添加映射路徑，我們攔截一切請求
        UrlBasedCorsConfigurationSource configSource = new
                UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

說明：
該類是寫到zuul網關的服務中的

結果

---

高級查詢

後臺首先是BaseQuery文件

---

第一種方法

設置查詢條件通過EntityWrapper
只支持簡單的高級查詢 不能返回關聯對象

原來我們的分頁查詢方法是這樣的

沒有條件查詢 現在我們需要條件高級查詢
selectPage這個方法有兩種

我們之前用的是第一種 只傳一個page的
我們現在選擇有兩個參數的

Wrapper是什麼

Wrapper：條件構造器

實體包裝器，用於處理 sql 拼接，排序，實體參數查詢等！
補充說明： 使用的是數據庫字段，不是Java屬性!

EntityWrapper ：實體包裝器 繼承 Wrapper
我們點到Wrapper裏面
CTRL+O 查看文檔結構

具體詳情 請參考mybatisplus官網

@PostMapping("/list")
public PageList<TenantType> json(@RequestBody TenantTypeQuery query)
{
    Page<TenantType> page = new Page<TenantType>(query.getPage(),query.getRows());
    //分頁攜帶查詢條件EntityWrapper keywords要作用於name或者descrition
    EntityWrapper<TenantType> wrapper = new EntityWrapper<>();
    //wrapper.eq() 相等
    wrapper.like("name",query.getKeyword()) //模糊查詢
            .or()
            .like("description",query.getKeyword());

    page = tenantTypeService.selectPage(page,wrapper);
    return new PageList<TenantType>(page.getTotal(),page.getRecords());
}

說明：

第二種方法

自己寫sql
如果要返回關聯對象 只能用這種方法
Controller層

@PostMapping("/list")
public PageList<TenantType> json(@RequestBody TenantTypeQuery query){
    return tenantTypeService.selectPageLiset(query);
}

Service層 這裏我直接寫實現類 接口就不寫了

@Autowired
private TenantTypeMapper tenantTypeMapper;
@Override
public PageList<TenantType> selectPageLiset(TenantTypeQuery query) {
    //作爲分頁條件傳入
    Page<TenantType> page = new Page<TenantType>(query.getPage(),query.getRows());

    //查詢得到當前頁數據
    List<TenantType> tenantTypes = tenantTypeMapper.loadPageLiset(page, query);

    //分頁條件中返回了總數
//把總數+當前頁數據
    return new PageList<TenantType>(page.getTotal(),tenantTypes);
}

Mapper

/**
 *
 * @param page 通過page傳遞分頁條件，自動做分頁
 * @param query 查詢條件，需要自己對查詢進行封裝
 * @return 通過list返回當前頁數據
 */
List<TenantType> loadPageLiset(Page<TenantType> page, TenantTypeQuery query);

Mapper.xml

<!--
   List<TenantType> loadPageLiset(Page<TenantType> page, TenantTypeQuery query);
    分頁的分頁插件會幫我們做，製作高級查詢
    傳入參數也不用自己寫
    這樣我們就能通過resultMap返回關聯對象了
-->
<select id="loadPageLiset" resultType="TenantType">
    select * from t_tenant_type 
    <include refid="whereSql"></include>
</select>
<!--
    不知道是要獲取keyword參數還是獲取query裏面keyword
    1)如果是普通參數直接獲取值
    2）如果是對象參數，要獲取裏面的屬性
-->
<sql id="whereSql">
    <where>
          <if test="keyword!=null and keyword!=''">
              and (name like concat('%',#{keyword},'%') or description like concat('%',#{keyword},'%'))
          </if>
    </where>
</sql>

這樣我們就能通過resultMap返回關聯對象了

---

其他使用請參考官方文檔添加鏈接描述

機構類型的增刪改

刪除

前端只需要修改

訪問地址就ok了


刪除成功！

增加和修改

同樣的 只需要改一個地址就好了

成功！

---

機構管理(tenant)

由於是saas系統,很多東西都是屬於機構(租戶)的.先要把機構管理做了
系統一啓動就有一個超級租戶（系統運營方），有個超級管理員。擁有所有權限。
機構入駐進來需要一個超級管理員，擁有租戶所有套餐的所有權限。

前端代碼

和之前你的一樣 複製 然後替換 就不再寫了

數據庫結構

後端代碼

和之前一樣的操作 先生成代碼 然後需要修改domain裏面的兩個關聯對象

然後步驟都是和之前的是一樣的 我們需要重新編寫分頁查詢語句 自定義SQL

Controller

Service

Mapper.xml

<sql id="whereSql">
   <where>
       <if test="keyword!=null and keyword!=''">

           and t.companyName like concat('%',#{keyword},"%")
       </if>
   </where>
</sql>
<!--List<Tenant> loadPageList(Page<Tenant> page, TenantQuery query);-->
<select id="loadPageList" resultMap="TenantMap">
   SELECT
   t.*, type.id tid,
   type. NAME tname,
   e.id eid,e.realName
   FROM
   t_tenant t
   LEFT JOIN t_tenant_type type ON t.tenant_type = type.id
   LEFT JOIN t_employee e on t.admin_id = e.id
   <include refid="whereSql"></include>
</select>

<resultMap id="TenantMap" type="Tenant">
   <id column="id" property="id" />
   <result column="tenant_type" property="tenantType" />
   <result column="companyName" property="companyName" />
   <result column="companyNum" property="companyNum" />
   <result column="registerTime" property="registerTime" />
   <result column="state" property="state" />
   <result column="address" property="address" />
   <result column="logo" property="logo" />
   <result column="admin_id" property="adminId" />

   <!-- 機構類型多對一關聯-->
   <association property="type" javaType="TenantType">
       <id column="tid" property="id" />
       <result column="tname" property="name" />
   </association>

   <!--管理員的關聯查詢-->
   <association property="admin" javaType="Employee">
       <id column="eid" property="id" />
       <result column="realName" property="realName" />
   </association>
</resultMap>

這也就完成了租戶的顯示功能
租戶的增刪改和租戶類型的差不多就不寫了

需要注意的是 刪除的時候 需要刪除中間與租戶的中間表

---

機構入駐

界面

傳遞的參數

爲了方便接受參數 所以進行admin封裝
後臺service

這樣就完成了租戶的入駐

代碼已上傳碼雲
後端：https://gitee.com/leryoo/hrm-parent.git
前端：https://gitee.com/leryoo/hrm-web-parent.git