前期安装
vue cli安装
sudo npm install -g @vue/cli
运行：
vue ui
会自动开启localhost:8000 页面
mysql安装（选做）
- 下载地址：https://dev.mysql.com/downloads/mysql/5.6.html， 找到适合的dmg版本下载
- 点击dmg一步步进行安装
- 配置环境变量（选做）
从 macOS Catalina 版开始，您的 Mac 将使用 zsh 作为默认登录 Shell 和交互式 Shell。您还可以在较低版本的 macOS 中将 zsh 设置为默认 Shell
vi ~/.zshrc
export PATH=${PATH}:/usr/local/mysql/bin
source ~/.zshrc
配置完成后，重启terminal，验证环境变量是否生效
mysql -u root -p
创建项目
先创建一个Python项目，然后在vue 服务器上创建vue的项目，将vue项目的路径存放在刚新建的python项目下
大概目录：
- backup：自己创建的文件夹，里面主要存放.py文件
- vue：启动vue服务后，用可视化方式创建的项目
- init：自己创建，做一些初始化操作
- run：自己创建，编写后端路由
; 初始化app
安装flask模块
pip3 install flask
新建 init.py 文件，代码如下：
from flask import Flask
from flask_cors import CORS
def create_app():
"""
创建app对象
:return:
"""
app = Flask(__name__,
static_folder="./vue-project/dist/static",
template_folder="./vue-project/dist")
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
return app
新建run.py文件，部分代码如下：
from flask import render_template, jsonify, request
import requests
from random import *
import init
from backup.database import Article, session
import json
app = init.create_app()
@app.route('/', defaults={'path': ''})
@app.route('/')
def catch_all(path):
if app.debug:
return requests.get('http://localhost:8080/{}'.format(path)).text
return render_template("index.html")
@app.route('/api/login', methods=['GET', 'POST'])
def login():
username = request.values.get('username')
password = request.values.get('password')
if username == 'xxxxx' and password == 'xxxx':
res = {
'isLogin': '0',
'msg': 'success'
}
return jsonify(res)
else:
res = {
'isLogin': '-1',
'msg': 'fail'
}
return jsonify(res)
if __name__ == '__main__':
app.run(debug=True)
连接database（选做）
先下载相关模块：
pip install flask-sqlalchemy pymysql
新建backup文件夹，在文件夹下面，新建database.py文件
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker, relationship
from sqlalchemy import create_engine, Integer, Text, DateTime
from sqlalchemy import Column, String
from datetime import datetime
import init
engine = create_engine('mysql+pymysql://user:password@127.0.0.1:3306/Blog_db?charset=utf8')
Session = sessionmaker(bind=engine)
session = Session()
Base = declarative_base()
Base.metadata.create_all(engine)
class Article(Base):
__tablename__ = 'article'
id = Column(Integer, primary_key=True, autoincrement=True)
title = Column(String(255), nullable=True)
content = Column(Text, nullable=False)
create_time = Column(DateTime, default=datetime.now)
status = Column(String(255), nullable=True)
def __init__(self, title, content, status):
self.title = title
self.content = content
self.status = status
编写后端路由
以登录为例子，在run.py 文件中，添加下列代码：
@app.route('/api/login', methods=['GET', 'POST'])
def login():
username = request.values.get('username')
password = request.values.get('password')
if username == 'xxxxx' and password == 'xxxxx':
res = {
'isLogin': '0',
'msg': 'success'
}
return jsonify(res)
else:
res = {
'isLogin': '-1',
'msg': 'fail'
}
return jsonify(res)
- request.values.get可获取从前端传来的参数值
编写页面路由
- 重写App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
width: 100%;
height: 100%;
}
</style>
前端用的UI组件库是iview，如何在项目中进行配置，网上有很多资料，这边就不展开了
- 开始写页面路由
新建login_form.vue （在components路径下新建）只是引用了iview里面的Form组件
<template>
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
<FormItem prop="user">
<Input type="text" v-model="formInline.user" placeholder="Username">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem prop="password">
<Input type="password" v-model="formInline.password" placeholder="Password">
<Icon type="ios-lock-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem>
<Button type="primary" @click="sendToParent">Sign in</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data () {
return {
formInline: {
user: '',
password: ''
},
ruleInline: {
user: [
{ required: true, message: 'Please fill in the user name', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please fill in the password.', trigger: 'blur' },
{ type: 'string', min: 3, message: 'The password length cannot be less than 3 bits', trigger: 'blur' }
]
}
}
},
methods: {
sendToParent(){
this.$emit("listenChildEvent", {username: this.formInline.user, password: this.formInline.password})
}
}
}
</script>
- 新建login.vue （在views路径下新建）
<template>
<div class="login">
<div class="login-con">
<Card icon="log-in" title="欢迎登录" :bordered="false">
<div class="form-con">
<LoginForm v-on:listenChildEvent="checkLogin"/>
<p class="login-tip">输入任意用户名和密码即可</p>
</div>
</Card>
</div>
</div>
</template>
<script>
import LoginForm from '@/components/Login_form.vue'
export default {
name: 'Home',
components: {
LoginForm
},
}
</script>
- 配置路由：找到router>index.js 文件，添加login页面的路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'
export default new Router({
routes: [
{
path:"/",
component:Home,
name:"Home"
},
{
path:"/about",
component:About,
name:"about"
},
{
path: "/login",
component: Login,
name: "login"
},
],
mode:"history"
})
理论上，现在你可以访问localhost:8080/login页面了，如下：
连接前后端的桥梁
先下载模块：axios
npm install axios
接下来，到login.vue文件中，在scripts部分，填写调用后端路由的代码
import axios from "axios"
export default {
name: 'Home',
components: {
LoginForm
},
methods: {
checkLogin: function(data){
console.log(data)
var that = this
var parms = new URLSearchParams()
parms.append('username', data.username)
parms.append('password', data.password)
axios.post('http://localhost:5000/api/login', parms).then(function (res) {
if (res.data.isLogin == '-1') {
alert('用户名或密码错误')
} else {
sessionStorage.setItem('userInfo', JSON.stringify(res.data))
that.$router.push({ path: '/' })
}
})
}
},
}
简单的登录功能就完成了，哦写到这，发现没用上数据库哈哈哈，登录我都直接写死了，没事的，之后的一些功能得用到数据库
目前的项目，非常简单且简陋的实现了登录，文章的增删查改功能，对源码感兴趣的同学 ，传送门在这里：https://github.com/herbyhabi/Blogsite-flask-vue
sqlalchemy的查询方式
print(session.query(User).all())
print(session.query(User.name, User.fullname).all())
print(session.query(User, User.name).all())
print(session.query(User).filter_by(name='user1').all())
print(session.query(User).filter(User.name == "user").all())
print(session.query(User).filter(User.name.like("user%")).all())
print(session.query(User).filter(and_(User.name.like("user%"), User.fullname.like("first%"))).all())
print(session.query(User).filter(or_(User.name.like("user%"), User.password != None)).all())
print(session.query(User).filter("id>:id").params(id=1).all())
print(session.query(User, Address).filter(User.id == Address.user_id).all())
print(session.query(User).join(User.addresses).all())
print(session.query(User).outerjoin(User.addresses).all())
print(session.query(User.name, func.count('*').label("user_count")).group_by(User.name).all())
print(session.query(User.name, func.sum(User.id).label("user_id_sum")).group_by(User.name).all())
stmt = session.query(Address.user_id, func.count('*').label("address_count")).group_by(Address.user_id).subquery()
print(session.query(User, stmt.c.address_count).outerjoin((stmt, User.id == stmt.c.user_id)).order_by(User.id).all())
print(session.query(User).filter(exists().where(Address.user_id == User.id)))
print(session.query(User).filter(User.addresses.any()))
Original: https://blog.csdn.net/qq_33303090/article/details/115966018
Author: 我叫何小北
Title: 博客系统之登录功能（前后端分离vue + flask）
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/748156/
转载文章受原作者版权保护。转载请注明原作者出处！