v3-10 前后端业务搭建Vue+SSM , 前后端交互原理(准备工作)

本文介绍了如何搭建Vue+SSM的前后端框架,包括后端系统的常规操作和导入pojo,前端Vue环境的准备,熟悉Vue脚手架结构,ElementUI组件的使用,以及实现用户登录页面。详细阐述了前后端交互的原理和流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

01 搭建前后端的框架vue+SSM

1.1 后端系统的搭建

---->常规操作+ 导入pojo

文件位置:   

------>导入 pojo和vo层

------>vo层具体作用: 

--->最后的结构

所有操作流程图

---->01

---->02

---->03 切换端口号 

--->04 启动前端vue 操作: cmd+ vue ui

--->05  前端环境准备

===>5-1 检查前端路径 vue项目路径

===>5-2 利用Hbuilder X打开目录

02 熟悉脚手架的结构(了解)

1 关于vue文件说明

---->具体分为三部分 

2. 结构: --->​

---->3 目录的结构信息: src包下

------>4. main.js说明

4.1 引入全局样式/js

4. 2 vue prototype 父子组件 属性对象传值

4.3 vue.use(VueQuillEditor)组件插件传递

******(这个^^^存在^^^问题)******

 4.4  实例化vue对象

4.5 $mount表示要进行页面渲染

4.6 App vue 说明

4.7 脚手架中的路由

4.8 vue框架实现页面(加载)的流程图

03 了解前端js elementUI(工具)

1 后端项目导入组件说明

4.2 ElementUI入门案例

--->01 定义elementUI组件 

--->02 定义 elementUI路由

---->出现这个效果即可  http://localhost:8080/#/elementUI

04 实现用户登录操作页面

1. 也是去复制粘贴输入框,按钮 输入框内图标

2. 前端 官网展示:---->

3.  最终代码展示   所有样式复制粘贴即可

---->vue前端展示效果 :  

%%% ---  springMVC的执行流程  --- %%%


01 搭建前后端的框架vue+SSM

1.1 后端系统的搭建

---->常规操作+ 导入pojo

操作:   SSM层普通模板+ pojo替换

文件位置:   

[个人电脑位置,因人而异]

D:\天翼云盘下载\第三阶段课前资料\5-京淘项目文件\1-后端框架代码\3-后端代码\jt\jt-common\src\main\java\com\jt\pojo

要在IntelliJ IDEA中配置使用Spring Boot与Vue.js 3进行前后端分离的开发环境,首先需要确保你有正确安装配置IDE。接下来,按照以下步骤操作: 参考资源链接:[Java EE框架整合开发实验教学:SSM、Spring Boot与Vue.js 3](https://wenku.youkuaiyun.com/doc/1s6v3xs4cg) 1. 安装Node.jsnpm:Vue.js 3是基于Node.js构建的,因此需要先安装Node.js环境。npm是Node.js的包管理器,也是Vue.js项目管理工具。 2. 创建Spring Boot项目:使用Spring Initializr(***)生成Spring Boot项目骨架,并导入到IntelliJ IDEA中。选择需要的依赖,如Spring Web、Thymeleaf、Spring Data JPA(如果需要使用JPA)以及MyBatis等。 3. 安装Vue CLI:在命令行中运行`npm install -g @vue/cli`来全局安装Vue CLI工具。 4. 创建Vue.js项目:在命令行中进入项目的前端目录,运行`vue create client`来创建Vue.js项目。 5. 配置IDE支持:在IntelliJ IDEA中,安装Vue.js插件,确保插件可以正确解析Vue文件。同时,配置npmVue CLI的执行路径,以便IDE可以运行npm脚本。 6. 配置前后端交互:在Spring Boot项目中配置跨域资源共享(CORS),以允许前端应用发送请求到后端。在Spring Boot的配置类中添加`@CrossOrigin`注解或配置`WebMvcConfigurer`。 7. 运行前后端项目:在IDEA中设置运行配置,分别运行Spring Boot应用Vue.js应用。通常,Vue.js应用会通过`npm run serve`启动,而Spring Boot应用通过IDE内置的运行按钮启动。 8. 前后端联调:通过配置的端口进行前后端联调,确保前端能够正确获取后端数据并渲染视图。 通过以上步骤,你可以在IntelliJ IDEA中配置使用Spring Boot与Vue.js 3进行前后端分离的开发环境。为了更深入地理解这些技术的集成应用,建议查阅《Java EE框架(SSM + Spring Boot + Vue.js 3)整合开发》实验教学大纲。这份资料详细介绍了如何使用EclipseIntelliJ IDEA进行Java EE相关框架的整合开发,将帮助你更好地理解实践前后端分离的开发模式。 参考资源链接:[Java EE框架整合开发实验教学:SSM、Spring Boot与Vue.js 3](https://wenku.youkuaiyun.com/doc/1s6v3xs4cg)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pingzhuyan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值