分布式项目的简单搭建和使用angularjs进行单表的CRUD

最新推荐文章于 2024-07-29 14:22:26 发布

起个名字都给占用了

最新推荐文章于 2024-07-29 14:22:26 发布

阅读量165

点赞数

文章标签： java spring

本文链接：https://blog.csdn.net/qq_39979501/article/details/104627034

版权

1.项目介绍

电商项目：pinyougou. 该项目是比较经典的项目，很多技术都涵盖了，比如说Springboot、angularjs等，但面试的时候这种电商项目并不受到青睐，因为很多的培训机构都是用它来教学的，练习该项目要能说明其中的结构脉络和具体实现细节才行。

系统架构

SOA架构
SOA是Service-Oriented Architecture,它是一种支持面向服务的架构样式，从服务、基于服务开发和服务的结果来看，面向服务是一种思考方式，其实SOA架构更多的用于互联网项目开发。

为什么互联网项目会采用SOA架构呢？

随着互联网的发展，网站应用的规模不断扩大，常规的垂直应用框架已无法应对，分布式服务架构以及流动计算架构势在必行，迫切需要一个治理系统确保架构有条不紊的演进。

品优购架构图

在这里插入图片描述

框架组合

品优购采用当前流行的前后端编程架构
后端框架采用Spring+SpringMVC+mybatis+Dubbox,前端采用angularjs+bootstrap。

Dubbox框架

简单介绍
Dubbox是一个分布式服务框架，其前身是阿里巴巴开源项目Dubbo，被国内电商及互联网项目中使用，后期Alibaba停止了项目的维护，当当网便在dubbo框架基础上进行优化，并继续维护，为了和原有的dubbo作区分，将其命名为dubbox。
dubbox是一个服务框架，如果没有分布式的需求，其实是不需要用的，只有在分布式的时候，才有dubbox这样的分布式服务框架的要求，远程服务调用的分布式框架。
在这里插入图片描述
节点角色说明
Provider:暴露服务的服务提供方
Consumer:调用远程服务的服务消费方
Registry:服务注册与发现的注册中心
Monitor:统计服务的调用次数和调用时间的监控中心
Container:服务运行容器
调用关系说明：
0. 服务容器负责启动，加载，运行服务提供者。

服务提供者在启动时，向注册中心注册自己提供的服务。
服务消费者在启动时，向注册中心订阅自己所需的服务。
注册中心返回服务提供者地址列表给消费者，如果有变更，注册中心将基于长连接推送变更数据给消费者。
服务消费者，从提供者地址列表中，基于软负载均衡算法，选一台提供者进行调用，如果调用失败，再选另一台调用。
服务消费者和提供者，在内存中累计调用次数和调用时间，定时每分钟发送一次统计数据到监控中心。

注册中心Zookeeper

官方推荐使用zookeeper注册中心，注册中心负责服务地址的注册与查找，相当于服务目录，服务提供者与消费者只有在启动时与注册中心交互，注册中心不转发请求，压力较小。
Zookeeper是Apacahe Hadoop的子项目，是一个树型的目录服务，支持变更推送，适合作为Dubbox服务的注册中心，工业强度较高，可用于生产环境。

2.简单的单表开发

maven模块的层次结构
在这里插入图片描述
pinyougou_parent:父项目
子模块：
pinyougou_pojo
pinyougou_common:工具类
pinyougou_dao:数据访问接口
依赖于pinyougou_pojo
pinyougou_sellergoods_interface:服务接口
依赖于pinyougou_pojo
pinyougou_sellergoods_service:服务实现
依赖于pinyougou_sellergoods_interface 、 pinyougou_dao
pinyougou_manager_web:网页端
依赖于pinyougou_sellergoods_interface

pinyougou_parent的设置

pom.xml(锁定依赖的版本)

