大数据Vue单表综合案例

最新推荐文章于 2024-08-08 08:27:18 发布

明天会更好fjy

最新推荐文章于 2024-08-08 08:27:18 发布

阅读量192

点赞数

分类专栏：大数据项目总结文章标签： vue.js 大数据 java spring 后端

本文链接：https://blog.csdn.net/m0_59239420/article/details/121179291

版权

大数据项目总结专栏收录该内容

14 篇文章 0 订阅

订阅专栏

功能介绍：使用vue和SSM完成信息的显示功能、添加功能，修改功能，点击“批准出院”状态修改为“已出院”，模糊查询功能

创建表：

create   table   emp(
  eid   int primary key   auto_increment,
    name   varchar(200),
  sex   int,
  bir   date,
cname  varchar(200)


)

insert into emp (eid, name, sex, bir, cname)
values
       (1,'张三丰',1,'2020-10-10','大数据'),
       (2,'小明',1,'2010-10-10','全栈'),
       (3,'小黑',0,'2000-10-10','精英班'),
       (4,'紫的',0,'2020-10-10','高中'),
       (5,'好撒',1,'2020-10-10','大数据');

创建Maven项目；

创建实体类：


    private   Integer eid    ;
    private     String  name ;
    private     Integer   sex;

    @DateTimeFormat(pattern = "yyyy-MM-dd")
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date bir  ;
    private    String     cname ;

    private   Integer   state;

Controller 代码：

package com.jiyun.controller;

import com.github.pagehelper.PageInfo;
import com.jiyun.pojo.Emp;
import com.jiyun.service.EmpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class EmpController {
    @Autowired
    private EmpService b;
//z展示所有
    @RequestMapping("show")
    public PageInfo<Emp> show(@RequestBody Emp emp, Integer page) {

        return b.show(emp, page);

    }

    //状态
    @RequestMapping("yuan")
    public Boolean yuan(Integer eid) {
        b.add1(eid);
        return true;

    }

//    删除
    @RequestMapping("del")
    public void del(Integer eid) {

        b.shan(eid);

    }

//    修改
    @RequestMapping("add")
    public Boolean add(@RequestBody Emp emp) {
        b.add(emp);
        return true;

    }

//全文修改
    @RequestMapping("quan")
    public Boolean quan(@RequestBody Emp emp) {
        b.quan(emp);
        return true;

    }

//添加
    @RequestMapping("add1")
    public Boolean add1(@RequestBody Emp emp) {
        b.add2(emp);
        return true;

    }
//通过id回显
    @RequestMapping("getid")
    public Emp getid(Integer eid) {

        return b.getid(eid);

    }
}

Service 的代码：

package com.jiyun.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jiyun.mapper.EmpDao;
import com.jiyun.pojo.Emp;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class EmpService {

    @Autowired
    private EmpDao b;
    public PageInfo<Emp> show(Emp emp, Integer  page) {
        PageHelper.startPage(page,2);
        List<Emp> show = b.show(emp);
        PageInfo<Emp> empPageInfo = new PageInfo<Emp>(show);
        return  empPageInfo;
    }

    public void shan(Integer eid) {
        b.shan(eid);
    }

    public Emp getid(Integer eid) {
        return b.getid(eid);
    }

    public void add(Emp emp) {
        b.add(emp);
    }

    public void add1(Integer eid) {

        b.add1(eid);
    }

    public void add2(Emp emp) {
        b.add2(emp);
    }

    public void quan(Emp emp) {
        b.quan(emp);
    }
}

Mapper:

接口

package com.jiyun.mapper;

import com.jiyun.pojo.Emp;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface EmpDao {

    List<Emp> show(Emp emp);
@Delete("delete    from   emp    where eid=#{eid}")
    void shan(@Param("eid") Integer eid);
@Select("select  *from    emp   where eid=#{eid}")
    Emp getid( @Param("eid")  Integer eid);

    void add(Emp emp);

    void add1(@Param("eid")  Integer eid);

    void add2( Emp emp);

    void quan(Emp emp);
}

