【vue3-pbstar-books】大学生前端期末作业(vue3、element-plus、ts、pinia、vite、json-server)

一、项目要求

请添加图片描述

二、项目介绍

vue3-pbstar-books是一个图书主题的pc端网站,该项目有首页、全部书籍页、书籍分类页、书籍详情页和关于页五个页面。该方案结合了 Vue3、Element-Plus、TypeScript、Pinia 和 Vite 等先进技术,实现高效的页面布局、状态管理和构建体验。同时,后端采用基于 json-server 提供数据接口服务。

0.项目截图

0.1 首页

在这里插入图片描述

0.2 全部图书

在这里插入图片描述

0.3 图书详情

在这里插入图片描述

1.项目准备

项目GitHub地址:https://github.com/pbstar/vue3-pbstar-books

2.安装项目

1.nodejs环境要求
nodejs版本要求:18+
2.从GitHub上克隆项目
git clone https://github.com/pbstar/vue3-pbstar-books.git

3.启动项目

3.1 前端模块

1.进入项目目录
cd vue3-pbstar-books
2.安装依赖
npm install
3.运行项目前端模块
npm run dev
4.打包项目前端模块(非必须)
npm run build

3.2 后端模块

1.进入项目目录
cd vue3-pbstar-books
cd server
2.运行项目后端模块
json-server db.json

4.项目目录结构

├── public             # 静态资源
├── server             # 服务端模块
│ ├── public           # 静态资源
│ └── db.json          # 服务端入口文件 
├── src                # 源代码 
│ ├── api              # 接口 
│ ├── assets           # 静态资源 
│ ├── components       # 组件 
│ ├── router           # 路由 
│ ├── stores           # 状态管理
│ ├── views            # 所有页面 
│ ├── App.vue          # 根页面 
│ └── main.ts          # 入口文件 
├── .env               # 全局配置文件 
├── .gitignore         # git配置文件 
├── index.html         # html入口文件
├── vite.config.ts     # vite配置 
└── package.json       # package配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/813685.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring之AOP的详细讲解

目录 一.SpringAOP是什么? 1.1理论知识点 1.2简单的AOP例子 二.SpringAOP的核心概念 2.1切点(Pointcut) 2.2通知(Advice) 2.3切⾯(Aspect) 2.4通知类型 2.5切⾯优先级 Order 2.6切点表达式 2.6.1 execution表达式 2.6.2annotati…

天地人和•大道不孤——卢禹舜中国画作品展在重庆美术馆隆重开幕

2024年4月12日,由中国国家画院、重庆市文化和旅游发展委员会主办,重庆美术馆(重庆画院、重庆国画院)、北京八荒锦绣美术馆、中国国际文化交流基金会卢禹舜艺术基金承办的“天地人和•大道不孤——卢禹舜中国画作品展”开幕式在重庆…

jmeter实验 模拟:从CSV数据到加密请求到解密返回数据再到跨越线程组访问解密后的数据

注意,本实验所说的加密只是模拟加密解密,您需要届时写自己的加解密算法或者引用含有加密算法的相关jar包才行. 思路: 线程组1: 1.从CSV文件读取原始数据 2.将读取到的数据用BeanShell预习处理器进行加密 3.HTTP提取器使用加密后的数据发起请求 4.使用BeanShell后置处理器…

底层文件操作的各种函数(二)------printf,fprintf,sprintf,scanf,fscanf,sscanf的对比以及文件缓冲区

偷得几日清闲,又因一瞬之间对蹉跎时间的愧疚,由此而来到CSDN这个高手云集和新手求学的平台来也写上那么一篇博客。虽然自己的博客那么久不温不热,但坚持写作,巩固自己就好。今天要讲的是续接上一篇文章的补充与继续吧。上期文章&a…

MQ:延迟队列

6.1场景: 1.定时发布文章 2.秒杀之后,给30分钟时间进行支付,如果30分钟后,没有支付,订单取消。 3.预约餐厅,提前半个小时发短信通知用户。 A -> 13:00 17:00 16:30 延迟时间: 7*30 * 60 *…

GB/T 28181标准中的错误码,国标28181中可能出现的SIP协议相关的错误码及其含义

目录 一、GB/T 28181标准介绍 (一)概述 (二)关键内容和特点 1. 系统架构: 2. 设备接入: 3. 网络通信: 4. 业务功能: 5. 安全保护: 6. 平台管理: &a…

【C语言】字符串函数和内存函数及其模拟实现