<?xml version="1.0" encoding="UTF-8"?>
<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.0</modelVersion>

    <groupId>pinyougou</groupId>
    <artifactId>pinyougou_parent</artifactId>
    <packaging>pom</packaging>
    <version>1.0-SNAPSHOT</version>
    <modules>
        <module>pinyougou_pojo</module>
        <module>pinyougou_dao</module>
        <module>pinyougou_sellergoods_interface</module>
        <module>pinyougou_common</module>
        <module>pinyougou_sellergoods_service</module>
        <module>pinyougou_manager_web</module>
    </modules>
    <!-- 集中定义依赖版本号 -->
    <properties>
        <junit.version>4.12</junit.version>
        <spring.version>4.2.4.RELEASE</spring.version>
        <pagehelper.version>4.0.0</pagehelper.version>
        <servlet-api.version>2.5</servlet-api.version>
        <dubbo.version>2.8.4</dubbo.version>
        <zookeeper.version>3.4.7</zookeeper.version>
        <zkclient.version>0.1</zkclient.version>
        <mybatis.version>3.2.8</mybatis.version>
        <mybatis.spring.version>1.2.2</mybatis.spring.version>
        <mybatis.paginator.version>1.2.15</mybatis.paginator.version>
        <mysql.version>5.1.32</mysql.version>
        <druid.version>1.0.9</druid.version>
        <commons-fileupload.version>1.3.1</commons-fileupload.version>
        <freemarker.version>2.3.23</freemarker.version>
        <activemq.version>5.11.2</activemq.version>
        <security.version>3.2.3.RELEASE</security.version>
        <solrj.version>4.10.3</solrj.version>
        <ik.version>2012_u6</ik.version>
    </properties>
    <!-- 解决版本冲突，采用版本锁定机制 -->
    <dependencyManagement>
        <dependencies>
            <!-- Spring -->
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-beans</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-webmvc</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-jdbc</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-aspects</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-jms</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context-support</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-test</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <!-- dubbo相关 -->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>dubbo</artifactId>
                <version>${dubbo.version}</version>
            </dependency>
            <dependency>
                <groupId>org.apache.zookeeper</groupId>
                <artifactId>zookeeper</artifactId>
                <version>${zookeeper.version}</version>
            </dependency>
            <dependency>
                <groupId>com.github.sgroschupf</groupId>
                <artifactId>zkclient</artifactId>
                <version>${zkclient.version}</version>
            </dependency>
            <dependency>
                <groupId>junit</groupId>
                <artifactId>junit</artifactId>
                <version>4.9</version>
            </dependency>
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.28</version>
            </dependency>
            <dependency>
                <groupId>javassist</groupId>
                <artifactId>javassist</artifactId>
                <version>3.11.0.GA</version>
            </dependency>
            <dependency>
                <groupId>commons-codec</groupId>
                <artifactId>commons-codec</artifactId>
                <version>1.10</version>
            </dependency>
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>servlet-api</artifactId>
                <version>2.5</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper</artifactId>
                <version>${pagehelper.version}</version>
            </dependency>
            <!-- Mybatis -->
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis</artifactId>
                <version>${mybatis.version}</version>
            </dependency>
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis-spring</artifactId>
                <version>${mybatis.spring.version}</version>
            </dependency>
            <dependency>
                <groupId>com.github.miemiedev</groupId>
                <artifactId>mybatis-paginator</artifactId>
                <version>${mybatis.paginator.version}</version>
            </dependency>
            <!-- MySql -->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>${mysql.version}</version>
            </dependency>
            <!-- 连接池 -->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid</artifactId>
                <version>${druid.version}</version>
            </dependency>
            <dependency>
                <groupId>org.csource.fastdfs</groupId>
                <artifactId>fastdfs</artifactId>
                <version>1.2</version>
            </dependency>
            <!-- 文件上传组件 -->
            <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>${commons-fileupload.version}</version>
            </dependency>
            <!-- 缓存 -->
            <dependency>
                <groupId>redis.clients</groupId>
                <artifactId>jedis</artifactId>
                <version>2.8.1</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.data</groupId>
                <artifactId>spring-data-redis</artifactId>
                <version>1.7.2.RELEASE</version>
            </dependency>
            <dependency>
                <groupId>org.freemarker</groupId>
                <artifactId>freemarker</artifactId>
                <version>${freemarker.version}</version>
            </dependency>
            <dependency>
                <groupId>org.apache.activemq</groupId>
                <artifactId>activemq-all</artifactId>
                <version>${activemq.version}</version>
            </dependency>
            <!-- 身份验证 -->
            <dependency>
                <groupId>org.springframework.security</groupId>
                <artifactId>spring-security-web</artifactId>
                <version>4.1.0.RELEASE</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.security</groupId>
                <artifactId>spring-security-config</artifactId>
                <version>4.1.0.RELEASE</version>
            </dependency>
            <dependency>
                <groupId>com.github.penggle</groupId>
                <artifactId>kaptcha</artifactId>
                <version>2.3.2</version>
                <exclusions>
                    <exclusion>
                        <groupId>javax.servlet</groupId>
                        <artifactId>javax.servlet-api</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
            <dependency>
                <groupId>org.springframework.security</groupId>
                <artifactId>spring-security-cas</artifactId>
                <version>4.1.0.RELEASE</version>
            </dependency>
            <dependency>
                <groupId>org.jasig.cas.client</groupId>
                <artifactId>cas-client-core</artifactId>
                <version>3.3.3</version>
                <!-- 排除log4j包冲突 -->
                <exclusions>
                    <exclusion>
                        <groupId>org.slf4j</groupId>
                        <artifactId>log4j-over-slf4j</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
            <!-- solr客户端 -->
            <dependency>
                <groupId>org.apache.solr</groupId>
                <artifactId>solr-solrj</artifactId>
                <version>${solrj.version}</version>
            </dependency>
            <dependency>
                <groupId>com.janeluo</groupId>
                <artifactId>ikanalyzer</artifactId>
                <version>${ik.version}</version>
            </dependency>
            <dependency>
                <groupId>org.apache.httpcomponents</groupId>
                <artifactId>httpcore</artifactId>
                <version>4.4.4</version>
            </dependency>
            <dependency>
                <groupId>org.apache.httpcomponents</groupId>
                <artifactId>httpclient</artifactId>
                <version>4.5.3</version>
            </dependency>
            <dependency>
                <groupId>dom4j</groupId>
                <artifactId>dom4j</artifactId>
                <version>1.6.1</version>
            </dependency>
            <dependency>
                <groupId>xml-apis</groupId>
                <artifactId>xml-apis</artifactId>
                <version>1.4.01</version>
            </dependency>
        </dependencies>

    </dependencyManagement>
    <build>
        <plugins>
            <!-- java编译插件 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.2</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

