智能商贸-2 SpringMVC和前端展示

最新推荐文章于 2020-11-01 11:59:23 发布

MaNong_233

最新推荐文章于 2020-11-01 11:59:23 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/MaNong_233/article/details/96695211

版权

1.完成Service层

创建基类,方便以后增加功能

IBaseService

import cn.itsource.pss.domain.Employee;
import cn.itsource.pss.query.BaseQuery;
import org.springframework.data.domain.Page;
import java.io.Serializable;
import java.util.List;

public interface IBaseService<T,ID extends Serializable>{
    //添加与修改数据
    void save(T t);
    //根据id删除一条数据
    void delete(ID id);
    //根据id查询到一条数据
    T findOne(ID id);
    //查询所有数据
    List<T> findAll();
    //根据Query拿到分页对象(分页)
    Page findPageByQuery(BaseQuery baseQuery);
    //根据Query拿到对应的所有数据(不分页)
    List<T> findByQuery(BaseQuery baseQuery);
    //根据jpql与对应的参数拿到数据
    List findByJpql(String jpql,Object... values);
}

BaseServiceImpl

import cn.itsource.pss.query.BaseQuery;
import cn.itsource.pss.repository.BaseRepository;
import cn.itsource.pss.service.IBaseService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.transaction.annotation.Transactional;

import java.io.Serializable;
import java.util.List;

import static org.springframework.transaction.annotation.Propagation.SUPPORTS;

@Transactional(readOnly = true,propagation = SUPPORTS)
public class BaseServiceImpl<T,ID  extends Serializable> implements IBaseService<T,ID>{

    //注意:Spring 4.x 中可以为子类注入子类对应的泛型类型的成员变量的引用
    @Autowired
    private BaseRepository<T,ID> baseRepository;

    @Override
    @Transactional(
    public void save(T t) {
        baseRepository.save(t);
    }

    @Override
    @Transactional(
    public void delete(ID id) {
        baseRepository.delete(id);
    }

    @Override
    public T findOne(ID id) {
        return baseRepository.findOne(id);
    }

    @Override
    public List<T> findAll() {
        return baseRepository.findAll();
    }

    @Override
    public Page findPageByQuery(BaseQuery baseQuery) {
        return baseRepository.findPageByQuery(baseQuery);
    }

    @Override
    public List<T> findByQuery(BaseQuery baseQuery) {
        return baseRepository.findByQuery(baseQuery);
    }

    @Override
    public List findByJpql(String jpql, Object... values) {
        return baseRepository.findByJpql(jpql, values);
    }
}

创建员工的service

IEmployeeService

import cn.itsource.pss.domain.Employee;
//注：在开发中，业务后期是有很多功能的(不只是我们最简单的CRUD)
public interface IEmployeeService extends IBaseService<Employee,Long> {
}

IEmployeeServiceIpml

import cn.itsource.pss.domain.Employee;
import cn.itsource.pss.service.IEmployeeService;
import org.springframework.stereotype.Service;

@Service
public class EmployeeServiceImpl extends BaseServiceImpl<Employee,Long> implements IEmployeeService {
}

2.集成SpringMVC

###2.1配置applicationContext-mvc.xml

由于包已经全部导完所以直接配置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: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
    ">
    <!-- 对静态资源进行放行 -->
    <mvc:default-servlet-handler />
    <!-- 扫描controller部分的包 -->
    <!-- @Component组件, @Repository持久层, @Service业务逻辑层, and @Controller控制器 -->
    <context:component-scan base-package="cn.itsource.pss.web" />
    <!-- 添加mvc对@RequestMapping等注解的支持 -->
    <mvc:annotation-driven />

    <!-- ViewResolver 视图解析器 (struts2视图类型类似) -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 设置视图路径的前后缀，该配置可以让我们写视图路径的时候更简单。 -->
        <!-- 希望跳转jsp是[/WEB-INF/views/前缀][xxx变量][.jsp后缀] -->
        <!-- * @see #setPrefix -->
        <property name="prefix" value="/WEB-INF/views/" />
        <!-- * @see #setSuffix -->
        <property name="suffix" value=".jsp" />
    </bean>

    <!-- 错误：提示告诉开发者你没有配置文件上传解析器。 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设置上传文件的最大尺寸为1MB -->
        <property name="maxUploadSize">
            <value>1048576</value>
        </property>
    </bean>
</beans>

2.2配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         id="WebApp_ID" version="3.1">

    <!-- 读取SpringMVC -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <!-- 启动Spring的监听器 -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!--  配置解决中文乱码的问题 -->
    <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>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>characterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 配置核心控制器-->
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <!-- 告诉SpringMVC到哪里去找配置文件 -->
            <param-name>contextConfigLocation</param-name>
            <!-- 注意:这里只读取springmvc的xml -->
            <param-value>classpath:applicationContext-mvc.xml</param-value>
        </init-param>
        <!-- Servlet默认在每一次访问的时候创建 -->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

2.3完成Controller层

EmployeeController

import cn.itsource.pss.domain.Employee;
import cn.itsource.pss.service.IEmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private IEmployeeService employeeService;

    @RequestMapping("/index")
    public String index() {
        //根据配置，这里会跳到/WEB-INF/views/employee/employee.jsp页面
        return "employee/employee";
    }
    @RequestMapping("/list")
    @ResponseBody
    public List<Employee> list(){
        return employeeService.findAll();
    }
}

3.主页面

3.1抽取hand.jsp放easyui的引入

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

<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">

<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/easyui/plugin/jquery.jdirk.js"></script>
<script type="text/javascript" src="/js/common.js"></script>

3.2主页面main.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>智销系统</title>
    <%@include file="/WEB-INF/views/head.jsp" %>

