vue-项目的整体增删改查

Dept:

package com.example.demo.gs;

public class Dept {
private int id;
private String name;
private String location;
public int getId() {
    return id;
}
public void setId(int id) {
    this.id = id;
}
public String getName() {
    return name;
}
public void setName(String name) {
    this.name = name;
}

public String getLocation() {
    return location;
}
public void setLocation(String location) {
    this.location = location;
}
@Override
public String toString() {
    return "Dept [id=" + id + ", name=" + name + ", location=" + location + "]";
}

}

DeptMapper:

package com.example.demo;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.w3c.dom.ls.LSOutput;

import com.example.demo.gs.Dept;

@Mapper
public interface DeptMapper {

	@Select("select * from dept")
	List<Dept>select();

	@Insert("insert into `dept`(name,location)values(#{name},#{location})")

	void Insert (String name,String location);

	@Select("select * from dept where id =#{id}")

	List<Dept>selectFrom(int id);

	@Update("update `dept` set location =#{location}where location=#{OldLocation}")

	void updateFromLocation(String location,String OldLocation);

	@Delete("delete from dept where location =#{location}")

	void deleteFromDept(String location);

}

　　

ServeMapper

package com.example.demo;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.example.demo.gs.Dept;

@Service
public interface DeptService {

    List<Dept>selectFromService();

    void Insert(Dept dept);

    List<Dept>selectFromId(int id);

    void updateFromLocation(String location ,String oldLocation);

    void Delete(String location);

}

DeptServiceImplement:

package com.example.demo.gs;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.example.demo.DeptMapper;
import com.example.demo.DeptService;

@Service
public class DeptServiceImplement implements DeptService {
    @Autowired
    private DeptMapper Mapper;

    @Transactional
    @Override
    public List<Dept> selectFromService() {
        // TODO Auto-generated method stub
        return this.Mapper.select();
    }

    @Transactional
    @Override
    public void Insert(Dept dept) {
    this.Mapper.Insert(dept.getName(),dept.getLocation());

         // TODO Auto-generated method stub

    }

    @Transactional
    @Override
    public List<Dept> selectFromId(int id) {
        // TODO Auto-generated method stub
        return this.Mapper.selectFrom(id);
    }

    @Transactional
    @Override
    public void updateFromLocation(String location ,String oldLocation) {
        this.Mapper.updateFromLocation(location, oldLocation);

    }

    @Transactional
    @Override
    public void   Delete(String location ) {
     this.Mapper.deleteFromDept(location);
     System.out.println(location);
    }

}

DeptContorller

package com.example.demo.gs;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.DeptService;

@RestController
public class DeptContorller {

    @Autowired
    private DeptService Service;

    @GetMapping("/select")
    @ResponseBody
    List<Dept>Select(){
        List<Dept> userDepts =this.Service.selectFromService();
        return   userDepts;

    }

    @GetMapping("/delete")
    @ResponseBody
    List<Dept>delete(int id) {
        return this.Service.selectFromId(id);
    }

    @PostMapping("/Insert")
    @ResponseBody
    void Insert(@RequestBody Dept dept) {
        this.Service.Insert(dept);

    }

    @GetMapping("/Deletes")
    @ResponseBody
    void Deletes(String location){
        this.Service.Delete(location);
        System.out.println(location);

    }

    @GetMapping("/Update")
    @ResponseBody
    void Update(String location ,String OldLocation){
        this.Service.updateFromLocation(location, OldLocation);

    }
}

路由：

