模仿CSDN网站——环境搭建

一、git clone代码

在码云上创建开源项目CSDN2，点击“克隆/下载”，选择HTTPS方式，赋值链接，然后在本地git clone代码。

二、安装vue-cli

选中CSDN2项目文件夹，右键Git Bash here，执行以下操作：

# 安装 vue-cli
$ npm install --global vue-cli
# 回到上一层
$ cd ..
# 创建一个基于 webpack 模板的项目，名称叫做csdn2
$ vue init webpack csdn2
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "CSDN2".

   To get started:
   
     cd CSDN2
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

然后执行cd csdn2进入项目文件夹，npm run dev。项目启动成功后，在浏览器端输入localhost:8080，即可打开页面。

先把这步操作更新的内容提交到“码云”上，即执行git  commit和git push。

三、安装vue-resource依赖

安装vue-resource到项目中，找到当前项目

输入：npm install vue-resource --save

安装完毕后，在main.js中导入，如下所示：

import VueResource from 'vue-resource'

Vue.use(VueResource)

四、添加Express服务端目录

前提：电脑安装好MySQL数据库。

此项目数据库名称为csdn，这里测试的表名称为user，包含id，name，age三列。

在项目根目录下创建文件夹server，然后按照如下层级创建文件夹和文件

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

// 数据库连接配置
module.exports = {
  mysql: {
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'csdn',
    port: '3306'
  }
}

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

// node 后端服务器

const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 后端api路由
app.use('/api/user', userApi);

// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');

sqlMap.js----SQL语句映射文件，以供api逻辑调用

// sql语句
var sqlMap = {
    // 用户
    user: {
        add: 'insert into user(id, name, age) values (0, ?, ?)'
    }
}

module.exports = sqlMap;

api/userApi.js ---- 测试用api示例

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');

// 连接数据库
var conn = mysql.createConnection(models.mysql);

conn.connect();
var jsonWrite = function(res, ret) {
    if(typeof ret === 'undefined') {
        res.json({
            code: '1',
            msg: '操作失败'
        });
    } else {
        res.json(ret);
    }
};

// 增加用户接口
router.post('/addUser', (req, res) => {
    var sql = $sql.user.add;
    var params = req.body;
    console.log(params);
    conn.query(sql, [params.username, params.age], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

module.exports = router;

编写完成之后，就可以在项目根目录下安装依赖 npm install express mysql body-parser ;

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

五、设置代理与跨域

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

dev: {
    // ...
    proxyTable: {
        '/api': {
            target: 'http://localhost:3000/api/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
    // ...
}

即请求 /api 时就代表 http://localhost:3000/api/ ，changeOrigin 参数接收一个布尔值，如果为 true ，这样就不会有跨域问题了。

六、编写测试文件

由于这里只是为了测试，所以直接在vue-cli生成的Hello.vue中编写即可。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form>
      <input type="text" name="username" v-model="userName"> <br>
      <input type="text" name="age" v-model="age"> <br>
      <a href="javascript:;" @click="addUser">提交</a>
    </form>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      userName: '',
      age: ''
    }
  },
  methods: {
    addUser() {
      var name = this.userName;
      var age = this.age;
      this.$http.post('/api/user/addUser', {
        username: name,
        age: age
      },{}).then((response) => {
        console.log(response);
      })
    }
  }
}
</script>

在页面中输入一组数据，点击提交，可以在数据库中查看到刚才添加的这一条数据。

    

好啦，到此为止，环境已经搭建完成。