springboot+bootstrap+jquery+node.js记一次前后端分离的demo(测试成功)

ps:首先通过这两天的学习,终于找到了相应的资源,入进去前后端分离的门,感慨颇深,同时也非常感谢一位技术大佬的资源,结尾我会把他的博客地址贴出来,大家共勉。好了,下面咱们直接进入话题吧!

一、环境准备

1.Intellij IDEA 2017.3.3

2.JDK1.8

3.Apache-Maven-3.1.1

4.Mysql-5.6.26(此处我没有用数据库,因为数据是我写死的)

5.node.js的安装(可参考官网进行安装)

二、后端代码的项目结构

1.项目结构图

springboot+bootstrap+jquery+node.js记一次前后端分离的demo(测试成功)_第1张图片

然后启动项目,在浏览器上访问后端的数据,然后显示如下:

springboot+bootstrap+jquery+node.js记一次前后端分离的demo(测试成功)_第2张图片

至此,后端项目启动完成。

三、前端项目结构

1.首先我用的编译器是WebStrom编译器

2.项目结构图如下

springboot+bootstrap+jquery+node.js记一次前后端分离的demo(测试成功)_第3张图片

3.在cmd中执行下面的操作

springboot+bootstrap+jquery+node.js记一次前后端分离的demo(测试成功)_第4张图片

当出现connect successfully的时候就代表着前端项目成功启动(前提是已经装好了node.js)

四、
1.整体的步骤是

1.1.先启动后端的代码如下图

springboot+bootstrap+jquery+node.js记一次前后端分离的demo(测试成功)_第5张图片

1.2.然后再启动前端的代码

springboot+bootstrap+jquery+node.js记一次前后端分离的demo(测试成功)_第6张图片

两个前后端的项目都启动成功了

五、测试结果

浏览器访问结果如下:

 

springboot+bootstrap+jquery+node.js记一次前后端分离的demo(测试成功)_第7张图片

 结果就这么出来了。以上是我前后端分离的总结。

参考资料:https://blog.csdn.net/weixin_37760377/article/details/82782122

git代码地址:https://github.com/chenxiaosan/springboot.git

Always keep the faith!!!

 

你可能感兴趣的:(前后端分离springboot,springboot)