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

相关文章
|
1天前
|
JavaScript 网络架构
|
1天前
|
人工智能 JavaScript 索引
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
|
1天前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
|
1天前
|
JavaScript
Vue Cli 脚手架安装
本文介绍了如何使用npm和cnpm淘宝镜像加速来安装Vue CLI脚手架工具,并验证安装成功。接着,通过Vue CLI创建新项目,并启动项目服务。
Vue Cli 脚手架安装
|
1天前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
1天前
|
开发框架 JavaScript 前端开发
手把手教你剖析vue响应式原理,监听数据不再迷茫
该文章深入剖析了Vue.js的响应式原理,特别是如何利用`Object.defineProperty()`来实现数据变化的监听,并探讨了其在异步接口数据处理中的应用。
|
1天前
|
JavaScript
vue中组件的局部注册和全局注册
本文介绍了Vue中组件的局部注册和全局注册的方法,并通过示例代码展示了如何在特定组件或整个Vue应用中注册和使用自定义组件。
|
4天前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
25 2
|
2天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
17 5
Vue使用element中table组件实现单选一行
|
2天前
|
JavaScript
Vue实现按钮级别权限
文章介绍了在Vue中实现按钮级别权限的两种方法:使用自定义Vue指令和使用v-if指令配合自定义方法。
13 4
Vue实现按钮级别权限