安装node

查看是否安装成功

1 node -v
2 npm -v
3 cnpm -v

安装cnpm

使用npm安装依赖模块可能会很慢，建议换成[cnpm]

1 <!-- -g表示全局安装 -->
2 npm install -g cnpm --registry=http://registry.npm.taobao.org

安装vue-cli脚手架工具

1 cnpm install -g @vue/cli                                     # 安装 Vue Cli 
2 cnpm install -g @vue/cli-init                                #安装完后 就还可以使用 vue init 命令

创建一个项目文件夹，进入项目目录执行：

1 <!--my-project是项目名-->
2 vue init webpack my-project

进入项目内，安装vue-resource依赖

1 cd my-project
2 cnpm install vue-resource
3 cnpm install express mysql body-parser

添加 server 服务端目录

在项目根文件夹下创建一个 server 文件夹。然后里面创建下面三个文件；db.js index.js sqlMap.js

和api目录，api里面建一个文件 userApi.js

db.js——用来添加 mysql 配置

根据mysql的IP，端口，用户名，密码，数据库名称自行修改

 1 // 数据库连接配置
 2 module.exports = {
 3     mysql: {
 4         host: 'localhost',
 5         user: 'root',                    #mysql用户名
 6         password: '',                    #密码
 7         database: 'movie',               #数据库名  注意：需提前建立好数据库，步骤在文末
 8         port: '3306'                     #建议使用默认端口3306
 9     }
10 }

index.js——Express 服务器入口文件

 1 // node 后端服务器
 2 
 3 const userApi = require('./api/userApi');
 4 const fs = require('fs');
 5 const path = require('path');
 6 const bodyParser = require('body-parser');
 7 const express = require('express');
 8 const app = express();
 9 
10 app.use(bodyParser.json());
11 app.use(bodyParser.urlencoded({extended: false}));
12 
13 // 后端api路由
14 app.use('/api/user', userApi);
15 
16 // 监听端口
17 app.listen(3000);
18 console.log('success listen at port:3000......');

sqlMap.js——SQL 语句映射文件，供 API 调用

1 // sql语句
2 var sqlMap = {
3     // 用户
4     user: {
5         add: 'insert into user(id, name, age) values (0, ?, ?)'
6     }
7 }
8     
9 module.exports = sqlMap;

api/userApi.js —— 测试用 API 示例

 1 var models = require('../db');
 2 var express = require('express');
 3 var router = express.Router();
 4 var mysql = require('mysql');
 5 var $sql = require('../sqlMap');
 6 
 7 // 连接数据库
 8 var conn = mysql.createConnection(models.mysql);
 9 
10 conn.connect();
11 var jsonWrite = function(res, ret) {
12     if(typeof ret === 'undefined') {
13         res.json({
14             code: '1',
15             msg: '操作失败'
16         });
17     } else {
18         res.json(ret);
19     }
20 };
21     
22 // 增加用户接口
23 router.post('/addUser', (req, res) => {
24     var sql = $sql.user.add;    
25     var params = req.body;    
26     console.log(params);
27     conn.query(sql, [params.username, params.age], function(err, result) {    
28         if (err) {       
29             console.log(err);
30         }        
31         if (result) {
32             jsonWrite(res, result);
33         }
34     })
35 });
36 module.exports = router;

在main.js中引入vue-resource

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue'
 4 import App from './App'
 5 import router from './router'
 6 
 7 import VueRouter from 'vue-router'
 8 import VueResource from 'vue-resource'
 9 
10 /* eslint-disable no-new */
11 new Vue({
12   el: '#app',
13   router,
14   template: '<App/>',
15   components: { App }
16 })
17 
18 // 此处需要use后，this.$http.get或者this.$http.post才可以
19 Vue.use(VueRouter)
20 Vue.use(VueResource)

设置代理与跨域

vue-cli 的 config 目录的index.js文件中有一个proxyTable参数，用来设置地址映射表，可以添加到开发时配置（dev）中

 1 dev: {
 2     env: require('./dev.env'),
 3     port: 8080,
 4     autoOpenBrowser: true,
 5     assetsSubDirectory: 'static',
 6     assetsPublicPath: '/',
 7     proxyTable: {        
 8         '/api': {
 9             target: 'http://localhost:3000/api/',
10             changeOrigin: true,
11             pathRewrite: {                
12                 '^/api': ''
13             }
14         }
15     },
16     cssSourceMap: false
17   }
18 }

项目配置完毕

此时在 server 文件夹下执行 node index 看到 success listen at port:3000……即服务端启动成功。

在项目my-project目录下运行 npm run dev，看到Your application is running here: http://localhost:8080 ，可以进入浏览器输入http://localhost:8080查看页面

编写 vue

HelloWorld.vue

 1 <template>
 2   <div class="hello">
 3     <h1>{{ msg }}</h1>
 4     <form>
 5       <input type="text" name="username" v-model="userName"> <br>
 6       <input type="text" name="age" v-model="age"> <br>
 7       <a href="javascript:;" @click="addUser">提交</a>
 8     </form>
 9   </div>
10 </template>
11 <script>
12 export default {
13   name: 'hello',
14   data () {
15     return {
16       msg: 'Welcome to Your Vue.js App',
17       userName: '',
18       age: ''
19     }
20   },
21   methods: {
22     addUser() {
23       var name = this.userName;
24       var age = this.age;
25       this.$http.post('/api/user/addUser', {
26         username: name,
27         age: age
28       },{}).then((response) => {
29         console.log(response);
30       })
31     }
32   }
33 }
34 </script>

刷新浏览器，可以往数据库添加数据

注意：提前建立好数据库

在cmd运行代码

 1 mysql -u root -p                     #按提示输入数据库登录密码
 2 create database movie;               #删除数据库用drop database movie;
 3 show databases;
 4 use movie
 5 show tables;
 6 #新建表
 7 CREATE TABLE user;(                         
 8     movie_id CHAR(20) DEFAULT '0000',
 9     movie_url CHAR(20) DEFAULT '');
10 #删除表用 truncate table 表名     drop table 表名;
11 
12 INSERT INTO user (movie_id, movie_url) VALUES ('12345', '34567');                                #往表中插入数据

vue创建server连接mysql