《Web应用基础》课程结业报告

主题
我选择的是第二个题目制作出了一个动态网站，用 flask + vue 做一个前后端分离的图书信息管理系统，并实现了增删改查的功能。

开发过程

主要参考了B站上了一个博主的视频链接如下，【从零开始用 flask + vue 做一个前后端分离的图书信息管理案例】 https://www.bilibili.com/video/BV1Jr4y1771i/?p=3&share_source=copy_web&vd_source=acb2a6761a027c4b21e4de9c9d833dd9，过程分为前段和后端，先讲你看一讲后端。

后端数据部分

数据库用的是sqlite，它是一种功能强大、易于使用、轻量级且可靠的数据库引擎。首先的话是写了一个书籍类，其中包括书名，类型，价格，作者，出版社，然后用SQLAlchemy库中的初始化功能，写了两本书，完成了对数据库的初始化。

后端接口部分

用的是restfulAPI，参考的文章有RESTful API 最佳实践(阮一峰) : https://www.ruanyifeng.com/blog/2018/10/restful-api-best-practice s.html和 Method Views for APIs: https://flask.palletsprojects.com/en/2.1.x/views/#method-views-for-apis，写了四个增删改查的功能，具体到我的代码是，

class BookApi(MethodView):
def get(self, book_id):
if not book_id:
books: [Book] = Book.query.all()
results = [
{
'id': book.id,
'book_name': book.book_name,
'book_type': book.book_type,
'book_prize': book.book_prize,
'book_number': book.book_number,
'book_publisher': book.book_publisher,
'author': book.author,
} for book in books
]
return {
'status': 'success',
'message': '数据查询成功',
'results': results
}
book: Book = Book.query.get(book_id)
return {
'status': 'success',
'message': '数据查询成功',
'result': {
'id': book.id,
'book_name': book.book_name,
'book_type': book.book_type,
'book_prize': book.book_prize,
'book_number': book.book_number,
'book_publisher': book.book_publisher,
'author': book.author,
}
}

def post(self):
form = request.json
book = Book()
book.book_number = form.get('book_number')
book.book_name = form.get('book_name')
book.book_type = form.get('book_type')
book.book_prize = form.get('book_prize')
book.author = form.get('author')
book.book_publisher = form.get('book_publisher')
db.session.add(book)
db.session.commit()
# id, book_number, book_name, book_type, book_prize, author, book_publisher

return {
'status': 'success',
'message': '数据添加成功'
}

def delete(self, book_id):
book = Book.query.get(book_id)
db.session.delete(book)
db.session.commit()
return {
'status': 'success',
'message': '数据删除成功'
}

def put(self, book_id):
book: Book = Book.query.get(book_id)
book.book_type = request.json.get('book_type')
book.book_name = request.json.get('book_name')
book.book_prize = request.json.get('book_prize')
book.book_number = request.json.get('book_number')
book.book_publisher = request.json.get('book_type')
book.author = request.json.get('book_type')
db.session.commit()
return {
'status': 'success',
'message': '数据修改成功'
}

然后使用Express框架创建了一个Web服务器，并初始化了一个SQLite数据库连接。然后，我们定义了三个路由规则：

代码

book_api = BookApi.as_view('book_api')
app.add_url_rule('/books', view_func=book_api, methods=['GET', ], defaults={'book_id': None})
app.add_url_rule('/books', view_func=book_api, methods=['POST', ])
app.add_url_rule('/books/<int:book_id>', view_func=book_api, methods=['GET', 'PUT', 'DELETE'])

1.GET /books：该规则使用GET方法处理/books路径的请求。它与BookApi视图函数关联，视图函数的作用是检索所有书籍的数据。该规则的默认值{'book_id': None}表示在没有提供具体书籍ID的情况下，返回所有书籍的数据。

2.POST /books：该规则使用POST方法处理/books路径的请求。同样，它也与BookApi视图函数关联，视图函数的作用是将用户提供的书籍数据插入到数据库中。

3.GET /books/<int:book_id>：该规则使用GET、PUT和DELETE方法处理/books/<book_id>路径的请求。<int:book_id>表示这是一个整数类型的路径参数，用于指定特定的书籍ID。这个规则也与BookApi视图函数关联，视图函数的作用是根据提供的书籍ID检索、更新或删除相应的书籍数据。

这些规则使用add_url_rule方法添加到应用程序中，并将它们与相应的请求方法和视图函数关联起来。这样，当客户端发送匹配这些规则的请求时，应用程序将调用相应的视图函数来处理请求并返回适当的响应。从而实现了与前端接口的连接。

HTML部分

前端用的vue中的Element Plus和axios。界面部分是template中的一些模版，然后又设置了这些，handleEdit，handleDelete，resetForm按钮来负责点击页面之后的增删改查功能的实现。

js部分

使用了axios中的get方法接受了"http://localhost:5000/books"网址的发送的信息，然后将JSON的数据进行切片。送入到一个数组的books中。然后用onMounted（）方法实现对输入的数据有了接收。删除数据也是一样的

const handleDelete = (index, scope) => {
  axios.delete(`http://localhost:5000/books/${scope.id}`).then(() => {
    getStudents()
  })
}

还有表单添加，重置的方法都写在里面了，对应了上面HTML的按钮。然后在编辑和添加图书的界面都设置了一个弹窗，就是点击是否确认关闭，

const handleClose = (done) => {
  ElMessageBox.confirm('确认关闭？')
      .then(() => {
        done();
      })
      .catch(() => {
      });
}

遇到的问题
开发过程中主要是前后端的连接问题，一开始不会flask框架，也不懂post，get的请求，后面可以在本地网址上接收返回的JSON形式的数据，

 然后前端的话，一开始不知道js可以接受数据的功能，学习了其中的Element Plus和axios来接收后端传过来的数据，然后在HTML中设置了一些按钮，并在js中的方法中实现了点击这些这些按钮后对图书信息的增删改查。

未解决的问题

就是对第三条以后的图书的信息修改或者添加的时候，它的类型，作者，出版社都会显示成类型的信息。目前不知道问题出在哪里。应该是js里面接收数据的时候有些问题，或者是数据库里面更新的时候有问题。

总结

这次的话是一个全栈的开发，从后端到前端，后端的话主要学习了网站传输中的post，get，delete，edit的四个方法，然后用restfulAPI对他进行了实现。前端的话主要是运用了vue里面的框架让表格显示的比较好看。然后也写了增删改查功能的四个按钮，实现了这样的四个功能。主要还是js里面对后端传入数据的接收部分，这一部分涉及到了HTTP协议，涉及到了web中信息传递的部分，是比较难的部分。第一次这样的web开发经历，让我对前端，后端都有了一点点的概念，为以后的学习奠定了良好的基础。