基于Java+springboot+mvc+vue员工管理系统

明天会更好fjy
176 阅读1分钟
本文已参与「新人创作礼」活动，一起开启掘金创作之路。
主要功能模块：
1.完成用户登录功能

2.展示员工信息以及添加部门，删除 等操作。

3.对数据的导入导出

4.分页查询数据

项目的搭建并且导入相关的依赖：

项目的分层：公共实体类模块，远程调用模块，提供者以及消费者模块。

消费者模块中的前端登录：

页面展示：

展示所有：

Title 
<br>
<div class="modal inmodal" id="apImportModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" id="apImportDiv" th:fragment="apImportDiv">
        <div class="modal-content animated fadeIn">
            <form class="dropzone" id="dropzoneForm" enctype="multipart/form-data">
                <div class="fallback">
                    <input name="file" type="file" id="file_id"/>
                </div>
            </form>
            <button id="uploladBtn" class="btn btn-info mt-2" type="button" onclick="return uploadExcel()"><i
                    class="fa fa-reply"></i>上传
            </button>
        </div>
    </div>
</div>
<br>
<el-form :inline="true" :model="page" class="demo-form-inline">
    <el-form-item label="名字">
        <el-input v-model="page.yname" placeholder="名字"></el-input>
    </el-form-item>
    <el-form-item label="部门" :label-width="formLabelWidth">
        <el-select v-model="page.eid" placeholder="请选择职务">
            <el-option value=""></el-option>
            <el-option v-for="a  in  men" :label="a.bname" :value="a.id"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="initData()">查询</el-button>
    </el-form-item>
</el-form>

<el-button type="primary" @click="daochu()">导出</el-button>


<el-button type="primary" @click="handleAdd()">添加</el-button>
<el-button type="primary" @click="buadd()">部门添加</el-button>
<el-table :data="tableData" style="width: 100%"
          :inline="true">
    <el-table-column prop="yid" label="编号"></el-table-column>
    <el-table-column prop="yname" label="姓名"></el-table-column>
    <el-table-column prop="sex" label="性别"></el-table-column>
    <el-table-column prop="createde" label="时间"></el-table-column>

    <el-table-column prop="xue" label="学历"></el-table-column>
    <el-table-column prop="zname" label="职务"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="tell" label="电话"></el-table-column>
    <el-table-column prop="jin" label="紧急联系人"></el-table-column>
    <el-table-column prop="bname" label="部门"></el-table-column>


    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="handleEdit( scope.row.yid)">编辑
            </el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete( scope.row.yid)">删除
            </el-button>
        </template>
    </el-table-column>
</el-table>

<!--分页-->
<div class="block">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
    </el-pagination>
</div>
<el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="formData" :inline="true">
        <el-form-item label="姓名">
            <el-input v-model="formData.yname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="性别">
            <el-input v-model="formData.sex" autocomplete="off"></el-input>
        </el-form-item>
        <div class="block">
            <span class="demonstration">默认</span>
            <el-input
                    v-model="formData.createde"
                    type="date"
                    placeholder="日期">
            </el-input>
        </div>
        <el-form-item label="学历">
            <el-input v-model="formData.xue" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="职务" :label-width="formLabelWidth">
            <el-select v-model="formData.wu" placeholder="请选择职务">
                <el-option v-for="a  in  wue" :label="a.zname" :value="a.zid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="formData.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
            <el-input v-model="formData.tell" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人">
            <el-input v-model="formData.jin" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
            <el-select v-model="formData.eid" placeholder="请选择职务">
                <el-option v-for="a  in  men" :label="a.bname" :value="a.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
    </div>
</el-dialog>
<!--修改-->


<el-dialog :title="title" :visible.sync="dialogFormVisible2">
    <el-form :model="formData" :inline="true">
        <el-form-item label="姓名">
            <el-input v-model="formData.yname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="性别">
            <el-input v-model="formData.sex" autocomplete="off"></el-input>
        </el-form-item>
        <div class="block">
            <span class="demonstration">默认</span>
            <el-input
                    v-model="formData.createde"
                    type="date"
                    placeholder="日期">
            </el-input>
        </div>
        <el-form-item label="学历">
            <el-input v-model="formData.xue" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="职务" :label-width="formLabelWidth">
            <el-select v-model="formData.wu" placeholder="请选择职务">
                <el-option v-for="a  in  wue" :label="a.zname" :value="a.zid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="formData.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
            <el-input v-model="formData.tell" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人">
            <el-input v-model="formData.jin" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
            <el-select v-model="formData.eid" placeholder="请选择职务">
                <el-option v-for="a  in  men" :label="a.bname" :value="a.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
    </div>
