首页 > 其他分享 >vue-项目的整体增删改查

vue-项目的整体增删改查

时间：2022-11-01 11:22:28浏览次数：52  
标签：vue name color 改查 axios nav nbsp 增删 font

路由：

 

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>

 

标签：vue,name,color,改查,axios,nav,nbsp,增删,font
From： https://www.cnblogs.com/ZhuAo/p/16847065.html

相关文章

  • vue插槽
    1.插槽的用处组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内容的一些内容到底展示什么。 2.匿名插槽在子组件中直接使用未标名的......
  • 京东云开发者｜关于“React 和 Vue 该用哪个”我真的栓Q
    一、前言：我全都要面对当今前端界两座大山一样的主流框架，React和Vue，相信很多小伙伴都或多或少都产生过这样疑问，而这样的问题也往往很让人头疼和犹豫不决：业务场景中是不是......
  • vue之列表排序-计算属性的应用
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e......
  • Vue3学习（四）
    连接数据库实现数据防抖shake.jsexportfunctionshake(fn,delay){lettime=null;returnfunction(){letparameter=arguments;if(time){......
  • Vue3学习（五）
    设置全局参数，调用参数三种方法，阻止默认事件，阻止冒泡，capture捕获设置全局参数 main.ts import{createApp}from'vue'importAppfrom'./App.vue'importrouter......
  • vue之列表过滤
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e......
  • vue动态绑定class的几种方式
    开发项目中：vue动态绑定class的几种方式~第一种：（最简单的绑定）1.绑定单个classhtml部分： <div:class="{'active':isActive}"></div>js部分：判断是否绑定一个activedat......
  • Vue3学习（二）
     <template><h1>方法</h1><inputtype="text"v-model="input3"@input="meth()">+<inputtype="text"v-model="input4"@input="meth()">=......
  • Vue3学习（三）
    <template><h2>姓名：{{user.name}}</h2><h2>姓名：{{user.age}}</h2><h2>姓名：{{user.job.salsry}}k</h2><button@click="user.name+='%'">修改姓名</bu......
  • vue 快速删除node_modules
      因为平时装依赖的时候，有可能会报错怎么不管用的时候，就需要把node_modules文件夹删了重新intall一下，但是直接删的话会要管理员权限，或者各种问题，这个时候就可以使用一个......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99