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>

最新文章

  1. Asp.net通过模板(.dot/Html)导出Word，同时导出图片
  2. 让Xcode 8.x能够调试iOS 7.x真机
  3. 使用Spark分析拉勾网招聘信息(三): BMR 入门
  4. Spring4学习笔记 - 配置Bean - 自动装配 关系 作用域 引用外部属性文件
  5. MySQL 主从架构配置详解
  6. [jquery]基础篇--this与$this区别
  7. 2013 吉林通化邀请赛 D-City 离线型的并查集
  8. PHP操作Memcache基本函数
  9. Ubuntu系统如何卸载并安装新版本的jdk(permission denied问题)
  10. seajs和requirejs对比；node初识
  11. 对于hive使用的一点记录
  12. Linux下MongoDB安装和配置详解
  13. Flink解析kafka canal未压平数据为message报错
  14. 第十五周翻译-《Pro SQL Server Internals, 2nd edition》
  15. ASP.NET Core Web多语言项目
  16. Nginx反向代理后端多节点下故障节点的排除思路
  17. Spring全家桶–SpringBoot Rest API
  18. pandas 读csv文件 TypeError: Empty &#39;DataFrame&#39;: no numeric data to plot
  19. LintCode #2 尾部的零
  20. json字符串在javascript和java代码中的表示方式

热门文章

  1. Spring 02: Spring接管下的三层项目架构
  2. Java SE 10 Application Class-Data Sharing 示例
  3. 【java】学习路径22-关于BigInteger类，大数字类
  4. qt unknown type name编译报错记录
  5. Redis图形化管理工具
  6. CF-1675D. Vertical Paths
  7. Svelte Ui Admin后台管理系统|svelte3+svelteUI中后台前端解决方案
  8. Coprime
  9. 5.第四篇 Etcd存储组件高可用部署
  10. 动态存储管理实战：GlusterFS