前言

之前我们做了后台的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

Springcloud微服务项目——人力资源管理(HRM)Day03 后台服务前端的搭建&机构类型CRUD&机构入驻

后台管理前端搭建-系统管理

搭建项目

修改设置

编写界面以租户类型为例

数据库结构

跨域问题

解决

高级查询

第一种方法

Wrapper是什么

第二种方法

机构类型的增删改

删除

增加和修改

机构管理(tenant)

前端代码

数据库结构

后端代码

机构入驻

前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】

Spring data JPARepository的一些方法&&jpa-spec插件

Redis客戶端的基本使用和在java中使用

包裝類 -- 自動拆箱和自動裝箱 -- 享元模式

面試題(0)之——Java String

Shiro集成到Spring

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Springcloud微服务项目——人力资源管理(HRM)Day03 后台服务前端的搭建&机构类型CRUD&机构入驻

后台管理前端搭建-系统管理

搭建项目

修改设置

编写界面 以租户类型为例

数据库结构

跨域问题

解决

高级查询

第一种方法

Wrapper是什么

第二种方法

机构类型的增删改

删除

增加和修改

机构管理(tenant)

前端代码

数据库结构

后端代码

机构入驻

编写界面以租户类型为例