A picture book creation platform created by Vue2.X+Flask+MySQL

Overview

picbook

这是一个使用Vue2.X+Flask+MySQL搭建的绘本创作平台。 本平台实现了绘本创作、绘本管理、绘本阅览、绘本检索、绘本收藏等功能。 在该平台中,除了检索、阅览、收藏他人的绘本之外,用户还可通过编辑文字、 上传图片和音频、调整页面颜色来制作自己的专属绘本。本平台极大地提供了对绘本创作的支持。

体验地址:http://www.qinsw666.top/PicBook/picbookhome.html

项目功能实现

绘本家园页面

  • 绘本检索
  • 绘本收藏
  • 精选绘本阅览与收藏

登陆注册页面

  • 注册
  • 登录

个人中心页面

  • 绘本管理:新建、删除、修改、编辑与阅览跳转
  • 绘本收藏查看
  • 个人信息查看
  • 页面跳转与注销

绘本编辑页面

  • 页面添加、删除
  • 图片上传、删除
  • 段落添加、删除
  • 句子添加、删除
  • 音频播放、上传、删除
  • 绘本样式调整(页面区域、字体颜色)

绘本阅览页面

  • 音频顺序播放、暂停
  • 绘本文本伴随音频播放高亮
  • 绘本本页音频提示是否存在
  • 绘本页面跳转
  • 绘本页面完成播放自动跳转下页

项目结构与运行

运行项目前可准备好后端接口,使用Python Falsk实现,代码放置在picbook-py中,直接运行即可:

python picbook.py

以及可以在MySQL中创建好userinfo数据库后,导入本人自用测试的数据表,放置在picbook-mysql中。

剩下的为前端代码,使用Vue搭建(vue-cli,vuex,vuerouter), 运行前记得修改发送Post请求的地址。 运行前先使用npm安装相关依赖,再运行项目:

npm install
npm run serve

项目问题与不足

  • 项目后期会改进使用cookie存储验证用户信息
  • 图片加载速度需提升
  • 各种杂碎功能即将实现(比如用户名修改、绘本收藏取消删除等)
You might also like...
Crud que utiliza un api de .net 5, nuxt js, sql server y mysql

Library Crud que utiliza un api de .net 5, nuxt js, sql server y mysql Requisitos Descargar última versión de .NET 5 Aqui Descargar Node JS Aqui Insta

Updated content available! We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue, and NuxtJS 👉 https://srvrsi.de/book

This repository is no longer active, BUT you can still get access to the latest code We will leave this repostiory in read-only because a lot of Dan's

This repository was created by Flatlogic Platform.

DEV.TO This project was generated by Flatlogic Platform. Frontend: Vue.js Backend: NodeJS(TypeORM) Database: PostgreSQL We offer 2 ways how to start t

 Same Picture Game
Same Picture Game

SamePictureGame 90%이상... Javascipt 그리고 조금의 Vue..연습 같은그림 맞추기 게임입니다. ❤ Please Follow this ❤ Make Directory( mkdir [니가만들고싶은 폴더이름] ) in your Computer git

Icpscan is a Block Explorer and Analytics Platform for Dfinity, ICP is a global computing platform.

Icpscan is a Block Explorer and Analytics Platform for Dfinity Project includes: Transactions (Search) Project (Project) Rank (ICP Holder Address Rank

mmf-blog vue2.0 (vue2, vue-router, vuex)

mmf-blog vuejs 2.0 v2 中文说明 demo: http://vue2.mmxiaowu.com The main technical stack: vue2, vue2-router, vuex, webpack, babel, eslint Other versions rea

This project was created to help represent a fundamental app written with Vue.

Simple Vue App This project was created to help represent a fundamental app written with Vue. The heroes and villains theme is used throughout the app

Giraffe is a 📰 Free news, blogs or magazines application theme, built with Vuetify created by HeroUI.
Giraffe is a 📰 Free news, blogs or magazines application theme, built with Vuetify created by HeroUI.

Giraffe is a complete application theme, Giraffe theme built with Vuetify created by HeroUI. It is a solution that displays dense content, such as news, blogs or magazines, including news, authors, classified pages, and so on.

PrestaShop integration with Vue Storefront created by Binshops.
PrestaShop integration with Vue Storefront created by Binshops.

Vue Storefront 2 eCommerce integration with PrestaShop This repository is a PrestaShop integration for Vue Storefront 2. Beta version. Installation in

Owner
QinShiwen
欢迎来来到我的世界! Welcome to my world!
QinShiwen
zernonia 41 Sep 26, 2022
A webapp for monitoring GPU machines, written in Vue.js and Flask.

Server Dashboard A webapp for monitoring GPU machines. The app aggregates the output from gpustat across all machines and displays them on a single pa

Matthias Wright 12 Jul 11, 2022
A CRUD application with Flask And Vue.js

vuejs-frontend-blogape Blog Ape is a CRUD application with VueJS in the Frontend

Obed Kelvin 11 Aug 22, 2022
Like Streamlit, but fast. A proof-of-concept framework built using JavaScript/Vue + Python/Flask + WebSockets.

Streamsync Like Streamlit, but fast. A proof-of-concept framework built using JavaScript/Vue.js + Python/Flask + WebSockets. By avoiding a rerun of th

Ramiro Medina 98 Nov 13, 2022
A simple emoji creation tool based on Vue.js + Element-UI

A simple emoji creation tool based on Vue.js + Element-UI

null 1 Oct 30, 2021
CMS web page for the creation of small e-commerce developed with Laravel and Vue+Vuex

Delivery Service Descrizione il servizio deve permettere con facilita' la possibilita' per un utente di trovare i ristoranti/negozi/bar che fanno atti

null 0 Nov 28, 2021
A web-app built using Vue.js for generative artistic creation involving music and visualizations

A web-app built using Vue.js for generative artistic creation involving music and visualizations

Julie Wojtiw-Quo 2 Aug 1, 2022
Nuxt.js was used in building the frontend of this web application and PHP/mySQL for the backend/database.

sdg-007 Frontend Nuxt.js was used in building the frontend of this web application and PHP/mySQL for the backend/database. About There is a popular sa

Inventors 8 May 20, 2021
企业门户网站管理系统,包括前台展示、后台管理、后端服务(Node.js、Koa、sequelize、MySQL),前端主要使用Vue+ElementUI

写在前面,大佬们如果有什么建议尽管提哦 一、采用技术方案 该系统采用的主要技术如下: Vue.js Element Ui axios node.js Sequelize Koa MySQL数据库 二、开发环境 操作系统:Windows10 数据库:MySQL(v5.7.7-rc-log,版本号须大于

null 143 Nov 28, 2022
Studying project - A Spring Boot API to store countries data in a MySQL DB, accompanied by its Vue.js app.

Screenshots See the screenshots here. Dependencies Java 11 Node.js <= 14 You can build locally and use the app without it, but it is meant to be used

Mao De Matos 0 Jan 17, 2022