从零开始的Vue+flask项目实战-登录系统的实现-大结局

最后一集啦，前后端源码就放在最后吧。

本篇我们实现登录注册系统的全功能，根据我们平常使用经验，我们可以简单进行设计与规划。

用户可以选择登录或注册，不同功能有不同页面，分别填写不同信息

点击登录后

        前端先对用户输入内容进行校验，不得为空

        后端访问数据库查看用户是否存在，如果存在的话，密码是否正确

点击注册后

        前端先对用户输入内容进行校验，不得为空，同时对两次输入的密码进行一致性校验

        后端访问数据库查看用户是否已被注册，如果未注册的话，保存用户信息至数据库

登录功能

简单来说就是前端发送数据，后端接收数据

非空校验

用户登录所需要的信息肯定是非空的，我们获取到输入内容后挨个进行校验，如果检测到未填写的信息则光标定位至空白输入框。

<div>
	<div>用户名：<input ref="username_input" type="text" placeholder="请输入用户名" v-model="form.username"></div>
	<div>密码：<input ref="password_input" type="password" placeholder="请输入密码" v-model="form.password"></div>
</div>
<button type="submit" @click="handleLogin">登陆</button>

handleLogin() {
    let that=this
	if (!this.form.username) {
		alert("用户名不能为空")
		that.$refs.username_input.focus();
	} else if (!this.form.password) {
		alert("密码不能为空")
		that.$refs.password_input.focus();
	} else {
		console.log("用户名", this.form.username)
		console.log("密码", this.form.password)
	}
},

我们给input加一个ref属性值，再在js中使用$refs定位相应位置，实现起来很简单。

发送POST请求

通过校验，我们就可以给后端发请求了。用户登陆所使用的信息属于隐私内容，我们当然不能通过将数据直接拼接在url上的方式发送GET请求，所以使用POST请求来实现。

handleLogin() {
	let that = this
	if (!this.form.username) {
		alert("用户名不能为空")
		that.$refs.username_input.focus();
	} else if (!this.form.password) {
		alert("密码不能为空")
		that.$refs.password_input.focus();
	} else {
		console.log("用户名", this.form.username)
		console.log("密码", this.form.password)
		axios.post('http://127.0.0.1:5000/login', {
				userName: that.form.username,
				passWord: that.form.password
			}, {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}
			})
			.then(res => {
				console.log("success",res)
			})
			.catch(res => {
				console.log("err",res)
			})

	}
},

接收POST请求

@app.route('/login', methods=["POST"])
def login():
    userName = request.form.get('userName')
    passWord = request.form.get('passWord')
    print(userName,passWord)

使用request.form.get的方式获取到前端发送来的数据。

数据库配置

class User(db.Model):
    __tablename__ = 'user'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    username = db.Column(db.String(20), nullable=False)
    password = db.Column(db.String(20), nullable=False)
    email = db.Column(db.String(20), nullable=False)


with app.app_context():
    db.create_all()  # 创建表格

我们创建一个类User继承db.Model

__tablename__="user"表示创建名为user的数据库

id=db.Column()表示在数据库里创建名为id的一列， autoincrement=True表示此列数据自增

db.Integer表示id为整数，db.String(20)表示username为字符串，长度在20以内

primary_key表示此列为主键，nullable表示填入数据库时此信息不得为空

配置好并运行之后，我们就可以看到所创建的数据库了

数据库信息校验

@app.route('/login', methods=["POST"])
def login():
    userName = request.form.get('userName')
    passWord = request.form.get('passWord')
    count = User.query.filter_by(username=userName, password=passWord).count()
    userCount = User.query.filter_by(username=userName).count()
    if count == 1:
        return "1"  # 成功
    elif count == 0 and userCount == 1:
        return "2"  # 已注册，密码错误
    elif userCount == 0:
        return "3"  # 未注册

 User.query.filter_by(username=userName, password=passWord).count()是一个筛选语句，意为找到数据库中存储的username与从前端获取的userName相同，password与从前端获取的passWord也相同的数据条数。

之后我们根据获取到的信息对此次登录请求结果分类，分别为成功登陆，已注册但密码错误，未注册三种情况，再分别向前端返回不同数据。

前端数据呈现

