當前位置：首頁 > 运维知识 > 数据库 >内容正文

数据库

使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能

發布時間：2025/3/21 数据库 32 豆豆

生活随笔收集整理的這篇文章主要介紹了使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用vue-cli+element-ui+expsess+mysql做一個簡易的登錄功能

1使用webpack下載vue模板

vue init webpack aaa（aaa為項目名稱）

cd到aaa文件夾下

?cd aaa

? ?安裝依賴

npm i

運行項目

npm run dev

如上圖則運行成功

?npm i element-ui -S (安裝element-ui)

npm i axios --save (安裝axios)

在main.js中引入element-ui? axios

//main.js

import ElementUIfrom'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import axiosfrom'axios'

//掛載axios到Vue原型上

Vue.prototype.axios=axios

Vue.use(ElementUI)

3 然后是login組件內容

<el-form

:model="loginForm"

status-icon

:rules="rules"

ref="loginForm"

label-width="100px"

class="demo-loginForm"

</div>

<el-form-item label="賬號" prop="username">

<el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="密碼" prop="password">

<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm('loginForm')">登錄</el-button>

<el-button @click="resetForm('loginForm')">重置</el-button>

</el-form-item>

</el-form>

</div>

</template>

export default {

name: 'login',

data () {

return {

realname: '',

loginForm: {

username: '',

password: ''

rules: {

username: [

{ required: true, message: '請輸入用戶名', trigger: 'blur' },

{ min: 5, max: 10, message: '長度在 5 到 10 個字符', trigger: 'blur' }

password: [

{ required: true, message: '請輸入密碼', trigger: 'blur' },

{ min: 5, max: 10, message: '長度在 5 到 10 個字符', trigger: 'blur' }

]

}

methods: {

open () {

let _this = this

this.$message({

message: `歡迎您,${_this.realname}`,

type: 'success'

})

submitForm (formName) {

this.$refs[formName].validate(valid => {

if (valid) {

let that = this

this.axios

.post('/api/login', {

username: that.loginForm.username,

password: that.loginForm.password

})

.then(res => {

if (res.data.length) {

that.realname = res.data[0].realname

console.log('接收返回數據', res.data[0].realname)

console.log('接收返回數據', this.realname)

this.open()

}

})

} else {

console.log('error submit!!')

return false

}

})

resetForm (formName) {

this.$refs[formName].resetFields()

}

</script>

html,

body {

margin: 0;

padding: 0;

}

html,

body,

#app,

.login {

height: 100%;

}

.login {

display: flex;

justify-content: center;

align-items: center;

background-color: #ccc;

}

.el-form {

width: 400px;

padding: 20px 20px 10px 10px;

border: 1px solid #999;

background-color: #fff;

border-radius: 10px;

}

.loginHead {

display: flex;

justify-content: center;

align-items: center;

h3 {

margin-left: 20px;

}

</style>

記得在router的index.js中配置下路由

若出現loader加載報錯

常規執行?npm install stylus-loader css-loader style-loader --save-dev?

?less 執行?npm install less less-loader --save-dev?

?sass 執行?npm install sass sass-loader --save-dev?或者（$npm intall sass-loader --save ; $npm install node-sass --save）

npm install stylus-loader css-loader style-loader --save-dev

npm install less less-loader --save-dev

npm install sass sass-loader --save-dev

輸賬號密碼admin測試一下登錄打開network

404是正常的因為我們還沒搭建服務器

賬號密碼已經發給后臺了。

到這里前端的任務已經差不多了。

express.js搭建服務器

npm i express安裝服務器?

express tempserver -e

最新express4.0版本中將命令工具分家出來了(項目地址:https://github.com/expressjs/generator),所以我們還需要安裝一個命令工具,命令如下:npm install -g express-generator? ????

?tempserver是server文件夾自定義

?cd 到tempserver 執行 npm i 安裝依賴

在tempserver的app.js的最后

//監聽888

端口

app.listen(888, () => {

console.log('服務器已經啟動。。。')

})

module.exports = app

nodemon app 命令啟動服務器

如果報錯有可能是因為沒有安裝nodemon命令?

npm install -g nodemon

chrome中

8080和888端口有跨域問題，在開發環境中可以自行配置

//aaa/config/index.js

proxyTable:{

'/api': {

target: 'http://localhost:888', // 目標接口域名

changeOrigin: true, // 是否跨域

pathRewrite: {

'^/api': '' // 重寫接口

}

//tempserver/routes/index.js

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

res.send('返回請求')

})

//aaa/src/components/login.vue中

//此處的/api/login就上面定義的接口

this.axios

.post('/api/login',{

username:that.loginForm.username,

password:that.loginForm.password

})

.then(res=>{

if(res.data.length){

that.realname=res.data[0].realname

console.log('接收返回數據',res.data[0].realname)

console.log('接收返回數據',this.realname)

this.open()

}

})

如圖現在已經200成功了，并且接收到服務器的返回值

node連接mysql數據庫

記得要啟動mysql數據庫

如果你配置了mysql的環境變量那應該不會報錯，如果沒有配置切換到phpstudy下安裝的mysql文件夾下的bin中執行命令?

mysql -hlocalost -uroot -proot?

我寫的這是默認賬號密碼

若報錯他下面有提示

我根據他的提示加了.\ 就成功了

展示所有數據庫

show databases;

或者下載工具?Navicat for MySQL 可視化操作

Navicat for MySQL 的下載地址

鏈接: https://pan.baidu.com/s/1t7bqmEJyvlaiJ7lwS4H7rw 提取碼: ka89?

新建temp數據庫然后是temp表

接著是node.js連接數據庫

https://www.runoob.com/nodejs/nodejs-mysql.html

在tempserve下

npm i mysql --save

涉及到服務器放在tempserve/routes/新建一個conn.js用來寫連接數據庫的代碼

//tempserve/routes/conn.js

const mysql = require('mysql')

//創建連接

let connection = mysql.createConnection({

host: 'localhost',

user: 'root',

password: 'root',

database: 'temp' // 數據庫名稱（我的數據庫叫temp）

})

//暴漏模塊

module.exports = connection

在//tempserve/routes/index.js中引入connection

//tempserve/routes/index.js

let connection = require('./conn')

// 連接數據庫

connection.connect(() => {

?? ?console.log('數據庫連接成功')

})

說明連接成功

sql查詢語句

tempserve/routes/index.js

var express = require('express')

var router = express.Router()

let connection = require('./conn')

// 連接數據庫

connection.connect(() => {

console.log('數據庫連接成功')

})

/* GET home page. */

router.post('/login', (req, res) => {

let {

username,

password

} = req.body

// console.log(username, password)

let sqlStr = `select * from temp where username='${username}' and password='${password}'`//sql查詢語句 temp是表名字

connection.query(sqlStr, (err, data) => {

if (err) {

?? ?throw err //有錯誤拋出

} else {

?? ?res.send(data)//正確的話返回給前端

}

})

module.exports = router

再次到瀏覽器中登錄

*有時候裝完依賴需要重啟一下服務才行

demo 地址：https://github.com/xiamengmeng1023/element-ui-admin-demo.git

總結

以上是生活随笔為你收集整理的使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。