Hrm-人力资源系统开发笔记03

这一次主要是一些前端的代码以及后端CRUD的实现

1.修改前端端口，前后端联调

由于后端加了解决CrossOrigin跨域问题的配置，统一了端口，所以前端也相应要做调整才能前后端联调
后端网关配置

package com.penny.config;

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);
    }
}

在前端的config–>index.js中修改端口如下：

2.实现分页

2.1.后端

方案1：通过设置查询条件通过EntityWrapper，但这种方法不能返回关联对象

推荐使用方案二：手动写mapper.xml的方式，这种方式可以通过嵌套结果或嵌套查询的方式返回关联对象
mapper

package com.penny.mapper;

import com.baomidou.mybatisplus.plugins.Page;
import com.penny.domain.Tenant;
import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.penny.query.TenantQuery;

import java.io.Serializable;
import java.util.List;

/**
 * <p>
 *  Mapper 接口
 * </p>
 *
 * @author Penny
 * @since 2020-02-16
 */
public interface TenantMapper extends BaseMapper<Tenant> {
    /**
     * 带条件分页查询
     * @param page
     * @param query
     * @return
     */
    List<Tenant> loadPageList(Page<Tenant> page, TenantQuery query);

service

package com.penny.service;

import com.penny.domain.Tenant;
import com.baomidou.mybatisplus.service.IService;
import com.penny.query.TenantQuery;
import com.penny.util.PageList;

import java.io.Serializable;

/**
 * <p>
 *  服务类
 * </p>
 *
 * @author Penny
 * @since 2020-02-16
 */
public interface ITenantService extends IService<Tenant> {

    /**
     * 带条件分页查寻
     * @param query
     * @return
     */
    PageList<Tenant> selectPageList(TenantQuery query);

serviceImpl

@Service
public class TenantServiceImpl extends ServiceImpl<TenantMapper, Tenant> implements ITenantService {
    @Autowired
    private TenantMapper tenantMapper;
    @Autowired
    private EmployeeMapper employeeMapper;
    @Override
    public PageList<Tenant> selectPageList(TenantQuery query) {
        //获得分页
        Page<Tenant> page = new Page(query.getPage(),query.getRows());
        //获得条件查询
        List<Tenant> tenants = tenantMapper.loadPageList(page, query);
        //最后返回PageList带条件+分页
        return new PageList<Tenant>(page.getTotal(),tenants);
    }
    }

mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.penny.mapper.TenantMapper">

    <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="com.penny.domain.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" />
    </resultMap>

    <sql id="whereSql">
        <where>
            <if test="keyword != null and keyword != ''">
                and (companyName like concat('%',#{keyword},'%') or (companyNum like concat('%',#{keyword},'%')))
            </if>
        </where>
    </sql>

    <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>

2.2前端：

修改访问路径如下：与网关端口相对应

然后修改前端发送请求的路径

<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :model="filters" :inline="true">
				<el-form-item>
					<el-input v-model="filters.keywords" placeholder="请输入机构类型" ></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getTenantTypes">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="add">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>


		<!--列表v-loading="listLoading"-->
		<el-table :data="tenantTypes" v-loading="listLoading" highlight-current-row  style="width: 100%;">
			<!--多选框-->
			<el-table-column type="selection" width="55">
			</el-table-column>
			<!--索引值,为什么不用id,id不序号-->
			<el-table-column type="index" min-width="5%">
			</el-table-column>
			<!--其他都设置值,只有一个不设置值就自动适应了-->
			<el-table-column prop="name" label="名称" min-width="35%">
			</el-table-column>
			<el-table-column prop="description" label="描述" min-width="35%">
			</el-table-column>
			<el-table-column label="操作" min-width="25%">
				<template scope="scope">
					<el-button size="small"  @click="edit(scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"  :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>


		<!--添加或编辑对话框-->
		<el-dialog title="添加或修改" :visible.sync="formVisible" :close-on-click-modal="false">
			<el-form :model="tenantType" label-width="80px" :rules="formRules" ref="tenantType">
				<el-form-item label="名称:" prop="name">
					<el-input v-model="tenantType.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="描述:" prop="description">
					<el-input v-model="tenantType.description" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="formVisible = false">取消</el-button>
				<el-button type="primary" @click="save" >提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	export default {
		data() {
			return {
                formVisible:false,//对话框默认不显示,只有点击添加或修改的时候显示
                listLoading:false,
				//查询对象
				filters:{
					keywords:''
				},
				page:1,//当前页,要传递到后台的
				total:0, //分页总数
				tenantTypes:[], //当前页数据
				//初始值
                tenantType:{
                    id:null,
					name:'',
					sn:'',
					dirPath:'',
					state:0,
                    manager:null,
				},
				employees:[],
                formRules: {
                    name: [
                        { required: true, message: '请输入名称!', trigger: 'blur' }
                    ]
                }
			}
		},
		methods: {
			add(){
				//清空数据
				this.tenantType={
					id:null,
					name:'',
					sn:'',
					dirPath:'',
					state:0,
					manager:null,
				}
				//打开dialog
				this.formVisible =true;
			},
            stateFormatter(row, column, cellValue, index){

                if(cellValue===0){
                    return "正常";
				}else{
                    return "停用";
				}
			},
            handleCurrentChange(curentPage){
                this.page = curentPage;
                this.getTenantTypes();
			},
		    save(){
                this.$refs.tenantType.validate((valid) => {
                    //校验表单成功后才做一下操作
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            //拷贝后面对象的值到新对象,防止后面代码改动引起模型变化
                            let para = Object.assign({}, this.tenantType);
                            //判断是否有id有就是修改,否则就是添加
							this.$http.put("/sysmanage/tenantType",para).then((res) => {
								this.$message({
									message: '操作成功!',
									type: 'success'
								});
								//重置表单
								this.$refs['tenantType'].resetFields();
								//关闭对话框
								this.formVisible = false;
								//刷新数据
								this.getTenantTypes();
							});
                        });
                    }
                })
			},
            edit(row){
                //this.getEmployees();
                //回显
                let tenantTypeTmp = Object.assign({}, row); //解决对话框改值后列表会被改值.
                this.tenantType = tenantTypeTmp; //里面本来就有id,相当于回显了id
				//显示
                this.formVisible =true;
			},
			getTenantTypes(){
                //发送Ajax请求后台获取数据  axios
				//添加分页条件及高级查询条件
				let para = {
				    "page":this.page,
					"keyword":this.filters.keywords
				};
				this.listLoading = true; //显示加载圈
				//分页查询
                this.$http.post("/sysmanage/tenantType/list",para) //$.Post(.....)
                    .then(result=>{
                        console.log(result);
                        console.log(result.data); //data就是 PageListjson转换结果
                        this.total = result.data.total;
                        this.tenantTypes = result.data.rows;
                        this.listLoading = false;  //关闭加载圈
                    });
			},
			del(row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    var id = row.id;
                    this.listLoading = true;
                    this.$http.delete("/sysmanage/tenantType/"+id)
                        .then(result=>{
                            this.listLoading = false;
                            //做提示
                            if(result.data.success){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
							}else{
                                this.$message({
                                    message: result.data.message,
                                    type: 'error'
                                });
							}
							//刷新数据
                            this.getTenantTypes();
                        })
				});

			}
		},
		mounted() {
		    this.getTenantTypes()
		}
	}

</script>

<style scoped>

</style>

来源：CSDN

作者：Penny�

链接：https://blog.csdn.net/weixin_43935934/article/details/104349285