springboot+vue+ssm实现增删改查并上传文件

springboot+vue实现简单增删改查并上传文件

注明：使用的工具是idea 2018.3，mysql；Jdk为1.8版本。

第一步：用idea创建springboot项目省略；

第二步：pom.xml文件配置，这里并没有配置文件上传架包，我认为没必要

        org.springframework.boot
        spring-boot-starter-web
        2.1.3.RELEASE
    
    
        org.mybatis.spring.boot
        mybatis-spring-boot-starter
        2.0.0
    

    
        mysql
        mysql-connector-java
        5.1.17
    
    
        org.springframework.boot
        spring-boot-starter-test
        2.1.3.RELEASE
    
    
        org.springframework.boot
        spring-boot-starter-thymeleaf
        2.1.3.RELEASE
    
    
        com.alibaba
        fastjson
        1.2.30
    
    
        javax.servlet
        javax.servlet-api
        4.0.1
    

第三步：
这是目录结构

第四步：在图片上的application.properties配置数据库参数

第五步：接下来是该项目的主体
1、实体类

package com.gs.ssm_t2.bean;

public class Employee {
    private Integer eid;
    private String ename;
    private String phone;
    private Integer did;
    private String face;

    public Employee() {
    }
public Employee(Integer eid, String ename, String phone, Integer did, String face) {
    this.eid = eid;
    this.ename = ename;
    this.phone = phone;
    this.did = did;
    this.face = face;
}

@Override
public String toString() {
    return "Employee{" +
            "eid=" + eid +
            ", ename='" + ename + '\'' +
            ", phone='" + phone + '\'' +
            ", did=" + did +
            ", face='" + face + '\'' +
            '}';
}

public Integer getEid() {
    return eid;
}

public void setEid(Integer eid) {
    this.eid = eid;
}

public String getEname() {
    return ename;
}

public void setEname(String ename) {
    this.ename = ename;
}

public String getPhone() {
    return phone;
}

public void setPhone(String phone) {
    this.phone = phone;
}

public Integer getDid() {
    return did;
}

public void setDid(Integer did) {
    this.did = did;
}

public String getFace() {
    return face;
}

public void setFace(String face) {
    this.face = face;
}
}

2、dao

package com.gs.ssm_t2.dao;
import com.gs.ssm_t2.bean.Employee;
import org.apache.ibatis.annotations.*;

import java.util.List;
public interface Employeedao {
@Select("select * from employee limit #{currpage},#{pagecount}")
List allemps(Integer currpage,Integer pagecount);

@Select("select count(*) from employee")
Integer getempsnum();

@Select("select * from employee where eid=#{eid}")
Employee getempById(Integer eid);

@Insert("insert into employee values(null,#{ename},#{phone},#{did},#{face})")
Integer addemps(Employee emp);

@Update("")
Integer updemps(Employee emp);

@Delete("delete from employee where eid=#{eid}")
Integer delemps(Integer eid);
}

3、controller

package com.gs.ssm_t2.controller;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.gs.ssm_t2.bean.Employee;
import com.gs.ssm_t2.bean.Page;
import com.gs.ssm_t2.service.EmployeeSerivceImpl;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.UUID;

