实现简单前后端完全分离增删改查：node.js+mysql+vue

最新推荐文章于 2024-05-09 11:13:47 发布
最新推荐文章于 2024-05-09 11:13:47 发布
阅读量3.9k 收藏 87
点赞数 19
分类专栏： vue 文章标签： vue nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42038623/article/details/104420038
版权

1. node.js+mysql实现后台接口

配置环境

  • 选择一个空文件夹初始化项目，命令框中输入
    npm init
  • 安装要用到几个模块
    npm install express body-parser mysql cors --save
  • 建立数据库表

在根目录创建一个 index.js 文件

后端代码如下

/* 引入express框架 */
const express = require('express');
var router = express.Router();
const app = express();
/* 引入cors */
const cors = require('cors');
app.use(cors());
/* 引入body-parser */
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));
/* 引入mysql */
const mysql = require('mysql');
const conn = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'test',
    multipleStatements: true
})
conn.connect();
/* 监听端口 */
app.listen(3000, () => {
    console.log('——————————服务已启动——————————');
})
app.get('/', (req, res) => {
    res.send('<p style="color:red">服务已启动</p>');
})
//查
app.get('/api/getUserList', (req, res) => {
    const sqlStr = 'SELECT * FROM users'
    conn.query(sqlStr, (error, results) => {
        if (error) return res.json({
            code: 404,
            message: error
        })
        res.json({
            code: 200,
            message: results,
            affextedRows: results.affextedRows
        })
    })
})
//条件查找
app.get('/api/getUserListById/:id', (req, res) => {
    const id = req.params.id;
    const sqlStr = 'select * from users where id=?';
    conn.query(sqlStr, id, (err, results) => {
        if (err) return res.json({
            code: 404,
            message: '数据不存在',
            affextedRows: 0
        });
        res.json({
            code: 200,
            message: results,
            affextedRows: results.affextedRows
        });
    })
});
//添加
app.post('/api/addUser', (req, res) => {
    console.log(req.body);
    const username = req.body.username;
    const sex = req.body.sex;
    const address = req.body.address;
    console.log("username:" + username);
    // const sqlStr = "insert into users(username,sex,address) values('" + username + "','" + sex + "','" + address + "')";
    const sqlStr = "insert into users set ?";
    console.log(sqlStr);
    conn.query(sqlStr, req.body, (err, results) => {
        if (err) return res.json({
            code: 404,
            message: err,
            affectedRows: 0
        });
        res.json({
            code: 200,
            message: '添加成功',
            affectedRows: results.affectedRows
        });
    })
});
//修改
app.post('/api/updateUser', function (req, res) {
    console.log(req.body);
    const id = req.body.id;
    const username = req.body.username;
    const sex = req.body.sex;
    const address = req.body.address;
    const sqlStr = "update users set username='" + username + "',sex='" + sex + "',address='" + address + "'where id=" + id;
    console.log(sqlStr);
    conn.query(sqlStr, (err, results) => {
        if (err) return res.json({
            code: 404,
            message: err,
            affectedRows: 0
        });
        res.json({
            code: 200,
            message: '修改成功',
            affectedRows: results.affectedRows
        });
    })
});
//删除
app.delete('/api/deleteUser/:id', function (req, res) {
    console.log('params:' + req.params);
    let id = req.params.id;
    let sql = 'delete from users where id=' + id;
    conn.query(sql, id, (err, results) => {
        if (err) return res.json({
            code: 404,
            message: err,
            affectedRows: 0
        });
        res.json({
            code: 200,
            message: '删除成功',
            affectedRows: results.affectedRows
        })
    })
});

在vscode中启动该服务器（运行index.js文件）

服务器启动后，就可以通过用链接的方式生成接口，访问到数据库里面的数据

返回的是json数据

然后我们可以写一个前端项目来调用这个后台的api接口

2. vue+element ui+axios实现前端渲染

（由于不是大项目，全部使用CDN链接资源）
在根目录新建一个文件 index.html
代码如下