文章目录 前言 一、常见字符串库函数1.strlen函数2.长度不受限制的字符串函数2.1 strcpy2.2 strcat2.3 strcmp 3.长度受限制的字符串函数3.1 strncpy3.2 strncat3.3 strncmp 二、字符串查找函数strstrstrtok 三、strerror函数四、内存操作函数1.memcpy2.memmove3.memcmp 五、字…

力扣刷题 二叉树层序遍历相关题目II

NO.116 填充每个节点的下一个右侧节点指针 给定一个 完美二叉树 ,其所有叶子节点都在同一层,每个父节点都有两个子节点。二叉树定义如下: struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针,…

iOS开发如何更改xcode中的Apple ID

在Xcode中更改Apple ID是一项常见的任务,尤其是当你需要切换到另一个开发者账号或者团队时。下面是一个简单的步骤指南,帮助你更改Xcode中的Apple ID: 步骤一:退出当前的Apple ID 1.打开Xcode应用程序。 2.在菜单栏中,…

外贸公司应该怎么选择企业邮箱?哪个企业邮箱最好?

外贸公司业务的特殊性需要他们频繁进行跨国的沟通交流,那么外贸公司应该如何选择适合的企业邮箱呢?首先,传输邮件的稳定安全是前提,另外由于沟通多是国外客户,邮件的翻译也成为外贸公司企业邮箱的刚需。小编今天就详细…

ARMv8-A架构下的外部debug模型之外部调试事件(external debug events)概述

外部调试器与处理器之间的握手与external debug events 一,External Debug的使能二,外部调试器和CPU之间的握手三,外部调试事件 External debug events1. External debug request event2. Halt instruction debug event3. Halting step debug…

【从浅学到熟知Linux】环境变量详谈(含使用程序获取环境变量的3种方法、如何查看环境变量)

🏠关于专栏:Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程及数据库等内容。 🎯每天努力一点点,技术变化看得见 文章目录 环境变量基本概念查看环境变量的方法环境变量相关命令环境变量组织方式及获取环境变量的3种方法验…

Cesium.js--》探秘Cesium背后的3D模型魔力—加载纽约模型

今天简单实现一个Cesium.js的小Demo,加强自己对Cesium知识的掌握与学习,先简单对这个开源库进行一个简单的介绍吧! Cesium 是一个开源的地理空间可视化引擎,用于创建基于 Web 的三维地球应用程序。它允许开发人员在网页上呈现高度…

Java基础第十一课——类与对象(2)

由于类与对象这一部分的知识点很多,而且操作方法也有很多,所以这次将继续深入讨论一下关于类与对象中方法传参、方法重载、构造方法以及this关键字使用方面的知识。 一、方法传参 1.return关键字 return关键字作用 作用场景:方法内 作用…

天猫精灵要会员,不能听歌,还能用来干什么呢?榨干它的剩余价值

目录 起因:以听歌为主要功能的设备,却不能听歌了 1.蓝牙音箱 2.控制智能家电 3.万能遥控器,需要一个外接设备 4.倒计时/提醒,闹钟提醒,整点提醒(这功能有人不喜欢,闲吵,还不能关…

LeetCode题练习与总结:最小路径和--64

一、题目描述 给定一个包含非负整数的 m x n 网格 grid ,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小。 说明:每次只能向下或者向右移动一步。 示例 1: 输入:grid [[1,3,1],[1,5,1],[4,2,1]] 输出…

UI设计规范

一套商城系统的诞生,除了代码的编写,UI设计也至关重要。UI设计关系到商城系统的最终呈现效果,关乎整体商城的风格展现,如果UI设计做不好,带来的负面影响也是不容小觑的。 1、在很多商城系统开发中,有时会有…

【Sql Server】锁表如何解锁,模拟会话事务方式锁定一个表然后进行解锁

大家好,我是全栈小5,欢迎来到《小5讲堂》。 这是《Sql Server》系列文章,每篇文章将以博主理解的角度展开讲解。 温馨提示:博主能力有限,理解水平有限,若有不对之处望指正! 目录 前言创建表模拟…

运放噪声评估的来龙去脉

运放噪声评估的来龙去脉 友情提示,运放电路的噪声分析还是比较复杂的,不论是基础理论还是对应的推导过程,都不是特别容易。考虑到兄弟们的基础参差不齐,所以我还是尽量说清楚点,这样导致看起来就有点罗里吧嗦&#xff…

10 Php学习:循环

在 PHP 中,提供了下列循环语句: while - 只要指定的条件成立,则循环执行代码块do…while - 首先执行一次代码块,然后在指定的条件成立时重复这个循环for - 循环执行代码块指定的次数foreach - 根据数组中每个元素来循环代码块 当…