SSM整合实现增删改查操作【保姆式教学】，2024年最新web前端开发主要学哪些技术

UTF-8

characterEncodingFilter

/*

第二步：在controller中注入service对象，调用service对象的方法进行测试

UserController ：

package com.keafmd.controller;

import com.keafmd.service.IUserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

/**

• Keafmd

• @ClassName: UserController

• @Description: user控制层

• @author: 牛哄哄的柯南

• @Date: 2021-04-19 9:28

• @Blog: https://keafmd.blog.csdn.net/

*/

@Controller

@RequestMapping(“/user”)

public class UserController {

@Autowired

private IUserService userService;

@RequestMapping(“/findAll”)

public String findAll(){

System.out.println(“表现层–查询所有用户”);

//调用service的方法

userService.findAll();

return “user_list”;

}

}

重启Tomcat点击查询所有用户，控制台输出效果如下：

保证 MyBatis 框架在 web 工程中独立运行

第一步：在web项目中编写SqlMapConfig.xml的配置文件，编写核心配置文件

SqlMapConfig.xml：

<?xml version="1.0" encoding="UTF-8"?>

jdbcConfig.properties：

jdbc.driver=com.mysql.jdbc.Driver

jdbc.url=jdbc:mysql://localhost:3306/ssmtest

jdbc.username=root

jdbc.password=18044229

第二步：在IUserDao接口的方法上添加注解，编写SQL语句

IUserDao ：

package com.keafmd.dao;

import com.keafmd.entity.User;

import org.apache.ibatis.annotations.Insert;

import org.apache.ibatis.annotations.Select;

import java.util.List;

/**

• Keafmd

• @ClassName: IUserDao

• @Description: 用户dao接口

• @author: 牛哄哄的柯南

• @Date: 2021-04-19 9:20

• @Blog: https://keafmd.blog.csdn.net/

*/

