目录
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语句。