使用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