EmpDao.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中可以写那个接口中方法的sql语句-->
<mapper namespace="com.jiyun.mapper.EmpDao">
    <!--id必须和接口中的某个方法名一样
    resultType id属性对应的方法的返回值
    -->

    <select id="show" resultType="Emp" parameterType="Emp" >
      select *from   emp
        <where>
            <if test="name!=null  and name!=''">
                  name  like  '%${name}%'
            </if>
        </where>

    </select>
    
    <!--修改-->

    <update id="add" parameterType="Emp">
update emp set  name=#{name}, cname=#{cname}  where eid=#{eid}

    </update>
    <!--状态-->

    <update id="add1" parameterType="int">
update emp set  state=1 where eid=#{eid}

    </update>
    <!--全文修改-->
    <update id="quan" parameterType="Emp">
update emp set  name=#{name},sex=#{sex},bir=#{bir},cname=#{cname},state=#{state} where eid=#{eid}

    </update>
<!--添加-->
    <insert id="add2" parameterType="Emp">
  insert into emp  ( name,sex,bir, cname,state)
values(#{name},#{sex},#{bir},#{cname},#{state})

    </insert>


</mapper>

前端展示所有：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/MyDate.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body   bgcolor="aqua" >
<center>


<div  id="app">

    <h1>员工管理系统</h1>
    姓名 <input type="text"   v-model="emp.name"  placeholder="根据姓名搜索">
    <input type="button"  value="搜索" @click="all()">
    <a href="add.html">增加</a>
    <table  border="1">
        <tr>
            <td><input type="checkbox"  @click="fan(this)" >全选</td>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>日期</td>
            <td>所在部门</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
        <tr v-for="a  in  slist">
            <td><input type="checkbox"     class="w" :value="a.eid"></td>
            <td>{{a.eid}}</td>
            <td>{{a.name}}</td>
            <td>{{a.sex==0?"女":"男"}}</td>
            <td>{{new  Date (a.bir).Format("yyyy-MM-dd")}}</td>
            <td>{{a.cname}} </td>
            <td>{{a.state==0?"未出院":"出院"}}</td>
            <td>

                <a  v-if="a.state==0" href=""  @click="chu(a.eid)">批准出院</a>

                <!--<input type="button"   value="删除" @click="del(a.eid)">-->
                <a href=""   @click="del(a.eid)" >删除</a>
                <a :href="'xiu.html?eid='+a.eid">修改</a>
                <a :href="'xiu1.html?eid='+a.eid">全文修改</a>

            </td>

        </tr>
    </table>

<!--分页-->
 当前页  {{page.pageNum}} /总页数 {{page.pages}}/总条数{{page.total}}
    <br>
    <input v-if="!page.isFirstPage" type="button" value="首页" @click="all(page.FirstPage)">
    <input v-if="!page.isFirstPage" type="button" value="上一页" @click="all(page.prePage)">

    <input v-for="p in page.pages" type="button" :value="p" @click="all(p)">

    <input v-if="!page.isLastPage" type="button" value="下一页" @click="all(page.nextPage)">
    <input v-if="!page.isLastPage" type="button" value="尾页" @click="all(page.LastPage)">

</div>
</center>
</body>

<script>
// 创建一个Vue实例
function  fan(u){
        $(".w").prop("checked",u.checked)
    }
    let  app=new  Vue({
        //获取渲染的元素
        el:"#app",
        //获取渲染元素的数据
        data:{
            //空的对象
            emp:{
            },
            slist:{},
            // 、分页
            page:{},
        },
        methods:{
            //展示所有
            all(page=1){
                axios.post("show.do?page="+page,this.emp).then(res=>{
                    this.slist=res.data.list;
                    this.page=res.data;
                })
            },
            //删除
            del(eid){
                axios.post("del.do?eid="+eid).then(res=>{
          this.all()
                })
            },
            //状态
            chu(eid){
                axios.post("yuan.do?eid="+eid).then(res=>{
              if(res.data){
                  this.all();
              }
                })
            }
        },
        created(){
            this.all();
        }



    })


</script>
</html>

添加：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/MyDate.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>

<div id="app">

    姓名 <input type="text" name="name" v-model="emp.name" placeholder="请输入姓名">
    <br>
    性别
    <input type="radio" name="sex" value="0" v-model="emp.sex">女
    <input type="radio" name="sex" value="1" v-model="emp.sex">男 <br>
    <input type="date" v-model="emp.bir"> <br>
    部门
    <input type="text" v-model="emp.cname" placeholder="所在部门"> <br>
    状态
    <input type="radio" name="state" value="0" v-model="emp.state">未出院
    <input type="radio" name="state" value="1" v-model="emp.state">出院 <br>
    <br>
    <input type="submit" value="提交" @click="submit()">
</div>
</body>

<script>
    let eid = location.search.substring(5);
    let app = new Vue({
        el: "#app",
        data: {
            emp: {},
            bu: [],
        },
        methods: {
            
            bygetid() {
                axios.post("getid.do?eid=" + eid).then(res => {
                    this.emp = res.data;
                })

            },
            //添加

            submit() {
                axios.post("add1.do", this.emp).then(res => {
                    if (res.data) {
                        location.href = "show.html"
                    } else {
                        alert("数据错误")
                    }
                })

            },
        },
        created() {
            // this.bygetid();
        }
    })


</script>
</html>

修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/MyDate.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>

<div id="app">
    姓名 <input type="text" name="name" v-model="emp.name" placeholder="员工姓名">
    <br>
    部门<input type="text" name="name" v-model="emp.cname" placeholder="员工部门">
    <br>
    <input type="submit" value="提交" @click="submit()">
</div>
</body>
<script>
    let eid = location.search.substring(5);
    let app = new Vue({
        el: "#app",
        data: {
            emp: {},
            bu: [],
        },
        methods: {
            // 通过id回显
            bygetid() {
                axios.post("getid.do?eid=" + eid).then(res => {
                    this.emp = res.data;
                    this.emp.bir = this.emp.bir
                })
            },
            //修改
            submit() {
                axios.post("add.do", this.emp).then(res => {
                    if (res.data) {
                        location.href = "show.html"
                    } else {
                        alert("数据错误")

                    }
                })
            },

        },
        created() {

            this.bygetid();

        }

    })


</script>
</html>

全文修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/MyDate.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>

<div  id="app">

   姓名 <input type="text"  name="name"  v-model="emp.name">
    <br>
    性别<input type="radio"  name="sex"  value="0" v-model="emp.sex">女
   <input type="radio"  name="sex"   value="1" v-model="emp.sex">男 <br>
  生日<input type="date"   v-model="emp.bir"> <br>
  部门  <input type="text"  name="name"  v-model="emp.cname">

    <br>
    状态
    <input type="radio"  name="state"  value="0" v-model="emp.state">未出院
    <input type="radio"  name="state"   value="1" v-model="emp.state">出院 <br>
  <input type="submit"   value="提交"  @click="submit1()">

</div>

</body>

<script  >

    let eid = location.search.substring(5);

    let   app=new  Vue({
        el:"#app",
        data:{

            emp:{


            },
bu:[],

            },
        methods:{
            bygetid(){
                axios.post("getid.do?eid="+eid).then(res=>{
                    this.emp=res.data;
                    this.emp.bir=this.emp.bir

                })

            },

            submit1(){
                axios.post("quan.do",this.emp).then(res=>{
                    if(res.data){
                        location.href="show.html"
                    }else {

                        alert("数据错误")

                    }
                })
            },

        },
        created(){

            this.bygetid();

        }

        })


</script>
</html>

效果展示：