ssm+elementUI模块开发
- 一、创建Maven版本ssm项目
- 二、项目抽取公共内容
- 三、多模块搭建
- 四、restfull风格
- 五、swagger
- 六、postman测试后端
- 七、前端vue-element-admin模板搭建
- 八、完成crud
一、创建Maven版本ssm项目
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0modelVersion>
<groupId>cn.xxxgroupId>
<artifactId>crmartifactId>
<version>1.0-SNAPSHOTversion>
<packaging>warpackaging>
<name>crmname>
<url>http://www.example.comurl>
<properties>
<project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
<maven.compiler.source>1.7maven.compiler.source>
<maven.compiler.target>1.7maven.compiler.target>
<project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
<spring.version>4.1.2.RELEASEspring.version>
<mybatis.version>3.2.1mybatis.version>
<slf4j.version>1.7.2slf4j.version>
<log4j.version>1.2.17log4j.version>
<jackson.version>2.5.0jackson.version>
properties>
<dependencies>
<dependency>
<groupId>junitgroupId>
<artifactId>junitartifactId>
<version>4.11version>
<scope>testscope>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-aopartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-aspectsartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-beansartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-contextartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-coreartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-expressionartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-jdbcartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-testartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-txartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>commons-logginggroupId>
<artifactId>commons-loggingartifactId>
<version>1.1.1version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-webartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-webmvcartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>aopalliancegroupId>
<artifactId>aopallianceartifactId>
<version>1.0version>
dependency>
<dependency>
<groupId>org.aspectjgroupId>
<artifactId>aspectjweaverartifactId>
<version>1.6.8version>
dependency>
<dependency>
<groupId>commons-fileuploadgroupId>
<artifactId>commons-fileuploadartifactId>
<version>1.3.1version>
dependency>
<dependency>
<groupId>commons-iogroupId>
<artifactId>commons-ioartifactId>
<version>2.2version>
dependency>
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-databindartifactId>
<version>${jackson.version}version>
dependency>
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-coreartifactId>
<version>${jackson.version}version>
dependency>
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-annotationsartifactId>
<version>${jackson.version}version>
dependency>
<dependency>
<groupId>commons-dbcpgroupId>
<artifactId>commons-dbcpartifactId>
<version>1.2.2version>
dependency>
<dependency>
<groupId>commons-poolgroupId>
<artifactId>commons-poolartifactId>
<version>1.5.3version>
dependency>
<dependency>
<groupId>org.mybatisgroupId>
<artifactId>mybatisartifactId>
<version>${mybatis.version}version>
dependency>
<dependency>
<groupId>org.mybatisgroupId>
<artifactId>mybatis-springartifactId>
<version>1.2.0version>
dependency>
<dependency>
<groupId>log4jgroupId>
<artifactId>log4jartifactId>
<version>${log4j.version}version>
dependency>
<dependency>
<groupId>org.slf4jgroupId>
<artifactId>slf4j-apiartifactId>
<version>${slf4j.version}version>
dependency>
<dependency>
<groupId>org.slf4jgroupId>
<artifactId>slf4j-log4j12artifactId>
<version>${slf4j.version}version>
<scope>testscope>
dependency>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
<version>5.1.46version>
dependency>
<dependency>
<groupId>jstlgroupId>
<artifactId>jstlartifactId>
<version>1.2version>
dependency>
<dependency>
<groupId>javax.servletgroupId>
<artifactId>javax.servlet-apiartifactId>
<version>3.0.1version>
<scope>providedscope>
dependency>
<dependency>
<groupId>javax.servlet.jspgroupId>
<artifactId>jsp-apiartifactId>
<version>2.2version>
<scope>providedscope>
dependency>
dependencies>
<build>
<finalName>crmfinalName>
<pluginManagement>
<plugins>
<plugin>
<artifactId>maven-clean-pluginartifactId>
<version>3.0.0version>
plugin>
<plugin>
<artifactId>maven-resources-pluginartifactId>
<version>3.0.2version>
plugin>
<plugin>
<artifactId>maven-compiler-pluginartifactId>
<version>3.7.0version>
plugin>
<plugin>
<artifactId>maven-surefire-pluginartifactId>
<version>2.20.1version>
plugin>
<plugin>
<artifactId>maven-war-pluginartifactId>
<version>3.2.0version>
plugin>
<plugin>
<artifactId>maven-install-pluginartifactId>
<version>2.5.2version>
plugin>
<plugin>
<artifactId>maven-deploy-pluginartifactId>
<version>2.8.2version>
plugin>
plugins>
pluginManagement>
build>
project>
<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_3_0.xsd"
version="3.0">
<display-name>crmdisplay-name>
<context-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:applicationContext.xmlparam-value>
context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
listener>
<servlet>
<servlet-name>springmvcservlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
<init-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:applicationContext-mvc.xmlparam-value>
init-param>
<load-on-startup>1load-on-startup>
servlet>
<servlet-mapping>
<servlet-name>springmvcservlet-name>
<url-pattern>/url-pattern>
servlet-mapping>
<filter>
<filter-name>encodingFilterfilter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
<init-param>
<param-name>encodingparam-name>
<param-value>UTF-8param-value>
init-param>
filter>
<filter-mapping>
<filter-name>encodingFilterfilter-name>
<url-pattern>/*url-pattern>
filter-mapping>
web-app>
<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: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/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
<context:component-scan base-package="cn.xxx.crm.service"/>
<context:property-placeholder location="classpath:db.properties" />
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
<property name="driverClassName" value="${jdbc.driverClassName}" />
<property name="url" value="${jdbc.url}" />
<property name="username" value="${jdbc.username}" />
<property name="password" value="${jdbc.password}" />
<property name="maxActive" value="150" />
<property name="minIdle" value="5" />
<property name="maxIdle" value="20" />
<property name="initialSize" value="30" />
<property name="maxWait" value="1000" />
<property name="timeBetweenEvictionRunsMillis" value="10000" />
<property name="numTestsPerEvictionRun" value="10" />
<property name="minEvictableIdleTimeMillis" value="10000" />
<property name="validationQuery" value="SELECT NOW() FROM DUAL" />
bean>
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="mapperLocations" value="classpath*:cn/xxx/crm/mapper/*Mapper.xml" />
<property name="typeAliasesPackage">
<value>
cn.xxx.crm.domain
Cn.xxx.crm.query
value>
property>
bean>
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="cn.xxx.crm.mapper">property>
bean>
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
bean>
<tx:annotation-driven transaction-manager="transactionManager"/>
beans>
- applicationContext-mvc.xml
<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:mvc="http://www.springframework.org/schema/mvc"
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/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:component-scan base-package="cn.xxx.crm.web.controller" />
<mvc:annotation-driven/>
<mvc:default-servlet-handler/>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".jsp" />
bean>
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8" />
<property name="maxUploadSize" value="10485760000" />
bean>
beans>
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql:///crm?useUnicode=true&characterEncoding=utf-8
jdbc.username=root
jdbc.password=123456
log4j.rootLogger=ERROR, stdout
#log4j.rootLogger=NONE
log4j.logger.cn.xxx=TRACE
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
<mapper namespace="cn.xxx.mapper.DepartmentMapper">
<select id="findAll" resultType="Department">
select * from t_department
select>
mapper>
二、项目抽取公共内容
- BaseDomain
- BaseMapper
- IBaseService
- BaseServiceImpl
三、多模块搭建
- 普通结构缺点：
①随着业务的增加, mapper 或者 service类 越来越多 ,项目越来越庞大,项目有点臃肿 -->拆分多个模块
②项目代码越来越多, 构建 或者编译, 变得很慢很慢 -->拆分
③有些内容,公共的内容 ,有很多项目都可能使用,有必要-- 抽取到公共maven模块
④有些内容, 不想让每个人都可以修改 – 抽取到公共的maven模块 util
⑤随着项目业务需求的怎么 ,pom.xml的内容也会变得很长
- 分模块开发需求
①开闭原则：对扩展开放，对修改关闭——公共的不要乱修改
②低耦合: 尽量的分层开发 service mapper controller --为了维护
③高内聚: 比如一个方法 (方法就应该完成一个方法该干的事情 save ) --最多40行
- 代码拆分
basic-util 工具类
basic-core 公共内容
crm-common 具体项目公共内容
crm-mapper 项目里面具体mapper
crm-service 项目里面service类
crm-web 项目的controller层
web.xml applicationContext-mvc.xml crm-web模块
applicationContext.xml crm-service模块
- 结构图
四、restfull风格
没有restfull风格前
/addUser?name='tom'&age=38 --> get
/delete?id=1 -->delete
===========================================================
restful风格: 传输请求风格写法
HTTP五种动作get/post/patch/put/delete 完成增删改查
put动作 + /user(资源路径) {"name":"tom","age":28} --新增
post动作 + /user(资源路径) {"name":"tom","age":28} --修改
delete动作 +/user/1 -->表示删除id为1的用户
get动作 + /user/10 -->查询id为10的用户
patch动作 + /user -->批量查询
新增:
@RequestMapping(value="/xxx",method = RequestMethod.PUT)
@ResponseBody
public AjaxResult add(@RequestBody Department department){
System.out.println("新增:"+department);
return new AjaxResult();
}
修改:
@RequestMapping(method = RequestMethod.POST)
@ResponseBody
public AjaxResult update(@RequestBody Department department){
System.out.println("修改:"+department);
return new AjaxResult();
}
删除:
@RequestMapping(value="/{id}",method = RequestMethod.DELETE)
@ResponseBody
public AjaxResult delete(@PathVariable Long id){
System.out.println("删除数据的id为:"+id);
return new AjaxResult();
}
查询:
@RequestMapping(value="/{id}",method = RequestMethod.GET)
@ResponseBody
public AjaxResult queryOne(@PathVariable Long id){
System.out.println("查询数据的id为:"+id);
return new AjaxResult();
}
查询列表:
@RequestMapping(value="/list",method=RequestMethod.PATCH)
@ResponseBody
public List<Department> list(){
return departmentService.queryAll();
}
五、swagger
- 和spring整合,根据controller 生成的接口的文档 ,通过页面访问
- 代码实现：
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;
@Configuration
@EnableWebMvc
@EnableSwagger2
@ComponentScan(basePackages="cn.xx.crm.web.controller")
public class SwaggerConfig {
@Bean
public Docket api(){
return new Docket(DocumentationType.SWAGGER_2)
.apiInfo(this.apiInfo())
.select()
.apis(RequestHandlerSelectors.basePackage("cn.xx.crm.web.controller"))
.paths(PathSelectors.any())
.build();
}
private ApiInfo apiInfo(){
@SuppressWarnings("deprecation")
ApiInfo info=new ApiInfo(
"API接口测试文档",
"接口测试",
"1.0",
"http://www.baidu.cn",
"hx",
"111",
"http://www.baidu.cn");
return info;
}
}
- applicationContext-mvc.xml中扫描包
- 运行：http://localhost/swagger-ui.html
- 效果图如下
六、postman测试后端
- 下载资源
Postman下载
提取码：j02a
七、前端vue-element-admin模板搭建
- vue-element-admin官网下载资源
- 解压文件到idea工作空间
- idea打开文件
- 执行安装依赖：npm install
- 运行：npm run dev
- 浏览器页面访问
八、完成crud
8.1 后端
<mapper namespace="cn.itsource.crm.mapper.DepartmentMapper">
<select id="queryAll" resultType="Department">
select * from t_department
select>
<select id="queryOne" parameterType="long" resultType="Department">
select * from t_department where id = #{id}
select>
<insert id="save" parameterType="Department">
insert into t_department(name) values (#{name})
insert>
<update id="update" parameterType="Department">
update t_department set name=#{name} where id=#{id}
update>
<delete id="remove" parameterType="long">
delete from t_department where id=#{id}
delete>
mapper>
@Controller
@RequestMapping("/department")
@CrossOrigin
public class DepartmentController {
@Autowired
private IDepartmentService departmentService;
@RequestMapping(value="/list",method=RequestMethod.PATCH)
@ResponseBody
public List<Department> list(){
return departmentService.queryAll();
}
@RequestMapping(method = RequestMethod.PUT)
@ResponseBody
public AjaxResult save(@RequestBody Department department){
System.out.println("新增"+department);
departmentService.save(department);
return new AjaxResult();
}
@RequestMapping(method = RequestMethod.POST)
@ResponseBody
public AjaxResult update(@RequestBody Department department){
System.out.println("修改"+department);
departmentService.update(department);
return new AjaxResult();
}
@RequestMapping(value = "/{id}",method = RequestMethod.DELETE)
@ResponseBody
public AjaxResult delete(@PathVariable Long id){
System.out.println("删除"+id);
departmentService.remove(id);
return new AjaxResult();
}
@RequestMapping(value = "/{id}",method = RequestMethod.GET)
@ResponseBody
public AjaxResult queryOne(@PathVariable Long id){
System.out.println("查询"+id);
departmentService.queryOne(id);
return new AjaxResult();
}
}
创建vue模板
methods: {
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
handleAdd: function () {
this.addFormVisible = true;
this.addForm = {
name: ''
};
},
addSubmit: function () {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.addLoading = true;
let para = Object.assign({}, this.addForm);
this.$http.put('/department',para).then(res=>{
this.addLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['addForm'].resetFields();
this.addFormVisible = false;
this.getDepartments();
});
});
}
});
},
editSubmit: function () {
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.editLoading = true;
let para = Object.assign({}, this.editForm);
this.$http.post('/department',para).then(res=>{
this.editLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
this.editFormVisible = false;
this.getDepartments();
});
});
}
});
},
handleCurrentChange(val) {
this.page = val;
this.getDepartments();
},
getDepartments() {
this.listLoading = true;
this.$http.patch('/department/list').then(res=>{
this.departments = res.data;
this.listLoading = false;
});
},
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
this.$http.delete('/department/'+row.id).then(res =>{
this.listLoading = false;
this.$message({
message: '删除成功',
type: 'success'
});
this.getDepartments();
});
}).catch(() => {
});
},
}
