使用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組件內容
<template>
<div class="login">
<el-form
:model="loginForm"
status-icon
:rules="rules"
ref="loginForm"
label-width="100px"
class="demo-loginForm"
>
<div class="loginHead">
<i class="el-icon-s-operation"></i>
<h3>登錄</h3>
</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>
<script>
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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
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做一个简易的登录功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 疫情之下，“无接触”生意火了
- 下一篇： 图数据库应用：金融反欺诈实践