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">
  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

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 访问 这样一个简单的Vue+Nodejs前后端案例就实现了