<!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="ie=edge">
    <title>node.js编写接口</title>
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" />
    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
    <style>
        .el-header {
            background-color: #283a50;
            display: flex;
            justify-content: space-between;
            padding-left: 0;
            align-items: center;
            color: #fff;
            font-size: 20px;
        }

        .el-header div {
            display: flex;
            align-items: center;
        }

        .el-header span {
            margin-left: 15px;
        }

        .el-main {
            background-color: #eaedfa;
            min-height: 650px;
        }

        .add {
            display: block;
            width: 200px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-header>
            <div>
                <img src="http://qkongtao.cn/wp-content/uploads/2020/02/logo1.fa9c5aaa.png" width="60px"
                    height="60px" />
                <span>简单的增删改查</span>
            </div>
        </el-header>
        <!-- 页面主题区域 -->
        <el-container>
            <!-- 内容主体 -->
            <el-main>
                <el-button type="primary" @click="showAddDialog" class="add">添加用户</el-button>
                <el-table :data="userList" border stripe>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="姓名" prop="username"></el-table-column>
                    <el-table-column label="性别" prop="sex"></el-table-column>
                    <el-table-column label="地址" prop="address"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!-- 修改按钮 -->
                            <el-tooltip class="item" effect="dark" content="修改用户" placement="top" :enterable="false">
                                <el-button type="primary" icon="el-icon-edit" size="mini"
                                    @click="showEditDialog(scope.row.id)"></el-button>
                            </el-tooltip>
                            <!-- 删除按钮 -->
                            <el-tooltip class="item" effect="dark" content="删除用户" placement="top" :enterable="false">
                                <el-button type="danger" icon="el-icon-delete" size="mini"
                                    @click="removeUserById(scope.row.id)"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
        <!-- 添加用户的对话框 -->
        <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
            <!-- 内容主题区域 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-input v-model="addForm.sex"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="addForm.address"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="adduser">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改用户对话框 -->
        <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
            <!-- 内容主题区域 -->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="用户名">
                    <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-input v-model="editForm.sex"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="editForm.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUser">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script>
    axios.defaults.baseURL = 'http://localhost:3000/api/'
    Vue.prototype.$http = axios

    var vm = new Vue({
        el: '#app',
        data: {
            //全部数据列表
            userList: [],
            addDialogVisible: false,
            addForm: {
                username: '',
                sex: '',
                address: ''
            },
            addFormRules: {
                username: [{
                    required: true,
                    message: '请输入姓名',
                    tirgger: 'blur'
                }],
                sex: [{
                    required: true,
                    message: '请输入性别',
                    tirgger: 'blur'
                }],
                address: [{
                    required: true,
                    message: '请输入地址',
                    tirgger: 'blur'
                }],
            },
            editDialogVisible: false,
            editForm: {
                username: '',
                sex: '',
                address: ''
            },
            editFormRules: {
                username: [{
                    required: true,
                    message: '请输入姓名',
                    tirgger: 'blur'
                }],
                sex: [{
                    required: true,
                    message: '请输入性别',
                    tirgger: 'blur'
                }],
                address: [{
                    required: true,
                    message: '请输入地址',
                    tirgger: 'blur'
                }],
            },



        },
        created() {
            this.getUserList()
        },
        methods: {
            async getUserList() {
                const {
                    data: res
                } = await this.$http.get('getUserList')
                console.log(res);
                this.userList = res.message
            },
            showAddDialog() {
                this.addDialogVisible = true
            },
            async showEditDialog(id) {
                const {
                    data: res
                } = await this.$http.get('getUserListById/' + id)
                if (res.code != 200) {
                    return this.$message.error('查询用户信息失败！')
                }
                this.editForm = res.message[0]
                this.editDialogVisible = true
            },
            adduser() {
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) return
                    //可以发起添加用户的网络请求
                    const {
                        data: res
                    } = await this.$http.post('addUser', this.addForm)
                    console.log('res :', res);
                    if (res.code != 200) {
                        return this.$message.error('添加用户失败！')
                    }
                    this.$message.success('添加用户成功！')
                    // 隐藏添加用户的对话框
                    this.addDialogVisible = false
                    //重新获取用户列表数据
                    this.getUserList()
                })
            },
            editUser() {
                this.$refs.editFormRef.validate(async valid => {
                    if (!valid) return
                    //可以发起添加用户的网络请求
                    const {
                        data: res
                    } = await this.$http.post('updateUser', this.editForm)
                    console.log('res :', res);
                    if (res.code != 200) {
                        return this.$message.error('修改用户失败！')
                    }
                    this.$message.success('修改用户成功！')
                    // 隐藏添加用户的对话框
                    this.editDialogVisible = false
                    //重新获取用户列表数据
                    this.getUserList()
                })
            },
            addDialogClosed() {
                //对话框关闭后自动重置
                this.$refs.addFormRef.resetFields()
            },
            editDialogClosed() {
                //对话框关闭后自动重置
                this.$refs.editFormRef.resetFields()
            },
            async removeUserById(id) {
                //弹框询问是否删除
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该用户, 是否继续?',
                    '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => {
                    return err
                })
                //如果用户确认删除，则返回值为字符串confirm
                //如果用户取消了删除，则返回值为字符串cancel
                // console.log(confirmResult);
                if (confirmResult === 'cancel') {
                    return this.$message.info('已经取消了删除')
                }
                const {
                    data: res
                } = await this.$http.delete('deleteUser/' + id)
                if (res.code != 200) {
                    return this.$message.error('删除用户失败！')
                }
                this.$message.success('删除用户成功！')
                this.getUserList()
            },
        },
    })
