node+mysql+vue+express項目搭建

第一步：項目搭建之前首先需要安裝node環境和MySQL數據庫。

在已經完成上述的條件下開始進行以下操作：

1. npm install @vue/cli -g   (-g 代表全局安裝)
2. 初始化項目  vue create projectName  (項目名)     （檢測是否安裝成功過程省略）
3. 剩下的配置根據自己需要來選擇

第二步：在項目的根目錄下新建一個用來放置后端的目錄

a、server文件夾

 

b、在server文件夾下新建api文件夾、db.js、index.js、sqlMap.js。

c、db.js   (配置相關數據庫)

module.exports = {
  mysql: {
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'login',
    port: '3306'
  }
}

　　

d、index.js   (配置后端端口及api路由)

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

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

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

// 監聽端口
app.listen(3000)
console.log('success listen at port:3000......')

　　

e、sqlMap.js  （sql語句，由於博主是前端，所以對於sql語句的編寫不是很好）

var sqlMap = {
  // 用戶
  user: {
    add: 'insert into user(username, password) values(?, ?)',
    selectUser: 'select * from user WHERE username = ? AND password = ? '
  }
}

module.exports = sqlMap

　　

f、userApi.js    

 

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) => {
  let sql = $sql.user.add
  let params = req.body
  conn.query(sql, [params.username, params.password], function (err, result) {
    if (err) {
      console.log('添加失敗' + err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

// 查詢用戶信息
router.post('/selectUser', (req, res) => {
  let sql = $sql.user.selectUser
  let params = req.body
  if (params.username) {
    sql = "select * from user where username = '" + params.username + "' AND password = '" + params.password + "'"
  }
  console.log(sql)
  conn.query(sql, [params.username, params.password], function (err, result) {
    console.log(err)
    console.log(result)
    if (err) {
      jsonWrite(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

module.exports = router

　　

g、主頁頁面

<template>
  <div>
    <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo_ruleForm">
        <el-form-item class="title">
          <span>Register</span>
        </el-form-item>
        <el-form-item
          prop="username">
          <el-input
            type="text"
            prefix-icon="el-icon-user"
            v-model="ruleForm.username"
            placeholder="請輸入郵箱"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="password">
          <el-input
            type="password"
            prefix-icon="el-icon-lock"
            v-model="ruleForm.password"
            placeholder="請輸入密碼"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="password1">
          <el-input
            type="password"
            prefix-icon="el-icon-lock"
            v-model="ruleForm.password1"
            placeholder="請再次輸入密碼"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="submit_btn"
            size="small"
            @click="submitForm('ruleForm')">注冊</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>
<script>
export default {
  data () {
    const checkUsename = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用戶名不能為空'))
        /* eslint-disable */
      } else if (!(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/).test(value)) {
        // eslint-disable-next-line
        return callback(new Error('用戶名格式不正確'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('請輸入密碼'))
      } else if (value.length < 5) {
        callback(new Error('密碼不能少於5位'))
      } else {
        callback()
      }
    }
    const validatePass1 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('請再次輸入密碼'))
      } else if (value.length < 5) {
        callback(new Error('密碼不能少於5位'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('前后密碼不一致'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        username: '',
        password: '',
        password1: ''
      },
      rules: {
        username: [
          { validator: checkUsename, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        password1: [
          { validator: validatePass1, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 注冊提交
    submitForm (formname) {
      const _vm = this
      _vm.$refs[formname].validate((valid) => {
        if (valid) {
          _vm.$axios.post('/api/user/addUser', {
            username: _vm.ruleForm.username,
            password: _vm.ruleForm.password1
          }).then((res) => {
            console.log(res)
            if (res.status === 200 && res.data.serverStatus === 2) {
              _vm.$message({
                message: '注冊成功!',
                type: 'success'
              })
              _vm.$refs[formname].resetFields()
            } else {
              _vm.$message({
                message: '注冊失敗!',
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.demo_ruleForm {
    width: 50%;
    margin: 20% auto;
}
.demo_ruleForm {
    text-align: center;
}
.demo_ruleForm .title span {
  font-size: 30px;
}
.submit_btn {
    width: 100%;
}
</style>

　　

h、測試

 

i、數據庫

 

 這樣我們就完成了一個簡單的前端后台一起的項目了。歡迎深入了解。