Vue+Node前后端项目搭建

1、安装相关的包和工具

1.1 安装node

1. 安装node.js，网址：http://nodejs.cn/download/
   安装就是一直点next

2. 检查是否安装成功，使用cmd命令（win10：window+r 打开运行输入cmd）——输入“node -v”查看版本即可

1.2 安装vue-cli

npm i -g vue-cli

1.3 安装webpack

npm i webpack

1.3 安装MySQL数据库

安装mysql，请看[安装教程](http://www.runoob.com/mysql/mysql-install.html)

2、先建立前端的项目

2.1 使用webpack搭建项目

vue init webpack '项目名字'

2.2 初始化项目

vue init webpack-simple Dome5(项目名)

项目名称

项目描述

项目作者

创建完毕

2.3 运行测试

1、输入以下

npm run dev

2、浏览器打开

3、说明vue项目创建成功

2.4 注明：安装开发依赖

npm install

3、搭建后台

3.1、可以在根目录下创建一个“app.js”作为后端启动

3.2、新建一个文件sever，用于放置后端操作的代码。

sever内新建：“model：用于放置操作数据库的增删改查逻辑代码"

"controller“：用于放置操作的逻辑代码

“route”：用于放置路由查找的相关代码

使用node的koa。先安装koa，koa-route相关组件

npm i koa
npm i koa-router

在app.js里面创建服务器(先搭建个简单版本)

//引入koa框架
const koa = require('koa');
const http = require('http');

//引入路由中间件
const Route = require('koa-router');

const app = new koa();

app.listen('8080', () => {
	console.log('成功连接到8080')
});

3.3 设置启动代码

1、根目录下package.json

2、修改scripts：下的start内容为这句

"start": "nodemon app.js",

3、输入 npm run start，启动

4、启动成功

4、创建数据库

4.1 在MySQL搭建好数据库

4.2 node安装MySQL模块

npm i mysql

4.3 新建一个config文件夹

在config下，新建一个文件存放数据库连接的代码

node连接数据库的代码：

//导出数据库连接
module.exports = {
    appPort:8080,
    dbConfig: {
        host:       "localhost",
        user:       "root",
        password:   "123456",
        database:   "internet_shopping"
    }
}

4.4 model下db.js文件

该文件放置访问和断开数据库连接的操作

var mysql = require('mysql');
const { dbConfig } = require('../config/index');
var pool  = mysql.createPool(dbConfig);
 
var db = {};

 // express中
 // db.q('select..',[],function(err,data) {
 //    if(err) {

 //    }
 //    console.log(data);
 // })

// koa中
// try{
// let data await db.q('select..',[]);
// }catch(err){}

db.q = function (sql,params) {
  return new Promise((resolve,reject)=>{
    // 取出链接
    pool.getConnection(function(err, connection) {
      if (err) {
        reject(err);
        return;
      }
      connection.query(sql,params, function (error, results, fields) {
            console.log(`${sql}=>${params}`);
             // 释放连接
            connection.release();
            if(error) {
              reject(err);
              return;
            }
            resolve(results);  
      });
    });
  });
}


// 导出对象
module.exports = db;

5、处理前后端跨域

根目录下config-> index.js 里面的dev:{

​ proxyTable: {

​ //代码块

​ }

}

将其修改替换

proxyTable: { // 配置跨域代理
     '/api': {
         target: 'http://localhost:4000/api', // 接口的域名
         // secure: false,  // 如果是https接口，需要配置这个参数
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
         pathRewrite: {
           '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉 
         }
     }
 }