webpack+Vue-cli+nodeJS+mysql搭建用戶信息系統

本文主要介紹使用vue、vuex、webpack、nodejs、mysql實現一個簡單的todolist功能。

項目開始前，確保安裝node環境，其中還用到vue-loader\axios\express等，具體安裝相關文中都有詳細代碼，主要實現的功能是：用戶信息的增刪改查。本文大致可分爲三個部分：

1、前端項目搭建：通過vue-cli快速搭建原型；

2、寫接口&提供後臺服務：然後通過nodejs的express快速搭建後臺服務器；

3、mysql操作：在mac上安裝mysql並建立數據庫；

其中還會涉及解決跨域問題、vuex進行其中狀態管理、axios進行異步請求、vue-loader進行頁面跳轉、異步加載組件等，主要功能是用戶信息的增刪改查我詳細內容如下：

1. 安裝vue-cli,使用vue-cli快速搭建項目原型

注意：以下命令都在vuex目錄下的終端運行

npm install -g @vue/cli-service-global //安裝vue-cli
vue init webpack vuex  //快速創建vue項目 vuex爲項目名稱
npm install //安裝項目依賴

1. 1執行完成以上命令後項目目錄如下：

2. express快速搭建本地服務器

注意：以下命令在sever目錄下終端運行

//先全局安裝express/express-generator相關
npm i express -g
npm install -g express-generator
express server -e  //一鍵搭建服務 server爲項目名
cd server //進入server項目
npm i //安裝sever項目依賴

2.1 以上命令運行完項目目錄如下：

3.建立mysql數據庫

注意：以下命令都在數據庫終端運行

3.1 先到社區下載mysql，詳情參考mysql下載地址選擇自己需要的mysql版本，請記住數據庫的賬號密碼（如root:1234131）

//運行下面兩句需改mysql的環境變量
alias mysql=/usr/local/mysql/bin/mysql
alias mysqladmin=/usr/local/mysql/bin/mysqladmin
//需改數據庫密碼
 mysqladmin -u root -p password newpasswords

//進入數據庫
mysql -u root -p

3.2 進入數據庫成功的後，與使用show database;後終端如下：

3.3 創建數據庫-->插入數據命令如下：

//創建數據庫vuexms
create database vuexms;
use vuexms
//建表
create table users (
      id int primary key auto_increment,
      username varchar(50),
      password varchar(50),
      realname varchar(50),
      idType varchar(50)
    );

//插入數據
insert into users(username,password,realname,age,idtype) values('admin123','123456','wj','18','33333');

//查詢
select * from users where username="admin" and password="123456789";

3.4 輸入quit關閉數據庫，直接關閉終端數據庫可能未保存丟失。

3.5 sever/router文件裏面新建conn.js連接數據庫，代碼如下：

//先在server下安裝mysql npm i mysql --save
var mysql = require('mysql');

//創建連接
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'admin123',
  database : 'vuexms',
  useConnectionPooling: true
});
 
module.exports = connection;

3.6 然後在 sever/router/index.js裏面引入上述文件

//引入連接數據庫模塊
const connection = require('./conn');
connection.connect(()=>{
  console.log('數據庫連接成功！')
})

3.7 後端在server下運行node app.js,前端在vuex下開啓npm run dev，數據庫保持開啓，點擊登陸進行登陸

server：

npm run dev

確保mysql開啓

 

4. 通過搭建服務器，請求接口，並解決跨域問題

4.1 安裝axio，在vuex/main.js引入,並掛到vue原型上

npm i axios --save


//main.js
import axios from 'axios'
/把axios 掛到vue原型方法上
Vue.prototype.axios = axios;

4.2 然後進入sever/app.js,添加代碼啓動監聽服務：http://localhost:3000

app.listen(3000, () => {
	console.log('啓動： http://localhost:3000')
})

進入sever/router/index.js修改配置：

var express = require('express');
var router = express.Router();

router.post('/checkLogin', function(req, res, next) {

  let { username,password } = req.body;


    res.send('1');

})

module.exports = router;

 

4.3進入vuex/config/index.js,配置代理，使之可以通過webpack搭建的服務（localhost 8080）可以訪問nodejs的express搭建的server服務（localhost 3000）:

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api/':{
        target:'http://localhost:3000/',
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
      }
      }
    },

    //...
}

4.4請求接口發現無請求頭報錯(...Access-Control-Allow-Origin....)

在server/router/index.js裏面添加請求頭：

var app = express();

app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  next();
});

 

前端可以通過4.2中定義了一個post方法的接口checkLogin請求數據,在8080端口下的頁面可以看到接口返回數據1；

//1. server下運行命令 開啓服務端服務器
node app.js

//2. vuex/頁面 npm run dev 

  this.axios.post('http://localhost:3000/checkLogin',{
      username:_this.loginForm.username,
      password:_this.loginForm.password
  })
  .then(response => {});

5. vuex集中管理登陸狀態

npm i vuex --save

5.1 src/下新建store/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import { userInfo } from 'os';
import Axios from 'axios';
//註冊Vuex
Vue.use(Vuex);

//狀態
const state = {
    userinfo: JSON.parse(localStorage.getItem('userinfo'))
}


/**
 * mutations 接受state對象
 * 用來操作state
*/
const mutations = {
    //保存用戶信息
    SAVE_USERINFO(state, userinfo) {//userinfo 組件操作時傳過來的
        //更新數據
        state.userinfo = userinfo;
    },
    //獲取全局用戶數據
    GET_USERLIST(state, userlist) {//userlist 組件操作時傳過來的

        state.userlist = userlist;

    }

};
/**
 * actions 接受一個與store實例具有相同的方法和屬性的context對象
 * 因此可以調用context.commit提交一個mutation
 * 或者通過context.state context.getters獲取state和getters
 * context不是store實例本身
*/
const actions = {
    //
    GET_USERLIST({ commit }) {
        return new Promise((resolve, reject)=>{
            Axios.get('/api/getUserlist').then( response => {
                commit('GET_USERLIST',response.data)
                resolve()
            })
        })
    }
}
// ,
// const getters = {
//     GET_USERLIST: state => {
//         return state.userlist;
//     },
// }

// console.log(state.userinfo)

export default new Vuex.Store({
    state,
    mutations,
    actions
})

5.2 在組件中使用情況如下：

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用戶列表</span>
        <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
      </div>
      <div class="text item">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="username" label="賬號" width="180"></el-table-column>
          <el-table-column prop="realname" label="實名" width="180"></el-table-column>
          <el-table-column prop="age" label="年齡"></el-table-column>
          <el-table-column prop="idType" label="證件號"></el-table-column>
          <el-table-column prop="id" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
              <el-button @click="handleDelete(scope.row.id)" type="text" size="small">刪除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      tableData: []
    };
  },
  method: {
    handleEdit (id) {
      console.log('修改'+id)
    },
    handleDele (id) {
      console.log('刪除'+id)
    }
  },
  created(){
    // //調用action 提交GET_USERLIST 方法
    this.$store.dispatch('GET_USERLIST').then(()=>{
      this.tableData = this.userlist;
    })
  },
  computed: {
    ...mapState({
      userlist: state => state.userlist
    })
  }
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

</style>

6.詳細代碼請點擊下面鏈接下載

https://github.com/wangjuaneisr/vueTodolist.git