精华内容
下载资源
问答
  • element+vue显示数据库数据

    千次阅读 2021-03-07 07:21:49
    App.vue部门统计统计项class="el-menu-vertical-demo"background-color="#545c63"text-color="#fff":default-openeds="defaultOpen"@open="handleOpen"active-text-color="#ffd04b">BUG排行榜appearappear-active...

    App.vue

    部门统计

    统计项

    class="el-menu-vertical-demo"

    background-color="#545c63"

    text-color="#fff"

    :default-openeds="defaultOpen"

    @open="handleOpen"

    active-text-color="#ffd04b">

    BUG排行榜

    appear

    appear-active-class="animated flash"

    name="submenu1-transition"

    enter-active-class="animated fadeInLeftBig"

    >

    {{user._id}} 累计: {{user._sum}}次

    IDEAS排行榜

    appear

    appear-active-class="animated flash"

    name="submenu2-transition"

    enter-active-class="animated fadeInLeftBig"

    >

    {{user._id}} 累计: {{user._sum}}次

    {{title}}

    appear

    appear-active-class="animated bounce"

    name="table1-transition"

    enter-active-class="animated fadeInDown"

    >

    empty-text="暂时没有数据............."

    style="width: 100%"

    :cell-style="changeCellStyle"

    v-loading="loading"

    v-if="showBugs"

    max-height="1000">

    label="操作"

    align="center"

    width="100">

    删除

    appear

    appear-active-class="animated bounce"

    name="table2-transition"

    enter-active-class="animated fadeInUp"

    >

    empty-text="暂时没有数据............."

    style="width: 100%"

    :cell-style="changeCellStyle"

    v-if="showIdeas"

    max-height="1000">

    label="操作"

    align="center"

    width="100">

    删除

    import axios from ‘axios‘;

    import moment from "moment";

    export default {

    name: "App2",

    data () {

    return {

    message: "index.html",

    tableData: [],

    bugsData: [],

    title: "详情",

    ideasData: [],

    loading: true,

    showBugs: true,

    showIdeas: false,

    _id: "",

    url: "",

    flag: 1,

    defaultOpen: ["1"],

    currentPage: 1, //默认显示页面为1

    pagesize: 10, //每页的数据条数

    }

    },

    methods: {

    dateFormat:function(row, column) { //时间戳,没有可以不用

    const date = row[column.property];

    if (date === undefined) {

    return "";

    }

    return moment(date).format("YYYY-MM-DD HH:mm:ss");

    },

    handleSizeChange: function(size) {

    this.pagesize = size;

    },

    //点击第几页

    handleCurrentChange: function(currentPage) {

    this.currentPage = currentPage;

    },

    changeCellStyle({rowIndex}) {

    //第八列添加 red 类

    if(rowIndex%2 === 1){

    return ‘backgroundColor: #FFFFEE‘;

    }

    },

    ideas: function () {

    this.flag=2;

    this.title = "IDEAS详情";

    axios.get(‘http://localhost:3000/api/ideas/find‘).then((res)=>{

    this.tableData = (res.data);

    console.log(this.tableData)

    }).catch((err)=>{

    console.log(err);

    });

    this.showBugs = false;

    this.showIdeas = true;

    this.loading =false;

    },

    bugs: function () {

    this.flag=1;

    this.title = "BUG详情";

    axios.get(‘http://localhost:3000/api/bugs/find‘).then((res)=>{

    this.tableData = (res.data);

    console.log(this.tableData);

    console.log()

    }).catch((err)=>{

    console.log(err);

    });

    this.showBugs = true;

    this.showIdeas = false;

    this.loading =false;

    },

    bugNum: function () {

    axios.get(‘http://localhost:3000/api/bugs/find_group‘).then((res)=>{

    this.bugsData = (res.data);

    console.log(this.bugsData)

    }).catch((err)=>{

    console.log(err);

    });

    },

    ideasNum: function () {

    axios.get(‘http://localhost:3000/api/ideas/find_group‘).then((res)=>{

    this.ideasData = (res.data);

    console.log(this.ideasData)

    }).catch((err)=>{

    console.log(err);

    });

    },

    //展开当前一级菜单,关闭其他的菜单

    handleOpen: function (key) {

    //当前打开的sub-menu的 key 数组

    this.defaultOpen = [key];

    console.log(this.defaultOpen)

    },

    selfBugsInfor: function (name) {

    let params = {

    name: name,

    };

    this.flag = 2;

    this.title = name+"的BUG详情";

    axios.post(‘http://localhost:3000/api/bugs/findSelf‘, params).then((res)=>{

    this.tableData = (res.data);

    console.log(res.data)

    }).catch((err)=>{

    console.log(err);

    });

    },

    selfIdeasInfor: function (name) {

    let params = {

    name: name,

    };

    this.flag = 2;

    this.title = name+"的IDEAS详情";

    axios.post(‘http://localhost:3000/api/ideas/findSelf‘, params).then((res)=>{

    this.tableData = (res.data);

    console.log(res.data)

    }).catch((err)=>{

    console.log(err);

    });

    },

    timeOutBugs: function (name) {

    const that = this;

    setTimeout(() =>{that.selfBugsInfor(name)},30);

    },

    timeOutIseas: function (name) {

    const that = this;

    setTimeout(() =>{that.selfIdeasInfor(name)},30);

    },

    deleteBugInfor: function (desc) {

    let params = {

    desc: desc,

    };

    this.showBugs = true;

    this.showIdeas = false;

    this.loading = false;

    this.currentPage = 1;

    axios.post(‘http://localhost:3000/api/bugs/delete‘ , params).then((res)=>{

    alert("删除成功!");

    this.bugs();

    this.bugNum();

    }).catch((err)=>{

    console.log(err);

    alert("删除失败!");

    });

    },

    deleteIdeasInfor: function (desc) {

    let params = {

    desc: desc,

    };

    this.showBugs = false;

    this.showIdeas = true;

    this.loading = false;

    this.currentPage = 1;

    axios.post(‘http://localhost:3000/api/ideas/delete‘ , params).then((res)=>{

    alert("删除成功!");

    this.ideas();

    this.ideasNum();

    }).catch((err)=>{

    console.log(err);

    alert("删除失败!");

    });

    },

    },

    mounted (http://www.amjmh.com) {

    axios.get(‘http://localhost:3000/api/bugs/find‘).then((res)=>{

    this.tableData = (res.data);

    this.loading = false;

    this.title = "BUG详情";

    console.log(this.tableData)

    }).catch((err)=>{

    console.log(err);

    });

    axios.get(‘http://localhost:3000/api/bugs/find_group‘).then((res)=>{

    this.bugsData = (res.data);

    console.log(this.bugsData)

    }).catch((err)=>{

    console.log(err);

    });

    axios.get(‘http://localhost:3000/api/ideas/find_group‘).then((res)=>{

    this.ideasData = (res.data);

    console.log(this.ideasData)

    }).catch((err)=>{

    console.log(err);

    });

    },

    }

    #table{

    float:right;

    width: 61%;

    height: 250px;

    margin-left:50px;

    margin-right:50px;

    margin-top:50px;

    margin-bottom:50px;

    }

    #Statistics{

    float:left;

    width:25%;

    height: 250px;

    margin-left:50px;

    margin-right:50px;

    margin-top:50px;

    margin-bottom:50px;

    }

    #heard{

    margin-left:50px;

    height: 15px;

    }

    .pagination{

    float:right;

    }

    p{

    font-size:15px;

    color: whitesmoke;

    }

    span{

    font-size:19px;

    color: #ffce34;

    }

    ---------------------

    原文:https://www.cnblogs.com/hyhy904/p/11325307.html

    展开全文
  • //删除图片 deleteProductImage(id,realUrl){ this.$confirm('是否要删除该产品图片?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { ...

    前端

        //删除图片
        deleteProductImage(id,realUrl){
            this.$confirm('是否要删除该产品图片?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteProductImage({ id: id ,realUrl : realUrl}).then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.getProductImage()
              }
            }).catch(res => {
    
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
    

    后端

     //从文件中删除图片,并删除数据库信息
        @GetMapping("/deleteProductImage")
        @ResponseBody
        public ServerResponse delFile(Integer id,String realUrl) {
            //字符串截断,获取图片的名称
            int lastIndexOf = realUrl.lastIndexOf("/");
            String img_path = realUrl.substring(lastIndexOf + 1, realUrl.length());
            //拼接图片的绝对地址
            img_path = "D:\\Project\\manager-api\\src\\main\\resources\\static\\images\\" + img_path;
    
            File file = new File(img_path);
            //数据库中删除数据
            int i = sProductService.deleteProductImage(id);
            if(i>0){
                if (file.exists()) {//文件是否存在
                    if (file.delete()) {//存在就删了
                        return ServerResponse.createServerResponseBySuccess("删除成功");
                    } else {
                        return ServerResponse.createServerResponseBySuccess("文件删除失败");
                    }
                }else {
                    return ServerResponse.createServerResponseByFail("文件不存在");
                }
            }else {
                return ServerResponse.createServerResponseByFail("数据删除失败");
            }
        }
    
    
    展开全文
  • 把最近学习vue的一些知识点记录下来,今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能首先我们得引入vue的版本文件和vue-resource.js,注意:vue-resource的引入要在vue版本文件之后然后把列表...

    把最近学习vue的一些知识点记录下来,今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能

    首先我们得引入vue的版本文件和vue-resource.js,注意:vue-resource的引入要在vue版本文件之后

    然后把列表页面写好,然后在methods里写一个获取列表数据的方法:

    getAllList() { //获取所有的品牌列表

    this.$http.get(‘api/getprodlist‘).then(result => {

    var result = result.body

    if (result.status === 0) {

    this.list = result.message

    } else {

    alert(‘获取数据失败‘)

    }

    })

    }

    当然list是在data里面已经定义好的

    data: {

    name:‘‘,

    list: [

    { id:1, name: ‘五菱宏光‘, ctime: newDate() },

    { id:2, name: ‘摩托罗拉‘, ctime: newDate() }

    ]

    }

    然后调用vue的生命周期函数里面的created()函数,调用此函数时当vm实例的data和methods初始化完毕后,vm实例会自动执行,在此函数里面调用刚刚写的getAllList()函数。此时列表就能获取到。添加和删除功能类似,需要注意的是删除的时候需要传入对应数据的id值,我们可以在url后面直接拼接。为了方便接口地址的修改操作,可以通过全局配置,请求数据接口的根域名和全局启用emulateJSON选项

    Vue.http.options.root=‘http://www.liulongbin.top:3005/‘;

    Vue.http.options.emulateJSON=true;

    以下是全部代码:

    Document

    添加品牌

    Name:

    IdNameCtimeOperation

    {{ item.id}}{{ item.name}}{{ item.ctime}}

    删除

    //通过全局配置,请求数据接口的根域名

    Vue.http.options.root=‘http://www.liulongbin.top:3005/‘;//全局启用emulateJSON选项

    Vue.http.options.emulateJSON=true;var vm = newVue({

    el:‘#app‘,

    data: {

    name:‘‘,

    list: [

    { id:1, name: ‘五菱宏光‘, ctime: newDate() },

    { id:2, name: ‘摩托罗拉‘, ctime: newDate() }

    ]

    },

    created() {//当vm实例的data和methods初始化完毕后,vm实例会自动执行

    this.getAllList()

    },

    methods: {

    add() {//添加

    this.$http.post(‘api/addproduct‘, { name: this.name }, { emulateJSON: true }).then(result =>{if (result.body.status === 0) {//成功

    this.getAllList()this.name=‘‘}else{

    alert(‘获取数据失败‘)

    }

    })

    },

    getAllList() {//获取所有的品牌列表

    this.$http.get(‘api/getprodlist‘).then(result =>{var result =result.bodyif (result.status === 0) {this.list =result.message

    }else{

    alert(‘获取数据失败‘)

    }

    })

    },

    del(id){//删除

    this.$http.get(‘api/delproduct/‘+id).then(result=>{if (result.body.status === 0) {//成功

    this.getAllList()

    }else{

    alert(‘获取数据失败‘)

    }

    })

    }

    }

    })

    使用是记得引入对应的文件。

    原文:https://www.cnblogs.com/Yaucheun/p/10823991.html

    展开全文
  • //导入vue.js//非常简单了设置了一下css样式#app{height: 100%;margin-left: 200px;width:50%;text-align: center;background-color: lightpink}.tab{width: 600px;margin-top: 30px;background-color: lightpink;}...

    //导入vue.js

    //非常简单了设置了一下css样式

    #app{

    height: 100%;

    margin-left: 200px;

    width:50%;

    text-align: center;

    background-color: lightpink

    }

    .tab{

    width: 600px;

    margin-top: 30px;

    background-color: lightpink;

    }

    input{

    height: 25px;

    margin-top: 10px;

    border-radius:5px;

    }

    姓名:

    年龄:

    性别:

    {{option.gender}}

    {{selected}}

    创建

    姓名年龄性别删除
    {{person.uname}}{{person.uage}}{{person.gender}}删除

    new Vue({

    el:"#app",

    data:{

    msg:"hello",

    selected:'女',

    userName:'',

    userAge:'',

    options:[

    {gender:"男"},

    {gender:"女"}

    ],

    infoArr:[]

    },

    methods:{

    //添加数据的方法

    insertInfo(){

    var obj={};

    obj.uname=this.userName;

    obj.uage=this.userAge;

    obj.gender=this.selected;

    this.infoArr.push(obj);

    console.log(obj);

    },

    //删除的方法

    deleteInfo(index){

    this.infoArr.splice(index,1);

    }

    }

    })

    展开全文
  • vue实现数据的增删改查

    千次阅读 2020-12-19 02:35:54
    vue中,我们更应该专注于对数据的操作和处理。比如我们有一个这样的页面:我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行:list: [{username: 'aaaaa',email: '123@q...
  • } 2 具体实现 注意:1 VUE的生命周期函数要写到Vue对象中,并且与el,data 同级 created()生命周期函数,创建对象后,视图渲染前调用执行, 2 一般来说:get用于查找, delete与get用法相似 常用于删除 post用于...
  • Vue前端框架提供交互逻辑处理Bootstrap前端css提供美化渲染SpringBoot后端提供接口MySQL数据库提供数据SpringBoot提供后端接口由于前端第九章我都写完了,等会复制着用,所以先把后端写好先使用Spring JPA创建Entity...
  • 满意答案isacal2013.07.08采纳率:46%等级:8已帮助:162人本文实例讲述了vue实现的上传图片到数据库并显示到页面功能。分享给大家供大家参考,具体如下:1、点击上传图片,弹出选择图片选项框。页面代码: 上传图片...
  • Vue.js + express +mysql实现数据库增删改查 1、 下载安装Node.js 在Node.js官网可下载 2、下载vue-cli脚手架 npm install vue-cli -g 3、 创建项目 后面是项目名称,在安装项目过程中需要选择安装vue-router ...
  • Vue,数据库常用技术点

    2021-11-16 11:26:33
    plugins 中引入如下 plugins: [ new FileManagerPlugin({ //初始化 filemanager-webpack-plugin 插件实例 onEnd: { delete: [ //首先需要删除项目根目录下的dist.zip './dist.zip', ], archive: [ //然后我们选择...
  • 注:建立数据表时,加入了active字段,表示用户状态(删除、未删除)。删除并不实际删除数据,只是修改对应的状态值。 vue数据插槽介绍: Vue - slot-scope="scope" 的意义: slot-scope="scope"来取得作用域...
  • vue实战(一):利用vue与ajax实现增删改查:var getUrl='${ctx}/distributor/getRate';var saveUrl= '${ctx}/distributor/saveRate';var rate = [];var vm ;var rates ='';$.ajax({url : getUrl,async : false,...
  • 2.19自学笔记——Echarts从数据库中获取数据 本文章仅记录自学进度及笔记,不用于任何商业用途,如有侵权请联系作者,作者将第一时间对相应内容进行删除。 花了三天把上课的代码运行出来了(大部分时间在划水),...
  • 添加用户以root用户登录数据库,运行以下命令:create user zhangsan identified by 'zhangsan';上面的命令创建了用户zhangsan,密码是zhangsan。在mysql.user表里可以查看到新增用户的信息:授权命令格式:grant ...
  • 改造vue-element-admin 的登录功能,变成从后台数据库中验证登录 首先了解登录时前段需要什么样的数据 要知道vue-element-admin 这个后台开发模板是集成非常多我们日常开发网站的基本功能。所以我们在改造登录功能的...
  • 数据库管理系统(DMS) 架构 后端 springboot + mybatis + h2 前端 vue + element-ui + AceEditor 功能描述 功能 状态 添加数据源 ✔ 修改数据源 ✔ 删除数据源 ✔ 获取指定数据源表信息(表名称, 字符...
  • Vue axios_crud纯前端练习三 添加+删除添加mockdao层add()函数html+vue添加测试删除mockdao层html+vue删除测试总结 添加 mock 由于上面两篇已经把架子搭好了 我们直接开始 还是从我们的后台mock开始下手 ok 在mock...
  • 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。用户是看不到 getter/setter,但是在内部它们让 Vue ...
  • 当安装了较多模块后,node_modules目录下的文件会很多,直接删除整个目录会很慢,下面介绍些快速删除node_modules目录的方法 方法一:使用rimraf模块的命令 1.在全局安装rimraf模块 npm install rimraf -g 2.然后...
  • 基于vue-admin的商品后台管理系统 缘起 朋友家新开了一家诊所,需要一套可以管理订单和库存的系统,咨询我有没有合适的。看了下有很多类似的收银台系统,都是和收银硬件打包卖的,价格贵缺乏灵活性。恰好最近工作不...
  • INSERT INTO `article_info` VALUES (1,1,1,'SpringBoot整合Vue实践',null ,'一个简易的SpringBoot整合Vue的Demo,手把手教你从入门到实践','2021-08-01 23:21:41',null,1,0,0); INSERT INTO `article_tag` VALUES ...
  • 文章目录一、删除数据表信息二、删除步骤1. 创建一个删除的html前端2. 在首页里添加跳转到删除界面的按钮3. urls.py里面添加相应的链接4. 在views.py中添加与删除相对应的方法 一、删除数据表信息 创建一个删除的...
  • 1、表格外部添加批量删除按钮,私有数据中定义数组ids。 <el-button @click="delArray()" size="mini" type="info" plain>删除</el-button> data() { return { ids: [], }; }, 2、添加...
  • 想必许多干用是处框它观有理近货框万理架是察放是近学vue的小伙伴想连接数据库,对数据进行增删改查吧,奈何不知道怎么实现。作为一路踩坑的我,为大家带来我的一些踩坑经历,水平有限,其中错误,带几做后有来人含...
  • //删除在项目目录下自动生成一个临时的file文件 File del = newFile(newFile.toURI()); del.delete();returnarray; }/*** MultipartFile转换成能解析的File文件 * *@parammultipartFile *@returnFile*/ public File ...
  • vue + Element上传多个文件,支持删除重新上传,上传后将后台返回的URL发送给后台存到数据库 <el-col :span="24"> <el-form-item label="上传附件:" prop="attachmentUrls"> <el-upload multiple...
  • 最近用vue 和node,koa写后台管理项目,后台用element ui 上传图片时,遇到很多坑,查了很多方法,解决后尽可能详尽的记录了下来 1.node部分 //npm 下载 const bodyParser = require("koa-bodyparser"); const ...
  • 本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下:首先确认 watch是一个对象,一定要当成对象来用。对象就有键,有值。键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,997
精华内容 7,198
关键字:

vue删除数据库

vue 订阅