Vue+Express+Element-Ui对MySQL中的数据进行增删改

已于 2023-06-15 20:59:09 修改
阅读量1.2k 收藏 24
点赞数 3
分类专栏： vue 文章标签： mysql elementui node.js vue
于 2022-05-27 17:57:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CherishTaoTao/article/details/125006882
版权

文章目录

前言

本次内容项目基于Vue3.0创建；
利用express读取MySQL数据库，通过element-ui展示内容。

一、初始化vue项目

1.安装vue和vue-cli

2.初始化vue项目

vue create test2

二、安装依赖

1.package.json中添加依赖

"dependencies": {
    "axios": "^0.24.0",
    "element-ui": "^2.15.6",
    "express": "^4.17.1",
    "mysql": "^2.18.1",
  }

2.安装

npm install

3.main.js中引入依赖

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
Vue.prototype.$http = window.axios

Vue.use(ElementUI)

三、配置页面接口

1.components中创建db.vue

<template>
  <div>
    <div class="top">
      <el-input v-model="tableDataName" placeholder="请输入姓名" style="width: 240px"></el-input>
      <el-button type="primary" @click="doFilter">搜索</el-button>
      <el-button @click="doReset">重置</el-button>

      <div class="space">
        <el-table :data="tableDataEnd" border style="width: 100%">
          <el-table-column prop="id" sortable label="序号" width="180" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="userName" sortable label="用户名" width="180" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="password" sortable label="密码" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="tel" sortable label="电话" header-align="center" align="center">
          </el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteRow(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="space">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[1, 2, 3, 4]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems">
          </el-pagination>
        </div>
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="id" :label-width="formLabelWidth">
              <el-input v-model="form.id" disabled auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input v-model="form.userName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
              <el-input v-model="form.tel" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>

            <el-button type="primary" @click="update">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data()
  {
    return {
      dialogFormVisible: false,
      formLabelWidth: "80px",
      dialogVisible: false,
      dialogVisible1: false,
      form: {},
      tableDataBegin: [],
      tableDataName: "",
      tableDataEnd: [],
      currentPage: 1,
      pageSize: 4,
      totalItems: 10,
      filterTableDataEnd: [],
      flag: false,
    };
  },

  handleSelectionChange(val)
  {
    this.users.id = val;
    console.log("选中的数据集合为:", val);
  },
  created() { },
  mounted()
  {
    this.querry();
  },
  computed: {
    // 测试代码
    username()
    {
      let username = sessionStorage.getItem("ms_username");

      console.log(username);
      if (username !== "test") {
        alert("11");
      }
      return username ? username : this.name;
    },
  },
  methods: {
    querry()
    {
      axios.get("/api/user/list").then((res) =>
      {
        console.log(res);

        this.tableDataBegin = res.data;
        console.log(this.tableDataEnd);
        this.totalItems = this.tableDataBegin.length;

        if (this.totalItems > this.pageSize) {
          for (let index = 0; index < this.pageSize; index++) {
            this.tableDataEnd.push(this.tableDataBegin[index]);
          }
        } else {
          this.tableDataEnd = this.tableDataBegin;
        }
      });
    },

    add()
    {
      this.form = {
        id: "",
        userName: "",
        password: "",
        address: "",
      };

      this.dialogFormVisible = true;
    },
    update()
    {
      console.log(this.form.id);
      console.log(this.form.userName);
      console.log(this.form.password);
      console.log(this.form.tel);
      var that = this;

      axios
        .post("/api/user/up", {
          id: this.bookid,
          password: this.form.password,
          tel: this.form.tel,
          userName: this.form.userName,
        })
        .then(function (res)
        {
          console.log(res.data);
          if (res.data.state == 0) {
            const loading = that.$loading({
              lock: true,
              text: "修改成功",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });

            setTimeout(() =>
            {
              loading.close();
            }, 1500);
          }
        })
        .catch(function (err)
        {
          console.log(err);
        });

      this.dialogFormVisible = false;
    },
    handleEdit(index, row)
    {
      this.form = this.tableDataEnd[index];
      this.currentIndex = index;
      this.dialogFormVisible = true;
    },
    handleDelete(index, row)
    {
      this.$confirm("永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() =>
        {
          // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
          this.tableDataEnd.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() =>
        {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    load()
    {
      var loading = this.$loading({
        lock: true,
        text: "等待跳转",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 在注册界面停留两秒钟跳转登录界
      setTimeout(() =>
      {
        loading.close();

        this.querry();
        // res.end()
      }, 3000);
    },

    deleteRow(bookid)
    {
      console.log(bookid);
      if (confirm("确定要删除吗") == true) {
        var that = this;
        //网络请求获取数据axios，根据id来删除户。id传参到后端。
        axios
          .post("/api/user/del", {
            id: bookid,
          })
          .then((res) =>
          {
            this.doReset();
            console.log(res.data);
          })
          .catch(function (err)
          {
            //请求失败
            console.log("失败了" + err);
          });
      }
    },
    cancel()
    {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    },
    doReset()
    {
      this.tableDataEnd = [];
      this.tableDataName = "";
      this.filterTableDataEnd = [];
      this.tableDataBegin.forEach((value, index) =>
      {
        if (value.userName) {
          if (value.userName.indexOf(this.tableDataName) >= 0) {
            this.filterTableDataEnd.push(value);
          }
        }
      });

      this.tableDataName = "";
      this.currentPage = 1;
      this.totalItems = this.filterTableDataEnd.length;
      this.querry();
    },

    doFilter()
    {
      if (this.tableDataName == "") {
        this.$message.warning("查询条件不能为空！");
        this.tableDataName = "";
        return;
      }

      this.tableDataEnd = [];

      this.filterTableDataEnd = [];
      this.tableDataBegin.forEach((value, index) =>
      {
        if (value.userName) {
          if (value.userName.indexOf(this.tableDataName) >= 0) {
            this.filterTableDataEnd.push(value);
          }
        }
      });

      this.tableDataName = "";
      this.currentPage = 1;
      this.totalItems = this.filterTableDataEnd.length;
      //渲染表格,根据值
      this.currentChangePage(this.filterTableDataEnd);

      this.flag = true;
    },

    //每页展示条数
    handleSizeChange(val)
    {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.handleCurrentChange(1);
    },

    handleCurrentChange(val)
    {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      //需要判断是否检索
      if (!this.flag) {
        this.currentChangePage(this.tableDataBegin);
        console.log(this.tableDataEnd);
      } else {
        this.currentChangePage(this.filterTableDataEnd);
        console.log(this.tableDataEnd);
      }
    }, //组件自带监控当前页码

    //点击下一页
    currentChangePage(list)
    {
      let from = (this.currentPage - 1) * this.pageSize;
      let to = this.currentPage * this.pageSize;
      this.tableDataEnd = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tableDataEnd.push(list[from]);
        }
      }
    },
  },
};
</script>

<style scoped>
.space {
  margin-top: 30px;
}

.top {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  height: 430px;
  margin: -260px 0 0 -520px;
}
</style>
>

2.编写后端接口和数据库配置

1.src下创建server文件夹，创建utils文件夹，创建数据库连接助手：

// 数据库连接助手
const mysql = require('mysql');
class DBHelper{
    getConn(){
        let conn = mysql.createConnection({
            // 数据库连接配置
            host: '',      // 新建数据库连接时的 主机名或ID地址 内容
            user: '', 
            database: '',      // 数据库名
            password: '',   // root 密码
            port: '',
            // 设置以字符换的形式展示。不会出现时区少8小时问题。
            dateStrings:true
        });
        conn.connect();
        return conn;
    }
}
module.exports = DBHelper;

2.创建api文件夹，创建userApi.js

const express = require('express');
const router = express.Router();
const DBHelper = require('../utils/DBHelper');
const sql = require('../sqlMap');

// 查询用户
router.get('/list', (req, res) => {
    let sqlStr = sql.user.list;
    let conn = new DBHelper().getConn();
    conn.query(sqlStr,(err, result) => {
        if (err) {
            res.json(err);
         } else {
            console.log(result);
            res.json(result)
        }
    });
}); 
// 删除用户接口
router.post('/del', (req, res) => {
    let sqlStr = sql.user.del;
    let params = req.body;
    let conn = new DBHelper().getConn();
    conn.query(sqlStr, [params.id], (err, result) => {
      let state = {}
      if (result.length > 0) {
        state.state = 1;
        res.json(state);
      } else {
        state.state = 0;
        res.json(state);
      }
    });
      conn.end();
  });
// 更新用户信息，修改用户信息
router.post('/up', (req, res) => {
    let sqlStr = sql.user.update2;
    let params = req.body;
    let conn = new DBHelper().getConn();
    conn.query(sqlStr, [params.password,params.tel,params.userName,], (err, result) => {
      let state = {}
      if (result.length > 0) {
        state.state = 1;
        res.json(state);
      } else {
        state.state = 0;
        res.json(state);
      }
    });
    conn.end();
  });
module.exports = router;

3.创建index.js

const http = require('http');
const badyParser = require('body-parser');
const express = require('express');
const userApi = require('./api/userApi');
const DBHelper = require('./utils/DBHelper');

let conn = new DBHelper().getConn();
let app = express();
let server = http.createServer(app);
app.use(badyParser.json());
app.use(badyParser.urlencoded({
    extended: false
}));

app.use('/api/user', userApi);
server.listen(3000, () => {
    console.log(' success!! port:3000')
})

4.创建sqlMap.js

// sql语句，在Api中调用
var sqlMap = {
  user: {
    add: 'insert ignore into user(userName, password,tel) values (? , ? , ?)',
    // 删除用户
    del: 'delete from user where id = ? ',
    // 查询用户       
    valid: 'select * from user where userName = ? and password = ? ',
    valid2: 'select * from user where userName = ? ',
    // 更新用户信息
    update: 'update user set password= ? where userName= ? ',
    update2: 'update user set password=?,tel=? where userName=? ',
    // 查询环境数据
    list: 'select * from user ',
  }
};
module.exports = sqlMap;

5.server目录结构
在这里插入图片描述
6.数据库表结构
在这里插入图片描述

四、配置页面路径

1.修改APP.vue默认页面

import db from './components/db.vue'

export default {
  name: 'app',
  components: {
    db
  }
}

2.解决跨域问题

1.在项目的根目录新建一个vue.config.js文件（和package.json同层次目录），然后配置文件如下：

module.exports = {
 devServer: {
   proxy: {
       '/api': {//即加上前缀,强制走代理,否则public里有的就不会走代理
           target: 'http://127.0.0.1:3000/api/',
           changeOrigin: true,//用于控制请求头中的host值
           // ws:true,//用于支持websocket
           pathRewrite: {//路径重写
               '^/api': ''
           }
       }
   },
 },
};

五、运行项目

1.从server文件夹打开命令行启动后端服务：

node index

2.启动vue项目：

npm run serve

3.结果展示：
在这里插入图片描述
在这里插入图片描述

总结

数据库表结构较简单，不展示。
项目基于Vue3.0创建。

CherishTaoTao
关注
  • 3
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+MySQL实现登录注册案例
weixin_52580677的博客
03-09 2万+
Vue+MySQL实现登录案例 1.新建vue项目并连接数据库 具体步骤见vue连接mysql数据库 2.新建/views/login.vue 根据自己的喜好搭建页面
Vue项目通过node连接MySQL数据库并实现增删改查操作
热门推荐
weixin_52580677的博客
03-01 5万+
Vue项目通过node连接MySQL数据库 1.创建Vue项目 vue create 项目名 2.下载安装需要的插件 下载express npm install express 下载cors，用于处理接口跨域问题 npm install cors 下载mysql npm install mysql 下载axios npm install axios 3.在项目中创建server文件夹，用于搭建本地服务器 创建/server/app.js，用于配置服务器相关信息 let expr
Vue链接后台数据库的增删改查
07-15
在.net模式下的vue.js后台数据增加、删除、修改、查询
用MySQL+node+vue做一个学生信息管理系统（五）：学生信息增删改的实现
最新发布
紫月i的博客
07-02 3839
先实现增加信息： post参数的获取：express中接受post请求参数需要借助第三方包 body-parser 下载npm install body-parser //引入body-parser模块 const bodyParser = require('body-parser'); //拦截所有请求,配置body-parser模块 //extended:false 方法内部使用querystring模块处理请求参数的格式,并且把参数保存在req当中 //extended:true 方法内部使用第三方
node+vue+mysql前后端分离增删改查
08-17
node+vue前后端分离增删改查：node+express+mysql作为后台，vue+bootstrap+jQuery作为前端，简单的增删改查
Mysql+MybatisPlus+Vue实现基础增删改查CRUD
来都来了
01-30 1362
数据库 设计数据库 设计五个字段，主键id自动增长且不可为空 create table if not exists `user` ( `id` bigint(20) primary key auto_increment comment '主键id', `username` varchar(255) not null comment '用户名', `sex` char(1) not null comment '性别', `phone`
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui）.zip
05-03
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：...
基于Vue+Vue-router+Vuex+Element-ui+Axios商城
06-27
本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、...
基于vue2+Mysql+nodejs+express+element-ui的前后端分离图书管理系统源码.zip
07-05
基于vue2+Mysql+nodejs+express+element-ui的前后端分离图书管理系统 使用步骤: 本地运行方法  1.新建一个名为books_manage_system的数据库  2.将node目录下books_manage_system.sql文件导入到该数据库...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Node.js-使用express对mysql数据库进行增删改查的demo
08-09
express是基于node.js的一个web应用开发框架，提供了很多特性可以帮助我们创建各种web和移动设备应用
基于python3+vue+Element-ui开发的CMDB 资产管理系统
12-17
【基于Python3+Vue+Element-UI开发的CMDB资产管理系统详解】 CMDB（Configuration Management Database，配置管理数据库）是IT服务管理中的重要组成部分，它主要用于记录和管理组织内部的各种IT资源及其相互关系。...
Vue+elementui实现增删改查
weixin_43811753的博客
07-27 3307
导航实现方案一（缺查询功能）实现方案二(缺查询功能) 实现方案一（缺查询功能） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=
express连接MySQL数据库实现增删改查
柯晓楠
05-29 5553
1、express操作数据库 1.1、安装mysql模块 cnpm i mysql --save 1.2、连接mysql数据库 本地先安装好mysql，这里就不再赘述mysql数据库的安装过程了。在mysql数据库中创建名为 stusystem 的数据库，创建 stu 表，在表中随意添加两条数据。 创建 mysql.js 文件： const mysql = require('mysql') // 创建mysql连接 const connection = mysql.createConnection({
Vue+elementUI+Axios+Servlet+Jdbc实现增删改查
只为code醉的博客
11-26 1522
将html代码、js代码、样式代码封装成vue文件，类似于java类，每个vue文件都维护自己的代码，减少了模块的耦合度。将数据操作和view渲染做了双向数据绑定，开发者只关注数据即可，无需重复操作视图，比如页面有值发生了变化，可以实时将变化的数据值传递给页面，不用再去操作dom元素渲染页面。通过Vuex，可以将公共的需要统一操作数据的逻辑放入Vuex的模块中，在每个Vue文件中均可进行调用，实现原理类似于springMvc，在每一个方法进行拦截与处理数据。
使用Express部署Vue项目连接mysql，进行增删改查
qq_42688511的博客
03-15 6521
使用Express部署Vue项目连接mysql，进行增删改查
NodeJS express框架连接MySQL增删改查
一个懒惰前端的博客
04-20 123
NodeJS express框架连接MySQL增删改查
Vue+MySQL实现购物车的增删改查
weixin_30902675的博客
12-19 1013
1，创建简单数据库数据表 2，创建Mapper文件 <!--查询商品--> <select id="selectcommodity" resultType="Commodity"> select * from commodity </select> <!--添加商品--> ...
springboot+vue+vant+element-ui.zip
01-03
springboot vue vant element-ui.zip 是指一个压缩文件，其中包含了 Spring Boot 后端、Vue 前端和 Vant、Element-UI 这两个前端框架所需的相关文件。 Spring Boot 是一个用于构建独立的、运行于生产环境的 Java ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值