使用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做一个简易的登录功能相关推荐
- 用layui做一个简易的登录注册页面
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导 ...
- 在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能 实现效果: 2.1 下 ...
- 做一个人脸识别登录功能
前天晚上散步到一个大学公寓门口,发现公寓的大门口都安装了人脸识别的门禁,就有种强烈的欲望 想要学习一下 哈哈,刚好也在做项目就想运用到这个技术-于是便有了开端. 视觉智能--人脸识别 基于阿里云的视觉 ...
- Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- 【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
- Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
- hive导数据到mysql 自增主键出错_python+mysql做一个图书管理系统?
开发一个图书管理系统,首先需要对此项目进行一个简单的需求分析: 主要功能包括: 图书信息 图书分类 用户信息 用户借阅统计 管理员 管理员权限 接下来可以进行数据库的设计,在这里我提供一个简单的数据库 ...
- JSP+Mysql 做一个简单的学生成绩查询web系统
IDEA基于JSP+Mysql 做一个简单的学生成绩查询web系统 目录 一.相关软件的下载和配置环境 Java环境的下载和配置 (1)IDEA的下载和安装 (2)JdK的安装 Tomcat的下载 ...
最新文章
- 基于深度学习的图像边缘和轮廓提取
- msm8953+android8.1接听电话时声音由默认听筒输出改为外放输出
- MB1A MB1B MB1C MB11 MIGO的区别解析
- CM: transformation CRM_OFFICE_INT_RT_ADD_NS
- [NLP-CNN] Convolutional Neural Networks for Sentence Classification -2014-EMNLP
- 【计算机视觉】OpenCV篇(3) - 图像几何变换(仿射变换/透视变换)
- c语言while break用法举例,C语言 关于while,for,break
- matlab图像的空域滤波增强处理,matlab 数字图像的空域滤波代码
- tomcat之jsp连接mysql数据库
- ORACLE 锁表处理,解锁释放session
- pycharm更换python版本
- 系统集成项目管理工程师题型分析及章节占分比
- 高频电子线路复习笔记(2)——高频电路基础
- 使用Feign调用服务接口
- 《数据结构》-树(双亲表示法)
- HNU2022夏季小学期大数据并行处理MapReduce任务
- Synchronized原理(偏向锁篇)
- 渝粤题库 陕西师范大学 《危机管理》作业
- C++ 读取 HDF5
- 数学乐 --- 科学计数法(个人学习笔记)
热门文章
- DualCircleList
- pytorch运行遇到的问题_如何解决吸塑机在运行中遇到真空度的问题
- 鼓浪屿天气预报软件测试,厦门鼓浪屿天气预报15天
- AlertDialog(对话框)的基本使用
- php 立即释放session 去除其缓存,ThinkPHP关于session无法清除的一个小问题
- 关于AUC计算公式推导
- 李宏毅线性代数笔记6:矩阵的计算
- 丛高教授《空间数据管理和挖掘及在智慧城市的应用》演讲笔记
- 以MATLAB的方式实现微积分问题的计算机求解问题及解决方案集锦(一)
- MATLAB实战系列(二十四)-MATLAB粒子群(PSO)优化算法在电力系统中的应用程序集合