记第一次用node-express+mysql+vue的小项目

1，建立项目文件夹nodevue,文件内建立server文件夹

2，进入server此次执行以下命令搭建express

npm install express --save

npm install body-parser --save

npm install cookie-parser --save

npm install multer --save

npm list express   查看安装版本以及目录

3，服务器端形成此目录

    后台目录以及文件建立成功后运行node app.js运行后台服务 : http://127.0.0.1:8899

   app.js如下：

// 快速搭建网站后台的模块
const express = require("express"),
    app = express();

const bodyParser = require("body-parser");
const sql = require('./mysql');
var resu={
    code:2,
    msg:'',
    data:[]
}
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use("*",(req,res,next)=>{
    res.header("Access-Control-Allow-Origin","*");
next()
})
app.get('/bill/info',(req,res)=>{
    sql("select * from billcon",(err,result)=>{
        if(result!=""){
            resu.code=0
            resu.msg='success'
            resu.data=result
        }else{
            resu.code=-1
            resu.msg='empty'
            resu.data=result
        }
    res.send(resu)
})
})
app.post('/user/login', (req,res)=>{
let nickname = req.body['nickname'],
    phone = req.body['phone'],
    pwd =req.body['password'];
sql('select * from billuser where nickname="'+nickname+'" or phone="'+phone+'"',(err,result)=>{
    if(result!=""){
        if(result[0].password==pwd){
            resu.code=0
            resu.msg="success"
            resu.data=result
        }else{
            resu.code=-1
            resu.msg="wrongpwd"
            resu.data=[]
        }
    }else{
        resu.code=-1
        resu.msg="nouser"
        resu.data=[]
    }
    res.send(resu)
})
//sql(`insert into user (id,name) values ('${id}','${name}')`,(err,result)=>{
//    if(err){
//        res.send({code:0})
//    }  else{
//        res.send({code:1})
//}
})

app.listen(8899,function () {

    var host = this.address().address
    var port = this.address().port

    console.log("应用实例，访问地址为 http://%s:%s", host, port)

})//端口号

   mysql.js中的内容如下：

const mysql = require("mysql");

function  fn(sql,callback) {


    var conf = mysql.createConnection({
        //数据库的地址
        host:"localhost",
        //数据库的地址
        user:"root",
        //数据库密码（本地的为空，没有密码）
        password:"",
        //数据库端口
        port:"3306",
        //使用哪个数据库
        database:"bill"
    });
// 连接信息保存起来

    // 开始连接
    conf.connect();
// 执行我们的数据库操作
//con.query("数据库语句","传递的值","回调函数");
//查询数据库user里面的信息

    conf.query(sql, (err,result) =>{
        callback(err,result)
    });

    conf.end();
}
//模块的导入和导出
module.exports = fn;

4，客户端使用vue-cli，整理完server重新进入nodevue进行如下操作

//vue-cli建立客户端并运行

vue init webpack vueclient

cd vueclient

npm run dev

    形成目录如下：（项目中使用到的vuex，axios,layer，vue-router自行github上了解内容进行下载）

                 

  在config--->index.js中修改（proxyTable）代理进行后台服务器的访问，以下为部分代码：    

module.exports = {
  dev: {

    // Paths  该部分设置
    //env:require('./dev.env'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target:'http://192.168.1.105:8899',
        changeOrigin:true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

  在组件中运用axios进行后台访问j简单封装api接口（src新建axios（含有axios.js和fetch.js））：

  axios.js（在其中设置拦截）内容如下：

/**
 * Created by mingyue.yang on 2018/6/14.
 */
import axios from 'axios'
import Vue from 'vue'
import router from '../router'

// 设置请求发送cookie, 默认是false, 不发送
axios.defaults.withCredentials = true;

// // 添加请求拦截器
// axios.interceptors.request.use(config => {
//     let loading = Loading.service({
//         fullscreen: true,
//         text: '拼命加载中...'
//     });
//     return config
// }, err => {
//     // 对请求错误做些什么
//     console.log("发送失败");
//     let loading = Loading.service({});
//     loading.close();    //关闭加载前，记得重新定义实例
//     return Promise.reject(err)
// });

// 添加响应拦截器
axios.interceptors.response.use(res => {
  // let loading = Loading.service({});
  // loading.close();
  // 未登录的情况
  //if (res.message === 'you have not logged in yet') {
  //    store.commit('logout');
  //    router.push({
  //        path: '/home',
  //        query: {redirect: router.currentRoute.fullPath}
  //    });
  //    return Promise.reject({message: "未授权，请登录"});
  //}
  // 错误,非正常返回
  //if (res.data.status != 1) {
  //    return Promise.reject({message: res.data.info});
  //}
  return res;
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 404:
        err.message = '未找到指定文件!';
        break;
      case 403:
        sessionStorage.removeItem('user');
        router.push({
          path: '/login',
          query: {redirect: router.currentRoute.fullPath}
        });
        err.message = '未授权，请登录';
        break;
      default:
        err.message = '获取失败!';
    }
  }
  return Promise.reject(err);
});
axios.install = (Vue) => {
  Vue.prototype.$axios = axios;
}

export default axios;

 fetch.js中写请求函数：

/**
 * Created by mingyue.yang on 2018/7/3.
 */
import axios from './axios'
import Vue from 'vue'
import qs from 'qs'

export default async(url = '', data = {}, type = 'GET', headers) => {

  type = type.toUpperCase();
  if (type == 'GET') {
    if (Object.keys(data).length !== 0) {
      url = url + '?' + qs.stringify(data);
    }
  }
  let requestConfig = {
    method: type,
    headers: headers || {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }

  if (type == 'POST') {
    requestConfig.data = qs.stringify(data);
  }
  const response = await axios(url, requestConfig);
  if (response) {
    return response.data;
  }
}

  同时对所要请求的spi统一到一个js中：

import fetch from '../../axios/fetch'


// 登录相关
export const login = (userInfo) => fetch('/api/user/login', userInfo, 'post');

//接口尝试
export const getbillinfo = () => fetch('/api/bill/info','', 'get');

而后便可以在组建中请求使用接口函数进行请求（vue登录页面的部分内容截取）：

</template>
<script>
  import {login} from '../assets/js/api'
    export default {
      data(){
        return {
          username:"",
          pwd:""
        }
      },
      methods:{
        billlogin:function(){
          if(this.username==""){
            this.$layer.alert("用户名不能为空")
            return
          }else if(this.pwd==""){
            this.$layer.alert("密码不能为空")
            return
          }else{
            var data={
              nickname:this.username,
              phone:this.username,
              password:this.pwd
            }
          }
          login(data).then((res)=>{
            console.log(res)
            if(res.code==0){
                this.$router.replace('/')
            }else{
                if(res.msg=="wrongpwd"){
                    this.$layer.alert("密码错误，请重新输入")
                }else if(res.msg='nouser'){
                    this.$layer.alert("用户不存在，请输入正确账号")
                }
            }
          })
        }
      }
    }
</script>
<style lang="stylus">

至此客户端页面基本可以了，运行npm run dev即可进行后续的开发