loading...

0

Vue MySQL Express小demo

其他读完大概需要7分钟

  • 发布时间:2017-08-26 15:07 星期六
  • 刘伟波
  • 215
  • 更新于2017-08-26 15:07 星期六


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依赖,一种安装方式先在package.json中对应地方添加,然后执行npm install

"dependencies": {
    "vue": "^2.1.0",
    "vue-router": "^2.0.3",
    "vue-resource": "^1.0.3"
  },

main.js

import VueResource from 'vue-resource'

Vue.use(VueResource)

2.添加Express服务端目录。

前提:电脑安装mysql数据库

在项目根文件夹下创建一个server文件夹。然后里面创建app.js

const express = require('express');
const http=require('http');
const mysql = require('mysql');
const pool = mysql.createPool({
connectionLimit: 10,
host: '127.0.0.1',
user: 'root',
password: '',
database: 'blog'
});
const app=express();
http.createServer(app).listen(8000,"127.0.0.1");
console.log("success in listen(8000,\"127.0.0.1\")")

// app.use(express.static("public"));
// app.get("/", function (req,res) {
// res.sendFile(__dirname+"/public/index.html")
// });
app.get("/getUser", function (req,res) {
pool.getConnection(function (err, connection) {
// Use the connection
connection.query('SELECT * FROM user', function (error, results, fields) {
// And done with the connection.
res.json(results);
connection.release();
// Handle error after the release.
if (error) throw error;
// Don't use the connection here, it has been returned to the pool.
});
});
});

此时在server文件夹下执行node index(这里也可以加载package.json中,然后使用npm执行)看到success in listen(8000,\"127.0.0.1\")

即服务端启动成功。

3.编写vue测试文件

由于这里只是为了测试,所以直接在vue-cli生成的Hello.vue中编写即可。

<template>
<div class="hello">
<h1 class="am-text-center">获取blog中用户登录信息</h1>
<div class="am-container">
<table class="am-table am-table-bordered am-table-hover am-table-striped">
<thead>
<tr class="am-success ">
<th class="am-text-center">用户名</th>
<th class="am-text-center">密码</th>
<th class="am-text-center">昵称</th>
</tr>
</thead>
<tbody class="am-text-center">

</tbody>
</table>
</div>
</div>
</template>

<script>
import $ from 'jquery'
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted (){
this.getUser()
},
methods:{
getUser (){
// this.$http.get('/getUser')
// .then((res)=>{
// console.log(res)
// },(err)=>{
// console.log('err')
// })
$.ajax({
url:"/getUser",
type:"get",
success: function (data,xhr) {
console.log(xhr)
console.log(data)
}
});
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
color: #42b983;
}
</style>

4.设置代理与跨域

打开config文件夹下的index.js,配置proxyTable:

proxyTable: {
'/getUser': {
target: 'http://127.0.0.1:8000/getUser',
changeOrigin: true,
pathRewrite: {
'^/getUser': ''
}
}

即请求/getUser时就代表http://127.0.0.1:8000/getUser(这里要写ip,不要写localhost),changeOrigin参数接收一个布尔值,如果为true,这样就不会有跨域问题了。

好了,到这里,基本上完成了,可以去添加一个数据试试了。

最终项目目录结构

|-- build
|-- config
|-- node_modules
|-- server
  |-- app.js
|-- src
  |-- assets
  |-- components
    |-- Hello.vue
  |-- App.vue
|-- static
|-- .babelrc
|-- .editorconfig
|-- .gitignore
|-- index.html
|-- package.json


你可能感兴趣的文章

    发表评论

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