loading...

2

Vue MySQL node Express打包上线

其他读完大概需要5分钟

  • 发布时间:2017-08-27 23:48 星期日
  • 刘伟波
  • 147
  • 更新于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


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!