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

2022-12-07,,,,

1、前端项目的创建

vue init webpack bookshopvue
安装axios http://www.axios-js.com/

npm install --save axios vue-axios

安装elementui https://element.eleme.cn/#/zh-CN

npm i element-ui -S

侧边栏的设置两种方式
第一种采用静态的形式

路由使用嵌套的形式

第二种采用动态的形式,

可以根据配置的路由的个数进行解析。
效果这个样子

通过配置新的路由导航信息,不用修改,页面自动帮你加载,这个样子

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

1、前端页面登录页

在输入正确的密码后会进入主界面
关键部分代码:在成功响应后台数据后,就将主页面的路由放入,直接跳转到主界面

后端接收参数(这里的查询我使用的是map,将前台传入的数据写入map中)

2、书籍列表

展示的数据是调用函数,提前进行数据的加载
关键部分代码

后端接受参数

由于使用分页技术,通过点击某一页,进行不同页码数据的展示,在进行数据传输时,使用拼接

3、新增加书籍页面

这里和后台进行数据的参数传递时对象
关键部分代码

后台进行参数的接收

4、修改页面

前端关键部分代码(首先跳转到修改页面,并且携带参数到该页)

进入该页时,调用函数,将查询到的数据展示出来

后端关键部分代码

最后将修改的数据提交

5、删除

这里删除之后、要刷新页面使用window

后端

6、遇到的问题

1、新建的项目,下载axios后,不能使用,文件夹中没有多出的plugins

不知道哪里出了问题???重新建立三个项目、都不行。

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

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

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

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

4、提交代码到gitee存储
在建立新的代码仓库的时候,找不到url
解决方法:在首页的位置那个克隆的地址就是仓库的地址

5、我想把前后端分开写的代码仓储到一个仓库
解决方法:将两个项目写在一个文件夹下,然后将整个文件夹提交到gitee上。

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

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

下载本文的Word格式文档,以方便收藏与打印。