Java实现前后端分离（详细流程以及解析）

目录

1. 安装nodejs服务器

2. 安装npm

3. 安装vue cli的脚手架

3.1 安装vue cli

4. 使用vue cli搭建vue前端项目

4.1 搭建项目

 5. 安装相应的插件：elementui

 6. 安装axios依赖

 7. 使用客户端软件打开vue工程

 8. 组件化开发

 9. 根组件 App.vue

9.1 根组件介绍

 9.2 组件是由三部分构成

10. 普通组件的注册使用

10.1 普通组件的注册使用-局部注册

 10.2 普通组件的注册使用-全局注册

11. 组件通信

11.1 什么是组件通信？

11.2 组件之间如何通信？

11.3 组件关系分类

 11.4 父子通信流程

 11.5 父向子通信代码示例

11.6 子向父通信代码示例

12. 路由介绍

12.1 思考

12.2 路由的介绍

12.3 vue中如何使用路径

13. 路由传递

13.1 声明式路由

13.2 编码路由

13.3 总结

14. 跨域问题

---

1. 安装nodejs服务器

Java 项目可以运行在 tomcat 服务器，开始完成前后端完全分离。前端有自己独立的工程，我们需

要把前端独立的工程运行起来： 运行在 nodejs 服务器下。

(理解为 tomcat 服务器)

 验证是否安装过该软件：

node --version

 安装过后会显示版本：

2. 安装npm

• Java项目需要依赖jar，安装maven。
• 前端项目需要依赖第三方的插件：比如axios，elementui。
• echarts 前端也需要一个管理组件的软件：npm.。package.json文件类似于pom.xml文件。
• npm通过该文件package.json文件安装依赖的插件。如果安装了node 默认安装了npm。

验证：

npm -v

验证结果：

3. 安装vue cli的脚手架

作用：帮你创建前端项目工程。它的安装需要依赖上面的 npm 。

3.1 安装vue cli

npm install -g @vue/cli
# -g: global 全局

验证是否安装成功：

vue --version

结果：

4. 使用vue cli搭建vue前端项目

• 使用命令：vue create
• 使用图形化界面：vue ui

这里使用第二种，输入vue ui，即可跳转到图形化界面，默认端口号为8000。

4.1 搭建项目

进入端口号为8000的界面：

 点击创建项目：

 5. 安装相应的插件：elementui

安装插件有两种方式：

• 使用命令: npm i element-ui -S
• 使用图形化：

 6. 安装axios依赖

作用：发送异步请求的。

第一种命令 ：npm i -S axios

第二种图形化：

 7. 使用客户端软件打开vue工程

vscode： 专业的前端工具。

webstorm：idea 团队开发的软件， 只要会使用 idea 那么也会使用该工具。

hbuilder： 适合前端。

这里使用webstorm。

 在webstorm中启动该项目。<