SSM实现CRUD(前后端分离)

介绍

实现了对员工增、删、改、查的前后端分离项目

软件架构

项目使用Spring、SpringMVC、Mybaits、MySQL、Vue、Element-UI,SSM整合、Jackson序列化、pagehelper分页技术和框架实现

项目展示

  • 查询
    列表查询

  • 增加&修改
    增加&修改

  • 删除
    删除

后端部署

创建数据库导入数据

先创建一个数据库,然后再导入 数据
导入数据

安装依赖

使用IDEA打开项目,等待依赖下载完
安装依赖

下载完后要把jar加到项目中 点击 File -> Project Structure

配置web环境

点击 File -> Project Structure -> Modules

按步骤完成后点击 OK 保存

添加Tomact

点击上方图中(安装依赖步骤的第一张图)的 Add Configuration 进行配置, 点击 + 号,找到 Tomcat Service -> Local

点击 fix 后选择最下方这个,找到 Application context 中的 /ssm_crud_system_war_exploded 改成 / 完成之后点击 OK保存

修改配置

找到 src/main/resouces/applicationContext.xml 修改配置
applicationContext.xml

1、如果你的数据库驱动包版本是6.0及以上 <property name="driverClassName" value="com.mysql.cj.jdbc.Driver" />这里就不需要更改,否则value的值改成com.mysql.jdbc.Driver
2、数据库地址,端口,数据库名(刚才建数据库名的时候定义的名字)改成电脑对应的参数
3、修改对应的数据库用户名和密码

启动项目

配置完后运行tomact启动项目,可以用快捷键 shift+f10

输入地址进入后看到这个界面说明部署成功了

前端部署

安装依赖

在项目根目录打开cmd执行 npm i 建议使用cnpm安装
安装依赖

修改接口地址

打开 /ssm-crud-web/config/index.js 文件,找到proxyTable把target改成后端项目部署的地址
修改接口地址

启动项目

在根目录执行 npm run start 等待编译完成后启动项目
项目启动后
好了,大功告成 源码在这 => ssm-crud

Logo

前往低代码交流专区

更多推荐