Vue+NodeJs前后端分离实现

 

 

Vue+NodeJs前后端分离实现

 

1.创建Vue项目

使用vue-cli脚手架工具创建Vue项目

vue init webpack myapp

• 1

创建完成后

cd myapp

• 1

安装一些依赖

cnpm install --save axios 

• 1

cnpm install  --save stylus

• 1

cnpm install --save vue-loader

• 1

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

• 1

cnpm install mysql

• 1

在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前后端案例就实现了