这一次主要是一些前端的代码以及后端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>