pinyougou_pojo

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">
    <parent>
        <artifactId>pinyougou_parent</artifactId>
        <groupId>pinyougou</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>pinyougou_pojo</artifactId>

    <dependencies>
        <dependency>
        // 搜索模块要用到的依赖
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-solr</artifactId>
            <version>1.5.5.RELEASE</version>
        </dependency>
    </dependencies>

</project>

pinyougou_dao

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">
    <parent>
        <artifactId>pinyougou_parent</artifactId>
        <groupId>pinyougou</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>pinyougou_dao</artifactId>

    <dependencies>
        <dependency>
            <groupId>pinyougou</groupId>
            <artifactId>pinyougou_pojo</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <!-- Mybatis分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
        </dependency>
        <dependency>
            <groupId>com.github.miemiedev</groupId>
            <artifactId>mybatis-paginator</artifactId>
        </dependency>
        <!-- MySql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!-- 连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
        </dependency>
    </dependencies>

</project>

在这里插入图片描述
applicationContext-dao.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"
       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">
       <!--扫描属性文件-->
       <context:property-placeholder location="classpath*:properties/*.properties"/>
       <!--定义数据源-->
       <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
       <property name="driverClassName" value="${db.driver}"/>
       <property name="url" value="${db.url}"/>
       <property name="username" value="${db.user}"/>
       <property name="password" value="${db.password}"/>
       </bean>
       <!--SqlSessionFactoryBean-->
       <bean class="org.mybatis.spring.SqlSessionFactoryBean">
       <property name="dataSource" ref="dataSource"/>
       <property name="typeAliasesPackage" value="com.pinyougou.pojo"/>
       <property name="mapperLocations" value="classpath*:/mapper/*.xml"/>
       <property name=plugins>
       	<bean class="com.github.pagehelper.PageHelper">
       		<property name="properties">
       			<value>
       				dialect=mysql
       			</value>
       		</property>
       	</bean>
       </property>
       </bean>
       <!--定义MapperScannerConfigurer-->
       <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
       <property name="basePackage" value="com.pinyougou.mapper"/>
       </bean>