</script>

</html>

然后直接运行index.html文件

实现效果如下

  • 添加用户

  • 修改用户

  • 删除用户

界面效果都是用 element ui 做的，效果还可以

3. 总结

由于这段时间都在学vue + element ui 的电商后台项目，但是全端渲染中都是用的别人写好的api接口文档，然后自己也想学着写后台api接口，之前学过node.js，但是也只会基础，然后就学着用node.js学着做简单的接口文档，今天就搞了一下简单的增删改查。现在接触到的前后端有两种形式，一种是ssm框架，在jsp上用session等会话机制来实现数据渲染，一种是node.js，Node.js分为两种模式，一种为后台渲染，一种前端渲染，后端渲染使用的是模板引擎，如ejs，swig模板文件，但是这都是后端渲染，弱化了前端；后来学了vue，接触到了Vue中各种强大的东西，如双向绑定机制，路由，axios，vuex，各种等。然后真正的体验到了前后端的完全分离模式，是前端的工程项目。
    我觉得写api接口文档挺有意思的，因为如果把写好的接口用pm2部署到服务器上，那有接口文档的人都可以远程使用接口数据，爬虫得出来的数据大概就是这个意思吧！

不愿意做鱼的小鲸鱼
关注
  • 19
    点赞
  • 踩
  • 87
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
专栏目录
常见的增删改查前后端代码
weixin_46144327的博客
06-28 1310
1.查询展示列表 后端 //4 条件查询带分页的方法 @PostMapping("pageTeacherCondition/{current}/{limit}") public R pageTeacherCondition(@PathVariable long current, @PathVariable long limit, @RequestBody(required = false) TeacherQue
Vs Code Vue实现增删改查
01-07
demoaaa.zip
使用SSM+Vue前后端分离开发实现增删改查（超详细）_ssm+vue增删改查代码
最新发布
2401_84447149的博客
05-09 583
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
一个小巧且容易上手的SSM增删改查（CRUD）项目——搞起来~
编程技术分享
02-19 387
前言 在学习了 SSM 框架之后，为了进一步巩固其相关概念知识，做到把理论知识真正落实于实践，故学习开发此项目。 此项目适合初入学习 SSM 框架以及了解一些前端 Bootstrap 布局的童鞋~~ 希望经过这一简单项目的实践，能够熟练掌握使用 SSM框 架开发 Java Web 项目的具体流程，理解每一层次和每一技术在整个项目中的位置及其所发挥的作用，为后续深入理解与开发复杂项目打好基础。 项目简介 本项目是基于 Spring + Spring MVC + MyBatis+ Maven + Bootstr
maven+ssm简单的增删改查实例
09-18
maven+ssm简单的增删改查实例，内含表结构文件，使用了ajax、json；实现了简单的登录注册、增删改查的基本功能
VSCode+Idea 一个增删改查demo
qq_44622128的博客
12-06 3862
一个简单的增删改查demo开发工具Visual Studio CodeIdeaNavicatdemo前端后台 开发工具 Visual Studio Code 一款前端开发工具 下载地址：https://code.visualstudio.com/ 安装教程：https://blog.csdn.net/weixin_37590454/article/details/89436577 使用教程（搭建一个Vue项目）： （1）在安装好Vscode、nodejs的前提下，全局安装。如下图： 终端–新建终端–输入命
Spring&boot;mybatis;增删改查前后端分离分页demo
11-07
Spring&boot;&mybatis;增删改查&前后端分离&分页&demo;
node+vue+mysql前后端分离增删改查
08-17
本项目“node+vue+mysql前后端分离增删改查”就是实现这一模式的一个实例，利用Node.js（通过Express框架）、Vue.js、MySQL数据库以及Bootstrap和jQuery来构建一个基础的CRUD（Create, Read, Update, Delete）应用。...
node+vue前后端分离增删改查
08-17
在现代Web开发中，前后端分离的架构设计已经成为主流，其中“Node+Vue前后端分离增删改查”是一个典型的示例。这个项目利用Node.js（搭配Express框架）作为后端服务器，处理数据请求和业务逻辑，而Vue.js（配合...
vue后台管理系统-基于vue+node.js+express+mysql实现的前后端分离的手机端预约后台管理系统.zip
04-04
在这个项目中，MySQL 存储预约后台管理系统的各种数据，如用户信息、预约记录等，通过 Node.js 进行数据的增删改查操作。 4. **前后端分离**：前后端分离是一种现代Web开发模式，前端和后端通过API接口进行通信。...
yd-admin-server:egg.js + mysql 作为管理端后台服务
04-09
在YD-ADMIN-SERVER项目中，MySQL负责存储和管理后台的数据，如用户信息、权限配置等，通过SQL语句进行数据的增删改查操作。 5. **RBAC（Role-Based Access Control）权限控制**：这是一种权限管理模型，将权限与...
增删改查和前后台之间的数据传输
10-26
用node和ajax实现前后端的数据传输，已经根据数据做相应的操作
毕业设计，使用vue+node.js+mysql完成的资金流水后台管理系统.zip
01-02
学习这个项目，你可以了解前后端分离的开发模式，掌握Vue.js组件化开发、Node.js API设计以及MySQL数据库操作。同时，通过阅读和理解源码，还可以学习到如何处理用户认证、数据验证、错误处理等实际开发中的常见问题...
day59 前端对数据增删改查几种方式（附前后端实现代码）
gaosong0623的博客
01-17 1321
增： 1.模态对话框 分为两种情况，第一种，from表单直接提交数据，后台获取到数据，没问题直接添加，完事返回页面，用GET请求访问，页面就刷新了就显示新的数据了。优点：简单。这种方式存在的问题：from方式提交，页面一定会刷新！在后台加判断，判断数据是否为空等等问题的时候，如果失败的话，错误信息也没有办法显示，用户根本就不知道数据没有提交成功。于是就引出了第二种方式， 第二种：from+A...
VSCode开发VUE的vue-admin-template+element-UI 的增删改查页面的案例
qq_39564710的博客
02-03 1701
1: 查询： 首先界面的查询列表显示功能和条件查询功能 步骤 第一步： 找打src/router 文件夹下的index.js文件，这个是路由文件，在里面添加一个模块，直接复制一个example修改一下即可，如下 { path: '/teacher', component: Layout, redirect: '/teacher/table', name: '教师模块', meta: { title: '教师模块', icon: 'example' }, ...
vue的增删改查的分离
Slj0604的博客
07-06 203
一、 index.js文件 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/index', name: 'Index', component: ()=>import('../views/index.vue'), children:[ { path: '/select',
vscode连接小程序增删改查
weixin_45360652的博客
07-21 536
添加 展示 删除
关于增删改查
m0_53151031的博客
08-11 373
前言：今天跟大家要分享的是关于增删改查以及分页的拓展，上次与大家分享了反射。来看看今天我要分享的东西吧。 这是今天要分享内容的示意图，其中难点就是分页和模糊查询了，接下来我来讲解自己的思路与操作。 一： 1、打开数据库sqlserver服务，创立三个表（学生表，老师表，班级表）。 2、打开eclipse，建好项目，接下来导入jar包，把类和包见好（实现接口，.xml文件的配置） 3、util--->entity---->filter---->servlet----->dao
un7.13:如何在VS-Code中实现增删改查？
努力是为了让自己不平庸。。。
07-13 1607
随着VS-Code的广泛使用，越来越多的人意识到了它的便利性，越来越多的人直接将后台代码省去，结合node.js来实现代码一体化的功能，这样不仅能够减少代码的使用，还能节约内存，使电脑运行的更为流利，今天，我就来给大家讲一讲如何在VS-Code中实现一套完整的增删改查。...
vue2+node.js+mysql实现前后端分离
08-30
前后端分离是一种开发模式，它将前端和后端的开发分离，前端主要负责用户界面的展示和交互，后端主要负责数据的处理和存储。Vue2、Node.js和MySQL可以结合使用来实现前后端分离。 首先，我们可以使用Vue2作为前端框架，通过它来开发用户界面。Vue2提供了一套响应式的数据绑定和组件化的架构，使得前端开发更加高效和灵活。我们可以使用Vue的官方脚手架工具vue-cli来快速搭建项目的基础结构。 其次，Node.js可以用作后端技术，作为一个基于事件驱动的服务器端JavaScript运行环境，它提供了丰富的模块和工具，使得后端开发更加便捷。我们可以使用Express框架来构建Node.js的后端应用，通过定义路由和处理请求，与前端进行数据的交互。 最后，MySQL是一个开源的关系型数据库管理系统，它可以存储和管理数据。我们可以使用Node.js的mysql库来连接和操作MySQL数据库，通过编写SQL语句来实现数据的增删改查。 在实际开发中，前端通过Ajax或者Axios等工具向后端发送请求，后端接收请求后，通过与MySQL数据库的交互来获取或处理数据，并将结果返回给前端。前端通过Vue2的数据绑定和渲染机制，将后端返回的数据展示在用户界面上。 通过Vue2、Node.js和MySQL的组合，我们可以实现一个完整的前后端分离的应用程序。Vue2提供了优秀的用户界面，Node.js作为后端技术提供了强大的功能和灵活性，MySQL作为数据库管理系统提供了数据的存储和管理。这样的开发模式可以提高开发效率和代码的维护性，同时也能够实现更好的用户体验和性能。
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不愿意做鱼的小鲸鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值