1.创建Vue项目
使用vue-cli脚手架工具创建Vue项目
vue init webpack myapp
创建完成后
cd myapp
安装一些依赖
cnpm install --save axios
cnpm install --save stylus
cnpm install --save vue-loader
cnpm install --save css-loader
在src/main.js
添加
import axios from 'axios'
Vue.prototype.$axios = axios
修改下端口号(之前有应用占用了8080端口了)
在config/index.js修改端口号,修改port: 8080为 port: 8086
2.前端Vue
在src/components下创建一个user文件夹
在文件夹下创建一个User.vue文件
User.vue
<template>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'user',
data () {
return {
data: '1',
users: []
}
},
created () {
this.$axios({
method: 'get',
url: '/api/user'
}).catch(error => {
console.log('error:' + error)
}).then(response => {
this.users = response.data
// console.log(this.users)
})
}
}
</script>
<style scoped lang="stylus">
table
text-align: center
background-color: blanchedalmond
</style>
在src/router/index.js中修改路由的方式为history并添加路由/user
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import User from '../components/user/User'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/user',
name: 'user',
component: User
}
]
})
2.后端nodejs
在myapp文件夹下创建一个server文件夹
安装依赖
cnpm install express
cnpm install mysql
先在 本地数据库 中创建 testnodejs 数据库,然后创建 users表,建表语句
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
`id` int NOT NULL,
`name` varchar(30) DEFAULT NULL,
`age` int DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
在server文件夹下创建以下文件
数据库的连接文件
db.js
var mysql = {
host: 'localhost',
port: '3306',
user: 'root',
password: 'xxxxx',
database: 'testnodejs'
}
module.exports = {mysql}
api.js
/* eslint-disable */
var express = require('express')
var router = express.Router()
var models = require('./db')
var mysql = require('mysql')
var connection = mysql.createConnection(models.mysql)
connection.connect()
router.get('/user',function (req,res) {
var users = []
connection.query('select * from users',function (err,result) {
if (err) throw err
users = result
res.end(JSON.stringify(users))
})
})
router.get('/user/:id',function (req,res) {
var user = {}
connection.query('select * from users where id = ' + req.params.id,function (err,result) {
if (err) throw err
user = result
res.end(JSON.stringify(user))
})
})
router.get('/addUser/:name/:age/:email',function (req,res) {
var sql = 'insert into users(name,age,email) values(?,?,?)'
var user = {name: 'Mike',age:12,email:'1124245@qq,com'}
var params = [req.params.name,req.params.age,req.params.email]
connection.query(sql,params,function (err,result) {
if (err) throw err
console.log(result)
res.end(JSON.stringify(result))
})
})
router.get('/delUser/:id',function (req,res) {
connection.query('delete from users where id=' + req.params.id,function (err,result) {
if (err) throw err
res.end(JSON.stringify(result))
})
})
router.get('/updateUser/:id',function (req,res) {
connection.query('update users set name=? where id = ?',['LiMing',req.params.id],function (err,result) {
if (err) throw err
res.end(JSON.stringify(result))
})
})
module.exports = router
main.js
/* eslint-disable */
var express = require('express')
var app = express()
var api = require('./api')
app.use('/api',api)
var server = app.listen(8085,function () {
var host = server.address().address
var port = server.address().port
console.log('Server has running at http://%s:%s',host,port)
})
在cmd切换到server目录输入
node main.js
3.跨域解决
这时候启动前端项目是不能访问的后端的api的,因为前后端不是同意url,前后端需要互相访问需要跨域
跨域可以在前端配置,也可以在后端配置
这里在前端设置
在config/index.js在设置proxyTable
这时候再启动Vue项目,切换到myapp下cnpm run dev
访问http://127.0.0.1:8085/user
这样一个简单的Vue+Nodejs前后端案例就实现了