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)
1、Node.js安装包及源码下载地址为:https://nodejs.org/en/download/;
2、不断点击下一步就可以了;
3、Npm是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题;
4、安装成功之后,通过输入 "npm -v" "node -v" 来测试是否成功安装。
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的主页了
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
你可以引入整个 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)
});
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,就可以得到对应的数据了