使用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组件内容

记得在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