import Vue from "vue";
import VueRouter from "vue-router";
import SelectView from "../components/SelectView.vue";
import SelectFromView from "../components/SelectFromView.vue";
import InsertView from "../components/InsertView.vue";
import DeleteView from "../components/DeleteView.vue";
import UpdateView from "../components/UpdateView.vue";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Select",
    component: SelectView,
  },
  {
    path: "/1",
    name: "Delete",
    component: SelectFromView,
  },
  {
    path: "/2",
    name: "Insert",
    component: InsertView,
  },
  {
    path: "/3",
    name: "DeleteView",
    component: DeleteView,
  },
  {
    path: "/4",
    name: "UpdateView",
    component: UpdateView,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

 

 查询部分：

<template>
  <div class="nav">
    <!-- <button @click="inserts()">查询</button> -->
    <el-button size="small" @click="inserts()" type="primary">查询</el-button>

    <div class="navs">
      <!-- ------------------- -->
      <div v-for="item in count" :key="item.id">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="账号" width="180">
            <span>{{ item.id }}</span>
          </el-table-column>
          <el-table-column prop="name" label="部门" width="180">
            <span>{{ item.location }}</span>
          </el-table-column>
          <el-table-column prop="address" label="名字">
            <span>{{ item.name }}</span>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import axios from "axios";
export default {
  name: "LoginView",
  data() {
    return {
      count: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },

  methods: {
    inserts() {
      axios.get("http://localhost:8086/select/").then((result) => {
        console.log(result.data);
        this.count = result.data;
      });
    },
  },
};
</script>

<style>
label {
  font-size: 20px;
  font-weight: 700;
}

.navs {
  margin-top: 10px;
}
-- > -- > .nav {
  border-top: 3px solid #ff8500;
  background-color: #fcfcfc;
  border-bottom: 1px solid #edeeed;
  line-height: 41px;
}
.nav a {
  display: inline-block;
  height: 41px;
  padding: 0px 10px;
  font-size: 15px;
  color: #4c4c4c;
  font-family: "微软雅黑";
  text-decoration: none;
}
.nav a:hover {
  background: #edeeed;
  color: #ff8500;
}
</style>

 

根据ID进行查找：

 

<template>
  <div class="nav">
    <label for="#">查询账号:</label>
    <!-- <input v-model="count" type="text" /> -->
    <el-input
      size="small"
      style="width: 150px"
      v-model="count"
      placeholder="请输入内容"
    ></el-input>
    <div v-for="item in name" :key="item.id">
      <div class="navs">
        <label for="#">账号:</label>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{ item.id }}</span
        >&nbsp;&nbsp; <label for="#">部门:</label> &nbsp;&nbsp;&nbsp;
        <span>{{ item.location }}</span
        >&nbsp;&nbsp; <label for="#">名字:</label>&nbsp;&nbsp;&nbsp;
        <span>{{ item.name }}</span>
      </div>
    </div>
    <!-- <button @click="Delete()">查询</button> -->
    <el-button
      style="margin-left: 12px"
      size="medium"
      @click="Delete()"
      type="success"
      >查询</el-button
    >
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DleteView",
  data() {
    return {
      count: [],
      name: [],
    };
  },

  methods: {
    Delete() {
      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8086/delete`,
        // URL中的查询参数
        params: {
          id: this.count,
        },
      }).then((result) => {
        console.log(result.data);
        this.name = result.data;
      });
    },
  },
};
</script>

<style>
label {
  color: #303133;
}
.nav {
  margin-top: 20px;
  border-top: 3px solid #ff8500;
  background-color: #fcfcfc;
  border-bottom: 1px solid #edeeed;
  line-height: 41px;
}
.nav a {
  display: inline-block;
  height: 41px;
  padding: 0px 10px;
  font-size: 15px;
  color: #4c4c4c;
  font-family: "微软雅黑";
  text-decoration: none;
}
.nav a:hover {
  background: #edeeed;
  color: #ff8500;
}
</style>

 

增加： 

 

<template>
  <div class="nav">
    <label for="name">名称:</label
    ><input class="inps" v-model="name" type="text" />
    <label for="location">部门:</label
    ><input class="inps" v-model="location" type="text" />
    <br />
    <input value="增加" @click="Insert()" type="button" />
    <h4 v-if="font === 4">成功</h4>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "LoginView",
  data() {
    return {
      name: "",
      location: "",
      font: "",
    };
  },
  methods: {
    Insert() {
      axios({
        // 请求方式/
        method: "POST",

        // 请求地址
        url: "http://localhost:8086/Insert",

        data: {
          name: this.name,
          location: this.location,
        },
        // URL中的查询参数
      }).then((res) => {
        console.log(res);
        this.font = 4;
      });
    },
  },
};
</script>

<style>
label {
  font-size: 20px;
  font-weight: 700;
}
.inps {
  margin-left: 20px;
  margin-right: 20px;
}
.nav {
  border-top: 3px solid #ff8500;
  background-color: #fcfcfc;
  border-bottom: 1px solid #edeeed;
  line-height: 41px;
}
.nav a {
  display: inline-block;
  height: 41px;
  padding: 0px 10px;
  font-size: 15px;
  color: #4c4c4c;
  font-family: "微软雅黑";
  text-decoration: none;
}
.nav a:hover {
  background: #edeeed;
  color: #ff8500;
}
</style>

根据部门进行删除：

<template>
  <div class="nav">
    <label for="#">部门名称:</label>
    <input v-model="location" type="text" />
    <el-button size="small" @click="Deletes()" type="primary">删除</el-button>
    <!-- <input @click="Deletes()" value="删除" type="button" /> -->
    <h4 v-if="font === 4">成功,但不晓得你数据库有没有这个数据;</h4>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "DeleteView",
  data() {
    return {
      location: "",
      font: [],
    };
  },

  methods: {
    Deletes() {
      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8086/Deletes`,
        // URL中的查询参数
        params: {
          location: this.location,
        },
      }).then((sta) => {
        console.log(sta);
        this.font = 4;
      });
    },
  },
};
</script>