</el-dialog>

<el-dialog :title="title" :visible.sync="dialogFormVisible3">
    <el-form :model="formData" :inline="true">


        <el-form-item label="编号">
            <el-input v-model="formData.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部门">
            <el-input v-model="formData.bname" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="busave()">确 定</el-button>
    </div>
</el-dialog>
展示所有：

pom.xml 的配置

org.springframework.boot spring-boot-starter-web com.alibaba.cloud spring-cloud-starter-alibaba-nacos-discovery org.apache.poi poi 3.14 org.springframework.boot spring-boot-starter-amqp 
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <dependency>
        <groupId>springbootyuan</groupId>
        <artifactId>spring_common</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
    <dependency>
        <groupId>springbootyuan</groupId>
        <artifactId>spring_config</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>

    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3</version>
    </dependency>

yml:

server: port: 9001 spring: application: name: spring-consumer cloud: nacos: discovery: server-addr: 192.168.47.1:8848 rabbitmq: host: 127.0.0.1 port: 5672 username: guest password: guest thymeleaf: encoding: utf-8 prefix: classpath:/thymeleaf/ suffix: .html 渲染数据的时候，我们需要加一个配置类：

@Configuration public class UsingStaticController extends WebMvcConfigurationSupport {

@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}

} controller:

@Controller @RequestMapping("y") public class YongController {

@Autowired
Feign feign;

@Autowired
RedisUtil redisUtil;


@RequestMapping("findAll")

// @ResponseBody public String findAll(Model model) { List all = feign.findAll(); model.addAttribute("list", all); return "show"; }

@RequestMapping("findAll3")

// @ResponseBody public String findAll() { redisUtil.set("1123", 2212121); return "show"; }

@RequestMapping("{page}")
public String page(@PathVariable String page) {
    return page;
}

@RequestMapping("/")
public String page1() {
    return "login";
}
@RequestMapping("d")
public void export1(HttpServletResponse response) throws Exception {
    //创建空的工作薄
    HSSFWorkbook workbook = new HSSFWorkbook();
    //		创建空的表
    HSSFSheet sheet = workbook.createSheet();
    //创建一个数组
    String[] tital = {"编号", "姓名", "性别", "时间", "学历"};
    HSSFRow row = sheet.createRow(0);
    for (int i = 0; i < tital.length; i++) {
        row.createCell(i).setCellValue(tital[i]);
    }
    //        查询数据库
    List<Yuan> list = feign.selec();
    for (int i = 0; i < list.size(); i++) {
        row = sheet.createRow(i + 1);
        row.createCell(0).setCellValue(list.get(i).getYid());
        row.createCell(1).setCellValue(list.get(i).getYname());
        row.createCell(2).setCellValue(list.get(i).getSex());
        row.createCell(3).setCellValue(new SimpleDateFormat("yyyy-MM-dd").format(list.get(i).getCreatede()));
        row.createCell(4).setCellValue(list.get(i).getXue());
    }


    //7.把工作簿对象返回给前端浏览
    response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("艺人列表.xls", "UTF-8"));
    response.setHeader("Connection", "close");
    response.setHeader("Content-Type", "application/octet-stream");
    workbook.write(response.getOutputStream());
    workbook.close();
}

@RequestMapping("login")
@ResponseBody
public Result page2(@RequestBody Usere usere) {
    Usere u = feign.pw(usere);
    if (u != null) {
        return new Result("用户登录成功", 0);
    }

    return new Result("失败", 1);
}