handleLogin() {
	let that = this
	if (!this.form.username) {
		alert("用户名不能为空")
		that.$refs.username_input.focus();
	} else if (!this.form.password) {
		alert("密码不能为空")
		that.$refs.password_input.focus();
	} else {
		console.log("用户名", this.form.username)
		console.log("密码", this.form.password)
		axios.post('http://127.0.0.1:5000/login', {
				userName: that.form.username,
				passWorAd: that.form.password
			}, {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}
			})
			.then(res => {
				let data = res.data
				if (data == 1){
					alert(`尊敬的${that.form.username},您已登陆成功`)
					that.form = {}
				}
				else if (data == 2){
					alert("密码错误！")
					that.$refs.password_input.focus();
				}
				else if (data == 3) {
					alert("该用户名暂未注册,请先注册吧")
					that.active = 1;
					that.form = {}
				}
			})
			.catch(res => {
				console.log(res)
			})

	}
},

返回的数据存储在res.data中，进行判断后给用户不同的提示

注册功能

到此为止，一个简单的登录流程就算是走完了，注册流程类似， 只不过需要再加一个注册成功将用户信息添加到数据库的操作

@app.route('/register', methods=["POST"])
def register():
    userName = request.form.get('userName')
    passWord = request.form.get('passWord')
    email = request.form.get('email')
    userCount = User.query.filter_by(username=userName).count()
    if userCount == 1:
        return "1"  # 已被注册
    else:
        user = User(username=userName, email=email, password=passWord)
        db.session.add(user)
        db.session.commit()
        return "2"  # 成功注册

user = User(username=userName, email=email, password=passWord) 创建一个user对象存储信息
db.session.add(user) 将user对象添加至数据库中
db.session.commit() 更新数据库

源码

HTML

<template>
	<div class="body">
		<div class="main">
			<div class="head">
				<div @click="choiceChange(index)" v-for="(item,index) in choices">
					<div class="items" :class="{items_active:index==active} ">{{item}}</div>
				</div>
			</div>
			<div class="container" v-show="active==0">
				<div>用户名：<input ref="username_input" class="login" type="text" placeholder="请输入用户名"
						v-model="form.username"></div>
				<div>密码：<input ref="password_input" class="_login" type="password" placeholder="请输入密码"
						v-model="form.password"></div>
			</div>
			<div class="container" v-show="active">
				<div>请输入用户名：<input class="login" ref="username_register" type="text"
						v-model="form.username"></div>
				<div>请输入邮箱号：<input class="login" ref="email_register" type="text"
						v-model="form.email"></div>
				<div>请设定密码：<input class="_login" ref="password_register" type="password"
						v-model="form.password"></div>
				<div>再次输入密码：<input class="login" ref="_password_register" type="password"
						v-model="form.password_again"></div>
			</div>
			<button type="submit" v-if="active==0" @click="handleLogin">登陆</button>
			<button type="submit" v-if="active" @click="handleRegister">注册</button>
		</div>
	</div>
</template>

JS 

<script>
	import axios from 'axios'
	export default {
		name: 'app',
		data() {
			return {
				form: {},
				choices: ["登陆", "注册"],
				active: ''
			}
		},
		methods: {
			choiceChange(index) {
				this.active = index
				this.form = {}
			},
			handleLogin() {
				let that = this
				if (!this.form.username) {
					alert("用户名不能为空")
					that.$refs.username_input.focus();
				} else if (!this.form.password) {
					alert("密码不能为空")
					that.$refs.password_input.focus();
				} else {
					console.log("用户名", this.form.username)
					console.log("密码", this.form.password)
					axios.post('http://127.0.0.1:5000/login', {
							userName: that.form.username,
							passWorAd: that.form.password
						}, {
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						})
						.then(res => {
							let data = res.data
							if (data == 1){
								alert(`尊敬的${that.form.username},您已登陆成功`)
								that.form = {}
							}
							else if (data == 2){
								alert("密码错误！")
								that.$refs.password_input.focus();
							}
							else if (data == 3) {
								alert("该用户名暂未注册,请先注册吧")
								that.active = 1;
								that.form = {}
							}
						})
						.catch(res => {
							console.log(res)
						})

				}
			},
			handleRegister() {
				let that = this;
				if (!this.form.username) {
					alert("用户名不能为空")
					that.$refs.username_register.focus();
				} else if (!this.form.email) {
					alert("邮箱不能为空")
					that.$refs.email_register.focus();
				} else if (!this.form.password && !this.form.password_again) {
					alert("密码不能为空")
					that.$refs.password_register.focus();
				} else if (this.form.password == this.form.password_again) {
					let that = this
					console.log("用户名", this.form.username)
					console.log("密码", this.form.password)
					axios.post('http://127.0.0.1:5000/register', {
							userName: that.form.username,
							passWord: that.form.password,
							email: that.form.email
						}, {
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						})
						.then(res => {
							console.log(res)
							let data = res.data
							if (data == 1){
								alert("该用户名已被注册！")
								that.$refs.username_register.focus();
							}
							else if (data == 2) {
								alert("注册成功，您现在可以登陆了")
								that.active = 0;
							}
						})
						.catch(res => {
							console.log(res)
						})
				} else {
					alert("两次输入的密码不一致！")
					that.$refs.password_register.focus();
				}
			}
		},
	}