public interface IUserDao {

//查询所有

@Select(“select * from user”)

public List findAll();

//保存用户

@Insert(“insert into user(username,password) values(#{userName},#{password})”)

public void saveUser(User user);

}

第三步：编写测试的方法

TestMybatis ：

package com.keafmd;

import com.keafmd.dao.IUserDao;

import com.keafmd.entity.User;

import org.apache.ibatis.io.Resources;

import org.apache.ibatis.session.SqlSession;

import org.apache.ibatis.session.SqlSessionFactory;

import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import org.junit.After;

import org.junit.Before;

import org.junit.Test;

import java.io.InputStream;

import java.util.List;

/**

• Keafmd

• @ClassName: TestMybatis

• @Description:

• @author: 牛哄哄的柯南

• @Date: 2021-04-19 10:20

• @Blog: https://keafmd.blog.csdn.net/

*/

public class TestMybatis {

private InputStream in;

private SqlSessionFactory factory;

private SqlSession session;

private IUserDao userDao;

@Before

public void init() throws Exception{

//加载配置文件

in = Resources.getResourceAsStream(“SqlMapConfig.xml”);

//创建SqlSessionFactory对象

factory = new SqlSessionFactoryBuilder().build(in);

//创建SqlSession对象

session = factory.openSession();

//获取到代理对象

userDao = session.getMapper(IUserDao.class);

}

@After

public void destory() throws Exception{

session.commit();

session.close();

in.close();

}

/**

• 查询所有

*/

@Test

public void run1(){

List users = userDao.findAll();

for (User user : users) {

System.out.println(user);

}

}

/**

• 测试保存

*/

@Test

public void saveUser(){

User user = new User();

user.setUserName(“毛利小五郎”);

user.setPassword(“999”);

userDao.saveUser(user);

}

}

测试效果：

Spring 整合 MyBatis 框架

把 mybatis 配置文件（SqlMapConfig.xml）中内容配置到 spring 配置文件中同时，把 mybatis 配置文件的内容清掉。

第一步：把SqlMapConfig.xml配置文件中的内容配置到applicationContext.xml配置文件中

把以下内容添加到applicationContext.xml配置文件中：

再添加上配置Spring框架声明式事务管理：

<tx:advice id=“txAdvice” transaction-manager=“transactionManager”>

tx:attributes

<tx:method name=“find*” propagation=“SUPPORTS” read-only=“true”/>

<tx:method name=“*” isolation=“DEFAULT”/>

</tx:attributes>

</tx:advice>

aop:config

<aop:pointcut expression=“execution(* com.keafmd.service.impl..(…))” id=“pt1”/>

<aop:advisor advice-ref=“txAdvice” pointcut-ref=“pt1”/>

</aop:config>

applicationContext.xml：

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns=“http://www.springframework.org/schema/beans”

xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”

xmlns:context=“http://www.springframework.org/schema/context”

xmlns:aop=“http://www.springframework.org/schema/aop” xmlns:tx=“http://www.springframework.org/schema/tx”

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context.xsd

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop.xsd

http://www.springframework.org/schema/tx

http://www.springframework.org/schema/tx/spring-tx.xsd">

<context:component-scan base-package=“com.keafmd”>

<context:exclude-filter type=“annotation” expression=“org.springframework.stereotype.Controller”/>

</context:component-scan>

<tx:advice id=“txAdvice” transaction-manager=“transactionManager”>

tx:attributes

<tx:method name=“find*” propagation=“SUPPORTS” read-only=“true”/>

<tx:method name=“*” isolation=“DEFAULT”/>

</tx:attributes>

</tx:advice>

aop:config

<aop:pointcut expression=“execution(* com.keafmd.service.impl..(…))” id=“pt1”/>

<aop:advisor advice-ref=“txAdvice” pointcut-ref=“pt1”/>

</aop:config>

第三步：在IUserDao接口中添加@Repository注解

package com.keafmd.dao;

import com.keafmd.entity.User;

import org.apache.ibatis.annotations.Insert;

import org.apache.ibatis.annotations.Result;

import org.apache.ibatis.annotations.Results;

import org.apache.ibatis.annotations.Select;

import org.springframework.stereotype.Repository;

import java.util.List;

/**

• Keafmd

• @ClassName: IUserDao

• @Description: 用户dao接口

• @author: 牛哄哄的柯南

• @Date: 2021-04-19 9:20

• @Blog: https://keafmd.blog.csdn.net/

*/

@Repository

public interface IUserDao {

//查询所有

@Select(“select * from user”)

public List findAll();

//保存用户

@Insert(“insert into user(username,password) values(#{userName},#{password})”)

public void saveUser(User user);

}

第四步：在UserServiceImpl中注入dao对象

package com.keafmd.service.impl;

import com.keafmd.dao.IUserDao;

import com.keafmd.entity.User;

import com.keafmd.service.IUserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import java.util.List;

/**

• Keafmd

• @ClassName: UserService

• @Description: user业务层实现类

• @author: 牛哄哄的柯南

• @Date: 2021-04-19 9:25

• @Blog: https://keafmd.blog.csdn.net/

*/

@Service(“userService”)

public class UserServiceImpl implements IUserService {

@Autowired

IUserDao userDao;

@Override

public List findAll() {

System.out.println(“user业务层实现类–findAll”);

return userDao.findAll();

}

@Override

public void saveUser(User user) {

System.out.println(“user业务层实现类–saveUser”);

userDao.saveUser(user);

}

}

第五步：修改 UserController 代码

package com.keafmd.controller;

import com.keafmd.entity.User;

import com.keafmd.service.IUserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.http.HttpRequest;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.util.List;

/**

• Keafmd

• @ClassName: UserController

• @Description: user控制层

• @author: 牛哄哄的柯南

• @Date: 2021-04-19 9:28

• @Blog: https://keafmd.blog.csdn.net/

*/

@Controller

@RequestMapping(“/user”)

public class UserController {

@Autowired

private IUserService userService;

@RequestMapping(“/findAll”)

public String findAll(Model model){

System.out.println(“表现层–查询所有用户”);

//调用service的方法

List userList = userService.findAll();

model.addAttribute(“userList”,userList);

return “user_list”;

}

@RequestMapping(“/save”)

public void save(User user , HttpServletRequest request, HttpServletResponse response) throws IOException {

userService.saveUser(user);

response.sendRedirect(request.getContextPath()+“/user/findAll”);

return;

}

}

第五步：修改 user_list.jsp 代码，实现显示账户信息

<%–

Created by IntelliJ IDEA.

User: lenovo

Date: 2021/4/19

Time: 9:55

To change this template use File | Settings | File Templates.

–%>

<%@ page contentType=“text/html;charset=UTF-8” language=“java” isELIgnored=“false” %>

<%@taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>

查询所有用户

<%-- ${userList}–%>

<c:forEach items=“${userList}” var=“user”>

${user.userName}

${user.password}

</c:forEach>

第六步：测试查询

效果：

第七步：测试保存

修改index.jsp代码，添加测试保存的代码：

<%–

Created by IntelliJ IDEA.

User: lenovo

Date: 2021/4/19

Time: 9:52

To change this template use File | Settings | File Templates.

–%>

<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>

查询所有用户

测试保存

账户名：

密码：

修改 UserController 代码，添加save方法：

package com.keafmd.controller;

import com.keafmd.entity.User;

import com.keafmd.service.IUserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.http.HttpRequest;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.util.List;

/**

• Keafmd

• @ClassName: UserController

• @Description: user控制层

• @author: 牛哄哄的柯南

• @Date: 2021-04-19 9:28

• @Blog: https://keafmd.blog.csdn.net/

*/

@Controller

@RequestMapping(“/user”)

public class UserController {

@Autowired

private IUserService userService;

@RequestMapping(“/findAll”)

public String findAll(Model model){

System.out.println(“表现层–查询所有用户”);

//调用service的方法

List userList = userService.findAll();

model.addAttribute(“userList”,userList);

return “user_list”;

}

@RequestMapping(“/save”)

public void save(User user , HttpServletRequest request, HttpServletResponse response) throws IOException {

userService.saveUser(user);

response.sendRedirect(request.getContextPath()+“/user/findAll”);

return;

}

}

测试效果：

增删改查（前后端分离）

---

查找

实际开发中，多为前后端分离，所以我们需要修改我们的表现层代码，同时需要添加上jackson的依赖。

com.fasterxml.jackson.core

jackson-core

2.11.0

com.fasterxml.jackson.core

jackson-databind

2.11.0

com.fasterxml.jackson.core

jackson-annotations

2.11.0

UserController：

package com.keafmd.controller;

import com.keafmd.common.CommonResult;

import com.keafmd.entity.User;

import com.keafmd.service.IUserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.http.HttpRequest;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.util.List;

/**

• Keafmd

• @ClassName: UserController

• @Description: user控制层

• @author: 牛哄哄的柯南

• @Date: 2021-04-19 9:28

• @Blog: https://keafmd.blog.csdn.net/

*/

@Controller

@RequestMapping(“/user”)

public class UserController {

@Autowired

private IUserService userService;

// http://127.0.0.1:8080/ssmtest/user/findAll

@RequestMapping(“/findAll”)

@ResponseBody

public List findAll(){

System.out.println(“表现层–查询所有用户”);

//调用service的方法

List userList = userService.findAll();

// model.addAttribute(“userList”,userList);

// return “user_list”;

return userList;

}

@RequestMapping(“/save”)

public void save(User user , HttpServletRequest request, HttpServletResponse response) throws IOException {

userService.saveUser(user);

response.sendRedirect(request.getContextPath()+“/user/findAll”);

return;

}

}

访问： http://127.0.0.1:8080/ssmtest/user/findAll

前端vue项目

=================================================================

这里我们需要有相关的环境，这里不细说了。

创建个空的vue项目

---

找个文件夹进入命令行，输入：vue create ssmtest

关闭代码格式化校验工具

---

在项目的根目录（与package.json同级）中，添加名称为vue.config.js的文件，就能自动被vue-cli加载。

module.exports = {

lintOnSave:false, //关闭代码格式化校验工具

devServer:{

port: 80 //修改启动端口

}

}

安装相关的工具

---

1、安装vue-router

npm install vue-router

2、安装 element-ui插件

npm i element-ui -S

3、安装axios

npm install axios

目录结构

---

编写main.js

在这里引入各种组件，写上router。

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘@/router’

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({

render: h => h(App),

router

}).$mount(‘#app’)

编写App.vue

在div中写入<router-view></router-view>，用路由控制界面。

编写router文件夹下的index.js

在这里使用router配置各种路径

import Vue from ‘vue’

import Router from ‘vue-router’

Vue.use(Router)

// import A from ‘@/components/A’

// import B from ‘@/components/B’

export default new Router({

mode: ‘history’,

routes: [{

path: ‘/’,

name: ‘Index’,

component: () => import(‘@/views’),

children: [{

path: ‘/user’,

name: ‘User’,

component: () => import(‘@/views/user’)

}

]

}

// ,

// {

// path: ‘/user’,

// name: ‘User’,

// component: () => import(‘@/views/user’)

// }

// {

// path: ‘/aaa’,

// name: ‘A’,

// component: A

// },

// {

// path: ‘/bbb’,

// name: ‘B’,

// component: B

// }

]

})

编写公共部分的menu.vue

注意：在 el-menu 标签里注入router。

管理

用户管理

编写views下的index.vue

信息系统

keafmd

个人设置

退出

编写views下的user下的index.vue

<el-table :data=“tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))”

style=“width: 100%”>

<el-button size=“mini” @click=“handleEdit(scope.$index, scope.row)”>Edit

<el-button size=“mini” type=“danger” @click=“handleDelete(scope.$index, scope.row)”>Delete