</beans>

pinyougou_sellergoods_interface

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">
    <parent>
        <artifactId>pinyougou_parent</artifactId>
        <groupId>pinyougou</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>pinyougou_sellergoods_interface</artifactId>

    <dependencies>
        <dependency>
            <groupId>pinyougou</groupId>
            <artifactId>pinyougou_pojo</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

</project>

pinyougou_sellergoods_service

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">
    <parent>
        <artifactId>pinyougou_parent</artifactId>
        <groupId>pinyougou</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>pinyougou_sellergoods_service</artifactId>
    <packaging>war</packaging>

    <name>pinyougou_sellergoods_service Maven Webapp</name>
    <dependencies>
        <dependency>
            <groupId>pinyougou</groupId>
            <artifactId>pinyougou_sellergoods_interface</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>pinyougou</groupId>
            <artifactId>pinyougou_common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>pinyougou</groupId>
            <artifactId>pinyougou_dao</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <!-- Spring -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jms</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
        </dependency>
        <!-- dubbo相关 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>dubbo</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.zookeeper</groupId>
            <artifactId>zookeeper</artifactId>
        </dependency>
        <dependency>
            <groupId>com.github.sgroschupf</groupId>
            <artifactId>zkclient</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>
        <dependency>
            <groupId>javassist</groupId>
            <artifactId>javassist</artifactId>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <scope>provided</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <!-- 配置Tomcat插件 -->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <configuration>
                    <path>/</path>
                    <port>9001</port>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

applicationContext-service.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:dubbo="http://code.alibabatech.com/schema/dubbo"
       xmlns:duboo="http://code.alibabatech.com/schema/dubbo"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
    <!--定义dubbo服务-->
    <!--1.定义dubbo的名称-->
    <dubbo:application name="pinyougou_sellergoods_service"/>
    <!--2.定义dubbo的协议以及端口-->
    <dubbo:protocol name="dubbo" port="20881"/>
    <!--3.定义注册中心的地址:地址看虚拟机的地址，端口为2181-->
    <dubbo:registry address="zookeeper://192.168.25.128:2181"/>
    <!--4.定义dubbo的扫描注解的包-->
    <dubbo:annotation basepackage="com.pinyougou.sellergoods.service.impl"/>
</beans>

web.xml

<?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"
         version="2.5">
         <!--扫描全局配置文件-->
         <context-param>
         	<param-name>contextConfigLocation</param-name>
         	<param-value>classpath*:spring/applicationContext-*.xml</param-value>
         </context-param>
         <!--加载spring监听器-->
         <listener>
         	<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
         </listener>
         </web-app>

pinyougou_manager_web

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">
    <parent>
        <artifactId>pinyougou_parent</artifactId>
        <groupId>pinyougou</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>pinyougou_manager_web</artifactId>
    <packaging>war</packaging>

    <name>pinyougou_manager_web Maven Webapp</name>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>pinyougou</groupId>
            <artifactId>pinyougou_common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>pinyougou</groupId>
            <artifactId>pinyougou_sellergoods_interface</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <!-- Spring -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jms</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
        </dependency>
        <!-- dubbo相关 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>dubbo</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.zookeeper</groupId>
            <artifactId>zookeeper</artifactId>
        </dependency>
        <dependency>
            <groupId>com.github.sgroschupf</groupId>
            <artifactId>zkclient</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <dependency>
            <groupId>javassist</groupId>
            <artifactId>javassist</artifactId>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <scope>provided</scope>
        </dependency>
        <!-- 添加springsecurity的依赖-->
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-web</artifactId>
            <version>4.1.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-config</artifactId>
            <version>4.1.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- 配置Tomcat插件 -->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <configuration>
                    <path>/</path>
                    <port>9101</port>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