@RequestMapping("/ru")
public void import1(@RequestParam("file") MultipartFile file, HttpServletResponse response) throws Exception {
    //		创建空的工作薄
    HSSFWorkbook workbook = new HSSFWorkbook(file.getInputStream());
    //		获取表
    HSSFSheet sheetAt = workbook.getSheetAt(0);
    //		获取最后一个交表
    int lastRowNum = sheetAt.getLastRowNum();
    for (int i = 1; i <= lastRowNum; i++) {
        HSSFRow row = sheetAt.getRow(i);
        String yname = row.getCell(0).getStringCellValue();
        String createde = row.getCell(1).getStringCellValue();
        String sex = row.getCell(2).getStringCellValue();
        String xue = row.getCell(3).getStringCellValue();
        String wu = row.getCell(4).getStringCellValue();
        String address = row.getCell(5).getStringCellValue();
        String tell = row.getCell(6).getStringCellValue();
        String jin = row.getCell(7).getStringCellValue();
        String eid = row.getCell(8).getStringCellValue();
        Yuan yunan = new Yuan();
        yunan.setYname(yname);
        yunan.setSex(sex);
        yunan.setXue(xue);
        yunan.setCreatede(new SimpleDateFormat("yyyy-MM-dd").parse(createde));
        yunan.setWu(Integer.parseInt(wu));
        yunan.setAddress(address);
        yunan.setTell(tell);
        yunan.setJin(jin);
        yunan.setEid(Integer.parseInt(eid));
        feign.addTbActor(yunan);
    }
    //8.给前端返回结果
    JSONObject result = new JSONObject();
    result.put("success", true);
    WriterUtil.write(response, result.toString());


}

;

//部门添加

@RequestMapping("buadd")
@ResponseBody
public Result buadd(@RequestBody Bu bu) {
    feign.buadd(bu);
    return new Result();
}

@RequestMapping("role")
@ResponseBody
public List<Role> role() {
    return feign.role();

}

@RequestMapping("findW")
@ResponseBody
public PageResult findW(Model model, @RequestBody Yuan yuan) {
    PageResult w = feign.findW(yuan);
    return w;

//model.addAttribute("list",all); // return PageResult;

}