@Controller
@RequestMapping("/emplist")
public class EmployeeController {
@Resource
private EmployeeSerivceImpl serivce;
//去emplist页面
@RequestMapping("/toemplist")
public String toemplist(){
    return "emp/emplist";
}


//去添加和修改界面
@RequestMapping("/toaddorupdemp")
public ModelAndView toaddorupdemp(Integer eid){
    ModelAndView mv=new ModelAndView();
    mv.addObject("emp",new Employee(0,null,null,0,null));
    if(eid!=0&&!eid.equals("")&&eid!=null){//修改
        mv.addObject("emp",serivce.getempsById(eid));
    }
    mv.setViewName("emp/addorupdemp");
    return mv;
}
@RequestMapping("/list")
@ResponseBody
public JSONObject list(Page page){
    page.setTotalrows(serivce.getempsnum());
    page.setTotalpage((page.getPagecount()+page.getTotalrows()-1)/page.getPagecount());
    if(page.getCurrpage()<1||page.getCurrpage()==null||page.getCurrpage().equals("")){
        page.setCurrpage(1);
    }
    if(page.getCurrpage()>page.getTotalpage()&&page.getTotalpage()!=0){
        page.setCurrpage(page.getTotalpage());
    }
    List list=serivce.allemps(page.getPagecount(),page.getCurrpage());
    JSONObject obj=new JSONObject();
    obj.put("rows",list);
    obj.put("page",page);
    return obj;
}
@RequestMapping("/addorupdemps")
public ModelAndView addorupdemps(MultipartFile imgs, Employee emp, HttpServletRequest request) throws IOException {
    System.out.println(imgs.getOriginalFilename()+"  "+emp);
    if(imgs.getOriginalFilename()!=null&&!imgs.getOriginalFilename().equals("")){//上传了文件在进来
        //处理图片名称
        String picName= UUID.randomUUID().toString()+imgs.getOriginalFilename().substring(imgs.getOriginalFilename().lastIndexOf("."));
        String path="H:/TempImgs"; //设置存储位置
        //日期格式化 sim.format日期转字符串    sim.parse字符串装日期
        SimpleDateFormat sim=new SimpleDateFormat("yyyy-MM-dd");
        String data=sim.format(new Date());
        //整体路径
        String dirName="/upload/"+data;
        File dirFile = new File(path+dirName);
        if(!dirFile.exists()){  //创建文件夹
            dirFile.mkdirs();
        }
        File targetFile = new File(path+dirName,picName);
        imgs.transferTo(targetFile);  // 保存文件
        
        emp.setFace("/upload/"+data+"/"+picName);
    }
    ModelAndView mv=new ModelAndView();
    
    if(emp.getEid()==null||emp.getEid()==0){//添加
        boolean bln=serivce.addemps(emp);
    }else{
        boolean bln=serivce.updemps(emp);
    }
    mv.setViewName("redirect:toemplist");
    return mv;
 	 }

    @RequestMapping("delemps")
    @ResponseBody
    public JSONObject delemps(Integer eid){
        JSONObject obj=new JSONObject();
        boolean bln=serivce.delemps(eid);
        if(bln){
            obj.put("state","删除成功！！！");
        }
        return obj;
    }
	}

4、service

package com.gs.ssm_t2.service;

import com.gs.ssm_t2.bean.Employee;
import com.gs.ssm_t2.dao.Employeedao;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.List;

@Service
@Transactional
public class EmployeeSerivceImpl {
    @Resource
    private Employeedao empdao;
    
public List allemps(Integer pagecount,Integer currpage) {
    return empdao.allemps((currpage-1)*pagecount,pagecount);
}

public Integer getempsnum(){
    return empdao.getempsnum();
}

public Employee getempsById(Integer eid){
    return empdao.getempById(eid);
}

public boolean addemps(Employee emp){
    Integer i=empdao.addemps(emp);
    if(i>0){
        return true;
    }
    return false;
}

public boolean updemps(Employee emp){
    Integer i=empdao.updemps(emp);
    if(i>0){
        return true;
    }
    return false;
}
public boolean delemps(Integer eid){
    Integer i=empdao.delemps(eid);
    if(i>0){
        return true;
    }
    return false;
}
}

5、配置dao映射

6、配置路径


7、下面是页面部分，有vue数据绑定和jQuery访问

    
    
    
    
    



    

        

            
编号
            
姓名
            
号码
            
部门
            
头像
            
操作
        
        

            
{{emp.eid}}
            
{{emp.ename}}
            
{{emp.phone}}
            
{{emp.did}}
            

                
            
            

                修改
                删除
            
        
        

            

                现有{{page.totalrows}}条记录，当前{{page.currpage}}/{{page.totalpage}}页,
                首页
                上一页
                下一页
                尾页
            
        
    
    去添加

添加和修改页面

    
    
    
    
    



    

        
        
        姓名：

        号码：

        部门：
        
            --请选择部门--
            销售部
            人事部
            开发部
            行政部
        

        图片：
            
        

        
    
    

ok，时间不早了代码就上面这些就可以实现该些功能。。。