Vue+Nodejs+MySQL简单实例开发

环境搭建

前期我们需先安装好Node和MySQL。

安装NodeJS

先去官网下载最新版的Node安装包。

安装一直点击下一步即可。

安装完成后，打开cmd，输入

node -v

显示版本号表示安装成功。

安装Vue-cli

安装好Node.js后，打开cmd，输入

npm install -g vue-cli 

安装完成后，在cmd输入

vue -V 

如显示版本号表示安装成功。

安装MySQL

去到官网下载MySQL的安装包。

选择第二个，点击Download下载。

安装步骤网上有很多教程，这里就不多讲。

安装完成配置好环境后，进入cmd，输入

mysql -uroot -p

然后输入密码后，就会进入MySQL。表示安装配置成功。

安装XAMPP

百度下载安装一个XAMPP。

安装完成后，找到你的安装目录，找到phpMyAdmin文件夹。
C:\xampp\phpMyAdmin（我这里安装在C盘）

打开里面的config.inc.php文件。
找到一下内容并进行修改。

$cfg['Servers'][$i]['user'] = 'root';           //修改成MySQL管理员账号
$cfg['Servers'][$i]['password'] = '123456';     //修改成MySQL管理员密码

$cfg['Servers'][$i]['controluser'] = 'root';     //修改成MySQL管理员账号
$cfg['Servers'][$i]['controlpass'] = '123456';   //修改成MySQL管理员密码

修改好之后，打开XAMPP。
打开里面的Apache和MySQL。

然后点击MySQL后面的Admin，进入phpMyAdmin即可。

搭建服务端

建立数据库

打开phpMyAdmin，在里面输入代码，新建一个test的数据库以及在里面建一个user的表。

-- 数据库： `test`
--
CREATE DATABASE IF NOT EXISTS `test` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `test`;


-- 表的结构 `user`

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `age` varchar(4) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

初始化项目并安装模块

在项目文件夹里新建一个文件夹，重命名为server。

打开cmd，将路径改到server文件夹。

cd F:Vue-Node-Mysql\server

路径改为你文件夹的路径。

然后输入

npm init

初始化项目。
初始化选项这里全部默认就行。

初始化完，文件夹中就会多一个package.json文件。

接下来安装三个我们需要用到的模块，在cmd输入

npm install mysql express body-parser --save

安装mysql模板，exress模块，body-parser模块。

安装完成后在package.json中能够查询到。

搭建服务端

新建一个index.js。
代码如下：

// node后端服务器
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
}));

// 后端api路由
app.use('/api/user', userApi);


// 启动监听
server.listen(8888, () => {
    console.log(' success!! port:8888')
})

然后在server中新建一个文件夹，重命名utils。
在文件夹里新建一个DBHelper.js。
该文件用于存放MySQL配置信息。
代码如下

// 数据库连接助手
const mysql = require('mysql');

class DBHelper{
    // 获取数据库连接
    getConn(){
        let conn = mysql.createConnection({
            // 数据库连接配置
            host:'127.0.0.1',
            port:'3306',
            user:'root',				// Mysql管理员用户名
            password:'123456',			// Mysql管理员密码
            database:'test'  			// 数据库名
        });
        conn.connect();
        return conn;
    }
}

module.exports = DBHelper;

然后再server文件夹中再新建一个文件夹，重命名为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 {
            console.log(result);
            res.json(result)
        }
    });
    conn.end();
});



module.exports = router;

然后在server文件夹下建立一个文件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;

安装nodemon并让服务端运行

在cmd输入

npm install -g nodemon

全局安装nodemon。

安装完成后，输入

nodemon index.js

显示连接成功。

搭建前端

搭建Vue手脚架并安装相应模块

新开一个cmd，将路径改变到项目路径

cd F:Vue-Node-Mysql

然后安装安装webpack相关依赖

vue init webpack demo

安装完成后，将cmd路径改到demo里

cd F:Vue-Node-Mysql\demo

然后我们需要用到axios模块
通过npm进行安装

npm install axios --save

搭建简易页面

打开demo\src\components\HelloWorld.vue
代码如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form action="">
      姓名:<input type="text" name="username" v-model="userName"><br>
      年龄:<input type="text" name="age" v-model="age"><br>
      <button type='button' @click="addUser">提交信息</button>
    </form>
    <form action="">
      <input type="text" v-model="keywords" placeholder="输入姓名查询">
      <button type="button" @click="selectUser">查询</button>
    </form>
  </div>
</template>

<script>
  import axios from 'axios'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      userName:'',
      age:'',
      keywords:''
  }
},
    methods:{
        addUser(){ //
            let name = this.userName;
            let age = this.age;
            axios.post('/api/user/addUser',{
                name,age
            }).then(res=>{
                alert('信息添加成功');
            }).catch(err=>{
                console.log(err)
            })
        },
        selectUser(){
            let name = this.keywords;
            axios.post('api/user/selectUser',{
                name
            }).then(res=>{
                let data = res.data[0];
                this.userName = data.name;
                this.age = data.age
            }).catch(err=>{
                console.log(err)
            })
        }
  }
}
</script>


<style scoped>
h1 {
  font-weight: normal;
}
</style>

跨域管理

因为服务端的port：8888，前端页面的port：8080。
所以我们需要进行跨域管理。

打开demo\config\index.js，修改以下代码

proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },

测试

打开两个cmd，一个用来运行服务端，一个用来运行前端页面。

//运行服务端
cd F:Vue-Node-Mysql\server

nodemon index.js


//运行前端
cd F:Vue-Node-Mysql\demo

npm run dev

然后打开http://localhost:8080/

输入姓名和年龄，提交。

来到phpMyAdmin，查看数据是否添加成功。

然后回到http://localhost:8080/。
输入对应名字，查看是否显示出对象年龄。