springmvc.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" xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
       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 http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
    <!--springmvc容器的加载-->
    <!--扫描控制器的注解-->
    <context:component-scan base-package="com."/>
    <!--定义fastjson-->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                <property name="supportedMediaTypes" value="application/json"/>
                <property name="features">
                    <array>
                        <value>WriteMapNullValue</value>
                        <value>WriteDateUseDateFormat</value>
                    </array>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    <!--定义dubbo-->
    <!--名称-->
    <dubbo:application name="pinyougou_manager_web"/>
    <!--不用定义dubbo协议以及端口-->
    <!--dubbo的地址-->
    <dubbo:registry address="zookeeper://192.168.25.128:2181"/>
    <!--扫描@Reference注解-->
    <dubbo:annotation package="com.pinyougou.manager.controller"/>
</beans>

web.xml

<?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"
         version="2.5">
  <!--1.定义springmvc容器-->
  <servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath*:/spring/springmvc.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  <!--2.定义中文过滤器-->
  <filter>
    <filter-name>encoding</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encoding</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

前端页面brand.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<!--1.导入angularjs-->
	<script src="../plugins/angularjs/angular.min.js"></script>
	<!--2.导入angularjs的分页组件-->
	<script src="../plugins/angularjs/pagination.js"></script>
	<!--3.导入未分页的angular组件-->
	<!--
	<script src="../js/base.js"></script>
	-->
	<!--3.1 导入分页的angular组件-->
	<script src="../js/base_pagination.js"></script>
	<!--4.导入服务器组件-->
	<script src="../js/service/brandService.js"></script>
	<!--5.导入基础控制器组件-->
	<script src="../js/controller/baseController.js"></script>
	<!--6.导入控制器组件-->
	<script src="../js/controller/brandController.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController">
  <!-- .box-body -->
                    <div class="box-header with-border">
                        <h3 class="box-title">品牌管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建"
                                        <!--ng-click="entity={}"新建，将修改和新增公用的entity重置为空-->
												data-toggle="modal" data-target="#editModal" ng-click="entity={}"><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除" ng-click="del()"><i class="fa fa-trash-o"></i> 删除</button>
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>

                                </div>
                            </div>
							<div class="box-tools pull-right">
								<div class="has-feedback form-inline">
									<!--进行条件查询 -->
									<input type="text" ng-model="searchEntity.name" placeholder="请输入品牌名称" class="form-control">
									<input type="text" ng-model="searchEntity.firstChar" placeholder="请输入首字母" class="form-control">
									<a href="#" class="btn btn-success btn-sm" ng-click="search()">查询</a>
								</div>
							</div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue"
													>
			                              </th> 
										  <th class="sorting_asc">品牌ID</th>
									      <th class="sorting">品牌名称</th>									      
									      <th class="sorting">品牌首字母</th>									     				
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                      <tbody>
			                          <tr ng-repeat="brand in list">
			                              <td><input  type="checkbox"
			                              <!--$event代表当前的事件，在js中用event.target表示当前的组件
			                              event.target.checked表示是否点击-->
										  ng-click="updateSelection(brand.id,$event)"></td>
										  ---{{selectIds}}
				                          <td>{{brand.id}}</td>
									      <td>{{brand.name}}</td>
		                                  <td>{{brand.firstChar}}</td>
		                                  <td class="text-center">                                           
		                                 	  <button type="button" class="btn bg-olive btn-xs" data-toggle="modal"
		                                 	  <!--updateUI为将当前修改的对象的数据转移到模态框中-->
													  data-target="#editModal" ng-click="updateUI(brand)">修改</button>
		                                  </td>
			                          </tr>
								  	  <tr>
										  <td colspan="5">
										  <!--分页的书写-->
											  <tm-pagination conf="paginationConf"></tm-pagination>
										  </td>
									  </tr>
			                      </tbody>
			                  </table>
			                  <!--数据列表/-->                        
							  
							 
                        </div>
                        <!-- 数据表格 /-->
                        
                        
                        
                        
                     </div>
                    <!-- /.box-body -->
         
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">品牌编辑</h3>
		</div>
		<div class="modal-body">		
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>品牌名称</td>
		      		<td><input  class="form-control" ng-model="entity.name" placeholder="品牌名称">  </td>
		      	</tr>		      	
		      	<tr>
		      		<td>首字母</td>
		      		<td><input  class="form-control" ng-model="entity.firstChar" placeholder="首字母">  </td>
		      	</tr>		      	
			 </table>				
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal"
					aria-hidden="true" ng-click="save()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
   
