系统搭建过程
概述
用于练习前面的ssm框架，搭建了一个不怎么完整功能也不怎么齐全的项目环境。
数据库的搭建
仅仅是两个表，两者的约束也没有做。
create database ruoyi_practice;
use ruoyi_practice;
-- 用户表
drop table if exists user;
create table user(
user_id int primary key auto_increment ,
login_name varchar(50) not null ,
user_name varchar(50) not null ,
department varchar(20) not null ,
phone_number varchar(11) not null
) engine=innodb default charset=utf8;
insert into user values
(null , 'admin' , 'admin' , '管理部门' , '11111111111') ,
(null , 'root' , 'root' , '管理部门' , '22222222222')
(null , 'lengtong' , 'lengtong' , '管理部门' , '33333333333');
-- 角色表
drop table if exists role;
create table role(
role_id int primary key auto_increment ,
role_name varchar(50) not null ,
right_name varchar(20) not null -- 权限名称
)engine=innodb default charset=utf8;
insert into role values
(null , '超级管理员' , 'admin'),
(null , '超级管理员' , 'admin'),
(null , '普通角色' , 'common');
配置文件
1. web.xml：
- 环境加载监听器(加载spring框架)，简化bean操作
- 前端控制器(加载springMVC)，使用普通的类即可充当servlet的作用
- 字符过滤器，解决POST请求的乱码问题
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>Archetype Created Web Application</display-name>
<!--乱码过滤器-->
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>DispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<!-- 配置文件位置 -->
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>DispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
2. spring-mvc.xml：
<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!--组件扫描 主要扫描controller-->
<context:component-scan base-package="com.ruoyi.controller"></context:component-scan>
<!--配置mvc注解驱动-->
<mvc:annotation-driven></mvc:annotation-driven>
<!--内部资源视图解析器-->
<bean id="resourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/html/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
<!--开放静态资源访问权限-->
<mvc:default-servlet-handler></mvc:default-servlet-handler>
</beans>
3. sqlMapConfig.xml：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!-- 配置这个，数据库返回的数据可以从user_id转为userId，这样能封装到user对象中 -->
<settings>
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
<typeAliases>
<package name="com.ruoyi.pojo"/>
</typeAliases>
</configuration>
4. jdbc配置文件：
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://.....
jdbc.username=root
jdbc.password=root
5. applicationContext.xml：
整合了mybatis框架，所以部分mybatis配置放在了spring配置文件中。
（sqlSessionFactory注入到spring容器中）
<?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:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!--组件扫描 扫描service和mapper-->
<context:component-scan base-package="com.ruoyi">
<!--排除controller的扫描-->
<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"></context:exclude-filter>
</context:component-scan>
<!--加载propeties文件-->
<context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>
<!--配置数据源信息-->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="${jdbc.driver}"></property>
<property name="jdbcUrl" value="${jdbc.url}"></property>
<property name="user" value="${jdbc.username}"></property>
<property name="password" value="${jdbc.password}"></property>
</bean>
<!--配置sessionFactory-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"></property>
<!--加载mybatis核心文件-->
<property name="configLocation" value="classpath:sqlMapConfig.xml"></property>
</bean>
<!--扫描mapper所在的包 为mapper创建实现类-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.ruoyi.mapper"></property>
</bean>
<!--声明式事务控制-->
<!--平台事务管理器-->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"></property>
</bean>
<!--配置事务增强-->
<tx:advice id="txAdvice">
<tx:attributes>
<tx:method name="*"/>
</tx:attributes>
</tx:advice>
<!--事务的aop织入-->
<aop:config>
<aop:advisor advice-ref="txAdvice" pointcut="execution(* com.ruoyi.service.impl.*.*(..))"></aop:advisor>
</aop:config>
<aop:aspectj-autoproxy></aop:aspectj-autoproxy>
</beans>
前端页面的展示
简单的jsp加elementUI制作一个表格和三个按钮。
侧边栏单独提取出来。
<!-- 侧边栏，slidebar.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<el-row class="tac">
<el-col :span="5">
<el-menu
default-active="1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>系统管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="1" onclick="window.location.href='../user/user.jsp'">用户管理</el-menu-item>
<el-menu-item index="2" onclick="window.location.href='../role/role.jsp'">角色管理</el-menu-item>
<el-menu-item index="3" onclick="window.location.href='../menu/menu.jsp'">菜单管理</el-menu-item>
<el-menu-item index="4" onclick="window.location.href='../dept/dept.jsp'">部门管理</el-menu-item>
<el-menu-item index="5" onclick="window.location.href='../post/post.jsp'">岗位管理</el-menu-item>
<el-menu-item index="6" onclick="window.location.href='../notify/notify.jsp'">通知表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
</el-row>
<script>
new Vue({
el: '.tac',
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
</body>
</html>
<!-- 主页面，user.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<jsp:include page="../sidebar.jsp"/>
<div class="main" style="position:absolute; top: 50px; left: 500px">
<el-row>
<el-button type="primary" onclick="window.location.href= 'user_add.jsp'">新增</el-button>
<el-button type="primary" onclick="window.location.href= 'user_modify.jsp'">修改</el-button>
<el-button type="primary" onclick="window.location.href= 'user_del.jsp'">删除</el-button>
</el-row>
<el-table
:data="userTable"
style="width: 100%">
<el-table-column
prop="userId"
label="用户ID"
width="80">
</el-table-column>
<el-table-column
prop="loginName"
label="登录名称"
width="150">
</el-table-column>
<el-table-column
prop="userName"
label="用户名称"
width="150">
</el-table-column>
<el-table-column
prop="department"
label="部门"
width="120">
</el-table-column>
<el-table-column
prop="phoneNumber"
label="手机"
width="200">
</el-table-column>
</el-table>
</div>
<script>
new Vue({
el: '.main',
data: {
userTable: []
},
mounted() {
axios.post('/user/getUsers', {
})
.then((response) => {
this.userTable = response.data;
console.log(response.data)
})
.catch(function (error) {
console.log(error);
});
}
})
</script>
</body>
</html>
之后三个页面负责增删改。
<!-- 增加 user_add.jsp-->
<%--
Created by IntelliJ IDEA.
User: 14612
Date: 2020/8/15
Time: 14:35
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<el-form ref="form" :model="form" label-width="80px" class="submit_user">
<el-form-item label="用户名称">
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item label="登录名称">
<el-input v-model="form.loginName"></el-input>
</el-form-item>
<el-form-item label="手机号码">
<el-input v-model="form.phoneNumber"></el-input>
</el-form-item>
<el-form-item label="归属部门">
<el-select v-model="form.department">
<el-option label="软件" value="sotfware"></el-option>
<el-option label="数信" value="math"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
<script>
var userMes = new Vue({
el: '.submit_user',
data() {
return {
form: {
userName: '',
department: '',
loginName: '',
phoneNumber:''
}
}
},
methods: {
onSubmit() {
axios.post('/user/addUser', {
userName:userMes.form.userName,
loginName:userMes.form.loginName,
department:userMes.form.department,
phoneNumber:userMes.form.phoneNumber
},{
headers:{
'Content-Type':'application/json'}
})
.then((response) => {
console.log(response.data)
window.location.href="user.jsp";
})
.catch(function (error) {
console.log(error);
});
console.log('submit!');
}
}
})
</script>
</body>
</html>
<!-- 删除，use_del.jsp -->
<%--
Created by IntelliJ IDEA.
User: 14612
Date: 2020/8/15
Time: 15:06
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<el-form ref="form" :model="form" label-width="80px" class="del">
<el-form-item label="用户ID">
<el-input v-model="form.userId"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">删除</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
<script>
var vm = new Vue({
el: '.del',
data() {
return {
form: {
userId:''
}
}
},
methods: {
onSubmit() {
axios.post('/user/deleteUser', {
userId: vm.form.userId
},{
headers:{
'Content-Type':'application/json'}
})
.then((response) => {
console.log(response.data)
window.location.href="user.jsp";
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
<!-- 修改 user_modify.jsp -->
<%--
Created by IntelliJ IDEA.
User: 14612
Date: 2020/8/15
Time: 14:48
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<el-form ref="form" :model="form" label-width="80px" class="submit_user">
<el-form-item label="用户ID">
<el-input v-model="form.userId"></el-input>
</el-form-item>
<el-form-item label="用户名称">
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item label="登录名称">
<el-input v-model="form.loginName"></el-input>
</el-form-item>
<el-form-item label="手机号码">
<el-input v-model="form.phoneNumber"></el-input>
</el-form-item>
<el-form-item label="归属部门">
<el-select v-model="form.department">
<el-option label="软件" value="sotfware"></el-option>
<el-option label="数信" value="math"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">修改</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
<script>
var userMes = new Vue({
el: '.submit_user',
data() {
return {
form: {
userId:'',
userName: '',
department: '',
loginName: '',
phoneNumber:''
}
}
},
methods: {
onSubmit() {
axios.post('/user/modifyUser', {
userId: userMes.form.userId,
userName:userMes.form.userName,
loginName:userMes.form.loginName,
department:userMes.form.department,
phoneNumber:userMes.form.phoneNumber
},{
headers:{
'Content-Type':'application/json'}
})
.then((response) => {
console.log(response.data)
window.location.href="user.jsp";
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
角色和用户的界面几乎一致。
Controller层
通过@Controller注解标记是Web层，调取service层
import com.ruoyi.pojo.User;
import com.ruoyi.service.UserService;
import com.ruoyi.service.impl.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("getUsers")
@ResponseBody
public List<User> getUsers(Model model) {
List<User> users = userService.getUsers();
return users;
}
@RequestMapping("addUser")
@ResponseBody
public String addUser(@RequestBody User user) {
userService.addUser(user);
return "true";
}
@RequestMapping("modifyUser")
@ResponseBody
public String modifyUser(@RequestBody User user) {
userService.modifyUser(user);
return "true";
}
@RequestMapping("deleteUser")
@ResponseBody
public String deleteUser(@RequestBody User user) {
userService.deleteUser(user.getUserId());
return "true";
}
}
Service层
接口：
import com.ruoyi.pojo.User;
import java.util.List;
// 声明出增删改查的方法，不实现。
// 注意不加@Service注解，这里出过问题，还没搞懂咋回事。
public interface UserService {
public boolean addUser(User user);
public boolean modifyUser(User user);
public boolean deleteUser(int userId);
public List<User> getUsers();
}
实现：
import com.ruoyi.mapper.UserMapper;
import com.ruoyi.pojo.User;
import com.ruoyi.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
// 这里要加
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public boolean addUser(User user) {
return userMapper.addUser(user) > 0;
}
@Override
public boolean modifyUser(User user) {
return userMapper.modifyUser(user) > 0;
}
@Override
public boolean deleteUser(int userId) {
return userMapper.deleteUser(userId) > 0;
}
@Override
public List<User> getUsers() {
return userMapper.getUsers();
}
}
Mapper层（dao层）
只实现接口，通过代理的方式创建 。通过spring配置文件的包扫描创建mapper并且添加到spring、容器中，service直接@Autowired注入即可。
接口：
import com.ruoyi.pojo.User;
import org.springframework.stereotype.Repository;
import java.util.List;
public interface UserMapper {
public List<User> getUsers();
public int addUser(User user);
public int modifyUser(User user);
public int deleteUser(int userId);
}
mapper配置sql代码：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ruoyi.mapper.UserMapper">
<!-- private int user_id;-->
<!-- private String login_name;-->
<!-- private String user_name;-->
<!-- private String department;-->
<!-- private String phone_number;-->
<select id="getUsers" resultType="user">
select * from user
</select>
<insert id="addUser" parameterType="user">
insert into user values (null, #{loginName}, #{userName}, #{department}, #{phoneNumber})
</insert>
<update id="modifyUser" parameterType="user">
update user set login_name = #{loginName}, user_name = #{userName}, department = #{department}, phone_number = #{phoneNumber} where user_id = #{userId}
</update>
<delete id="deleteUser" parameterType="int">
delete from user where user_id = #{userId}
</delete>
</mapper>
pojo
package com.ruoyi.pojo;
public class User {
private int userId;
private String loginName;
private String userName;
private String department;
private String phoneNumber;
public int getUserId() {
return userId;
}
public void setUserId(int userId) {
this.userId = userId;
}
public String getLoginName() {
return loginName;
}
public void setLoginName(String loginName) {
this.loginName = loginName;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public String getPhoneNumber() {
return phoneNumber;
}
public void setPhoneNumber(String phoneNumber) {
this.phoneNumber = phoneNumber;
}
@Override
public String toString() {
return "User{" +
"userId=" + userId +
", loginName='" + loginName + '\'' +
", userName='" + userName + '\'' +
", department='" + department + '\'' +
", phoneNumber='" + phoneNumber + '\'' +
'}';
}
}
界面就不展示了，太丑了