SSM(Vue3+ElementPlus+Axios+SSM前后端分离)【一】

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: SSM(Vue3+ElementPlus+Axios+SSM前后端分离)【一】

SSM(Vue3+ElementPlus+Axios+SSM前后端分离)–基础环境搭建【一】


项目介绍


项目功能/界面


SSM 整合项目界面


b43f4581c307ef8c1039ae8105a57b5d.png


技术栈


说明: 前后端分离开发, 前端框架Vue + 后端框架SSM

  1. 前端框架Vue
  2. 后台框架-SSM(SpringMVC+Spring+MyBatis)
  3. 数据库-MySQL
  4. 项目的依赖管理-Maven
  5. 分页-pagehelper
  6. 逆向工程-MyBatis Generator
  7. 其它…


项目基础环境搭建


创建项目


创建Maven 项目-提醒, 配置maven 的仓库镜像


1296c9bd207b455daae500ccf1fda046.png

93ab918e77f063d737fb8570eee86714.png

addb7ef0e91f44fe2bd6db7ac6440fd2.png

ee51bd23387d87854ea5bb98effaee5e.png

网络异常,图片无法展示
|

cb27820c8bb8403ba8a009119cdada99.png

01efb502260948a3afb7e09f5d249961.png

网络异常,图片无法展示
|
567d4cdaabc24ccd96e10ef270019afa.png


e22518be110c4861b6ce2dae3ad7006a.png

引入项目依赖的jar 包

先引入基本的包,开发中, 需要什么包再导入即可

image.png


配置pom.xml

//把编译原来1.7的版本改成1.8,否则很多注解无法识别 
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>
 //注销bulid 配置,暂时不需要,需要时,再打开/修改,这里不做显示
    //增加项目依赖的jar 包
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>
        <!--引入springmvc, 也会引入/导入spring的库/jar-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.8</version>
        </dependency>
        <!--引入spring-jdbc, 支持事务相关-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.3.8</version>
        </dependency>
        <!--引入spring aspects 切面编程需要的库/jar-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>5.3.8</version>
        </dependency>
        <!--引入mybatis库/jar-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.7</version>
        </dependency>
        <!--引入mybatis整合spring的适配包, 一定要引入-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.6</version>
        </dependency>
        <!--引入druid数据库连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.6</version>
        </dependency>
        <!--引入mysql驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>
        <!-- 引入mybatis逆向工程依赖包 -->
        <dependency>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-core</artifactId>
            <version>1.4.0</version>
        </dependency>
        <!-- 引入jackson,处理json数据 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.4</version>
        </dependency>
        <!-- 引入mybatis pageHelper分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.2.1</version>
        </dependency>
        <!-- JSR303数据校验支持引入hibernate-validator
        -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>6.1.0.Final</version>
        </dependency>
    </dependencies>



给项目配置Tomcat


方式和前面将javaweb 一样, 配置一个Local Tomcat Server

694547db79e664b7714858150fcc0676.png

启动Tomcat , 完成测试

391078af22b944c0a6e9877b46e4d568.png

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
138 1
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
162 1
|
3月前
|
JavaScript API
Vue3基础(十qi)___安装使用axios
本文介绍了如何在Vue3项目中安装和使用axios进行HTTP请求,包括在main.js中引入axios并挂载到全局属性,以及在组件中通过`getCurrentInstance`获取全局axios实例来发送请求的方法。
38 0
Vue3基础(十qi)___安装使用axios
|
3月前
|
JavaScript
Vue3基础(21)___在axios.js中使用路由跳转
本文介绍了在Vue 3中如何在axios.js中使用路由跳转,通过直接引入路由实例并使用`router.push`实现页面跳转。
137 0
|
4月前
|
JavaScript C++
使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件
本文详细介绍了如何使用Vite创建Vue3+TypeScript项目,并整合ElementPlus、Axios、Pinia、Less、Vue-router等组件或插件的步骤和配置方法。
1687 1
|
4月前
|
JavaScript 前端开发 C++
使用 Vue-Cli 创建 Vue3+TS 项目并整合 ElementPlus、Axios 等组件或插件
本文详细记录了如何使用Vue-Cli工具创建一个Vue3+TypeScript项目,并整合ElementPlus组件库和Axios等插件,包括项目的创建、配置、启动和插件封装使用等步骤。
71 0
|
5月前
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
131 0
|
6月前
|
JSON JavaScript API
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
|
2月前
|
资源调度 JavaScript
|
4月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?