Vue+Nodejs+MySQL简单实例开发

2022年05月11日阅读数：5

这篇文章主要向大家介绍Vue+Nodejs+MySQL简单实例开发,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。

标签： javascript php html 前端 vue java node mysql webpack ios

Vue+Nodejs+MySQL简单实例开发

环境搭建
搭建服务端
搭建前端
测试

环境搭建

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

安装NodeJS

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

安装一直点击下一步便可。html

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

node -v

显示版本号表示安装成功。
在这里插入图片描述 vue

安装Vue-cli

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

npm install -g vue-cli

安装完成后，在cmd输入node

vue -V

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

在这里插入图片描述

安装MySQL

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

在这里插入图片描述
选择第二个，点击Download下载。ios

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

安装完成配置好环境后，进入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/。
输入对应名字，查看是否显示出对象年龄。

在这里插入图片描述

标签： javascript php html 前端 vue java node mysql webpack ios

原文地址：https://blog.csdn.net/weixin_43803691/article/details/102641851

Vue+Nodejs+MySQL简单实例开发

Vue+Nodejs+MySQL简单实例开发

环境搭建

安装NodeJS

安装Vue-cli

安装MySQL

安装XAMPP

搭建服务端

创建数据库

初始化项目并安装模块

搭建服务端

安装nodemon并让服务端运行

搭建前端

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

搭建简易页面

跨域管理

测试

相关推荐

热门标签