【mySql的安装配置】mySql的安装配置以及配合nodejs、express以及配合前端vue的使用

最新推荐文章于 2024-07-11 23:28:02 发布

屋昂仼

最新推荐文章于 2024-07-11 23:28:02 发布

阅读量435

点赞数

分类专栏： vue 文章标签： mysql vue 数据库

本文链接：https://blog.csdn.net/jmszl1991/article/details/117732974

版权

vue 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

1、mysql的网址以及下载安装包

下载地址：https://dev.mysql.com/downloads/mysql/

A、选择版本 MySQL Community Server 。

B、选择第一个免安装版下载。

2、点击解压至你想要存放的目录

建议解压到容量比较大的磁盘中，因为随着数据量增多，磁盘空间也会增大。

A、解压完成后，在根目录下在这个目录下新建 data文件夹和 my.ini文件；如下图

B、my.ini文件中写入如下配置

[mysqld]
port = 3306
# MySQL程序安装目录
basedir=D:\dev_kits\dataSql\mysql-5.7.34-winx64　　　　　　　
# 数据库文件存放地址
datadir=D:\dev_kits\dataSql\mysql-5.7.34-winx64\data 　
#设置最大连接数
max_connections=512
#允许临时存放在查询缓存区大小
query_cache_size=0
#设置mysql服务器的字符集
character-set-server=utf8
# 数据库默认使用引擎
default-storage-engine=INNODB
[mysql]
# mysql客户端默认的字符集，5.7才有的，5.6以及之前的版本没有default-character-set属性
default-character-set=utf8

3、配置SQL

A、以管理员身份进入安装目录的bin文件夹下

B、安装mysqld

运行如下命令：

.\mysqld -install

注意：如果运行出现报错，比如 msvcr120.dll 找不到。需要额外下载对应的Visual C++ Redistributable Packages for Visual Studio 2013，直接默认安装即可。

安装地址为：https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=40784。

然后再运行出现如下就是成功了。

C、初始化数据库，获取管理员密码

初始化的管理员密码是MySQL默认的，所以要先拿记下来，保存起来。

运行命令：

.\mysqld --initialize --user=mysql --console

这时候控制台会打印出来默认密码，注意找到root@localhost该字段，冒号后面的就是初始化密码，注意区分大小写。

C、启动mysql服务

运行命令：

net start mysql

D、使用初始密码登陆MySQL数据库

mysql -u root -p

这里注意，如果忘记了登录密码，随便输一个。然后到bin目录下找后缀名为err的文件，里边搜索一下“A temporary password” ，后边有个 root@localhost，就是你的初始密码。

E、设置你自己的密码

set password for root@localhost=password("自己需要设置的密码");

注意后边的；不要丢了。

修改完密码后，MySQL就安装成功了。如下：

自己可以退出，重新试一下自己的密码。

F、配置环境变量

为了方便登录操作mysql，在这里我们设置一个全局变量。

在系统变量新建一个

值就是你的mysql的安装目录。

在用户变量的path中增加一个，如下

然后打开cmd窗口直接输入登陆命令，如下

实现了mysql的登录便捷操作。

4、创建前端工程目录

vue创建一个项目文件，安装express和mysql依赖；

npm i -S express mysql

项目中根目录下创建一个server文件夹，文件夹下创建几个文件，如下图：

在server文件夹下新建api文件夹、db.js、index.js、sqlMap.js。（api文件存放相关api接口路径及方法，db.js配置相关数据库，index.js配置后端端口及api路由）

以下分别列出几个文件中的内容：

A、index.js

// node 后端服务器

const userApi = require('./api/userApi');  
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

// app.use(bodyParser.json());
// app.use(bodyParser.urlencoded({extended: false}));

// parse application/x-www-form-urlencoded
// bodyParser 已被弃用 现在使用以下代码 记得一定在引入路由之前配置
app.use(express.urlencoded({ extended: false }))
// parse application/json
app.use(express.json())

