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

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