    <script type="text/javascript">
        $(function () {
            $('#menuTree').tree({
                url:'/json/menu.json',
                onClick:function(node) {
                    addTab(node.text,node.url);
                }
            });
        })


        function addTab(title, url){
            if(url){
                if ($('#dataTab').tabs('exists', title)){
                    $('#dataTab').tabs('select', title);
                } else {
                    var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                    $('#dataTab').tabs('add',{ 
                        title:title,
                        content:content,
                        closable:true
                    });
                }
            }
        }
    </script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:100px;">
    <h1>智销系统</h1>
</div>
<div data-options="region:'west',title:'菜单',split:true" style="width:230px;">
    <ul id="menuTree"></ul>
</div>
<div id="dataTab" data-options="region:'center'"
     class="easyui-tabs" style="padding:5px;background:#eee;">
    <div title="Home">
    </div>
</div>
</body>
</html>

4.员工页面

4.1 employee.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>传销</title>
    <%@include file="/WEB-INF/views/head.jsp" %>
    <script src="/js/model/employee.js"></script>

</head>
<body>

<table id="employeeGrid" class="easyui-datagrid"
       data-options="url:'/employee/page',fitColumns:true,singleSelect:true,fit:true,pagination:true,toolbar:'#gridTools',onRowContextMenu:showMenu"
>
    <thead>
    <tr>
        <th data-options="field:'id',width:100" sortable="true">编码</th>
        <th data-options="field:'headImage',width:100,formatter:formatImage">头像</th>
        <th data-options="field:'username',width:100" sortable="true">用户名</th>
        <th data-options="field:'password',width:100" sortable="true">密码</th>
        <th data-options="field:'email',width:100" sortable="true">邮箱</th>
        <th data-options="field:'age',width:100" sortable="true">年龄</th>
        <th data-options="field:'department',width:100,formatter:formatDept" sortable="true">部门</th>
    </tr>
    </thead>
</table>

<%--grid顶部工具栏--%>
<div id="gridTools" style="padding:5px;height:auto">
    <%--功能条--%>
    <div style="margin-bottom:5px">
            <a href="#" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
            <a href="#" data-method="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
            <a href="#" data-method="del" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>

    <%--查询条--%>
    <form id="searchForm" action="/employee/download">
        用户名: <input name="username" class="easyui-textbox" style="width:80px">
        邮件: <input name="email" class="easyui-textbox" style="width:80px">
        部门:
        <input name="departmentId" class="easyui-combobox" panelHeight="auto"
               data-options="valueField:'id',textField:'name',url:'/util/depts'"/>
        <a href="#" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
        <button type="submit" class="easyui-linkbutton" iconCls="icon-redo">导出</button>
    </form>
</div>

<%--添加和修改的表单--%>
<div id="editDialog" class="easyui-dialog" title="功能编辑" style="width:400px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">
    <form id="editForm" method="post">
        <input id="employeeId" type="hidden" name="id"/>
        <table cellpadding="5">
            <tr>
                <td>用户名:</td>
                <td><input class="easyui-validatebox" type="text" name="username"
                           data-options="required:true,validType:'checkName'"/></td>
            </tr>
            <tr data-edit="true">
                <td>密码:</td>
                <td><input id="password" class="easyui-validatebox" type="password" name="password"
                           data-options="required:true"/></td>
            </tr>
            <tr data-edit="true">
                <td>确定密码:</td>
                <td><input class="easyui-validatebox" type="password" name="confirmPassword"
                           validType="equals['password','id']"
                           data-options="required:true"/></td>
            </tr>
            <tr>
                <td>邮件:</td>
                <td><input class="easyui-validatebox" type="text" name="email"
                           data-options="required:true,validType:'email'"/></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input class="easyui-validatebox" type="text" name="age"
                           data-options="validType:'integerRange[18,80]'"/></td>
            </tr>
            <tr>
                <td>部门:</td>
                <td>
                    <input name="department.id" class="easyui-combobox" panelHeight="auto"
                           data-options="valueField:'id',textField:'name',url:'/util/depts',required:true"/>
                </td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-method="save">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-method="closeDialog">关闭</a>
    </div>
</div>
</body>
</html>

4.2 employee.js

function formatImage(data) {
    return "<img src='"+data+"' alt='没有图片' />"
}
function formatDept(data) {
    if(data){return data.name};
    return "";
}

$(function () {

})

MaNong_233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
智能商贸-2 SpringMVC和前端展示

1.完成Service层创建基类,方便以后增加功能IBaseServiceimport cn.itsource.pss.domain.Employee;import cn.itsource.pss.query.BaseQuery;import org.springframework.data.domain.Page;import java.io.Serializable;import...
复制链接

扫一扫