Flask和Angular毕业设计代码|极客笔记

Flask和Angular毕业设计代码

在大学毕业设计中，我们通常需要设计并实现一个完整的项目，其中包括前端和后端的开发。在本文中，我们将介绍如何使用Flask和Angular来编写毕业设计的代码，实现一个完整的Web应用。

1. Flask后端代码

Flask是一个轻量级的Python Web框架，非常适合用于快速开发Web应用。我们首先来看后端代码的实现。

1.1 创建Flask应用

首先，我们创建一个Flask应用，并定义一个路由，用于返回一个字符串。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Welcome to deepinout.com'

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

运行上面的代码，我们可以在浏览器中访问 http://127.0.0.1:5000 ，看到页面显示 Welcome to deepinout.com。

1.2 数据库操作

在毕业设计中，通常需要对数据库进行操作。我们可以使用SQLAlchemy来操作数据库。

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)

db.create_all()

@app.route('/')
def hello():
    user = User(username='admin')
    db.session.add(user)
    db.session.commit()

    return 'User admin added to database'

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

上面的代码创建了一个名为 test.db 的SQLite数据库，并向其中插入了一条用户名为admin的记录。运行代码后，我们可以通过SQLite客户端查看数据库中的内容。

2. Angular前端代码

Angular是一个流行的前端框架，有助于构建动态的Web应用。我们接下来看看如何使用Angular来开发前端页面。

2.1 创建Angular应用

首先，安装Angular CLI工具，并用它来创建一个新的Angular应用。

$ npm install -g @angular/cli
$ ng new my-app
$ cd my-app
$ ng serve

上面的命令会创建一个新的Angular应用，并启动开发服务器，我们可以在浏览器中访问 http://localhost:4200 查看应用。

2.2 路由和组件

在Angular中，我们可以使用路由来实现页面之间的导航，也可以创建组件来封装页面的逻辑和样式。

$ ng generate component home
$ ng generate component about

上面的命令生成了两个组件 home 和 about ，我们可以在 src/app 目录下看到它们的相关文件。

3. 集成Flask和Angular

最后，我们来看如何将Flask后端和Angular前端整合在一起，以实现一个完整的Web应用。

3.1 打包前端代码

首先，我们可以使用Angular CLI工具打包前端代码，然后将其放置在Flask应用的静态目录中。

$ ng build --prod

上面的命令会在 dist 目录下生成一个生产环境的前端代码，我们将其复制到Flask应用的静态目录中。

3.2 集成前后端

最后，我们修改Flask应用的路由，使其返回前端代码的入口文件。

from flask import Flask, send_file

app = Flask(__name__)

@app.route('/')
def index():
    return send_file('../my-app/dist/index.html')

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

修改后，我们可以在浏览器中访问 http://127.0.0.1:5000 ，看到整合后的前端和后端应用。

通过以上的示例代码，我们可以看到如何使用Flask和Angular来实现一个完整的毕业设计代码。展示了如何创建Flask应用、操作数据库、以及使用Angular创建前端页面和组件，最后将前后端整合在一起。