//部分
@RequestMapping("bu")
@ResponseBody
public List<Bu> bu(Model model) {
    List<Bu> list = feign.bu();

// model.addAttribute("list",list); return list; }

@RequestMapping("zhi")
@ResponseBody
public List<Zhi> zhi(Model model) {
    List<Zhi> list = feign.Zhi();

// model.addAttribute("list",list); return list; }

// useradd @RequestMapping("useradd") @ResponseBody public Result useradd(@RequestBody Usere usere) { feign.useradd(usere); return new Result(); }

//    添加
@RequestMapping("add")
@ResponseBody
public Result add(@RequestBody Yuan yuan) {
    feign.add(yuan);
    return new Result();
}

@RequestMapping("update")
@ResponseBody
public Result update(@RequestBody Yuan yuan) {
    feign.update(yuan);
    return new Result();
}

//修改回显
@RequestMapping("getyid")
@ResponseBody
public Yuan update(@RequestParam("yid") Integer yid) {
    return feign.getyid(yid);

}

//    add2
@RequestMapping("add2")
public String add2() {

    return "add";
}

//    删除
@RequestMapping("delete")
@ResponseBody
public Result delete(@RequestParam("yid") Integer yid) {
    feign.delete(yid);
    return new Result();
}

部门添加：

导出：

远程调用的配置：

<dependencies>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-openfeign</artifactId>
        <version>2.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>springbootyuan</groupId>
        <artifactId>spring_common</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
</dependencies>

注意： 这里的路径要和提供者这的路径一一对应

@FeignClient("spring-parter") public interface Feign { @RequestMapping("y/findAll") List findAll();

@RequestMapping("y/findW")
PageResult findW(@RequestBody  Yuan  yuan);

@RequestMapping("y/bu")
List<Bu> bu();

@RequestMapping("y/zhi")
List<Zhi> Zhi();

@RequestMapping("y/add")
void add(@RequestBody Yuan yuan);
@RequestMapping("y/delete")
void delete(@RequestParam("yid") Integer yid);

@RequestMapping("y/getyid")
Yuan getyid(@RequestParam("yid") Integer yid);
@RequestMapping("y/update")
void update(Yuan yuan);
@RequestMapping("y/user")

Usere pw(@RequestBody  Usere usere);

@RequestMapping("y/role")
List<Role> role();

@RequestMapping("y/d")
List<Yuan> selec();
@RequestMapping("y/ru")
void addTbActor( @RequestBody  Yuan yunan);
@RequestMapping("y/buadd")
void buadd(@RequestBody Bu bu);
@RequestMapping("y/useradd")
void useradd(@RequestBody Usere usere);

} 提供者模块：

pom.xml配置

org.springframework.boot spring-boot-starter-web 2.1.6.RELEASE com.alibaba.cloud 
        <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>

    </dependency>
    <!--Mybatis 启动器-->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.0.1</version>
    </dependency>

    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-autoconfigure</artifactId>
        <version>1.3.2</version>
    </dependency>
    <dependency>
        <groupId>springbootyuan</groupId>
        <artifactId>spring_common</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
    <!-- mysql 数据库驱动 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.38</version>
    </dependency>
    <dependency>
        <groupId>tk.mybatis</groupId>
        <artifactId>mapper-spring-boot-starter</artifactId>
        <version>2.0.2</version>
    </dependency>
    <!-- druid 数据库连接池 -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.0.9</version>
    </dependency>
    <!--分页-->
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.2.12</version>
    </dependency>
    <!--rabbitmq-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-amqp</artifactId>
    </dependency>
</dependencies>

yml配置：

server: port: 9002 spring: application: name: spring-parter cloud: nacos: discovery: server-addr: 192.168.47.1:8848 datasource: driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/w17 username: root password: root type: com.alibaba.druid.pool.DruidDataSource rabbitmq: host: 127.0.0.1 port: 5672 username: guest password: guest

thymeleaf:

encoding: utf-8

prefix: classpath:/thymeleaf/

suffix: .html

mybatis: type-aliases-package: com.usian.pojo mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true 启动类：

@SpringBootApplication @EnableDiscoveryClient @MapperScan(value = "com.usian.mapper") public class SentinelProviderApp {

public static void main(String[] args) {
    SpringApplication.run(SentinelProviderApp.class);
}

} 分层：

controller:

service:

@Service public class YongServiceimpl implements YongService { @Autowired HuMapper huMapper; @Autowired YuanMapper yuanMapper; @Autowired BuMapper buMapper; @Autowired ZhiMapper zhiMapper; @Autowired RoleMapper roleMapper; @Autowired UsereMapper usereMapper;

@Autowired
TuMapper  tuMapper;

public List<Hu> findAll() {

return huMapper.selectAll(); }

@Override
public PageResult findW(Yuan  yuan) {

    PageHelper.startPage(yuan.getPageNum(),yuan.getPageSize());
    List<Yuan> selectw = yuanMapper.selectw(yuan);
    PageInfo<Yuan> p = new PageInfo<>(selectw);
    return  new PageResult(p.getTotal(),p.getList());
}

@Override
public List<Bu> bu() {
    return buMapper.selectAll();
}

@Override
public List<Zhi> Zhi() {
    List<Zhi> list = zhiMapper.selectAll();

    return list;
}

@Override
public void add(Yuan yuan) {
    yuanMapper.insert1(yuan);
}

@Override
public void delete(Integer yid) {
    yuanMapper.deleteByPrimaryKey(yid);
}

@Override
public Yuan getyid(Integer yid) {
    return yuanMapper.selectByPrimaryKey(yid);
}

@Override
public void update(Yuan yuan) {
    yuanMapper.update1(yuan);
}

@Override
public Usere findW2(Usere usere) {
    return usereMapper.cha(usere);
}

@Override
public List<Role> role() {
    return roleMapper.selectAll();
}

@Override
public List<Yuan> findW6() {
    return yuanMapper.selectAll();
}

@Override
public void buadd(Bu bu) {
    Bu a = new Bu();
    a.setId(bu.getId());
    a.setBname(bu.getBname());
    a.setCreatetime(new Date());
    buMapper.insert(a);
}

@Override
public void useradd(Usere usere) {
    Usere a = new Usere();
    a.setUsername(usere.getUsername());
    a.setPassword(usere.getPassword());
    a.setCreatetime(new Date());
    a.setRid(usere.getRid());
    usereMapper.insert(a);

}

mapper.xml

insert into yuan (yname, createde, xue, wu, address, tell, jin, eid,sex)
  values (#{yname},#{createde},#{xue},#{wu},#{address},#{tell},#{jin},#{eid},#{sex})


</insert>
<update id="update1"  parameterType="com.usian.pojo.Yuan">
        update   yuan  set  yname=#{yname}, createde=#{createde}, xue=#{xue}, wu=#{wu},
        address=#{address}, tell=#{tell}, jin=#{jin}, eid=#{eid},sex=#{sex}   where   yid=#{yid}

</update>
<!--id必须和接口中的某个方法名一样
resultType id属性对应的方法的返回值
-->


<select id="selectw" resultType="com.usian.pojo.Yuan"  parameterType="com.usian.pojo.Yuan">
    SELECT  yid ,  sex,yname , createde ,xue,z.zname  zname ,address,tell ,jin,b.bname FROM  yuan y,zhi z,bu b where  y.eid=b.id and y.wu=z.zid
and y.yname like '%${yname}%' and y.eid=#{eid} 添加：
avatar
文章
阅读
粉丝