vue+spirngboot 分离技术实现图书信息的增删改查(改造这学期的课程设计【1】)

简介: 文章介绍了如何创建一个前端项目,包括使用Vue和Webpack初始化项目、安装axios和element-ui、设置侧边栏、配置路由、创建登录和注册页面、展示书籍列表、添加和修改书籍信息,以及在开发过程中遇到的一些问题及其解决方法。

1、前端项目的创建

  • vue init webpack bookshopvue
  • 安装axios http://www.axios-js.com/
npm install --save axios vue-axios
npm i element-ui -S

侧边栏的设置两种方式
第一种采用静态的形式
在这里插入图片描述
路由使用嵌套的形式
在这里插入图片描述
第二种采用动态的形式,
在这里插入图片描述
可以根据配置的路由的个数进行解析。
效果这个样子
在这里插入图片描述
通过配置新的路由导航信息,不用修改,页面自动帮你加载,这个样子
在这里插入图片描述

。我这里采用的是第一种形式、动态加载。我想要用登录和注册页。这个页加载到导航栏里,就有点过分了哈。

1、前端页面登录页

在这里插入图片描述
在输入正确的密码后会进入主界面
关键部分代码:在成功响应后台数据后,就将主页面的路由放入,直接跳转到主界面
在这里插入图片描述
后端接收参数(这里的查询我使用的是map,将前台传入的数据写入map中)
在这里插入图片描述

在这里插入图片描述

2、书籍列表

在这里插入图片描述
展示的数据是调用函数,提前进行数据的加载
关键部分代码
在这里插入图片描述
后端接受参数
在这里插入图片描述

由于使用分页技术,通过点击某一页,进行不同页码数据的展示,在进行数据传输时,使用拼接
在这里插入图片描述

3、新增加书籍页面

在这里插入图片描述
这里和后台进行数据的参数传递时对象
关键部分代码
在这里插入图片描述
后台进行参数的接收
在这里插入图片描述

4、修改页面

在这里插入图片描述
前端关键部分代码(首先跳转到修改页面,并且携带参数到该页)

在这里插入图片描述
进入该页时,调用函数,将查询到的数据展示出来
在这里插入图片描述

后端关键部分代码
在这里插入图片描述
最后将修改的数据提交
在这里插入图片描述
在这里插入图片描述

5、删除

这里删除之后、要刷新页面使用window
在这里插入图片描述
后端
在这里插入图片描述

6、遇到的问题

1、新建的项目,下载axios后,不能使用,文件夹中没有多出的plugins
在这里插入图片描述
不知道哪里出了问题???重新建立三个项目、都不行。

将昨天可以的项目,换个新的名字。运行的时候也报错。

解决方法:使用昨天的项目

2、导航栏的设置问题:如果使用动态加载,则会把登录页和注册页全部加载到一起
解决方法:使用静态的,手工的设置。路由嵌套

3、在改造以前项目的时候(进行前后端分离操作)
各种小问题不断
我以后都不想在修改老项目了。贼烦

4、提交代码到gitee存储
在建立新的代码仓库的时候,找不到url
解决方法:在首页的位置那个克隆的地址就是仓库的地址
在这里插入图片描述
5、我想把前后端分开写的代码仓储到一个仓库
解决方法:将两个项目写在一个文件夹下,然后将整个文件夹提交到gitee上。

相关文章
|
18天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
146 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
581 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
117 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
248 1
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
378 17
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
214 1
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1197 0
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
780 4
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
554 77