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

本文涉及的产品
云数据库 RDS MySQL,集群版 2核4GB 100GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 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

相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
2月前
|
JSON 前端开发 JavaScript
Vue3 Ajax(axios)
Vue3 Ajax(axios)
|
17天前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
15 1
|
24天前
|
JavaScript
vue对axios封装
vue对axios封装
26 2
|
25天前
|
存储 JSON 自然语言处理
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
18 2
|
15天前
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
16 0
|
17天前
|
JavaScript API
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
25 0
|
22天前
|
JSON JavaScript API
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
|
23天前
|
XML 前端开发 JavaScript
Vue3数据交互axios
Vue3数据交互axios
15 0
|
24天前
|
JavaScript 前端开发 Java
vue使用axios与springboot通讯
vue使用axios与springboot通讯
21 0
|
2月前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面