用iview + express + mysql 搭建的一个做单体测试的web程序

用vue-cli脚手架工具创建一个基于webpack的Vue项目(~_{这些内容都是在网上找的，嘘嘘}~~)

1.安装node：https://nodejs.org/en/

查看是否安装成功

node -v
npm -v

2.安装Vue：

直接在命令行中输入npm install vue。再进到想要创建项目(checklist-support)的目录下；

安装脚手架vue-cli

npm install –global vue-cli

安装webpack相关依赖

vue init webpack my-project

进入到项目中 ,然后安装依赖

cd my-project 
npm install

运行vue项目

npm run dev

3.安装node express：

在项目根文件夹下创建一个 server 文件夹。然后里面创建下面三个文件；
和api目录，api里面建一个文件

db.js——用来添加 mysql 配置(IP，端口，用户名，密码，数据库名称)

/ 数据库连接配置
module.exports = {
    mysql: {
        host: 'localhost',
        user: 'root',
        password: '123456',
        database: 'checklist-support',
        port: '3307'
    }
}

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/app', appApi);

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

sqlMap.js——SQL 语句映射文件，供 API 调用(相当于dao层)

// sql语句
var sqlMap = {
    //App
    app: {
        getApp:"select * from app where delFlag = '0' order by updateTime asc ",
        addApp:"insert into app(appId,appName,appUser, version,delFlag,updateTime) values (?,?,?,?, 0,?)"
    },
}
    
module.exports = sqlMap;

api/userApi.js —— 测试用 API 示例(相当于controller层)

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);

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

// 增加app
router.post('/addApp', (req, res) => {
    var sql = $sql.app.addApp;
    var params = req.body;
    console.log(params);
    conn.query(sql, [params.appId, params.appName, params.appUser, params.version,getNowFormatDate()], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});
//获得app
router.post('/getApp', (req, res) => {
  var sql = $sql.app.getApp;
  conn.query(sql, [], 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（这里也可以加载 package.json 中，然后使用 npm 执行）看到 success listen at port:3000……即服务端启动成功。

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js | npm run server",
    "server": "node server/index.js",
    "start": "npm run server | npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

4.Vue画面通过ajax调用后台接口

 this.$http.post('/api/app/getApp', {},{}).then((response) => {
          if(response.ok) {
             //do something
          }
}

这里注意，如果没有引用vue-resource，this.$http.post是不生效的，还会报错
要在main.js中引入vue-resource

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'

// 引入iview
import iview from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iview)
Vue.use(VueResource)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }

})

整个工程目录：

这里，如果执行npm run dev后，报eslint的错误，可以在build目录的webpack.base.conf.js文件中，把eslint的代码注释掉,重新执行npm run dev就不会报错了：
注释的代码如下：

// 去掉eslint验证，注释掉下面的代码
/*const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})*/

5.由于直接访问8080端口，是访问不到的，这里需要设置一下代理转发

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

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {        
        '/api': {
            target: 'http://localhost:3000/api/',
            changeOrigin: true,
            pathRewrite: {                
                '^/api': ''
            }
        }
    },
    cssSourceMap: false
  }
}

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

我就是根据以上的框架写的一个简单的做单体测试的小Demo，现在奉上源码地址：

https://github.com/uloveits/checklist-support
（喜欢或者有帮助的同学给个star~~~）