</body>
</html>

两个前端控制器的合并（实际上是$scope的合并）
baseController.js

// 一些公用的控制器的部分比如说分页的定义和批量删除等
myApp.controller("baseController",function ($scope,brandService) {
   // 定义分页组件
   $scope.paginationConf = {
       currentPage : 1 ,       // 当前页
       totalItems : 10 ,       // 代表总记录数
       itemsPerPage : 10 ,     // 代表每页的大小
       perPageOptions : [10,20,30,40,50]  ,  // 代表分页大小的选项
       onChange : function () {
           // 1.单纯的分页
           // $scope.findPage();
           // 2.查询+分页
           $scope.search();
       }
   }
   // 定义一个id数组
    $scope.selectIds = [];
   //  数组的添加元素和移除元素
    $scope.updateSelection = (id,event) => {
        // 复选框被选中
        if(event.target.checked){
            // 将选中的id加入到数组中
            $scope.selectIds.push(id);
        }else{
            // 得到数组中该id的位置
            let index = $scope.selectIds.indexOf(id);
            // 将该id从数组中挪出
            $scope.selectIds.splice(index,1);
        }
    }
   // 批量删除
    $scope.del = () => {
        brandService.del($scope.selectIds).success(response=>{
            // 首先弹出返回的字面信息
            alert(response.message);
            // 根据是否删除成功决定是否刷新页面
            if(response.success){
                $scope.search();
            }
        })
    }
});

brandController.js

myApp.controller("brandController",function($scope,$controller,brandServer){
	$controller("baseController",{$scope:$scope});
	 // 1.找到所有的品牌（未分页）
    $scope.findAll = () => {
        brandService.findAll().success(response=>{
            $scope.list = response;
        })
    }
    // 2.找到所有的品牌（分页）
    $scope.findPage = () => {
        brandService.findPage($scope.paginationConf.currentPage,
            $scope.paginationConf.itemsPerPage).success(response=>{
            $scope.list = response.rows;
            $scope.paginationConf.totalItems = response.total;
        })
    }
    // 3.查询+分页
    $scope.search = () => {
        brandService.search($scope.paginationConf.currentPage,
            $scope.paginationConf.itemsPerPage,$scope.searchEntity).success(response=>{
            $scope.list = response.rows;
            $scope.paginationConf.totalItems = response.total;
        })
    }
    // 4.保存方法
    $scope.save = () => {
        // 4.1 将entity中的id取出
        let id = $scope.entity.id;
        // 4.2 将url的初始值设成增加品牌的地址
        let url = "../brand/add.do";
        // 4.3 如果id有值，将url设置为更新的地址
        if(id){
            url = "../brand/update.do";
        }
        // 4.4 save 方法
        brandService.save(url,$scope.entity).success(response => {
            console.log("input save");
            // 无论是保存成功还是失败，都弹出信息
            alert(response.message);
            // 隐藏模态框
            $(".modal").modal("hide");
            // 如果保存成功了，就刷新页面
            if(response.success){
                $scope.search();
            }
        })
    }
    // 5.更新模态框的数据
    $scope.updateUI=(brand)=>{
        $scope.entity = brand;
    }
})

起个名字都给占用了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分布式项目的简单搭建和使用angularjs进行单表的CRUD

1.项目介绍电商项目：pinyougou. 该项目是比较经典的项目，很多技术都涵盖了，比如说Springboot、angularjs等，但面试的时候这种电商项目并不受到青睐，因为很多的培训机构都是用它来教学的，练习该项目要能说明其中的结构脉络和具体实现细节才行。系统架构SOA架构SOA是Service-Oriented Architecture,它是一种支持面向服务的架构样式，从服务、基...
复制链接

扫一扫