vue create node-app

<template>
  <div class="home">
    用戶名 <input type="text" v-model="form.username" /><br />
    秘密碼 <input type="password" v-model="form.password" /><br />
    <button @click="login">登錄</button>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {

    }
  }
}
</script>
<style>
* {
  margin: 5px;
  padding: 5px;
}
button {
  width: 50px;
  height: 30px;
}
</style>

<template>
  <div style="display:flex">
    <div>
      用戶名:<input type='text' v-model='form.username' /><br />
      新密碼:<input type='text' v-model='form.newPassword' /><br />
      新密碼:<input type='text' v-model='form.rePassword' /><br />
      <button @click='update'>確認(rèn)</button>
      <button @click='getUser'>查詢</button>
    </div>
    <div class="div2" v-if="userInfo.nickname">
      <h3>用戶信息</h3>
      <div>
        昵稱(chēng):{{userInfo.nickname}}
      </div>
      <div v-if="userInfo.gender != '無(wú)'">
        性別:{{userInfo.gender}}
      </div>
      <div v-if="userInfo.age != ''">
        年齡:{{userInfo.age}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        newPassword: '',
        rePassword: ''
      },
      userInfo: {}
    }
  },
  methods: {
    getUser() {

    },
    update() {
     	
    }
  }
}
</script>
<style>
</style>

npm init
npm i

npm i --save express

npm i --save cors

npm i --save body-parser

npm i --save connect-multiparty

// 導(dǎo)入 express
const express = require('express')
// 創(chuàng)建 app
const app = express()
// 設(shè)置跨域訪問(wèn)
const cors = require('cors')
app.use(cors())
// 處理POST參數(shù)
const bodyParser = require('body-parser')
const multiparty = require('connect-multiparty')
// 處理 x-www-form-urlencoded
app.use(bodyParser.urlencoded({
  extended:true
}));
// 處理 application/json
app.use(bodyParser.json())
// 處理 mutipart/form-data
app.use(multiparty())
// 測(cè)試接口能否正常調(diào)用
app.get('/info', (req, res) => {
  res.send("Hello shaoyahu !")
})
// 啟動(dòng)
app.listen(3000, () => {
  console.log('express server running at http://127.0.0.1:' + 3000);
})

node app.js

npm i --save mysql

let mysql = require('mysql')
const db_config = {
  host: 'localhost',
  user: '請(qǐng)輸入你自己的賬號(hào), 一般為 root',
  password: '請(qǐng)輸入你自己的密碼, 一般也為 root',
  port: "3306",// 默認(rèn)使用3306端口號(hào)
  database: 'node_app'// 使用你自己創(chuàng)建的數(shù)據(jù)庫(kù)名稱(chēng),我這里使用 node_app
}
// 進(jìn)行數(shù)據(jù)庫(kù)交互
function conMysql(sql) {
  let connect = mysql.createConnection(db_config)
  // 開(kāi)始鏈接數(shù)據(jù)庫(kù)
  connect.connect(function (err) {
    if (err) {
      console.log(`mysql連接失敗: ${err}!`)
    } else {
      console.log('mysql連接成功!')
    }
  })
  // 返回一個(gè)Promise承諾對(duì)象
  return new Promise((resolve, reject) => {
    connect.query(sql, (err, result) => {
      if (err) {
        reject(err)
      } else {
        // 此處需要將返回?cái)?shù)據(jù)轉(zhuǎn)為JSON再轉(zhuǎn)回來(lái),否則原數(shù)據(jù)不為任何數(shù)據(jù)類(lèi)型
        let res = JSON.parse(JSON.stringify(result))
        closeMysql(connect)
        resolve(res)
      }
    });
  })
}
// 查詢成功后關(guān)閉mysql
function closeMysql(connect) {
  connect.end((err) => {
    if (err) {
      console.log(`mysql關(guān)閉失敗:${err}!`)
    } else {
      console.log('mysql關(guān)閉成功!')
    }
  })
}
// 導(dǎo)出方法
exports.conMysql = conMysql

// 引入 mysql 方法
let { conMysql } = require('./mysql')
// 獲取全部用戶信息，測(cè)試數(shù)據(jù)庫(kù)連接的上不上
app.get('/getUser', (req, res) => {
  let sql = 'select * from userinfo'
  conMysql(sql).then(result => {
    res.send(result)
  })
})

// 創(chuàng)建統(tǒng)一的返回報(bào)文對(duì)象
class Response {
  constructor(isSucceed, msg, code, data) {
    this.isSucceed = isSucceed;
    this.msg = msg;
    this.code = code;
    this.data = data;
  }
}

// 登錄
app.post('/login', (req, res) => {
  let sql = `select * from userinfo where username = '${req.body.username}'`
  conMysql(sql).then(result => {
    if (result[0].password === req.body.password) {
      let response = new Response(true, '登錄成功', 200, result)
      res.send(response)
    } else {
      let response = new Response(false, '用戶名或密碼錯(cuò)誤', 400)
      res.status(400).send(response)
    }
  }).catch(err => {
    res.status(500).send('數(shù)據(jù)庫(kù)連接出錯(cuò)!')
  })
})

// 修改密碼
app.post('/updatePassword', (req, res) => {
  let sql = `update userinfo set password = '${req.body.newPassword}' where username = '${req.body.username}'`
  conMysql(sql).then(result => {
    if (result.affectedRows == 1) {
      let response = new Response(true, '修改成功', 200, result)
      res.send(response)
    } else {
      let response = new Response(false, '修改失敗,請(qǐng)稍后重試', 400)
      res.status(400).send(response)
    }
  }).catch(err => {
    res.status(500).send('數(shù)據(jù)庫(kù)連接出錯(cuò)!')
  })
})

// 獲取當(dāng)前用戶信息
app.get('/getUserInfo', (req, res) => {
  let sql = `select * from userinfo where username = '${req.query.username}'`
  conMysql(sql).then(result => {
    let response = new Response(true, '獲取成功', 200, result)
    res.send(response)
  }).catch(err => {
    res.status(500).send('數(shù)據(jù)庫(kù)連接出錯(cuò)!')
  })
})

$ npm i --save axios

const axios = require('axios')

const service = axios.create({
  baseURL: 'http://localhost:3000'
})

export default service

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

// 用戶登錄
export function userLogin(data) {
  return axios.post(`/login`, data)
}

// 修改密碼
export function updatePassword(data) {
  return axios.post('/updatePassword', data)
}

// 獲取用戶信息
export function getUserInfo(username){
  return axios.get('/getUserInfo?username=' + username)
}

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      },
    },
  }
}

const axios = require('axios')

const service = axios.create({
  baseURL: '/api'
})

export default service

import { userLogin } from '../api/user'

    login() {
      userLogin(this.form)
        .then((res) => {
          alert(res.data.msg)
          this.$router.push('about')
        })
        .catch((err) => {
          alert(err.response.data.msg)
        })
    }

import { updatePassword, getUserInfo } from '../api/user'

    getUser() {
      getUserInfo(this.form.username).then(res => {
        this.userInfo = res.data.data[0]
      }).catch((err) => {
        console.log(err)
      })
    },
    update() {
      if (
        this.form.username == '' ||
        this.form.newPassword == '' ||
        this.form.rePassword == ''
      ) {
        alert('數(shù)據(jù)不能為空')
        return
      }
      updatePassword(this.form)
        .then((res) => {
          alert(res.data.msg)
          this.$router.push('/')
          alert('修改密碼后請(qǐng)重新登錄')
        })
        .catch((err) => {
          alert(err.response.data.msg)
        })
    }