实战vue+mySql 链接数据库并操作
今天遇到了一个PHP后台，给接口文档的时候给了我一个数据库的账户密码和表，所以我只能通过前端连接数据库并写sql语句调用数据，以下是我整理的实战过程，包括步骤，遇到的问题等，复制即用，哈哈，那么我们开始吧~1.安装vue-cli脚手架npm install -g vue-cli2.创建项目vue init webpack my-project3.在 package.json 中添加...
今天遇到了一个PHP后台，给接口文档的时候给了我一个数据库的账户密码和表，所以我只能通过前端连接数据库并写sql语句调用数据，以下是我整理的实战过程，包括步骤，遇到的问题等，复制即用，哈哈，那么我们开始吧~
【个人学习笔记，包含各种前端，及工作中遇到的问题，欢迎大家关注我
会持续更新基本每天都更新 】
(╹▽╹) 笔记地址地址：十二的前端笔记-语雀
1.安装vue-cli脚手架
npm install -g vue-cli
2.创建项目
vue init webpack my-project
3.在 package.json 中添加
"dependencies": {
"vue": "^2.1.10",
"vue-router": "^2.2.0",
"vue-resource": "^1.0.3"
},
或者
npm install vue-resource --save
4.在项目根文件夹下创建一个 server 文件夹
|-- server
|-- api
|-- userApi.js
|-- bookApi.js
|-- db.js
|-- index.js
|-- sqlMap.js
其中1)api文件夹为与数据库的各个表连接接口，每一个子文件为一个数据库中一个表的
//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.admin_user.add;
var params = req.body;
console.log(params);
conn.query(sql, [params.loginname, params.password], function(err, result) {
if (err) {
console.log(err);
}
if (result) {
jsonWrite(res, result);
}
})
})
// 增加用户接口
router.post('/addReader', (req, res) => {
var sql = $sql.reader.add
var params = req.body
console.log(params)
conn.query(sql, [params.name], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
})
router.post('/cancelReader', (req, res) => {
var sql = $sql.reader.delete
var params = req.body
console.log(params)
conn.query(sql, [params.name], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
})
router.get('/searchReader', (req, res) => {
var sql = $sql.reader.search
var params = req.query
console.log(params)
conn.query(sql, [params.name], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
console.log(result)
res.send(result)
}
})
})
router.post('/readerBorrow', (req, res) => {
var sql = $sql.reader.borrowBook
var params = req.body
console.log(params)
conn.query(sql, [params.readerName, params.bookName], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
})
module.exports = router
2)db.js为数据库连接配置
// 数据库连接配置db.js
module.exports = {
mysql: {
host: '47.99.153.***',//mysql连接ip地址
user: 'abc',
password: 'abc123',//mySql用户名密码
database: 'abc_ddd',//mySql数据库名
port: '3306'//mysql连接端口
}
}
3)index.js用来定义与监听后端服务器
// 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......');
4)sqlMap.js用来实现sql语句的api
//sqlMap.js
var sqlMap = {
// 用户
admin_user: {
add: 'insert into admin_user(loginname,password) values(?, ?)'
},
reader: {
add: 'insert into reader(name) values (?)',
delete: 'delete from reader where name = ?',
search: 'select * from reader where name = ?', //查找读者信息
borrowBook: 'update reader set lendBook1 = ? where name = ?'//更新用户表中的已借阅书籍
},
book: {
add: 'insert into book(name, author, stock) values (?, ?, ?)',
search: 'select * from book where name = ?',
borrowBook: 'update book set stock = ? , lendNum = ? where name = ?'//更新书籍表中的库存
}
}
module.exports = sqlMap;
5.在项目根目录下安装
npm install express mysql body-parser
然后在 server 文件夹下执行node index（这里也可以加载package.json中，然后使用 npm 执行）看到 success listen at port:3000……恭喜你！服务端启动成功。
6.html中的使用
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);
})
}
}
}
如果没有引用vue-resource，this.$http.post是不生效的，还会报错
报错信息：
Uncaught TypeError: Cannot read property ‘post’ of undefined
解决方案：在main.js中引入vue-resource
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '',
components: { App }
})
// 此处需要use后，this.$http.get或者this.$http.post才可以
Vue.use(VueRouter)
Vue.use(VueResource)
执行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: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
// target: 'http://192.168.3.154:81',
target: 'http://localhost:3000/api/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
},
附录：
user表建表语句
DROP TABLE IF EXISTS user;
CREATE TABLE user (
id varchar(50) NOT NULL,
name varchar(255) DEFAULT NULL,
age int(11) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
npm的常用命令
npm -v #显示版本，检查npm 是否正确安装。
npm install express #安装express模块
npm install -g express #全局安装express模块
npm list #列出已安装模块
npm show express #显示模块详情
npm update #升级当前目录下的项目的所有模块
npm update express #升级当前目录下的项目的指定模块
npm update -g express #升级全局安装的express模块
npm uninstall express #删除指定的模块
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
39
0- 0
已为社区贡献1条内容
所有评论(0)