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

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

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

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

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <version>2.1.3.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.0.0</version>
    </dependency>

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.17</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <version>2.1.3.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
        <version>2.1.3.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.30</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>4.0.1</version>
    </dependency>

第三步：
这是目录结构
在这里插入图片描述
第四步：在图片上的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<Employee> 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("<script>" +
        "update employee set " +
        "<if test=\"#{ename} !=null and !#{ename}.equals('') \"> ename=#{ename},</if>" +
        "<if test=\"#{phone} !=null and !#{phone}.equals('') \"> phone=#{phone},</if>" +
        "<if test=\"#{did} !=null and !#{did}.equals('') \"> did=#{did},</if>" +
        "<if test=\"#{face} !=null and !#{face}.equals('') \"> face=#{face}</if>" +
        " where eid=#{eid} </script>")
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<Employee> 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访问

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工显示</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        $(function () {
            var vm = new Vue({
                el: "#app-tabs",
                data: {
                    rows: [
                        {"eid": 1, "ename": "tangzhe", "phone": "23", "did": 1, "face": "235423"},
                        {"eid": 2, "ename": "张三", "phone": "23", "did": 2, "face": "235423"}
                    ],
                    page:{},
                },
                created: function () {
                    this.getemplist(5, 1);
                },
                methods: {
                    getemplist(pagecount, currpage) {
                        $.post("http://localhost:8080/emplist/list", {
                            "pagecount": pagecount,
                            "currpage": currpage
                        }, function (data) {
                            console.log(data.rows);
                            vm.rows = data.rows;
                            vm.page=data.page;
                        }, "json");
                    },
                    addemp(eid){
                        location.href="http://localhost:8080/emplist/toaddorupdemp?eid="+eid;
                    },
                    updemp(eid){
                        location.href="http://localhost:8080/emplist/toaddorupdemp?eid="+eid;
                    },
                    delemp(eid){
                        var bln=confirm("删除是不可恢复的，你确认要删除吗？");
                        if(bln){ 
                            $.post("http://localhost:8080/emplist/delemps", {"eid": eid},
                                function (data) {
                                    alert(data.state);
                            }, "json");
                            this.$options.methods.getemplist(5,1);
                        }
                    }
                }
            });
        });
    </script>
</head>
<body>
<div id="app-tabs">
    <table>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>号码</td>
            <td>部门</td>
            <td>头像</td>
            <td>操作</td>
        </tr>
        <tr v-for="emp in rows">
            <td>{{emp.eid}}</td>
            <td>{{emp.ename}}</td>
            <td>{{emp.phone}}</td>
            <td>{{emp.did}}</td>
            <td>
                <img :src="emp.face" width="50px" height="50px">
            </td>
            <td>
                <a href="#" @click="updemp(emp.eid)">修改</a>
                <a href="#" @click="delemp(emp.eid)">删除</a>
            </td>
        </tr>
        <tr>
            <td colspan="5">
                现有{{page.totalrows}}条记录，当前{{page.currpage}}/{{page.totalpage}}页,
                <a href="#" @click="getemplist(5,1)">首页</a>
                <a href="#"  @click="getemplist(5,page.currpage-1)">上一页</a>
                <a href="#"  @click="getemplist(5,page.currpage+1)">下一页</a>
                <a href="#"  @click="getemplist(5,page.totalpage)">尾页</a>
            </td>
        </tr>
    </table>
    <a href="#" @click="addemp(0)">去添加</a>
</div>
</body>
</html>

添加和修改页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加员工</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        $(function () {
            var vm = new Vue({
                el: "#app-form",
                data: {
                    emp:{
                        face:"[[${emp.face}]]",
                        ename:"[[${emp.ename}]]",
                        phone:"[[${emp.phone}]]",
                        did:[[${emp.did}]],
                        eid: [[${emp.eid}]],
                    }
                }   
            });
        });
    </script>
</head>
<body>
<div id="app-form">
    <form action="/emplist/addorupdemps" method="post" enctype="multipart/form-data">
        <input type="hidden" name="eid" v-model="emp.eid"/>
        <input type="hidden" name="face" v-model="emp.face"/>
        姓名：<input type="text" name="ename" v-model="emp.ename"/><br/>
        号码：<input type="text" name="phone" v-model="emp.phone"/><br/>
        部门：
        <select name="did" v-model="emp.did">
            <option value="0">--请选择部门--</option>
            <option value="1">销售部</option>
            <option value="2">人事部</option>
            <option value="3">开发部</option>
            <option value="4">行政部</option>
        </select><br/>
        图片：<input type="file" name="imgs" />
            <img width="50px" height="50px" :src="emp.face">
        <br/>
        <input type="submit" value="添加"/>
    </form>
</div>    
</body>
</html>

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue