【全栈养成日记】【Vue 2.0 + Node.js + Webpack + ElementUI + Mysql 】环境搭建

一、项目技术的Api

1、Node.js 官方说明文档：http://nodejs.cn/api/

(新手推荐学习教程：http://www.runoob.com/nodejs/nodejs-npm.html)

2、Vue 2.0 官方说明文档：https://cn.vuejs.org/v2/guide/installation.html

(新手推荐学习教程：http://www.runoob.com/vue2/vue-tutorial.html)

3、ElementUI 官方说明文档：http://element-cn.eleme.io/#/zh-CN/component/table

(新手推荐学习教程：http://element-cn.eleme.io/#/zh-CN/component/table)

4、Mysql (新手推荐学习教程：http://www.runoob.com/mysql/mysql-install.html)

二、Node.js 和 Npm 的安装

1、Node.js安装包及源码下载地址为：https://nodejs.org/en/download/；

2、不断点击下一步就可以了；

3、Npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题；

4、安装成功之后，通过输入 "npm -v" "node -v" 来测试是否成功安装。

三、Vue初始化

1、Vue 提供官方命令，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。

首先安装脚手架vue-cli：脚手架主要是帮助我们快速开始一个vue项目，其实其本质就是给我们一套文件结构，包含基础的依赖库，你只需要npm install一下就可以安装。让我们不需要为编译或其他琐碎的事情而浪费时间，这并不会限制到我们的发挥。

# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project

然后安装成功之后

再然后cd ZZZvue ，进入项目文件夹，然后 npm run dev，运行项目

项目启动成功，输入地址就可以打开vue的主页了

四、安装ElementUI

1、npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

2、引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

¶完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

5、安装Mysql

1、直接百度Mysql ，进行安装

2、安装成功之后，新建一个数据库

3、node.js 连接数据库，获取数据库数据

3.1、安装mysql模块，用于连接mysql数据库

npm install mysql --save

3.2、安装express模块，express就相当于jq，就是node.js的组件库

npm install express --save

3.3、然后编写一个app.js连接数据库

var express = require("express");
var mysql = require('mysql');
var mysqlbase = {
  host: 'localhost',//本地数据库
  user: 'root',//数据库用户名
  password: '123456',//数据库连接密码
  database: 'xishengwei',//连接的是哪个数据库
  port: 3306,
};
var app = express();
// 请求跨域
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1');
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

var connection = mysql.createConnection(mysqlbase);
 
connection.connect();

var data = "";
//SELECT * FROM goods 查询xishengwei数据库下面的goods表
connection.query('SELECT * FROM goods', function (error, results, fields) {
  if (error){
      console.log(error);
  }
//   console.log('The solution is: ', results);
  data = results;
});
// app.use(express.static("./public"));

app.get("/news",function(req,res){
    res.json(data);
})

app.listen(9999,function(){
  console.log("666，服务器启动成功！")
})

3.4、运行app.js，node app.js

3.5、请求固定的接口，得到对应的数据

也可以用jq的ajax请求，直接请求http://localhost:9999/news，就可以得到对应的数据了