Vue MySQL node Express打包上线
原 其他读完大概需要5分钟
- 发布时间：2017-08-27 23:48 星期日
- 刘伟波
- 768
- 更新于： 2017-08-27 23:48 星期日
1.用vue-cli脚手架工具创建一个基于webpack的Vue项目
bulid下的dev-server.js
//连接mysql
var pool = mysql.createPool({
host:'127.0.0.1',
user:'root',
password:'',
database:'blog',
connectionLimit:10
});
var app = express()
//自定义接口
app.get('/getUser',function(req,res){
pool.getConnection((err,conn)=>{
var sql = "SELECT * FROM user";
conn.query(sql,(err,result)=>{
res.json(result);
conn.release();
});
});
})
main.js
import VueResource from 'vue-resource'
Vue.use(VueResource)
2.Hello.vue
<template>
<div class="hello">
<h1>{{msg}}</h1>
<button class="btn btn-primary" @click="getData">发送请求</button>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
getData(){
this.$http.get('/getUser').then((response)=>{
alert(response.body)
})
}
}
}
</script>
3.引入bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-ajax</title>
<link rel="stylesheet" href="./static/bootstrap/css/bootstrap.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
npm run build 生成dist目录
4.express脚手架
cnpm install express-generator -g
express -v
express -e express-demo
cd express-demo
cnpm install
npm start
5.dist目录放入express脚手架的public中
进入routes文件夹的index.js，把vue开发环境的bulid下的dev-server.js数据库连接复制到这里
var express = require('express');
var router = express.Router();
var mysql = require('mysql')
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
//连接mysql
var pool = mysql.createPool({
host:'127.0.0.1',
user:'root',
password:'',
database:'blog',
connectionLimit:10
});
//自定义接口
router.get('/getUser',function(req,res){
pool.getConnection((err,conn)=>{
var sql = "SELECT * FROM user";
conn.query(sql,(err,result)=>{
res.json(result);
conn.release();
});
});
})
module.exports = router;
6.npm start 开启demo
localhost:3000
发表评论：