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

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

1、前端项目的创建

vue init webpack bookshopvue安装axios​​install --save axios vue-axios

安装elementui​​i element-ui -S

侧边栏的设置两种方式

第一种采用静态的形式

路由使用嵌套的形式

第二种采用动态的形式，

可以根据配置的路由的个数进行解析。

效果这个样子

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

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

1、前端页面登录页

在输入正确的密码后会进入主界面

关键部分代码：在成功响应后台数据后，就将主页面的路由放入，直接跳转到主界面

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

2、书籍列表

展示的数据是调用函数，提前进行数据的加载

关键部分代码

后端接受参数

3、新增加书籍页面

这里和后台进行数据的参数传递时对象

关键部分代码

后台进行参数的接收

4、修改页面

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

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

后端关键部分代码

最后将修改的数据提交

5、删除

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

后端

6、遇到的问题

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

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

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

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

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

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

4、提交代码到gitee存储

在建立新的代码仓库的时候，找不到url

解决方法：在首页的位置那个克隆的地址就是仓库的地址

5、我想把前后端分开写的代码仓储到一个仓库

解决方法：将两个项目写在一个文件夹下，然后将整个文件夹提交到gitee上。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。