</script>

 CSS

<style>
	.login {
		height: 40px;
		border-radius: 25px;
		padding-left: 10px;
		margin: 10px;
		border: 1px grey solid;
	}

	.main {
		background-color: rgba(166, 181, 200, 0.7);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 40px;
		width: 700px;
		height: 500px;
	}

	.body {
		width: 100vw;
		/* 100%的视口宽度 */
		height: 100vh;
		/* 100%的视口高度 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		/* 设置背景图片 */
		background-image: url('./assets/sunset.jpg');
		background-size: cover;
		/* 覆盖整个元素 */
		background-position: center;
		/* 图片居中 */
	}

	._login {
		height: 40px;
		border-radius: 25px;
		padding-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 26px;
		border: 1px grey solid;
	}

	.container {
		margin: 20px;
		padding: 10px;
	}

	.head {
		width: 300px;
		display: flex;
		justify-content: space-around;
	}

	.items {
		border-bottom: 1px black solid;
		font-size: 30px;
		font-weight: 400;
	}

	.items:hover {
		color: darkgreen;
	}

	.items_active {
		color: darkgreen;
		border-bottom: 2px darkgreen solid;
	}

	button {
		/** 重置按钮的默认样式 **/
		background-color: transparent;
		/* 或者你想要的任何颜色 */
		border: none;
		/* 移除边框 */
		padding: 10px 20px;
		/* 内边距 */
		color: white;
		/* 字体颜色 */
		font-size: 16px;
		/* 字体大小 */
		cursor: pointer;
		/* 鼠标悬停时的光标样式 */
		
		/** 添加一些视觉效果 **/
		background-color: #007bff;
		/* 背景颜色 */
		border-radius: 4px;
		/* 边框圆角 */
		transition: background-color 0.3s ease;
		/* 背景颜色过渡效果 */
	}

	button:hover {
		background-color: #19dfcf;
		/* 更深的蓝色背景 */
	}
</style>

 Flask

from flask import Flask, request
from flask_cors import CORS
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
CORS(app)

HOSTNAME = "127.0.0.1"
PORT = 3306
DATABASE = "login"
USERNAME = "root"
PASSWORD = "123456"

app.config['SQLALCHEMY_DATABASE_URI'] = (f'mysql+pymysql://{USERNAME}:{PASSWORD}@{HOSTNAME}:{PORT}/{DATABASE}?charset'
                                         f'=utf8mb4')
db = SQLAlchemy(app)


class User(db.Model):
    __tablename__ = 'user'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    username = db.Column(db.String(20), nullable=False)
    password = db.Column(db.String(20), nullable=False)
    email = db.Column(db.String(20), nullable=False)


with app.app_context():
    db.create_all()  # 创建表格


@app.route('/login', methods=["POST"])
def login():
    userName = request.form.get('userName')
    passWord = request.form.get('passWord')
    count = User.query.filter_by(username=userName, password=passWord).count()
    userCount = User.query.filter_by(username=userName).count()
    if count == 1:
        return "1"  # 成功
    elif count == 0 and userCount == 1:
        return "2"  # 已注册，密码错误
    elif userCount == 0:
        return "3"  # 未注册


@app.route('/register', methods=["POST"])
def register():
    userName = request.form.get('userName')
    passWord = request.form.get('passWord')
    email = request.form.get('email')
    userCount = User.query.filter_by(username=userName).count()
    if userCount == 1:
        return "1"  # 已被注册
    else:
        user = User(username=userName, email=email, password=passWord)
        db.session.add(user)
        db.session.commit()
        return "2"  # 成功注册


if __name__ == '__main__':
    app.run()