mac - vue - node - express - mysql 前端+后台 完整流程
巴拉巴拉：
本文 起因是想搞清楚从前端录入数据到后台数据库完成存储的整个流程 可能原理不懂 但是 先有个完整的开始是基础
此文并非全部原创 大部分 借鉴了 https://segmentfault.com/a/1190000008176208 十分感谢 如有侵权可以联系删除
增加的部分 就是 亲自安装过程中踩过的坑 这样子可以让以后的人少踩坑 over！
Sublime Text
下载地址 http://www.sublimetext.com （这个没有.vue 文件的高亮提示 可以下载高亮插件 但是要 不会 所以换了vs code）
Mysql
1.下载mysql数据库 https://dev.mysql.com/downloads/mysql/ 默认地址安装（没有配置环境变量）(在安装的时候有选项默认是strong加密方式 更改成弱加密就不会出现后面这个埋雷了)（埋雷：因为下载的是8.0以上版本 加密方式已更改）
2.（1）下载navicat for mysql 安装 使用mysql数据库账号密码 开启连接 https://www.navicat.com.cn/download/navicat-for-mysql （14天试用）
（2）用mac终端 登陆数据库 （网上查的是直接输入mysql -uroot -p 亲测无效）本人是 /usr/local/MySQL/bin/mysql -u root -p （因为我没有配置环境变量 X﹏X 不是我不想啊 我不会啊┭┮﹏┭┮）
nodejs
1.官网下载macOS版本 默认安装 http://nodejs.cn/download/
2.终端依次输入 node -v npm -v 检测版本 是否安装成功
(设置淘宝镜像 不然卡死喵！ npm config set registry https://registry.npm.taobao.org)
3.安装mysql驱动 npm install mysql
4.编写 test.js文件保存到根目录 (注意用自己的密码 数据库 不能直接复制粘贴啊喂～）
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'enter yourself password',
database : 'enter yourself database name'
});
connection.connect();
connection.query('SELECT 1 + 1 AS solution', function (error, results, fields) {
if (error) throw error;
console.log('The solution is: ', results[0].solution);
});此处可能出现 数据库是8.0以上版本 造成的bug ━┳━ ━┳━
解决就是 将mysql的加密方式 更改
登陆进入数据库
/usr/local/MySQL/bin/mysql -u root -p
修改加密方式
mysql > ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER;
更改密码
mysql > ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password(这里写你自己的新密码)';
刷新
FLUSH PRIVILEGES;
退出
exit;5.终端 输入 node test.js 运行 看结果
连接成功！
vue
1.安装脚手架 npm install -g vue-cli
报错1:
卡住 不报错 但就是不动 因为下载地址是外网
解决：npm config set registry https://registry.npm.taobao.org 即改为淘宝镜像 用国内的 就可以很快乐
2.初始化项目
vue init webpack project（你的项目名称）
然后一路回车默认..
去根目录看一下 就可以看到多了一个文件夹 就是你刚刚生成的项目..
3.回到终端 根据提示
输入 cd 项目名称
然后 npm run dev 运行项目
然后根据提示访问 localhost:8080这个网址 就可以看到项目啦！
安装 vue-resource依赖
终端运行
npm install vue-resource --save
并且在main.js 中添加
import VueResource from 'vue-resource'
Vue.use(VueResource)
添加Express服务端目录
在项目根文件夹下创建一个server文件夹。然后里面创建下面三个文件：
db.js----用来添加mysql配置
// 数据库连接配置
module.exports = {
mysql: {
host: 'localhost',
user: 'root',
password: '',
database: 'test',
port: '3306'
}
}index.js----Express服务器入口文件
// node 后端服务器
const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
// 后端api路由
app.use('/api/user', userApi);
// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');sqlMap.js----SQL语句映射文件，以供api逻辑调用
// sql语句
var sqlMap = {
// 用户
user: {
add: 'insert into user(id, name, age) values (0, ?, ?)'
}
}
module.exports = sqlMap;api/userApi.js ---- 测试用api示例
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, params.age], function(err, result) {
if (err) {
console.log(err);
}
if (result) {
jsonWrite(res, result);
}
})
});
module.exports = router;编写完成之后，就可以在项目根目录下安装依赖
终端运行
npm install express
编写vue测试文件
由于这里只是为了测试，所以直接在vue-cli生成的HelloWorld.vue中编写即可。
{
{ msg }}
设置代理与跨域
完成上面几步之后，执行npm run dev，然后输入一组数据，点击保存，你会发现会报一个错误：vue-resource.common.js?e289:1071 POST http://localhost:8080/api/user/addUser 404 (Not Found).
这是由于直接访问8080端口，是访问不到的，所以这里需要设置一下代理转发映射.
vue-cli的config文件下index.js中有一个proxyTable参数，用来设置地址映射表，可以添加到开发时配置（dev）中
dev: {
// ...
proxyTable: {
'/api': {
target: 'http://127.0.0.1:3000/api/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
// ...
}即请求/api时就代表http://127.0.0.1:3000/api/(这里要写ip，不要写localhost)，changeOrigin参数接收一个布尔值，如果为true，这样就不会有跨域问题了。
启动项目
如图
第一个终端 依次
cd couple
cd server
node index.js
再开一个终端
cd couple
npm run dev
运行完成 访问 localhost:8080 查看项目！
（记得数据库 也要搭建好 有一个id name age 的表 id还要自动递增）
就这样 然后我去改bug了！ ヾ(￣▽￣)Bye~Bye~
超级小白一只 只负责记录踩坑 我也不知道 这些坑是怎么形成的 别问我 问就是不知道！
一步一坑的 终于成功了 ....
（＝。＝）
贴demo
还没来得及贴 demo丢了。 (°ー°〃)
按照本文重敲了一遍（记录还是很重要啊 自己要看啊！）
demo-GitHub： https://github.com/abu-demo/couple