//解决跨域  
app.all('*', function(req, res, next) {
	res.header("Access-Control-Allow-Origin", "*");
	res.header("Access-Control-Allow-Headers", "X-Requested-With");
	res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
	res.header("X-Powered-By", ' 3.2.1')
	res.header("Content-Type", "application/json;charset=utf-8");
	next();
});

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

// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');

B、db.js

module.exports ={
  mysql:{
    host: 'localhost',
    user: 'root',
    password: '*******',// 这里你的mysql设置的登陆密码
    database: 'test',
    port: '3306'
  }
}

C、sqlMap.js

// sql语句
var sqlMap = {
  // 用户
  user: {
      add: 'insert into t_test(id, name) values (566, ?)'
  }
}

module.exports = sqlMap;

D、userApi.js

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');

// 连接数据库
var conn = mysql.createConnection(models.mysql);

conn.connect();
var jsonWrite = function(res, ret) {
    if(typeof ret === 'undefined') {
        res.json({
            code: '1',
            msg: '操作失败'
        });
    } else {
        res.json(ret);
    }
};

// 增加用户接口
router.post('/addUser', (req, res) => {
    var sql = $sql.user.add;
    var params = req.body;
    console.log(params,"===");
    conn.query(sql, [params.username], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

module.exports = router;

最后，写一个前端页面，用来提交数据，如下（记得自己安装axios，不再写安装方法了）

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form>
      <input type="text" name="username" v-model="userName"> <br> 
      <a href="javascript:;" @click="addUser">提交</a>
    </form>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      userName: '', 
    }
  },
  methods: {
    // 增加用户
    addUser () {
      var name = this.userName; 
      this.$http.post('api/addUser', {
        username: name,
      },{}).then((response) => {
        console.log(response);
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

最后的最后，很关键解决跨域。需要在vue.config.js上配置。（当然后台也可以配置，这里只是顺便说一下）。

// 代理
 proxy: {
          "/api": {
              target: "http://localhost:3000/api", // 目标代理接口地址
              secure: false,// https
              changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
              // ws: true, // 是否启用websockets
              pathRewrite: {
                  "^/api": "/"
              }
          }
        }

5、mysql建数据库、建表

上边的准备工作差不多了。但是还是运行不起来。因为你的mysql中并没有相关的database（数据库）和table（表）。所以我们要先建数据库和用到的表。

A、启动并登录mysql

（鼠标右键使用管理员身份打开）cmd运行如下命令：

启动------

net start mysql

登录------

mysql -u root -p

输入密码登录后即可。

B、建库建表

（1）、create datebase 库名"即可创建数据库。

我们给数据库起一个名字，比如“test”

create database test

（2）、建完数据库之后，可以看看自己目前的所有的数据库，有个命令“show databses”(注意是复数)

（3）、可以看到最下边的test，就是我们自己建立的数据库。这时候要使用我们建立的数据库，有个命令，“use test”；

use test

（4）、查看当前使用的数据库，键入"select database();"

select database()

（5）、在当前数据库添加表,键入 create table 表名（） { // 字段要求 }，那我们这里表明就是上边sql语句中写的 t_test,所以这里应该为：

create table t_test(id int(32), name varchar(32));

现在我们的库和表都已经建好了。

（6）、查看这个表

desc t_test;

至此，我们所见的库和表已经完成，并且验证无误。

6、起服务、调接口

进入server文件夹下，运行

node index.js

会看到一下信息，说明服务启动成功。我们的服务端口是3000，所以上边说要解决跨域问题，不要忘记。

然后运行vue页面，如下

随便在表单上填写一些内容，比如邮箱，点击提交，那么就可以在开发者工具内看见请求成功了。

还可以在控制台中查看是否返回数据：

数据库连接也会有日志显示：

到这里，我们整个mysql的流程就已经走完，想要做更加复杂的功能，除了要学习exprss一些中间件的使用和开发之外，还要学习mysql中的一些重要概念还有sql语句。

屋昂仼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【mySql的安装配置】mySql的安装配置以及配合nodejs、express以及配合前端vue的使用

1、mysql的网址以及下载安装镜像包下载地址：https://dev.mysql.com/downloads/mysql/xia
复制链接

扫一扫

专栏目录