記第一次用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即可進行後續的開發