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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
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

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
1月前
|
资源调度 JavaScript
|
3月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
1月前
|
缓存 JavaScript 搜索推荐
|
3月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
2月前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
1月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
93 4
|
1月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
110 1
|
1月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
136 1
|
2月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
下一篇
无影云桌面