Vue+NodeJs前后端分离实现

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">tabletext-align: centerbackground-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 errusers = resultres.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 erruser = resultres.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 errconsole.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 errres.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 errres.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().addressvar port = server.address().portconsole.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前后端案例就实现了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！