【全栈初体验】Vue+Node+MySQL 实现前后端分离开发

前言

  • 这个 demo 是MVVM开发模式,我也写过一个前后端结合开发的完整系统 demo
  • Vue项目使用vue-cil3创建的。
  • 使用vue-cil2创建的项目也可以实现,只是配置代理服务器的时候有一点差别。后面分别针对这两个版本进行区分。
  • 数据库操作使用Navicat。

数据库配置

  1. 新建MySQL连接(参数可以自己配置,后面会用到)

  2. 新建数据库

  3. 新建数据表

Node服务端

目录结构如下:

  1. 新建文件夹server
  2. 初始化

    • 在server文件夹下打开命令窗口
    • 输入命令行 npm init -y

  3. utils/DBHelper.js --> 有mysql连接配置,与上面对应

    // 数据库连接助手
    const mysql = require('mysql');
    
    class DBHelper{
        // 获取数据库连接
        getConn(){
            let conn = mysql.createConnection({
                // 数据库连接配置
                host:'127.0.0.1',
                port:'3306', 
                user:'root',
                password:'',
                database:'test'  // 数据库名
            });
            conn.connect();
            return conn;
        }
    }
    
    module.exports = DBHelper;
  4. sqlMap.js --> SQL语句,供api调用

    // sql语句
    var sqlMap = {
        user: {
            // 添加用户
            add: 'insert into user(name, age) values (?, ?)',
            // 查询用户
            select: 'select * from user where name like "%"?"%"'
        }
    }
    
    module.exports = sqlMap;
  5. api/userApi.js --> 用户api

    const express = require('express');
    const router = express.Router();
    
    const DBHelper = require('../utils/DBHelper');
    const sql = require('../sqlMap');
    
    // 增加用户
    router.post('/addUser', (req, res) => {
        let sqlStr = sql.user.add;
        let params = req.body;
        let conn = new DBHelper().getConn();
        conn.query(sqlStr, [params.name, params.age], (err, result) => {
            if (err) {
                res.json(err);
            } else {
                res.json(result);
            }
        });
        conn.end();
    });
    
    // 查询用户
    router.post('/selectUser', (req, res) => {
        let sqlStr = sql.user.select;
        let params = req.body;
        let conn = new DBHelper().getConn();
        conn.query(sqlStr, [params.name], (err, result) => {
            if (err) {
                res.json(err);
            } else {
                res.json(result)
            }
        });
        conn.end();
    });
    
    module.exports = router;
  6. index.js --> 服务器入口文件

    // node后端服务器
    const http = require('http');
    const badyParser = require('body-parser');
    const express = require('express');
    const userApi = require('./api/userApi');
    
    let app = express();
    let server = http.createServer(app);
    
    app.use(badyParser.json());
    app.use(badyParser.urlencoded({
        extended: false
    }));
    
    // 后端api路由
    app.use('/api/user', userApi);
    
    // 启动监听
    server.listen(8888, () => {
        console.log(' success!! port:8888')
    })
  7. 使用命令行 npm install -S mysql 安装mysql包,然后使用命令行 node index.js 启动服务。

Vue前端文件

  1. 使用命令行 vue create vue-node-demo 创建项目,vue-cil2创建项目 参考这个
  2. 这里不是正式项目,直接在 HelloWorld.vue 进行编辑:

    
    
    

设置代理处理跨域

不进行设置会报404的错误。

因为直接访问8888端口访问不到,这里需要设置代理服务器。

vue-cli3创建的项目设置

在根目录新建文件 vue.config.js

module.exports = {
    devServer: {
        proxy: { // 设置代理
            '/api': {
                target: 'http://127.0.0.1:8888', // 请求的目标服务器接口
                changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: { // 重写请求
                    '^/api': '/api' // 替换target中的请求地址,也就是说在请求http://127.0.0.1:8888/XXXXX这个地址的时候直接写成/api即可。
                }
            }
        }
    }
}

vue-cli2创建的项目设置

// 路径:config/index.js
proxyTable: {
    '/api': {
        target: 'http://127.0.0.1:8888',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/api'
        }
    }
}

演示

来看一下效果(用来演示,没有做样式处理):

  • 命令行输入 npm run serve 运行开发环境,vue-cil2创建的项目输入 npm run dev
  • 填写信息,点击提交按钮,刷新数据库,就能看到数据已经写入到数据库。

  • 输入关键字,查询结果成功渲染到上面的表单中。(前提是数据库中有这个数据)

最后

  • demo 已上传 Github
  • vue项目实战,猫眼移动端 ,从0开始搭建完整项目

你可能感兴趣的:(全栈,前后端分离,mysql,node.js,vue.js)