广州做一个营销网站多少钱,工程公司简介范文,广西智能网站建设平台,招标文件范本文章目录 1、简介1.1 flask1.2 vue 2、开发2.1 新建flask项目2.2 安装flask库2.3 新建flask的主脚本2.4 新建Vue项目2.5 安装vue项目依赖项2.6 新增组件Ping.vue2.7 Ping.vue增加HTTP请求2.8 美化vue前端页面2.9 新增组件Books.vue2.10 flask增加路由Books2.11 Books.vue增加HT… 文章目录 1、简介1.1 flask1.2 vue 2、开发2.1 新建flask项目2.2 安装flask库2.3 新建flask的主脚本2.4 新建Vue项目2.5 安装vue项目依赖项2.6 新增组件Ping.vue2.7 Ping.vue增加HTTP请求2.8 美化vue前端页面2.9 新增组件Books.vue2.10 flask增加路由Books2.11 Books.vue增加HTTP请求2.12 flask修改路由Books2.13 Books.vue增加添加接口2.14 新增组件Alert.vue2.15 修改组件Alert.vue2.16 变量绑定Alert组件2.17 flask端Book对象添加唯一id2.18 Books.vue增加更新操作 结语 1、简介
1.1 flask
Flask是一个简单但功能强大的Python微Web框架非常适合构建RESTful API。像SinatraRuby和ExpressNode一样它是最小和灵活的所以你可以从小处着手然后根据需要构建更复杂的应用程序。
安装如下
pip install flask1.2 vue
Vue 是一个用于构建用户界面的开源 JavaScript 框架。它采用了React和Angular的一些最佳实践。也就是说与 React 和 Angular 相比它更平易近人因此初学者可以快速启动和运行。它也同样强大因此它提供了创建现代前端应用程序所需的所有功能。
安装如下
npm create vue3.6.12、开发
2.1 新建flask项目
首先创建一个新的项目目录
mkdir flask-vue-crud
cd flask-vue-crud创建并激活虚拟环境
python -m venv myvenv
.\myvenv\Scripts\activate2.2 安装flask库
将 Flask 与 Flask-CORS 扩展一起安装
pip install Flask Flask-Cors2.3 新建flask的主脚本
app.py
# -*- coding:utf-8 -*-from flask import Flask, jsonify, make_response
from flask_cors import CORSclass Config(object):DEBUGTrueJSON_AS_ASCIIFalse# instantiate the app
app Flask(__name__)
# app.config.from_object(__name__)
app.config.from_object(Config)
# app.config[JSON_AS_ASCII] False
# app.config[DEBUG] True
# app.config[JSONIFY_MIMETYPE] application/json;charsetutf-8# enable CORS
CORS(app, resources{r/*: {origins: *}})app.route(/, methods[GET])
def index():response make_response(jsonify(爱看书的小沐))response.headers[Content-Type] application/json;charsetutf-8return response# return jsonify(爱看书的小沐)# sanity check route
app.route(/ping, methods[GET])
def ping_pong():return jsonify(xiaomus pong!)if __name__ __main__:app.run(port5001)运行上面这个脚本
flask run --port5001 --debug2.4 新建Vue项目
使用强大的create-vue工具它使用Vite来生成一个定制的项目样板。 在 “flask-vue-crud” 中运行以下命令来初始化一个新的 Vue 项目
npm create vue3.6.1快速浏览生成的项目结构。这可能看起来很多但我们只会处理“src”文件夹中的文件和文件夹以及index.html文件。
main.js app 入口点它加载并初始化 Vue 以及根组件
App.vue根组件这是呈现所有其他组件的起点
components UI 组件的存储位置
router/index.js 定义 URL 并将其映射到组件的位置
views 绑定到路由器的 UI 组件的存储位置
assets静态资产如图像和字体的存储位置查看 client/src/components/HelloWorld.vue 文件。这是一个单个文件组件分为三个不同的部分
模板用于特定于组件的 HTML
脚本组件逻辑通过JavaScript实现
样式用于 CSS 样式其中index.html 文件是我们 Vue 应用程序的起点
!DOCTYPE html
html langenheadmeta charsetUTF-8link relicon href/favicon.icometa nameviewport contentwidthdevice-width, initial-scale1.0titleVite App/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/html
2.5 安装vue项目依赖项
$ cd vue-project
$ npm install
$ npm run dev浏览器访问如下
2.6 新增组件Ping.vue
为了简化操作请删除“vue-project/src/views”和“vue-project/src/components/icons”文件夹以及vue-project/src/components/TheWelcome.vue和vue-project/src/components/WelcomeItem.vue组件。然后将一个名为 Ping.vue 的新组件添加到名为 Ping.vue 的“vue-project/src/components”文件夹中
templatedivp{{ msg }}/p/div
/templatescript
export default {name: Ping,data() {return {msg: Hello!,};},
};
/script更新客户端/src/router/index.js将“/ping”映射到组件如下所示
import { createRouter, createWebHistory } from vue-router
import Ping from ../components/Ping.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /ping,name: ping,component: Ping},]
})export default router最后在 vue-project/src/App.vue 中删除导航以及样式
templateRouterView /
/templatescript setup
import { RouterView } from vue-router
/script在浏览器访问 http://localhost:5173/ping
2.7 Ping.vue增加HTTP请求
要将客户端 Vue 应用程序与后端 Flask 应用程序连接起来我们可以使用 Axios 库发送 HTTP 请求。
npm install axios1.3.6 --save在 Ping.vue 中更新组件的部分如下所示
templatedivp{{ msg }}/p/div
/templatescript
import axios from axios;export default {name: Ping,data() {return {msg: ,};},methods: {getMessage() {const path http://localhost:5001/ping;axios.get(path).then((res) {this.msg res.data;}).catch((error) {console.error(error);});},},created() {this.getMessage();},
};
/script
随着 Vue 应用程序在不同的终端窗口中运行您现在应该在浏览器中看到。
2.8 美化vue前端页面
接下来让我们将 Bootstrap一个流行的 CSS 框架添加到应用程序中以便我们可以快速添加一些样式。
npm install bootstrap5.2.3 --save将引导程序样式导入客户端/src/main.js
import { createApp } from vue
import App from ./App.vue
import router from ./router
import bootstrap/dist/css/bootstrap.css //add by tomcatimport ./assets/main.cssconst app createApp(App)
app.use(router)
app.mount(#app)更新vue-project\src\components\Ping.vue的template部分
templatediv classcontainerbutton typebutton classbtn btn-primary{{ msg }}/button/div
/template运行开发服务器
2.9 新增组件Books.vue
templatediv classcontainerdiv classrowdiv classcol-sm-10h1Books/h1hrbrbrbutton typebutton classbtn btn-success btn-smAdd Book/buttonbrbrtable classtable table-hovertheadtrth scopecolTitle/thth scopecolAuthor/thth scopecolRead?/thth/th/tr/theadtbodytrtdfoo/tdtdbar/tdtdfoobar/tdtddiv classbtn-group rolegroupbutton typebutton classbtn btn-warning btn-smUpdate/buttonbutton typebutton classbtn btn-danger btn-smDelete/button/div/td/tr/tbody/table/div/div/div
/template修改路由文件vue-project\src\router\index.js
import { createRouter, createWebHistory } from vue-router
import Books from ../components/Books.vue
import Ping from ../components/Ping.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: Books,component: Books,},{path: /ping,name: ping,component: Ping},]
})export default router浏览器访问http://localhost:5173
2.10 flask增加路由Books
app.py:
BOOKS [{title: On the Road,author: Jack Kerouac,read: True},{title: Harry Potter and the Philosopher\s Stone,author: J. K. Rowling,read: False},{title: Green Eggs and Ham,author: Dr. Seuss,read: True}
]app.route(/books, methods[GET])
def all_books():return jsonify({status: success,books: BOOKS})浏览器访问如下
2.11 Books.vue增加HTTP请求
templatediv classcontainerdiv classrowdiv classcol-sm-10h1Books/h1hrbrbrbutton typebutton classbtn btn-success btn-smAdd Book/buttonbrbrtable classtable table-hovertheadtrth scopecolTitle/thth scopecolAuthor/thth scopecolRead?/thth/th/tr/theadtbodytr v-for(book, index) in books :keyindextd{{ book.title }}/tdtd{{ book.author }}/tdtdspan v-ifbook.readYes/spanspan v-elseNo/span/tdtddiv classbtn-group rolegroupbutton typebutton classbtn btn-warning btn-smUpdate/buttonbutton typebutton classbtn btn-danger btn-smDelete/button/div/td/tr/tbody/table/div/div/div
/templatescript
import axios from axios;export default {data() {return {books: [],};},methods: {getBooks() {const path http://localhost:5001/books;axios.get(path).then((res) {this.books res.data.books;}).catch((error) {console.error(error);});},},created() {this.getBooks();},
};
/script浏览器访问如下
2.12 flask修改路由Books
from flask import Flask, jsonify, requestapp.route(/books, methods[GET, POST])
def all_books():response_object {status: success}if request.method POST:post_data request.get_json()BOOKS.append({title: post_data.get(title),author: post_data.get(author),read: post_data.get(read)})response_object[message] Book added!else:response_object[books] BOOKSreturn jsonify(response_object)运行 Flask 服务器后您可以在新的终端选项卡中测试 POST 路由
curl -X POST http://localhost:5001/books -d {\title\: \1024\, \author\: \Xiao Mu\, \read\: \true\} -H Content-Type: application/json命令行输入curl指令如下 flask的web服务端的信息输出如下 vue前端页面的最下面增加了一行记录如下
2.13 Books.vue增加添加接口
templatediv classcontainerdiv classrowdiv classcol-sm-10h1Books/h1hrbrbrbuttontypebuttonclassbtn btn-success btn-smclicktoggleAddBookModalAdd Book/buttonbrbrtable classtable table-hovertheadtrth scopecolTitle/thth scopecolAuthor/thth scopecolRead?/thth/th/tr/theadtbodytr v-for(book, index) in books :keyindextd{{ book.title }}/tdtd{{ book.author }}/tdtdspan v-ifbook.readYes/spanspan v-elseNo/span/tdtddiv classbtn-group rolegroupbutton typebutton classbtn btn-warning btn-smUpdate/buttonbutton typebutton classbtn btn-danger btn-smDelete/button/div/td/tr/tbody/table/div/div!-- add new book modal --divrefaddBookModalclassmodal fade:class{ show: activeAddBookModal, d-block: activeAddBookModal }tabindex-1roledialogdiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerh5 classmodal-titleAdd a new book/h5buttontypebuttonclassclosedata-dismissmodalaria-labelCloseclicktoggleAddBookModalspan aria-hiddentruetimes;/span/button/divdiv classmodal-bodyformdiv classmb-3label foraddBookTitle classform-labelTitle:/labelinputtypetextclassform-controlidaddBookTitlev-modeladdBookForm.titleplaceholderEnter title/divdiv classmb-3label foraddBookAuthor classform-labelAuthor:/labelinputtypetextclassform-controlidaddBookAuthorv-modeladdBookForm.authorplaceholderEnter author/divdiv classmb-3 form-checkinputtypecheckboxclassform-check-inputidaddBookReadv-modeladdBookForm.readlabel classform-check-label foraddBookReadRead?/label/divdiv classbtn-group rolegroupbuttontypebuttonclassbtn btn-primary btn-smclickhandleAddSubmitSubmit/buttonbuttontypebuttonclassbtn btn-danger btn-smclickhandleAddResetReset/button/div/form/div/div/div/divdiv v-ifactiveAddBookModal classmodal-backdrop fade show/div/div
/templatescript
import axios from axios;export default {data() {return {activeAddBookModal: false,addBookForm: {title: ,author: ,read: [],},books: [],};},methods: {addBook(payload) {const path http://localhost:5001/books;axios.post(path, payload).then(() {this.getBooks();}).catch((error) {console.log(error);this.getBooks();});},getBooks() {const path http://localhost:5001/books;axios.get(path).then((res) {this.books res.data.books;}).catch((error) {console.error(error);});},handleAddReset() {this.initForm();},handleAddSubmit() {this.toggleAddBookModal();let read false;if (this.addBookForm.read[0]) {read true;}const payload {title: this.addBookForm.title,author: this.addBookForm.author,read, // property shorthand};this.addBook(payload);this.initForm();},initForm() {this.addBookForm.title ;this.addBookForm.author ;this.addBookForm.read [];},toggleAddBookModal() {const body document.querySelector(body);this.activeAddBookModal !this.activeAddBookModal;if (this.activeAddBookModal) {body.classList.add(modal-open);} else {body.classList.remove(modal-open);}},},created() {this.getBooks();},
};
/script2.14 新增组件Alert.vue
让我们添加一个组件以便在添加新书籍后向最终用户显示消息。我们将为此创建一个新组件Alert.vue因为您可能会在许多组件中使用该功能。 将一个名为 Alert.vue 的新文件添加到 “vue-project/src/components”
templatepIt works!爱看书的小沐正在添加Alert/p
/template然后将其添加到Books.vue中
script
import axios from axios;
import Alert from ./Alert.vue;export default {data() {return {activeAddBookModal: false,addBookForm: {title: ,author: ,read: [],},books: [],};},components: {alert: Alert,},...};
/script在Books.vue的template部分也添加Alert的使用
templatediv classcontainerdiv classrowdiv classcol-sm-10h1Books/h1hrbrbralert/alertbuttontypebuttonclassbtn btn-success btn-smclicktoggleAddBookModalAdd Book/buttonbrbr.../div/div.../div
/template前端预览如下
2.15 修改组件Alert.vue
templatedivdiv classalert alert-success rolealert{{ message }}/divbr//div
/templatescript
export default {props: [message],
};
/script同时修改Books.vue的template部分中的alert代码
alert messagehi, 爱看书的小沐/alert2.16 变量绑定Alert组件
Books.vue 中使用绑定表达式。修改Books.vue的template部分中的alert代码
alert :messagemessage/alert修改Books.vue的script的data()函数:
data() {return {activeAddBookModal: false,addBookForm: {title: ,author: ,read: [],},books: [],message: ,};
},修改Books.vue的script的addBook()函数:
addBook(payload) {const path http://localhost:5001/books;axios.post(path, payload).then(() {this.getBooks();this.message Book added!;}).catch((error) {console.log(error);this.getBooks();});
},仅在 true 时显示警报v-ifshowMessage:
alert :messagemessage v-ifshowMessage/alertdata() {return {activeAddBookModal: false,addBookForm: {title: ,author: ,read: [],},books: [],message: ,showMessage: false,};
},addBook(payload) {const path http://localhost:5001/books;axios.post(path, payload).then(() {this.getBooks();this.message Book added!;this.showMessage true;}).catch((error) {console.log(error);this.getBooks();});
},2.17 flask端Book对象添加唯一id
import uuidBOOKS [{id: uuid.uuid4().hex,title: On the Road,author: Jack Kerouac,read: True},
]app.route(/books, methods[GET, POST])
def all_books():response_object {status: success}if request.method POST:post_data request.get_json()BOOKS.append({id: uuid.uuid4().hex,title: post_data.get(title),author: post_data.get(author),read: post_data.get(read)})response_object[message] Book added!else:response_object[books] BOOKSreturn jsonify(response_object)app.route(/books/book_id, methods[PUT])
def single_book(book_id):response_object {status: success}if request.method PUT:post_data request.get_json()remove_book(book_id)BOOKS.append({id: uuid.uuid4().hex,title: post_data.get(title),author: post_data.get(author),read: post_data.get(read)})response_object[message] Book updated!return jsonify(response_object)def remove_book(book_id):for book in BOOKS:if book[id] book_id:BOOKS.remove(book)return Truereturn False2.18 Books.vue增加更新操作
template部分增加
!-- edit book modal --
divrefeditBookModalclassmodal fade:class{ show: activeEditBookModal, d-block: activeEditBookModal }tabindex-1roledialogdiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerh5 classmodal-titleUpdate/h5buttontypebuttonclassclosedata-dismissmodalaria-labelCloseclicktoggleEditBookModalspan aria-hiddentruetimes;/span/button/divdiv classmodal-bodyformdiv classmb-3label foreditBookTitle classform-labelTitle:/labelinputtypetextclassform-controlideditBookTitlev-modeleditBookForm.titleplaceholderEnter title/divdiv classmb-3label foreditBookAuthor classform-labelAuthor:/labelinputtypetextclassform-controlideditBookAuthorv-modeleditBookForm.authorplaceholderEnter author/divdiv classmb-3 form-checkinputtypecheckboxclassform-check-inputideditBookReadv-modeleditBookForm.readlabel classform-check-label foreditBookReadRead?/label/divdiv classbtn-group rolegroupbuttontypebuttonclassbtn btn-primary btn-smclickhandleEditSubmitSubmit/buttonbuttontypebuttonclassbtn btn-danger btn-smclickhandleEditCancelCancel/button/div/form/div/div/div
/div
div v-ifactiveEditBookModal classmodal-backdrop fade show/divscript部分增加
activeEditBookModal: false,
editBookForm: {id: ,title: ,author: ,read: [],
},template部分的主界面修改
buttontypebuttonclassbtn btn-warning btn-smclicktoggleEditBookModal(book)Update
/buttonscript部分增加函数
toggleEditBookModal(book) {if (book) {this.editBookForm book;}const body document.querySelector(body);this.activeEditBookModal !this.activeEditBookModal;if (this.activeEditBookModal) {body.classList.add(modal-open);} else{body.classList.remove(modal-open);}
},handleEditSubmit() {this.toggleEditBookModal(null);let read false;if (this.editBookForm.read) read true;const payload {title: this.editBookForm.title,author: this.editBookForm.author,read,};this.updateBook(payload, this.editBookForm.id);
},updateBook(payload, bookID) {const path http://localhost:5001/books/${bookID};axios.put(path, payload).then(() {this.getBooks();this.message Book updated!;this.showMessage true;}).catch((error) {console.error(error);this.getBooks();});
},handleEditCancel() {this.toggleEditBookModal(null);this.initForm();this.getBooks(); // why?
},修改函数initForm():
initForm() {this.addBookForm.title ;this.addBookForm.author ;this.addBookForm.read [];this.editBookForm.id ;this.editBookForm.title ;this.editBookForm.author ;this.editBookForm.read [];
},浏览器预览如下
结语
如果您觉得该方法或代码有一点点用处可以给作者点个赞或打赏杯咖啡╮(▽)╭ 如果您感觉方法或代码不咋地//(ㄒoㄒ)//就在评论处留言作者继续改进o_O??? 如果您需要相关功能的代码定制化开发可以留言私信作者(✿◡‿◡) 感谢各位大佬童鞋们的支持( ´ ▽´ ) ( ´ ▽´)っ
