vue-cli下连接mysql数据库
在vue项目中要实现对MySQL数据库到操作,在网上查找许多相关资料,会出现以下报错:
如果存在以上错误,请尝试
在连接数据库时请保持服务端的启动状态
如果无效,那么一下内容可能对您没有意义!!!
正文开始:
1.用vue-cli
脚手架工具创建一个基于webpack的Vue项目
前提:安装node环境
首先全局安装: npm install -g vue-cli
,然后创建一个项目文件夹,进入项目目录执行:vue init webpack my-project
(my-project是项目名)。安装完成之后可以执行 npm install
安装依赖,执行 npm run dev
进行开发时调试。
安装 vue-resource
依赖,执行npm install
2.添加Express服务端目录。
前提:电脑安装mysql数据库
在项目根文件夹下创建一个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 mysql body-parser
;
此时在server文件夹下执行node index
(这里也可以加载package.json中,然后使用npm执行)看到success listen at port:3000......即服务端启动成功。
注:在连接数据库时请保持服务端的启动状态
插入数据后:
3.编写vue测试文件
由于这里只是为了测试,所以直接在vue-cli生成的Hello.vue中编写即可。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<form>
<input type="text" name="username" v-model="userName"> <br>
<input type="text" name="age" v-model="age"> <br>
<a href="javascript:;" @click="addUser">提交</a>
</form>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App',
userName: '',
age: ''
}
},
methods: {
addUser() {
var name = this.userName;
var age = this.age;
this.$http.post('/api/user/addUser', {
username: name,
age: age
},{}).then((response) => {
console.log(response);
})
}
}
}
</script>
4.设置代理与跨域
完成上面3步之后,执行npm run dev
,然后输入一组数据,点击保存,你会发现会报一个错误:vue-resource.common.js?e289:1071 POST http://localhost:8080/api/user/addUser 404 (Not Found).
这是由于直接访问8080端口,是访问不到的,所以这里需要设置一下代理转发映射.
vue-cli的config文件中有一个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
,这样就不会有跨域问题了。
有问题请留言!!!
原文地址:https://www.cnblogs.com/yhliu/p/11103244.html
- LINUX中常用操作命令
- Java异常抛出及try,catch应用实例
- GitHub实战系列~2.把本地项目提交到github中 2015-12-10
- 前20名Python机器学习开源项目
- 接口测试 | 24 requests + unittest集成你的接口测试
- [快学Python3]数据结构与算法-二分查找
- 基于Excel参数化你的Selenium2测试
- 【LeetCode】关关刷题日记24-Leetcode 121. Best Time to Buy and Sell Stock
- 线性表的链式存储结构的实现及其应用(C/C++实现)
- [接口测试 - 基础篇] 01 你应该了解的协议基础
- 使用TensorFlow实现神经网络的介绍
- HTTP协议报文结构及抓包报文分析示例
- 必备 .NET - C# 异常处理
- Java Socket获取本机的InetAddress实例
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mysql计算两个时间字段的时间差
- 学生党学编程,有这个开源项目就够了!
- 【最强ResNet改进系列】Res2Net:一种新的多尺度网络结构,性能提升显著
- Java中的锁以及sychronized实现机制(十)
- Web 指纹识别之路
- RedisTemplate常用集合使用说明-opsForHash(四)
- Mybatis高级查询(二):多表联合查询
- Maven配置多仓库无效?来看看这篇文章
- Spring Boot启动slf4j提示找不到weblogic.xml日志异常
- Angular 应用的DevDependencies
- 轻量级服务网格 - osm
- 漫画:设计模式之 “外观模式”
- 使用 Zotero 在 Markdown 中优雅处理参考文献
- Mybatis plus自动生成业务代码
- 功能强大的CD工具 - flagger