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上。

相关文章
|
6天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
6天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
6天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
6天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
5天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
7天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
5天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
19天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
7天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
12天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发