<style>
label {
  font-size: 20px;
  font-weight: 700;
}

.navs {
  margin-top: 10px;
}
.nav {
  margin-top: 10px;
  border-top: 3px solid #ff8500;
  background-color: #fcfcfc;
  border-bottom: 1px solid #edeeed;
  line-height: 41px;
}
.nav a {
  display: inline-block;
  height: 41px;
  padding: 0px 10px;
  font-size: 15px;
  color: #4c4c4c;
  font-family: "微软雅黑";
  text-decoration: none;
}
.nav a:hover {
  background: #edeeed;
  color: #ff8500;
}
</style>

修改部门名称：

<template>
  <div class="nav">
    <label for="">新部门</label><input v-model="location" type="text" />
    <label for="">旧部门</label><input v-model="OldLocation" type="text" />
    <input @click="Updata()" value="更改" type="button" />
    <h4 v-if="font === 4">更改成功，但是不晓得你数据库有没有前置部门条件;</h4>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "UpdateView",
  data() {
    return {
      location: [],
      OldLocation: [],
      font: [],
    };
  },

  methods: {
    Updata() {
      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8086/Update`,
        // URL中的查询参数
        params: {
          location: this.location,
          OldLocation: this.OldLocation,
        },
      }).then((res) => {
        console.log(res);
        this.font = 4;
      });
    },
  },
};
</script>
<style>
label {
  font-size: 20px;
  font-weight: 700;
  margin-left: 10px;
  margin-right: 10px;
}

input {
  margin-left: 10px;
  margin-right: 10px;
}

.navs {
  margin-top: 10px;
}
.nav {
  border-top: 3px solid #ff8500;
  background-color: #fcfcfc;
  border-bottom: 1px solid #edeeed;
  line-height: 41px;
}
.nav a {
  display: inline-block;
  height: 41px;
  padding: 0px 10px;
  font-size: 15px;
  color: #4c4c4c;
  font-family: "微软雅黑";
  text-decoration: none;
}
.nav a:hover {
  background: #edeeed;
  color: #ff8500;
}
</style>