１

FREQUENCY RESPONSE INDICATOR

FOR WEB FORM

A thesis submitted to the University of

Manchester for the degree of Master

of Science in the Faculty of Engineering and Physical Sciences

2018

By

BO WANG

School of Computer Science

２

Contents FREQUENCY RESPONSE INDICATOR FOR WEB FORM ........................................................ 1 Abstract .............................................................................................................................................. 3 Declaration ......................................................................................................................................... 4 Copyright ........................................................................................................................................... 5 Acknowledgements ............................................................................................................................ 6 1. Introduction .................................................................................................................................... 7

1.1 dissertation overview ........................................................................................................... 8 1.2 Objectives ............................................................................................................................ 9

2. Background .................................................................................................................................... 9 2.1 SOA(Service-Oriented-Architecture) ................................................................................ 10 2.2 RPC(Remote Procedure Calling) ....................................................................................... 11 2.3 Web Container (Tomcat) ................................................................................................... 15 2.4 Databases(MYSQL) ........................................................................................................... 16 2.5 Node.js ............................................................................................................................... 17

3. Research Methods. ....................................................................................................................... 18

3.1 Spring + SpringMVC + Mybatis ......................................................................................... 18

3.1.1 Mybatis For This Project With Test Results .................................................................. 18

3.1.2 Spring For This Project .................................................................................................. 21

3.1.3 SpringMVC For This Project (Controller Layer) .......................................................... 26

3.2 Program Development .................................................................................................... 28

3.2.1 generates the data set ..................................................................................................... 28

3.2.1.1 RPC framework .......................................................................................................... 31

3.2.2 data visualization ........................................................................................................... 35

3.2.3 Data interaction ........................................................................................................... 43

3.2.4 Page Design ................................................................................................................... 49

3.2.5 Modify User Inputs ........................................................................................................ 52

3.2.6 Add two new lines into chart ......................................................................................... 54

3.2.7 Calculate the difference between data ........................................................................... 56

3.2.8 Select the tissue that the user is interested in ................................................................. 59 4. Conclusion ................................................................................................................................... 64

4.1 Summary ............................................................................................................................ 65 4.2 Future Work ....................................................................................................................... 65

Cluster computing .............................................................................................................. 66 Docker ................................................................................................................................ 66 Bibliography .................................................................................................................................... 68 Appendix A the source code from front end .................................................................................... 72 Appendix B the source code from back end .................................................................................... 86

３

Word Count: 15750

Abstract

There is an increasing usage of different kinds of waves, these waves not only play a role in science field but also in individual’s social lives. For instance, these waves including microwave, which can help heating the food, and the microwave can be applied into hospital, because it can help doctors to detect the chronic illness in patient’s body. Besides, some waves can help individuals communicate with each other. Thus, it is very important for our human beings to study waves and make good use of it. If we have a better understanding of the waves, the waves can make our world better. The first step of studying wave is to analyse it. Our research team aims to observe how the wave goes through human body and the wave act like a pulse.and the pulse is packaged by different frequency components. Different tissue of human body will have different frequency of components. Thus, every tissue of human body will have different performances. This paper is to discuss how our research team developed an web system to help scientists to analyse the permitivity and conductivity of many kinds of tissues of human body in different frequency. By this web system, the progress of research will be sped up.

４

Declaration

No portion of the work referred to in this thesis has

been submitted in support of an application for

another degree or qualification of this or any other

university or other institute of learning.

５

Copyright

i. The author of this thesis (including any appendices and/or schedules to

this thesis) owns any copyright in it (the “Copyright”) and s/he has

given The University of Manchester the right to use such Copyright for

any adminis- trative, promotional, educational and/or teaching

purposes.

ii. Copies of this thesis, either in full or in extracts, may be made only in

accordance with the regulations of the John Rylands University Library of

Manchester. Details of these regulations may be obtained from the Librar-

ian. This page must form part of any such copies made.

iii. The ownership of any patents, designs, trade marks and any and all other

intellectual property rights except for the Copyright (the “Intellectual

Prop- erty Rights”) and any reproductions of copyright works, for example

graphs and tables (“Reproductions”), which may be described in this

thesis, may not be owned by the author and may be owned by third parties.

Such Intel- lectual Property Rights and Reproductions cannot and must

not be made available for use without the prior written permission of the

owner(s) of the relevant Intellectual Property Rights and/or

Reproductions.

iv. Further information on the conditions under which disclosure, publication

and exploitation of this thesis, the Copyright and any Intellectual Property

Rights and/or Reproductions described in it may take place is available

from the Head of School of School of Computer Science (or the

Vice-President).

６

Acknowledgements

First of all, Dr. Fumie Costen is the person I want to thank, she is also my supervisor. In

the process of doing the whole project, she gave me a lot of encouragement and support,

and step by step guide me how to complete this project.

As a whole project, my technical level and communication skills have been improved.

Finally, I want to thank my family for their support and encouragement.

７

1. Introduction In this paper, the web system will draw the lines of conductivity and permittivity of each tissue of human body over the frequency based on Debye media parameters. And the Debye media parameters is determined by different tissue of human body. In this web system, a wide range of Debye parameters for tissues of human are produced. Thus, the data produced by this web system can be used for the development of devices which will be used for patient specific health care. To develop a web system to deal with this problem, the first task is to design the web system, and choose the right technology and architecture[1]. For instance, software architecture including front end and back end as well as their structure. Besides, a good architecture will help web system goes smoothly, and the patients or scientists who use this web system will be happy with the good web system. To develop a good web system, we should obey the rules that pioneers gave to us. In today’s society, there are lots of methods of developing a web system. For instance, waterfall mode which emphasizes the need for completely planning, analysis, design, testing, and documentation management and control in the system development process, it can effectively ensure the quality of system. It has become the standard for most software development in the software industry. Another model is agile, which is different from the traditional software development model, agile programming requires continuous delivery of available software. Then, the architecture of developing web system contains all-in-one model, RPC model, as well as Service Oriented Architecture Model. Take the scalability of the system into considering, which type of architecture is more appropriate for this web system should be discussed. The programming language is important as well[2], for instance, JAVA, PHP plays a important role in web system project. Under which circumstance JAVA or PHP is this the most appropriate choice should be taken into consideration. The framework is also significant, a good framework can accelerate the

８

progress of developing a web system. To deal with the real world problem, the appropriate data structure should be abstract from the real model. Then the relation of the real model will be constructed by the database language. By following the web system developing methods given by pioneers, we hope the good web system of frequency indicator will have a good effect on scientific research.

1.1 dissertation overview l The first task is to discuss the appropriate technology choices and

which is suitable for this web system. And the appropriate architecture of the web system will be discussed as well to make the computation more faster.

l In the next step, the first task is to take 4 Debye parameters based on

tissue of human body into web system, and calculate the conductivity and permittivity in the frequency range of 100MHZ to 6000MHZ. These data in this step are just JSON data.

l The JSON data are analyzed and the web system will draw the curve

line based on the JSON data. During this step, the appropriate JS technology will be applied into this web system and realize the curve line.

l The front end of the web system can take into another user’s input of 4

Debye parameters and display another two curves. l Then the input of the percentage of the change of the original parameter

tau_1 as well as the percentage of the change of the sg_0 are taken into web system. And the two new lines are added into the chart.

l I change the code to make the curves gradually change just like a movie.

All these curves are based on log scale. l And then, to calculate the difference between the data which presents

the 4 curves by the Debye equation. l Then I run the code to obtain the 4 Debye parameters of many different

tissues of human body. Thus, the users will chose the tissue they are interested in, and the parameters are prepared for them.

l Conclusion

９

l Appendix A the source code from front end l Appendix B the source code from back end

1.2 Objectives The ultimate goal of this project is to develop a website which can take into 4 Debye model parameters, and do some calculations based on these parameters, then make the data can be seen as line chart over the front end. And then the chart will be changed by the change of parameters. Different parameters of different kinds of tissues should be taken into this web system. The users can choose the tissues which they are interested in. l Understand the JAVA programming language used for this web system. l Design the appropriate architecture SOA for this web system. l Understand the FORTRAN and ES6 JS language. l Turn the algorithm into programming language. l Understand the line chart framework which is named EChart l Make good use of EChart l Studying the framework Spring, SpringMVC, Mybatis l Studying the mid software RPC framework DUBBO l Understanding the way of transferring the data between front end

between back end l Design the abstract data structure of Complex data. l Design the calculation of the complex data.

2. Background In this background, some common methods and techniques in today’s industry for developing a web system will be introduced one by one. In this project I choose the SOA (Service-Oriented-Architecture) to make the web system have a more extensible feature as well as a more flexible feature. Thus, In the future, when some new requirements comes, the web system just need to modify a little places.

2.1 SOA(Service-Oriented-Architecture)

SOA is a coarse-grained, loosely coupled service architecture. SOA consists of many services. Those services are generally considered as web services. SOA can be seen as a natural extension of the B/S model, XML (a subset of the standard universal markup language) / Web Service technology[3]. Why do we need SOA? Today is an Internet age, all-in-one architecture is

１

０

no longer in need. All-In-One architecture does not have a good scalability. Thus, if the number of user increasing rapidly the all-in-one mode can not serve the user well. Thus, the all in one architecture is not suitable for configuring a cluster, and it waste too much resources including servers, databases etc. To solve this problem, we need SOA[4]. The service oriented architecture has several distinct basic features: l loose coupling between services. For instance, the two services are not interdependent, this called loose coupling between services. The benefits of a loosely coupled system can be listed as follows: 1. Irrelevant The definition of Irrelevant of loosely coupled system is when some services changes some other services need not to be changed. Thus, in the loosely coupled system, we can focus on service we developed. We need not to concern about other services which are the responsibilities of others. A web system commonly consists of many web services, thus this feature of loosely coupled system is necessary. 2. Flexibility The flexibility is an another benefit of a loosely coupled web system. Flexibility creates pluggable services look at fig below. For instance, if some web services we no longer want, we can remove it from web system. And the web system will not be affected by this action. In contrast, we can add a new web service into the web system, the web system will not be affected as well. In the all in one architecture, this is impossible, if we change a service, the whole architecture should be modified.

１

１

Figure 2.1: Program Architecture What if we want to call the remote procedure of the SOA? We need RPC.

2.2 RPC(Remote Procedure Calling)

RPC is Remote Procedure Calling’s abbreviation. In another word, RPC creates the Service-Oriented-Architecture[5]. The web services of the SOA usually lies in many different servers. For web systems where the front and back ends are separated, what kind of means does the front end need to do to call the procedure (service’s application interface) provided by the SOA? The answer is RPC[6]. There are several roles listed as below play important parts in RPC. 1. The way of serialize and Deserialize For example, objects in java are all located in memory which is owned by just one server. Besides, the states of these objects will no longer be saved when they leaving the memory. Meanwhile the front end needs the objects, but these objects should be transferred through network, thus, we should find ways of saving the states of these JAVA objects. The answer is serialize and deserialize[7]. There are many frameworks of serializing or deserializing JAVA objects. I want to introduce two main frameworks that industry often uses. PROTOBUF and Hessian. ² PROTOBUF Protobuf is an open source serialization framework provided by Google. It is similar to the data representation language such as XML and JSON. Based on binary is its biggest feature, so protobuf is much shorter and efficient than traditional XML or JSON’s representation. Although it is a binary data format, it does not become complicated. Because, developers can define the structure of message based on some schema, and then send the message to tools of command lines. Thus, the tools can generate the classes or objects according to the message. These classes and objects can support PHP, JAVA, C plus plus, PYTHON. By including these classes in the project, it is easy to call related methods to complete the serialization and deserialization of business messages[8]. ² HESSIAN

１

２

Hessian is based on Binary-RPC protocol. Hessian serializes messages through a custom serialization mechanism to produce a binary stream. Hessian transmits messages based on the http protocol. It have a lot of benefits including interface-oriented, easy to use, expose services through interfaces, the size of jar package is only between 200K to 400K. It also does not need to configure a firewall. It can support many languages such as PHP, JAVA, RUBY, C#, FLASH/ FLEX, PYTHON, C, .NET etc. It can be integrated with spring as well. Hessian serialization is much more efficient than Java JDK serialization, and the resulting byte stream is much shorter[9]. 2. Network transfer The services are located in different servers within a web system. So the communication between the front-end and back-end web services of SOA web system requires the help of network protocols. Different network protocols will bring different effects to RPC. There are many network like TCP and UDP protocols to be chosen as the network protocol in RPC. And NIO is the network transfer model in RPC. ² TCP TCP is used for communication between two applications. When an application wants to communicate with another application over TCP, it sends a communication request. This request must be sent to an exact address which is defined in one application through socket. After the three handshaking procedure, TCP will establish a full-duplex communication between the two applications. This full-duplex communication will occupy the communication line between the two computers until it is turned off by one or both parties[10]. TCP is responsible for splitting and loading the data into IP packets and then reassembling them as they arrive. The IP is responsible for sending the package to the recipient. TCP is a reliable transport protocol, and its reliability is achieved by a timeout retransmission mechanism or a sliding window fast retransmission mechanism. Look at the picture, The process of TCP is shown as below.

１

３

Figure 2.2: TCP protocol Before the connection is established, it has to perform a three-way handshake process, and after disconnecting it, it has to perform four wavering processes. TCP established a connection by three-way handshake and four wave hands[11]. ² UDP UDP is short for User Datagram Protocol. Udp is the protocal which has a feature of connection-less and lays in transport layer in the OSI (Open System Interconnection) reference model that provides a transaction-oriented, simple and unreliable messaging service. Not providing packet grouping is one disadvantage of UDP, besides, assembly, and sorting of data packets is another two disadvantages of UDP. That is, after a message is sent, it is impossible to know whether it is safely and completely arrived. So udp is an unreliable transport layer protocol. However, udp has many advantages[12], it does not need to establish a connection like tcp. Because of this feature, it can be applied to systems with high real-time performance. Video systems, ip phone systems, and music media systems all have examples of udp applications. The most important thing is that it also has a place in the rpc field. ² NIO NIO is synchronous non-blocking IO, NIO's non-blocking mode ensures that it doesn't take a little more time on IO than traditional blocking IO. NIO is also the basis of I/O multiplexing[13], and has been increasingly applied to large application servers, becoming an effective way to solve high concurrency and large number of connection and I/O processing problems[14]. Thus, in this project, I choose the NIO model for my RPC network transfer model.

１

４

3. Proxy Dynamic proxy technology is the core technology of rpc implementation. Designing the interface on the client side, using the dynamic proxy method, masks the communication details with the service layer, so that calling the remote method is the same as calling the local method. Look at the pictures below:

Figure 2.3: RPC procedure When the client side wants to call the procedure of the server side, client side will use jdk dynamic proxy technology or cglib dynamic proxy technology to do some communication with server side. This client stub is a proxy class object. The server stub is the communication class used to communicate with the client side. So the client stub and the server stub use socket communication for information exchange[15]. The client stub will firstly package the method’s simple name, return value, parameter type, and parameter name, and then passed the package to the server stub as a string. The server stub will take the received information out of the package. Then server stub execute the local call through the reflection technique in JAVA, and then get the return value. The return value will be transmitted to the client over the network. During this step, the serialization technology and deserialization technology will be applied in this step as we announced above. The client gets the return value as it wants, so the entire rpc procedure ends.

１

５

2.3 Web Container (Tomcat)

To develop a web system, we need to provide a web system running environment. To creating a running environment for web application, web container is needed. Tomcat is a typical web container. There are other web containers like weblogic, Jboss, apache, etc. For this project, the tomcat container is completely adequate. Since Tomcat itself includes an HTTP server, it can also be thought of as a separate web server. Besides, Tomcat has a clear directory structure, and Tomcat includes a configuration management tool, which can also be configured by editing a configuration file in XML format.

Figure 2.4: Tomcat directory Look at the picture above. Some commonly used directories and explanations are listed below: /WEB-INF/classes: Stores all the Java class files needed by the program. /WEB-INF/lib: Stores all the jar files needed by the program. /WEB-INF/web.xml: The deployment configuration file for the web application. It is the most important configuration file in the project, it describes the servlet and other components that make up the application, as well as application initialization parameters, security management constraints, etc[16]. Tomcat also has a variety of deployment methods, such as embedded, maven plugin startup and IDE plugin startup.

１

６

So what is the principle of Tomcat implementation? Look at the picture below. Tomcat is a web container, which is used to process http requests. Usually we use the browser to input url to get the web system service. So a request from the browser to the server follows the http protocol, which knows the server's ip address and port according to the url. Tomcat will know which results are needed to be returned to the browser based on the resource path behind the port[17].

Figure 2.5: Tomcat Work Procedure

2.4 Databases(MYSQL)

Usually databases are essential for a web system, and the databases includes relational databases and non-relational databases. Common relational databases are MYSQL, DB2, ORACLE, etc. Common non-relational databases, also known as NOSQL, includes redis, mongodb, memcache, etc[18]. In this project, I choose the MYSQL for the database of the web system. MySQL is a relational database management system. Relational databases store data in different tables instead of putting all the data in a large repository, which increases speed and increases flexibility. The SQL language used by MySQL is the most commonly used standardized language for accessing databases. Mysql also has many different execution engines, such as MyISAM , innodb, etc[19].

１

７

Various internal technologies used to store data in MYSQL files(Or Memory in SQL Server) Different technologies in these technologies use different locking levels, storage mechanisms, and indexing techniques. So each technology will eventually provide different functions. By choosing these different technologies[20], we can get faster speeds and better performance, so that the web system has a better user experience. These technologies are storage engine technologies.

2.5 Node.js

In the front end project of this web system, node.js is very important, it provides the user's access to the portal. Node.js is a platform built on runtime environment of the Chrome JavaScript [21]. It is actually a package of the V8 engine of Google Chrome , the engine is mainly used to create web applications which is fast and scalable. Node.js uses event-driven and non-blocking I/O models to make it lightweight and efficient, making it ideal for building data intensive real time applications running on distributed devices. JavaScript running in the browser, which is the parser of the JavaScript code, and Node.js is the code parser of the JavaScript which is on server side . The JavaScript code that exists on the server side is parsed and run by Node.js[22]. A JavaScript parser is just an environment in which JavaScript code runs. A browser is an environment in which JavaScript runs. The browser provides an interface for JavaScript to manipulate DOM objects and window objects. Node.js is also an environment in which JavaScript runs. Node.js provides JavaScript with interfaces for manipulating files, creating HTTP services, and creating TCP/UDP services, thus, node.js can also do other back end language’s work. Npm and node are very close, Thus, what is npm? NPM, usually called node package manager. As its name implies, its main function is to manage node packages, including: install, uninstall, update, view, search, publish, etc. Behind npm[23], there is a database based on couchdb that records the information of each package in detail, including author, version, dependencies, and authorization information. One of its important functions is to free developers from the cumbersome package management work (versions, dependencies, etc.) and focus more on functional development.

１

８

3. Research Methods For developing a web system, there are a lot of necessary steps to be completed. We need to choose some suitable development frameworks to make developing a web system easier and faster. In this section, I will introduce how to build a web system consisting of spring, springMVC, and mybatis frameworks, and test whether the system works properly.

3.1 Spring + SpringMVC + Mybatis

If we need to develop a website, it is important to develop the framework. Using the development framework not only speeds up the development process, but also reduces the possibility of development errors[24].

3.1.1 Mybatis For This Project With Test Results

Firstly, I will use MAVEN sconfiguration to integrate mybatis into this web system. mybatis is an excellent open source framework, it is more lightweight than hibernate. Mybatis supports finer-grained sql language control and it has features of dynamic sql language, this making it the preferred development framework for today's enterprises. So choosing mybatis naturally became our primary choice. Then, we can start to integrate the mybatis framework into this web system. We should add dependencies first in the Maven pom file[24]. 1. <dependency> 2. <groupId> org.mybatis </groupId> 3. <artifactId> mybatis </artifactId> 4. </dependency> This dependency is to add the executable files needed by mybatis to the web system. This is essential 1. <dependency> 2. <groupId> org.mybatis </groupId> 3. <artifactId> mybatis-spring </artifactId> 4. </dependency> This dependency is needed to combine mybatis with spring. Since mybatis belongs to the Data Access Objects layer, we need to provide some jar packages to support the database connection.

１

９

1. <dependency> 2. <groupId> mysql </groupId> 3. <artifactId> mysql-connector-java </artifactId> 4. </dependency> This dependency is to support mybatis to connect to the database. This jar package contains the jdbc software used by java to connect to the database. 1. <dependency> 2. <groupId> com.alibaba </groupId> 3. <artifactId> druid </artifactId> 4. </dependency>

This dependency package is a database connection pool package. There are some database connection pools such as C3P0, Druid, etc. Duird has better performance, and it is open source, so this database connection pool has more people to maintain it. Now, the jar packages we need for mybatis runtime environment have been imported. Then, the configuration of the database should be started. The following image shows the architecture of the mybatis runtime environment.

Figure 3.1: MYBATIS Workflow First this web system need a SqlSessionFactory class that uses the factory pattern in the design pattern. This SqlSessionFactory will generate some sqlSession for connection to the database. Mybatis also need to configure the mapper files on the project's classes path to generate the runtime sql statement. The next step is to configure them. This bean is to configure the data source from connection pool[[26]. <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"> </bean> This bean is to import sqlSessionFactory into mybatis.

２

０

<beanid="sqlSessionFactory"class="org.mybatis.spring.SqlSessionFactoryBean> <property name="dataSource" ref="dataSource" /> </bean>

This bean is to import the mapper scanner which will find mapper files for mybatis runtime environment. The JAVA interfaces which related to specific mapper files will have its annotation. Thus, the mapper scanner will find the specific mapper files with annotation. <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="cn.fumie.mapper" /> </bean>

Then we can start designing the tables needed in the database. In this project, every tissue of human body have its own Debye parameters. For instance, Tissue name: heart conductivity : "1", estatic : "60", einfinity : "21.43600845", tau : "2.73953464E-011", Thus, I designed a table named tissue_info and the first field is named tissueName, the second field is named conductivity, the third field is named estatic, the fourth field is named einfinity, and the last field is named tau. Thus, when users want to get parameters of specific tissue, they can just select the tissue name from the selector, and then the back end of the web system can find the tissue info by tissue name which is given by users. Then the back end of web system can return the parameters to the front end. The users get the Debye parameters as they want. Then we can write sql query statement. SELECT * FROM tissue_info WHERE tissueName = “example”

Figure 3.2: Database Table Design This is the correct results from the sql statement. Then, I need to design the java interface for generating mapper objects. Mybatis only needs to design the java interface and write the mapper xml files, this is enough. When mybatis runs, the dynamic proxy pattern will play its important role in this web system. The dynamic proxy mode is

２

１

extremely important because the required SQL statements cannot be predicted at runtime. The java interface is designed as below. 1. public interface TissueMapper { 2. public Tissue getTissueInfoByName(@Param(value = "tissueName") String 3. tissueName); 4. } Then I started to test the interface to test whether the mybatis will work or not. The results are shown as below.

Figure 3.3: Database Test Result Now, mybatis is successfully integrated into the web system. Because, i get the results i want. Thus, i can start to combine the spring with mybatis.

3.1.2 Spring For This Project

Spring is a lightweight development framework that is also open source and is maintained and upgraded by many organizations. One of Spring's main strengths is its layered architecture. This feature allows developers to select the appropriate components on a specific layer (MVC Model layer, View layer, Controller layer). The core of spring is that it is a container for JAVA beans. And its core function is mainly used to manage java beans and implement IOC[25]. Look at the picture below:

２

２

Figure 3.4: Spring IOC And DI Thus, What is IOC? IOC is short from Inversion of Control. Spring uses IOC technology to make the beans loosely coupled. When Spring applies IOC technology, other objects that a Java object depends on are passively passed in through DI (Dependency Injection ) technology. In contrast to JNDI technology, the object does not actively look up the dependency in the container, but instead it passes the object's dependencies to the object via the Dependency Injection technique when the spring container initializes the object[26]. In this project, it is because of the spring IOC technology that makes the control between objects simple and reduces the possibility of program errors. Generally speaking, spring will manage a bean xml file. These files’ name usually start with applicationContext*.xml, Look at the picture below:

２

３

Figure 3.5: Spring Configuration Since the configuration of xml is complicated and cumbersome, in the enterprise, the annotation is generally used to configure the bean. Generally, when the third-party bean is used, the xml is used to configure the bean. Because it is inconvenient to write annotations on the top of the bean of third party. However, we should write the annotation driven tag <component context> to open the annotation scanner in XML files. Then, I can start to write beans in JAVA source file. For instance:

Figure 3.6: Service Implementation Class The @Service is the annotation which can help Spring to find the bean which named GetDatasetServiceImpl. Thus, this JAVA class is putted into Spring Container[27]. Thus, the JAVA bean is controlled by Spring. However, the life cycle of the spring bean is significant for this project. Look at the picture below:

２

４

Figure 3.7: Spring Bean Lifecycle

The spring bean's lifecycle provides a set of interfaces that allow developers to add specific methods and techniques to the bean. When spring initializes the bean, Spring will give the bean more features. In this project, the commonly used lifecycle of spring bean interface is described below[28]: ² BeanFactoryAware: If the Bean implements the BeanFactoryAware

interface, it will call the setBeanFactory() and pass the Spring factory to itself (Spring Factory can be used to get other beans if we wanted)

² BeanPostProcessor: If the bean is associated with the

BeanPostProcessor interface, the postProcessBeforeInitialization method will be called. BeanPostProcessor is often used as a change to the content of Bean, and since this is called at the end of the Bean initialization, the After method can also be used for memory or Cache technology.

² DisposableBean: If the Bean implements the DisposableBean interface, it will call the destroy method of its implementation.

Another important core technology of spring is Spring AOP, which represents the slice-oriented technology in spring. Thus, why I use the AOP

２

５

technology in this project? It is believed that the security of the operation is very important for manipulating the database. Take JDBC technology for an example, in the past, developers control database connection to be turned on and off in the code. Because it is man-made, it is easy to make some mistakes. Because the number of connections that the database can support is limited, once the developer forgets to close the database connection, it is easy to waste the database resources, and then let the database break down. So AOP technology was born. It converts artificial control into program control. So developers can focus more on business logic and free themselves from tedious operations. AOP's core technology is dynamic proxy technology, thus, before introducing AOP, we introduced dynamic proxy technology in Background. Next, we'll introduce the more widely used declarative transactions in Spring AOP. The annotation is named as @Transactional[29]. ² @Transactional The transaction annotation can be added to classes, interfaces, and methods. Thus, these classes, interfaces, and methods have the feature of transaction. By configuring Transactional annotations, we can get different levels of isolation of transaction. Such as Isolation.READ_UNCOMMITED, Isolation.READ_COMMITED, Isolation.REPEATABLE_READ as well as Isolation.SERIALIZE[30]. ü Isolation.READ_UNCOMMITED Under this isolation level, the program will appear dirty reading, which is easy to cause inevitable errors. ü Isolation.READ_COMMITED Under this isolation level, the phenomenon of dirty reading can be solved. The program is unable to read data not submitted by other transactions while the transaction is in progress. However, it does not solve the phenomenon of non-repeatable reading. ü Isolation.REPEATABLE_READ Under this isolation level, the data of the same record is always the same in the same transaction, so the phenomenon of non-repeatable read is solved. But this isolation level does not solve the phenomenon of phantom reading. ü Isolation.SERIALIZE Under this isolation level, dirty read, phantom read, and non-repeatable read are all resolved, so at this isolation level, transaction control of data is

２

６

safe. But at this isolation level, the performance of the system will be reduced. However, for systems with low concurrency, this isolation level is also worth considering. For this project, i choose the isolation level of Isolation.READ_COMMITED. This isolation level is also chosen by most companies. So with the above technology as a support, the operations of controlling the databases of this web system became more and more safe and reliable. Under this isolation level, the performance of database operation is better[31].

3.1.3 SpringMVC For This Project (Controller Layer)

This web system also follows the design philosophy of MVC. We have built the model layer, so now we need to build a controller layer. In today's industry, struts2 and springMVC are excellent controller layer development frameworks, they have a wide range of applications. Struts2 is more heavyweight than springMVC. And the action object of struts2 is not a singleton mode, so it will cause serious occupation of the server memory when it is used. springMVC integrates JSR303 for data validation, while struts2 is more cumbersome for data validation. In this project, spring can seamlessly connect with springMVC, while struts2 can't integrate perfectly with spring. And development efficiency of springMVC is much higher than struts2. For the above reasons, we can choose springMVC as the development framework of our controller layer. Thus, we should introduce the process of SpringMVC first. The process of SpringMVC is shown as below:

Figure 3.8: SpringMVC Workflow

２

７

ü The first step: The request is passed to the dispatcherServlet ü The second step: The dispatcherServlet asks for help from

handlerMapping, which looks up the handler based on the xml configuration or annotations.

ü The third step: HandlerMapping passes the handler to the dispatcherServlet

ü The fourth step: The dispatcherServlet calls the handlerAdapter to execute the handler

ü The fifth step: handlerAdapter excute the handler. ü The sixth step: The handler executes and returns the modelAndView to

the handlerAdapter ü The seventh step: handlerAdapter returns modelAndView which

contains model and view to dispatcherServlet ü The eighth step: The dispatcherServlet requests the viewResolver to

generate the real jsp. ü The last step:ViewResolver returns the view to the dipatcherServlet,

the dispatcherServlet send the results to the user This is a complete execution flow of springMVC for the request. But in this project, it need not to use viewResolver. In this project, the web system will use the idea of completely separating the front and back ends, so that the back end will no longer parses the view, the back end just provides the front end with json data. The idea of front-end separation allows front-end developers and back-end developers to focus more on their own responsibilities, thereby it accelerates the progress of development[32]. Thus, The development environment of the controller layer can be built now . 1. <servlet> 2. <servlet-class>DispatcherServlet</servle t-class> 3. <load-on-startup>1</load-on-startup> 4. </servlet>

The dispatcherServlet was imported into this web system. Other components do not need to be configured, as springMVC has been automatically introduced. The feature of load-on-startup tag is for web container. When web container start, it will help dispatherServlet to init the java beans in this project. Thus now start writing a test class: 1. @Controller

２

８

2. public class TestController { 3. @RequestMapping("/test") 4. @ResponseBody 5. public Result getSubResult(@RequestParam(value = "test") { 6. return Result.ok(result); 7. } 8. } @controller helps spring to find this Controller class, the value in @RequestsMapping presents the URL from the client request path. The annotation which named @ResponseBody transform the Result object into data form of json. Thus, when users wants to get the data set they want from the back end. SpringMVC can return the data set by following the process of the springMVC. Thus, in this project. User can send their requests through HTTP protocols by entering their URL path. The back end return the success information to users’ browser. Now, Spring, SpringMVC and Mybatis framework successfully integrated.

3.2 Program Development

3.2.1 generates the data set

the first task is to take 4 Debye parameters based on tissue of human body into web system, and calculate the conductivity and permittivity in the frequency range of 100MHZ to 6000MHZ. These data in this step are just JSON data. In this task the following formula is needed. Besides, the data which is needed to draw the lines is shown below.

Figure 3.9: Json Data Result The first column of this data represents frequency, and other columns are related to the generation of conductivity, permittivity. And the calculation formula for generating this set of data is shown below.

２

９

Figure 3.10: Formula Thus, in order to complete this formula, it is necessary to design a complex data. Complex data consists of real and imaginary parts. The calculation of two complex data is a formula as well. They have their own addition, multiplication, subtraction, and division operations. If there exists Complex Data A named cmplxA and Complex Data B named cmplxB, and cmplxA = a + bi, cmplxB = c+di ² The addition between two Complex Data:

Result = cmplxA + cmplxB = (a+bi) + (c+di) = (a+c) + (b+d)i The result is still a complex data. The addition of complex numbers

satisfies the commutative law and the union law. For instance, cmplxA + cmplxB = cmplxB + cmplxA, cmplxA + ( cmplxB + cmplxC ) = ( cmplxA + cmplxB ) + cmplxC

² The multiplication between two Complex Data:

Result = cmplxA * cmplxB = ( a+bi )( c+di ) = ( ac - bd ) + ( bc + ad ) i The result is still a complex data.

² The subtraction between two Complex Data: Result = cmplxA - cmplxB = ( a + bi ) - ( c + di ) = ( a-c ) + ( b-d ) i The result is still a complex data.

² The division between two Complex Data: Result = cmplxA / cmplxB = (a+bi)/(c+di) So the divisional derivation process of the plural is as follows: Assume (a+bi)/(c+di) = x + yi Because of the multiplication between two complex Data, thus (a+bi) = ( x + yi ) * ( c +di) = (cx－dy)+(dx+cy)i. Thus, cx -dy = a, dx+cy =b Then, x = (ac+bd)/(c^2+d^2), y=(bc-ad)/(c^2+d^2) Finally, the result is (ac+bd)/(c^2+d^2) + (bc-ad)/(c^2+d^2).

After understanding the addition, subtraction, multiplication and division of complex numbers, the design of this complex number JAVA class can be started. For the object-oriented language of JAVA, the first step in solving the problem is to start with designing a class. These Java classes are abstracted from the real world and provide properties, methods, and features of real-world objects. This reflects the idea of OOP design.

３

０

In this project, the object we need to design is based on this complex number. This complex number contains the real part, and the imaginary part, code is shown as below. 1. public class ComplexData { 2. private double realPart; 3. private double virtualPart;

......// getters and setters

4. } With this java class and the well-designed property real part, imaginary part, then the method of designing this class will become very simple. Thus, start to design the addition operation of the complex number class. If the addition operation is implemented, the other operations will be similar. Thus, some other operations will not be introduced one by one.

1. public ComplexData add(ComplexData other){ 2. double realTmp = this.realPart + other.getRealPart(); 3. double virtualTmp = this.virtualPart + other.getVirtualPart(); 4. return new ComplexData(realTmp, virtualTmp); 5. }

The add method is called when the two ComplexData classes are added. One of the complex number is passed as a method argument to another complex number object, and then the addition calculation logic is implemented in this method. Other operations, such as subtraction, multiplication, and division, accept another complex number as a method parameter, then complete the calculation logic inside the method, and finally return a new calculated result object. Now that the complex data class has been designed, the next step is to apply the complex data class to complete the calculation of the above formula. According to the data set to be calculated, the first column is the frequency. Look at the definition below: outPut1 = frequency * (1E8);

The outPut1 is the first column, thus the value of outPut1 is from 1mhz to 6000mhz. The definition of second column : outPut2 = ep_cal_0(omg1, omg_0, ep_0, ep_infty, Dlt_ep_1, tau_1_nl, sg_0).getRealPart();

Output2 is the second column of the dataset, which is the real part of the complex number obtained by the ep_cal_0 method. Thus, the ep_cal_0 method should be designed first. The parameters in the ep_cal_0 method

３

１

are omg1, omg_0, ep_0, ep_infty, Dlt_ep_1, tau_1_n1 and sg_0. The definition of ep_cal_0 method: In this method, we need to define 5 complex numbers, then the real part of the first complex cmplx1 is ep_infty and imaginary part is 0, the second complex cmplx2 its real part is Dlt_ep_1, the imaginary part is 0, the third complex cmplx3 its real part is 1.0d, the imaginary part is tau_1_n1*omg/omg_0, the real part of the fourth costume cmplx4 is sg_0, the imaginary part is 0, the real part of the fifth complex number is 0, and the imaginary part is omg*ep_0. Thus, the result is cmplx1 + (cmplx2/cmplx3) + cmplx4/cmplx5 And the return value is the result. The ep_cal_0 method is completed. Thus, the output2 is the real part of return value of the ep_cal_0 method. The definition of third column: outPut3 = -ep_0 * omg1 * (ep_cal_0(omg1, omg_0, ep_0, ep_infty, Dlt_ep_1, tau_1_nl, sg_0).getVirtualPart());

Thus, the outPut3 is the imaginary part of te ep_cal_0 multiplied by the negative of the product of ep_0 and omg1. The definition of the fourth column: losst1 = sg_0 / omg1 / ep_0 + omg1 * tau_1 * Dlt_ep_1 / (1 + (omg1 * tau_1) * (omg1 * tau_1)); losst2 = ep_infty + Dlt_ep_1 / (1 + (omg1 * tau_1) * (omg1 * tau_1));

Thus, output4 is losst1/losst2, and the last column is defined. After defining the calculation formula and the necessary output data, the logic should be encapsulated into a service layer for the web system to provide external data services.

3.2.1.1 RPC framework

However, in this distributed web system, this service needs to be called by other controllers through rpc technology. In backgroud, the principle of rpc has been introduced, so in this section, the rpc framework is needed. Because the architectural pattern in this project is the SOA architecture. Information transfer between multiple components needs to be used to rpc. But writing an rpc manually is cumbersome, so rpc framework should be introduced to speed up the progress of development. There are many rpc frameworks such as DUBBO , springcloud, etc. They are all open sourced.

３

２

Take DUBBO for an instance: Dubbo is an excellent open source rpc framework developed by Alibaba Group. Dubbo provides good service governance functions, solves the problem of distributed service calls, implements pluggable features of services, and makes it easier to split large distributed system services. In this web system, the development of the service in the web system has become easier[33]. The architecture diagram of Dubbo is shown as below:

Figure 3.11: Dubbo Architecture PROVIDER: This is the provider of the service which is the service object in the web system. After the service object is written, the system registers the service object in the registry for the consumer to call. And PROVIDER provides the IP address and port number of the host where the service is located. CONSUMER: Consumer is the consumer of the service. It generally represents the controller layer in the web system. In a business system, the controller is responsible for calling different services to implement the business logic. The consumer also provides the ip address and port of the host where the controller layer is located. MONITOR: Monitor can meet the needs of personalized operation and maintenance

３

３

monitoring, alert notifications to services or consumers, check the health of each service, and the pressure and performance of the service. REGISTRY: Based on the registry service, the consumer of the service can dynamically find the service provider and make the address transparent so that the service provider can smoothly increase or decrease the server which the services are located in.

In this project, the consumer aka controller has not been developed yet, but the complex data and the corresponding logical calculation have been designed. At this time, the service object should be completed to become the service provider in this web system[34]. Thus, the service in this web system can be designed at this moment. The implementation of the class is very simple. Since the computational logic and the complex number have been implemented, just wrap them in a service implementation class called GetDatasetServiceImpl and then the job is done. The GetDatasetServiceImpl implements the interface which called GetDatasetService. Then, this service will be released to the registration center of DUBBO, thus how to configure it? The applicationContext-service.xml file is a workaround. <dubbo:service interface="GetDatasetService" ref="getDatasetServiceImpl" /> Configure this tag in the applicationContext-service.xml file. This tag means that the implementation class GetDataServiceImpl which implements the GetDatasetService interface is posted to the dubbo registry. The location of the DUBBO Registration Center is given by the following tag. <dubbo:registry protocol="zookeeper" address="192.168.25.129:2181" />

The registration center is located at the ip address of the host number 192.168.25.129. And the registry runs on port 2181. At this point, the service layer has been designed and released successfully. Then the controller layer is about to be designed, and the controller layer is very simple to be implemented. The controller needs to accept the four parameters of the tissue which the user interested in. According to these four parameters, call GetDataService,

３

４

then, this service class returns the data set required by the web system, then the controller receives the data set and returns it to the user. @RequestMapping("/getDatasetByParams")

This annotation is used to describe the url so that the user knows how to find the controller and get the data set which the user want. This controller needs to be published to the registry so that it can correspond to the service provider, so some related configuration needs to be completed in the springMVC.xml file. <dubbo:reference interface="GetDatasetService" id="getDatasetService" />

The getDataService has been published to the registry before, now the role of this tag is to reference the getDataService in the registry center. And the consumer's ip address and port are also posted to the registry by the way. The flow chart for getting the data is shown as below:

Figure 3.12: Request Path The controller takes the four parameters of Debye Model requested by the user. The controller finds the provider that can provide the service on the dubbo registration center. The service accepts four parameters to start the process of execution. The service requests data from the database, and the service returns the data to the controller after receiving the data. So the final step is to turn on dubbo and deploy the service and controller to the corresponding web container, so that the controller is ready to accept user parameters. The test results are shown as below:

controller dubbo service databse

３

５

Figure 3.13: Data Response

The data obtained is correct, just got a total of 4 sets of data, 6000 data per set. Fully in line with the goals given at the beginning of this section. But just getting the data is not enough. The data should be visualized, which will be a challenge.

3.2.2 data visualization

In this web system, the data just obtained will be presented in front of the user in the form of a line chart. The ultimate goal of this section is to achieve the diagram shown below.

Figure 3.14: Gnuplot Data Figure Since this project uses a completely separate architecture at the front and

３

６

back ends, and the data obtained is also json data, the image from gnuplot cannot be directly used, so the goal of generating images needs to be done with JS technology. So this web system will eventually need to draw the line chart looked the same as this image. At present, this web system has only the background, there is no front end, and these json data also need to be processed by the JS language, so now this web system need the front end technology selection. ECMAScript 6 The current front end technology is much more advanced than before. The corresponding development framework and style framework are endless. The JavaScript language has changed a lot from the original ECMAScript 1.0 to the current ECMAScript 6.0[35]. Officially introduced many new features in ES6. For the first time in ES6, the definition of classes and the properties of inheritance have emerged. Thus, ES6 frees programmers from cumbersome DOM operations. And ES6 provides promise syntax, as well as arrow functions, powerful functional programming makes front end page development more efficient[36]. REACT So far, JS has a variety of frameworks, the famous front end frameworks such as react, vue, angularJS and angular, and other JS development frameworks such as requireJS, backbone, etc. Angular js is an excellent development framework from Google, but the performance of angularJS is relatively low compared to react, and learning angularJS requires more concepts than react. First, developers need to be familiar with TypeScript, for object-oriented languages, it is easier for programmers with OOP development experience, but for pure js developers, this is not a very simple problem. The angular framework itself has a lot to learn, such as modules, decorators, dependency injections, components, services, directives, templates, and pipes, as well as transformation detection AoT compilation, blocks, and RxJS. In short, using angular is much harder than using react, because the dazzling new concept is very difficult for novices. And novices often encounter some incomprehensible error messages. Thus, in this project, react will become an undeniable development framework. React is an excellent js library developed by facebook. React has two main features[37]. 1. Simple At any time, the developer just needs to correctly describe what the

３

７

application should be looked like, when the data changes, react will automatically manage the UI interface. 2. Declarative When the data changes, in actually react updates only the part of the data change. React’s aim is to constructing reusable components. By encapsulating already developed methods, developers can make code reusability between components more efficient, which in a sense greatly reflects the characteristics of modular development. Virtual DOM The main principle of react is virtual dom. The fig is shown as below:

Figure 3.15: React Virtual Dom For traditional web applications, it is generally a direct update of DOM, but the direct operation of DOM is usually costly. Thus, in order to reduce the operation of DOM, react introduced Virtual DOM technology. This is a lightweight virtual DOM, which is an object abstracted by React. This object describes what dom should be looked like. This virtual DOM is used to update the real DOM, and the Virtual DOM manages the real DOM[38]. Moreover, there is a diff algorithm between virtual DOM and real DOM . When updating virtual DOM , it will not modify the real dom immediately. In fact, react will use this diff algorithm. When the event ends, pass the current new virtual DOM object. The new virtual DOM will have a compare with the previous virtual DOM to calculate the least number of steps to update the real DOM node. So this will make the performance of the modification of the page excellent. Moreover, the relationship between the state and the props mode makes the communication between the components very convenient, the coupling degree is even lower, and the redux matched with the react makes the coupling degree between the components even lower. This project uses react to develop dynamic pages of front end. Thanks to the use of react, the development of this web project has become easier than before. But it's not enough to just use react in this project, but react can help the web system minimize complexity and maximize component reuse. Thus,

３

８

this web system also uses ECHART as the development framework for the chart, so react with the ECHART will make it easier to develop this web system. In this project, although react can make the development of JS faster, JS is still very complicated for drawing a chart. Thus, the web system used EChart for this project[39]. ECHART Echart is a javascript library that helps data visualization. Echart's design philosophy is that users can use charts to display without text. Charts can present huge amounts of data to users in a very appropriate way, and users can analyze valuable information through charts. For front end developers, Echart is a very good development tool. Echart not only provides common chart types such as line, bar, scatter, k-line, and pie charts, but it also provides line graphs, maps, and heat maps for geographic data visualization, diagram, treemap for relational data visualization. Besides, echart also supports mashups between graphs and graphs. In this era of big data, more and more data is piled up, so letting this data play the value it deserves is one thing developers need to consider. Echart's ability to handle big data is very good. With the help of the canvas function, echart can easily display data in the quantity of tens of thousands or even hundreds of thousands[40]. Since gnuplot generates a line chart, we need to select the line chart component of EChart in this web system. In the process, the final result diagram is shown as follows

３

９

Figure 3.16: System Data Figure Result The two curves generated by the rendering are consistent with the curves generated by gnuplot. So prove that the echart used by this web system is correct. The x-axis of the coordinate is frequency, and its value ranges from 100 MHz to 60000 MHz. The y-axis of the coordinate axis represents the calculated value at each frequency, and its value is determined by four parameters of Debye Model. So in order to complete this line chart, there are still a lot of things that this web system needs to do. First of all, this web system needs to create an Echart component. Since react is based on modular development, in this web system, just creating a file called MsCharts.js is enough, so that all method, properties and logic are encapsulated in this js file, so that this component can be used by other components.

Figure 3.17: MscCharts.js Then start writing this JS file, first following the ECMAScript 6 syntax, developers can create a class called MscCharts, then set the state of this component.

４

０

Figure 3.18: MscCharts.js constructor First of all, in this js, the MscCharts class is created. This class inherits the React.Component class, so in the constructor method, the parent class's constructor method is called first, and then the state is set for this class. In the initialization phase, the web system needs to set 4 parameters of Debye model such as conductivity, estatic, einfinity and tau. The value of conductivity is 1, the value of estatic is 60, the value of einfinity is 21.43600845, and the value of tau is 2.793953464E-011, which is a scientific notation. The changeConductivity state property is used in later tasks, so users can ignore it here, because this property will be introduced in the next task. These parameters are set in order to let back end can get them, thus executing the back end task logic, so that the front end can get the desired JSON data. Thus, at this time web sytem can start to introduce Echart components into this front end. The role of package.json should be very clear for experienced developers. This package.json file generally records the configuration information of the project, including the name, version, license and other metadata. It also records the various modules required, including execution dependencies, and development dependencies and the scripts field. The package management tool of the web system's front end is npm, so after executing the npm install command, the packages which depend on the package.json file will be downloaded and loaded into the web system.

４

１

Figure 3.19: echarts related dependencies The version of Echart imported by this web system is 4.0.2. This version of this Echart has more powerful features and better performance than previous versions of Echart. However, it is not enough to introduce echart alone. This web system still needs to integrate react and echart, so here this web system introduce the js package of echarts-for-react 2.0.6. The purpose of this package is to make react to support the operation of the echart component better. So after these two dependencies are imported into package.json , this web system can import Echart at the beginning of the MscChart.js component. This will allow Echart to be used by this js file. For graphics, the beginning of this file should be imported into the bar, line, lines, pie components. For the prompt box and title component, this system need to import the tooltip, legend, title, dataset, dataZoom components belongs to the component package. The core part of Echart is the configuration of the option section. With the option part configured, plus the json data from the asynchronous request, the visualization becomes very simple. So in order to display the two required lines, such as relative permittivity and conductivity, the legend tag in the option should be configured. So the data array in the legend is assigned, its first element is the string "relative permittivity", and the second element is also the string "conductivity". This will make the names of the two curves appear in the line chart. Continue to configure the option, there is a very important component in the option, that is the series array, each element of the series array represents a curve, each element has name, type, showSymbol, data attribute value, and the name attribute must be correspondent to Legend , type must be specified as line type, showSymbol value should be set to false, data value is json data from the back end. Only after configuring these values, can this echart play its role. Obviously, with echart, there is no need for developers to write js language, developers just need to describe the line chart in echart's option component to get the desired effect and graphics, echart greatly promoted the development efficiency, and the graphics drawn by echart are beautiful, full-featured, and

４

２

the line chart support dynamic changes. The processing performance of big data is considerable, so in this project, echart has become an excellent development. tool. So far, the two curves of permittivity and conductivity have been successfully drawn, but the current Echart component is not working properly on the front end because there are a lot of styles and necessary front end components should be imported into this web system. Thus,this web system need to import many css style, but now there are many css style frameworks in the industry, such as Bootstrap, and Ant Design. Ant Design Ant design is developed by Ant Financial, Ant Design is a medium-sized design language dedicated to improving the user and designer experience. Ant design utilizes a unified specification to provide great convenience for design, and comprehensively improve product experience and product development efficiency. In the official implementation of ant design, ant design is implemented by react, so some common components of ant design are also modular in nature. A lot of ant design components have also been applied to this web system, which in turn provides strong support for developing this web system. Ant design contains many components, such as select component, form component, date picker component, Layout component, Menu component, Button component, checkbox component, Input component, etc. These components are not js native components, these components are Given the css style of ant design by react, which is used by developers. In this project, these components will also be applied step by step.

Figure 3.20: antd related dependencies As shown in the figure, this web system first imported the ant component in the package.json file, the version number is 3.2.1, and then imported the mobile version of antd for future use, version number is 2.1.6. Thus, this web system is supported by ant design.

４

３

Figure 3.21: import code As the picture shows, add this code to the beginning of the MscChart.js file and import the Form, Icon, Input, Button, and Select components from the package provided by antd. In this way, the components of this web system have a better look and feel, and for the user, the experience is more perfect. By solving this problem, the echart can display the curves of permittivity and conductivity. However, the current data of these two curves is only static data, and the front end has not interacted with the data of back end. In order to solve the problem of data interaction, the promise syntax in ECMAScript6 must be introduced.

3.2.3 Data interaction

For the traditional ajax asynchronous request method, ajax is implemented by the callback mechanism. Due to the single-threaded feature of javaScript, the web system must wait for the previous request to return the result before processing the next step of the program. If the number of layers in the callback is increased, the code structure of the program becomes very poor. For developers, the readability of the program is particularly poor. Promise is supported by ECMAScript 6. This syntax changes the callback request method to Cascading request method In order to better understand Promise, developers can understand the promise as a transaction. There are three states of this transaction, such as the incomplete state, the failure state, and the completion state. Notably, these changes in state can only be converted from an unfinished state to a completed state or a failed state, and vice versa. Once the status changes, it cannot be changed. In this web system, the front end and back end data interactions are performed using the fetch tool. Fetch is also a promise syntax[41]. It has all the features of promise. Why use fetch? The main reason is that the original XMLHttpRequest is a very rough API, which does not conform to the principles of Separation of Concerns, and the configuration and calling method of XHR is confusing. In summary, the use of fetch can make the

４

４

request method more concise. In this project, the usage of fetch is shown in the figure.

Figure 3.22: fetch ways At the beginning of the network send request, the object myFetchOption is successfully built. MyFetchOption has a key value of method inside and a value of GET. Common ways to send requests are GET, POST, HEAD, DELET, TRACE, PUT. In this web system, the system only need to use GET to get the data from back end through fetch request[42]. The first parameter of fetch is the requested URL. In this request, the parameters are conductivity, estatic, einfinity, tau, and their values are 1, 60, 21.4360845, 2.3739534E-011. The second parameter is the meFetchOption object. The next step is the chained call in functional programming. In the first then method, the data returned by the request is converted to data in json format by the arrow function. In the second then method, json is called as a parameter to call the setDatasetForEchart method and set the data for Echart. Thus, enter the setDatasetForEchart method, the core code is shown as below.

４

５

Figure 3.23: Set Data For Lines Two list names are defined as xyLogDataListForLine1, and xyLogDataListForLine2, which are list objects that provide data for the conductivity curve and the permittivity curve, respectively. This method uses two for loops to assign values to the two lists. Thus, both lists objects have their own data. Echart can be operated after the two list objects have data. The assignment operation is shown in the figure below.

Figure 3.24: Series Configuration As mentioned before, the name attribute is to set the name of the curves. Here, the names of permittivity and conductivity are set for the two line charts. The type of line chart is line, the showSymbol attribute is false, and the data attribute of one line chart is xyLogDataListForLine1, the other is xyLogDataListForLine2. But currently Echart is not set completely. If the x and y axes are not log scale, the curves will not display properly. Therefore, developers need to add the following settings in the option object of Echart, as shown in the figure.

４

６

Figure 3.25: Log Scale The type type of xAxis is log type, and the same type of yAxis must also be log type. However, the current web system is not working properly, because the request can be sent, but the front end does not get a response. So this web system also involves the problem of request cross-domain, because this web system is separated from the front and back, so it is different from the traditional ajax request. In traditional web projects, developers of front end write jsp pages, and use ajax inside jsp to request data. However, in traditional web projects, when deploying projects, jsp and springMVC, Spring, and Mybatis are packaged together for deploying on the server, this phenomenon will not involve the problem of request cross-domain. However, in recent years, the technology of completely separating the front and back ends has become more and more popular, and the front end frameworks are emerging one after another. The front end and back end may not be on the same server, so the request for data needs to solve the problem of request cross-domain. Therefore, in order to solve the problem of request cross-domain, the front end and the back end need to cooperate at the same time. For the backend, the solution for this web system is shown below.

４

７

Figure 3.26: Cors Filter This request is made through the cors protocol[43]. Thus, in the controller layer of the web system, the web system needs to add a filter. The name of the filter is called FumieCorsFilter. This filter needs to implement the Filter interface, and implements three methods of the Filter interface, namely the init method, the destroy method and the doFilter method, in which the init method and the destroy method do not need to be written in this case, and the doFilter method is the core that the web system needs to pay attention to. When the user makes an http request, these requests will pass through the filter. Therefore, the parameters servletRequest and servletResponse of the doFilter method can receive the request and response objects created by the web container, and then set the http response header of the response object. The back end of this web system can respond to cross-domain requests. This doFilter method first casts servletResponse to HttpServletResponse, and then adds Access-Control-Allow-Origin to the response head[44]. Its value is *, which means that this back end can receive requests from all different servers. The value of Access-Control-Allow-Methods corresponds to POST, GET, OPTIONS, PUT, DELETE, so the back end of this web system can receive requests of type POST, GET, OPTIONS, PUT and DELETE. The value of Access-Control-Max-Age is 3600, which means that the maximum lifetime of the request is 3600 seconds. The value of Access-Control-Allow-Headers is x-requested-with, Authorization, and the

４

８

value of Access-Control-Allow-Credentials is true. Finally, the request is released by the doFilter method of fiterChain, so the request and response to the controller processor are the wrapped request and response, so when the background sends an http response to the front end, the http response header has the above settings. However, the filter should be activated by the web system, so some related configuration is also very necessary. Therefore, the webapps directory of the controller layer of this web system, the web.xml file under the WEB-INF folder needs to be imported with the relevant configuration of the filter.

Figure 3.27: Filter Configuration In this filter configuration, the value of the <filter-name> tag inside the <filter> tag is cors, and the value of the <filter-name> tag inside the <filter-mapping> tag is also cors. The value of the <filter-class> tag inside the <filter> tag is cn.fumie.filters.FumieCorsFilter. This is the full path of the filter. Only the way to configure the full path allows the web system to accurately locate the filter. Then, this web system filter requests and responses at once It should be noted here that the <url-pattern> tag represents the form of the interception. In this web system, the value of the <url-pattern> of the filter is /*, which means that this interceptor allows the request to execute each controller. If the value of the <url-pattern> tag is /, then requests such as *.jsp, *.css, and *.js cannot be intercepted. However, this problem can be solved by the configuration in springMVC.

Figure 3.28: Static Resources So if the request path of the web system's controller is RESTFUL, then the

４

９

developer needs to add the above lines of code to the springMVC configuration file, so that the dispatcherServlet can handle requests for these static resources. In the web system, RESTFUL is a very popular keyword. In a nutshell, the RESTful API is a relatively simple API design based on the HTTP protocol and HTTP protocol is stateless. The centre role of RESTful is everything is a "resource". All HTTP actions should be handled and processed on the corresponding resource, and the API is the management operation of the resource, and this specific operation is specified by the HTTP action. The RESTful API is the API design theory of a relatively mature set of web applications. The emergence of the RESTful API allows the front end devices to interact with back end more and more easily. When the client and the server interact with each other, it is necessary to specify what type of media representation the two parties can accept. Designing a great RESTful API is very difficult! The API is a contract between the service provider and the consumer[45]. Breaking the contract will cause a lot of trouble for the server developer. These troubles come from developers who use the API, because changes to the API will lead to their mobile app can not work. A good document can do more with less, but most programmers don't like to write documents. Thus, the benefits of RESTful are generally listed as following: 1. When the user sees the Url, he knows what he wants. 2. The user knows what the http method does by looking at the http method. 3. The user sees the http status code and knows the result. Thus, in this project, this web system try to make the API design more RESTful[46]. This will making the interation between front end and back end more easier.

3.2.4 Page Design

Since the front end of this project is built by react and react has the feature of modular, thus, react makes the web system's page design very simple. The design of pages in traditional projects is very complicated[47]. In this web system, the front end uses the design layout of ant design, so the project's control over the layout is very clear. The layout component inside Ant Design splits the page horizontally into 24 grids by default, and the developer specifies the margins of the two edges. The information block

５

０

after the division is called the "box". It is recommended that the number of boxes arranged horizontally should be up to four and at least one. The design part is based on the unit of the box to customize the layout rules inside the box to ensure the comfort of the visual level. The internal FLEX component of the ant design make the 24 grids system more flexibility, thus, in order to make the page more beautiful in this web system, the flex layout was introduced. The 24 grid system supports a Flex layout that allows horizontal alignment of child elements within the parent node - left, centered, right, equal width, and evenly spaced. Between children elements, top alignment, vertical center alignment, and bottom alignment are supported. At the same time, the use of order is supported to define the order in which the elements are arranged. The Flex layout is based on a 24 grid to define the width of each "box", but the layout is not limited to the grid. The project directory of this front end is shown as below.

Figure 3.29: JS for Page A total of seven components have been defined, such as MscChart.js, MscWebPage.js, MscWebPageContent.js, MscWebPageFooter.js, MscWebPageHeader.js and MscWebPageSider.js. ² MscWebPage.js

Figure 3.30: Layout for Front Page

５

１

Part of the code for this js component is shown as above. The react first

defines a layout, and the Header component is defined at the beginning of the layout. Another layout is nested inside this layout component. The pageSider is used to display the menu in the new layout. Then there is PageContent

² MscWebPageContent.js

Figure 3.31: Layout for Web Content The content of pageContent is very simple, as shown above. React

defines a MscChart component in content, which is the core functional component of this front end of this web system.

² MscWebPageFooter.js

This is the footer, in order to display the copyright and brief information of the page. ² MscWebPageHeader.js

This is the header part of the page. This section is reserved for future addition of more sub-function modules to this system.

² MscWebPageSider.js

This component is to display the menu information of the front end.

Therefore, through this kind of declaration way, react makes the design and development efficiency of the page greatly improved. Finally, configure the MscWebPage.js component in the project's index.js, which in turn allows users to access this page. Picture is shown as below.

Figure 3.32: Url Path This web system sets a Route component with the value of the property path /msc and the value of the property component is MscWebPage so that the user can access the page by domain name and path[48]. In Backgroud, npm has been introduced, npm opened 3000 port for the front end operating environment, so users can access the front end

５

２

applications through this port. Therefore, the terminal only needs to run the npm start command to call the start.js script to start the front end program.

3.2.5 Modify User Inputs

With the foundation of the previous data interaction and the page design, this web system only needs to make some minor modifications to achieve this requirement. The results of this program is shown as below.

Figure 3.33: Page When developing this feature, the four input components need to be imported into front end first, so that selectors can receive the values of the conductivity, e-static, e-infinity, and tau of the user input. The value of e-static has changed from 60 to 6465, and the curve has changed significantly, indicating that this function has been successfully developed. Then, the following change-conductivity, change-tau input boxes, and a selector box are the requirements that need to be implemented later, so these requirements will be introduced one by one later. In the section of Page Design, Some unused parts of the page's header and sider can be seen, which are intended to be used by other functions in the future. First, define four input boxes to receive the parameters entered by the user

５

３

as the picture shows.

Figure 3.34: Form Items Each input box is wrapped by a form item, and there are corresponding validation rules when the user enters parameters. The first parameter of the getFieldDecorator method is the name property of the form item, which is used to pass parameters to the back end.

Figure 3.35: Submit Button A submit button is defined after the input boxes to submit the form.

５

４

Figure 3.36: handlersubmit method When the user clicks the submit button, react will listen to the click event, and then react will call the handlerSubmit method to execute the logic of the parameter submission. In this handlerSubmit method, the url hard coding problem is solved, and the four parameters of conductivity, einfinity, estatic and tau are respectively bound by the conductivity, einfinity, estatic, and tau in the form. The use of fetch has already appeared in the above, so it will not be described in detail. When the form sends the request, the front end will get a response, and then fetch will serialize the response into a json object. Then fetch gets the json object and uses the data inside the json object to call the setDatasetForEcharts method. Finally, the line chart is dynamically modified in the setDatasetForEcharts method to get the curve that the user wants to see.

3.2.6 Add two new lines into chart

５

５

Figure 3.37: Page Results For 4 Lines When the value of change-conductivity and the value of change-tau are modified, two new lines are added into the chart as shown above. In order to achieve the percentage change,two formulas should be defined in the setDatasetForCharts method, as shown below.

Figure 3.38: Percentage Change The user will enter the number in the change-conductivity input box first , then this method will receive the number entered by the user. Since the changeConductivity received by the method is a string data type, in this method, a built-in function called parseFloat in js needs to be called to convert the changeConductivity from string data type to float data type. Then the next calculation can be done. The user first enters the number in the change-tau input box, and this method will receive the number entered by the user. Since the changeTau received by this method is a string data type, the built-in function of js named parseFloat is also required in this method to convert changeTau from string data type to float data type. Then continue to use fetch to send the request

５

６

Figure 3.39: Fetch New Data Use percentageChangeConductivity and percentageChangeTau as GET parameters for fetch requests to send requests to the back end of this web system. In this way, when the request is sent to the back end, the back end will send a response to the front end, fetch receives the response sent from the background, and then uses the res.json method to convert the response into a json string, and then uses the json string to set the data for the Echarts.

Figure 3.40: Data Display After adding 2 curves, the mouse moves over the chart and the user can observe the numerical status of each curve at the same frequency. This will clearly compare the state between the curves, which will make the user experience more perfect.

3.2.7 Calculate the difference between data

In order to calculate the difference between the data, you need to define a display box at the end of Echart. This display box shows the calculation result. In order to calculate the difference between the data, the first suitable algorithm needs to be found. The way to calculate the difference is

５

７

[ [ sum_{ i } ( permittivity_web ( i ) - permittivity_Debye ( i ) ) ^ { 2 } ] [ sum_{ i } ( permittivity_web ( i ) ) ^ { 2 } ] + [ sum_{ i } ( conductivity_web ( i ) - conductivity_Debye( i ) ) ^ { 2 } ] [ sum_{ i } ( conductivity_web ( i ) ) ^ { 2 } ]

] ^ { 0.5 } However, computing logic definitions in the background or defined in the foreground is a question worth considering. Because the front end is only for displaying data, and the computing power of the browser is far less than the back end server, and the computing logic is written into the back end server, which can better reflect the role of the back end.

Figure 3.41: Sub Result Service Interface First define an interface called GetSubResultService, the interface is shown as above. Then, an implementation class is needed sto implement this interface, the logic of the calculation needs to be implemented in the implementation class. And this implementation class must implement a method called getSubResultByParamList, and the calculation logic will be implemented in this method.

Figure 3.42: Sub Result Service Implementation Class

５

８

First, Math's pow function is to provide mathematical exponential operations in java. The first parameter represents the value to be calculated, the second parameter represents the index of this number, and the index can be a decimal. To implement the above formula, a for loop and different denominators and numerators are defined here, and different denominators and numerators are iteratively computed in this for loop. The index 1 of resultListBase is relative permittivity, the index 2 of the resultListBase is conductivity. Meanwhile, The index 1 of toBeCalculate is relative permittivity, the index 2 of the toBeCalculate is conductivity. Finally, the final calculation of result is performed outside the for loop. The first argument to the pow function is firstNumerator / firstDenominator + secondNumerator / secondDenominator, The second parameter is 0.5. So at this point, the calculation logic is basically completed. The next step is to set up the controller layer. As the picture shows.

Figure 3.43: Sub Result Controller First, a controller class called GetSubResultController is defined, using the @controller annotation to make the class published to the spring container, and then a method called getSubResult is defined in the controller. This controller named GetSubResultController relies on a class named GetSubResultService, which is decorated with @autowired annotations. This is for the service class to be automatically injected into this class when the controller is released. Then the getSubResult method is decorated with an @requestMapping annotation, and the value of this annotation is

５

９

"/getSubResultByParams" so that the user can access the method via the url. Since the way to submit parameters is POST method, four parameters are defined in the parameter list of this method. The first parameter is named conductivity, the second parameter is named estatic, and the third parameter is named einfinity. The last parameter is named tau. These parameter values are all decorated by @RequestParams, so developers don't need to get the HttpServletRequest object. Spring fetches the parameters directly. Then the back end call the dependent service in this controller, the service completes the calculation logic and returns the result to the controller, and the result is encapsulated by the result object and returned to the front end. The last step can not be forgotten that the service and controller need to be published on the dubbo middleware. In this way, the web system will work properly.

Figure 3.44: Different Box When the values of changeConductivity and changeTau are 50 and 50, respectively, the value of difference is 0.4208. The calculation results are shown in the figure and the calculation results are correct.

3.2.8 Select the tissue that the user is interested in

In this task, the DAO layer needs to be used to interact with the database for data. In the above, the database table has been designed, then the next step is to design the corresponding POJO class. The POJO class is shown as below.

Figure 3.45: Tissue POJO

６

０

The attributes of this POJO class correspond to the tissue, conductivity, estatic, einfinity, tau columns in the database table tissue_info. Since the POJO attribute and the column name of the database table are the same, the parameter configuration of the mybatis layer may not require a resultMap. This POJO class also implements the serializable interface, which allows the class to be serialized and deserialized. Below the POJO class are some getters and setters methods and constructors. The next step is to get the data of each tissue, and then generate 4 Debye parameters of the tissue by calculation. First get a copy of the data of the tissue, then the other data of the tissue will be obtained in the same way. The data is shown as below.

Figure 3.46: Data Achieving The first line of this data represents the name of the tissue that the user is interested in. The first column represents the frequency, from 100 MHz to 6000 MHz, and the change in frequency per step is 100 MHz. The second column is the durability of the tissue, and the third column is the conductivity of the tissue. Split this data into a conductivity file and a permittivity file, and then import them into a file called translation2-singlematerial. The directory is shown as below.

Figure 3.47: Files For translation-singlematerial

６

１

In this document, conductivity, and permittivity can be seen. There are also Makefiles, Debye.F90 files and fort.30 files in this directory. The Makefile is an executable file script that uses the make clean, make, and make run commands to get the calculation started. The specific calculation logic is in Debye.F90. However, if the Debye.F90 file is not modified, the calculation will not be terminated and the final result will not be obtained. There is such a while loop in the Debye.F90 file. ² Do while (error>=0.0000004) The condition of this loop only needs to be modified to terminate the calculation. ü Do while (error>=0.000004) This makes the error level smaller, from 0.0000004 to 0.000004, the final error obtained by the calculation is 7.34549537E-02, The error level obtained is relatively small, so this calculation is successful. Therefore, the contents of the fort.30 file are updated successfully, and then 4 Debye parameters are generated according to the contents of the fort.30 file. cat fort.30 | awk '{ print $1, $5, $2+$3,$2, $4 / ( 2 * 3.14159 * 10**9 ) }' Just run the command above to generate the following results.

Figure 3.48: One Result Thus, this system successfully obtained the benefits of the user and the four Debye parameters corresponding to the tissue. In this way, the data of each tissue that the user is interested in can be obtained, and the result is shown as below.

６

２

Figure 3.49:Tissue Debye Parameters Results The next step is to import the data into the mysql database, and then it can start designing the corresponding dao layer, service layer and controller layer.

Figure 3.50: Database Table Result Thus, in this step, the data is imported into the database the result is shown as above.

６

３

Figure 3.51: Parameters Service Interface

Figure 3.52: Parameters Service Implementation Class As shown in the figure above, according to the design steps, the first interface will be designed. This interface is named GetParametersByTissueNameService which has a getParameters method. This method takes a string type parameter and the return value is a Tissue object. Interface-based design rather than implementation-based design embodies loose coupling. As shown in the figure above, a class named GetParametersByTissueNameServiceImpl implements the interface just now. Since the implementation of the tissueMapper has been designed earlier, it is enough to just call it here. This service implementation class is decorated with the @Service annotation so that the implementation class will be published to the spring container. With the @Autowired annotation, the tissueMapper will be automatically injected into this implementation class. The next step is to implement the method in the interface. In this method, the getTissueInfoByName method of the tissueMapper is called to make mybatis connected to the database and obtain the data which user is interested in, and then return the tissue object to the controller. The next step is to design the controller layer.

６

４

Figure 3.53: Parameters Controller This controller class is decorated with a @controller annotation and will be published to the spring container. In this controller class there is a method called getParametersByName, the method parameter is a string data type, and the return value is the Tissue object type. This controller is configured with the value of @RequestMapping so that the front end can get the information of the tissue through this url. The controller serializes the tissue into a json object via the @ResponseBody annotation, and sends it to the front end so that the front end can receive the json string and then set the data. The last step can not be forgotten that the service and controller need to be published on the dubbo middleware. In this way, the web system will work properly.

Figure 3.54: Selection Box Add a selection box to the Echarts.js page, the figure is shown as above. After the user selects the tissue they are interested in, the conductivity, estatic, einfinity, tau input boxes will be reset to the corresponding data, so at this time, the user clicks the submit button again and the graph changes.

4. Conclusion This project mainly shows how to create a web system for the Debye model, in which the summary part summarizes the idea of making a web system for this project. Then there is the future work part. In this part, there are still some points in the web system that need to be optimized.

６

５

4.1 Summary How to make a web system for this project is not an easy task. There are many things should be taken into consideration before doing this web system, such as requirements, technology selection, and system architecture. For requirements, The traditional software architecture model has been unable to meet the rapid changes in requirement. In order to better adapt to changes in software requirements, the system splits different business logics to form a distributed logical model (SOA). The system is also made into a distributed system in order to take into account the high scalability of the system. When the requirement changes, only a part of the system needs to be changed to meet the requirement. Besides, the traditional software architecture model can not meet the rapid changes in requirement. In the process of making this project, this thesis first introduces the construction of distributed environment and architecture, including some middleware that needs to be imported. If the number of users using the system at the same time is large, it will pose a huge challenge to the computing power of the system. Therefore, unlike the previous front-end and back-end architecture models, the project adopted the idea of completely separating the front and back ends, allowing the front-end and back-end to transmit less data between each other. This can effectively slow down the pressure on the server. Since the front end and the back end are completely separated, the problem of cross-domain data interaction needs to be solved. Therefore, the system allows the front and back ends to work together to solve this problem. The next step is to design the specific project function. It is very important to design complex data in this project, because the calculation logic of this project is almost related to complex data. Then select the appropriate front-end page and style frame to realize the data visualization. In the Echarts.js file, the permittivity and conductivity curves are displayed according to the data. Later, according to the change of the percentage of the parameter, two new curves were added, and their difference was calculated by the calculation formula. Clear data comparison makes research work more convenient.

4.2 Future Work There are still many points worth optimizing in this project. The computing

６

６

power of this web system can also be improved. Common methods to improve the computing power of this web system are multi-threading, clustering, etc. Secondly, the deployment method is also worth optimizing. Containerized deployment is a relatively advanced solution.

Cluster computing For this project, improving the computing power of the web system helps improve the user experience so that improve the efficiency of scientific research. One of the means to improve computational efficiency is cluster computing. A single computer is often referred to as a node in a cluster system , and nodes are usually connected through a local area network between each other, but there are other types of connections. . To improve the reliability and speed of a system is the task that cluster computer will do. In general, cluster computers are much more cost-effective than a single computer, such as a workstation or supercomputer. A high-availability cluster generally means that when a node in a cluster break down, its information or tasks are automatically transferred to other normal nodes[49]. The most common pattern is Master-Slave pattern which provides the feature of high-availability of a system. It also means that a node in the cluster can be offline and then goes online. This process does not affect the operation of the entire cluster[49]. For load-balanced cluster system. When a load-balanced cluster system runs, it distributes workloads which often means the requests from clients to a set of servers on the back-end through one or more front-end load balancers which often means Nginx to achieve high performance and high availability of the entire system[50]. Such computer clusters are sometimes referred to as Server Farms. Generally high availability clusters and load balancing clusters use similar technologies or both high availability and load balancing[50]. Thus, in the future, the system's high availability and computing performance can be improved by choosing the right clustering method.

Docker In general, the deployment of clusters should be cumbersome. For operation and maintenance developers, the deployment of clusters is relatively difficult. To simplify the way of deploying a web system, docker technology should be taken into consideration.

６

７

One of the biggest troubles in software development is the environment configuration. And the environment of the user's computer is different. The developers must guarantee two things: the settings of the operating system, the installation of various libraries and components. Only if they are correct can the software run. For example, to install a Python application, there must exist a Python engine, and various dependencies. If some of the old modules are not compatible with the current environment, then it is troublesome. Developers often say, "It works on my machine." The implication is that other machines are probably not going to run.The environment configuration is so troublesome. If change a machine, developers have to come back again and it will take time.Thus, Many developers figured out a solution if software can be installed with the environment? That is to say, when installing, copy the original environment exactly. Docker is a wrapper around the Linux container that provides an easy-to-use container usage interface. It is currently the most popular Linux container solution. Docker packages the application's dependencies with the program in a single file. Running this file will generate a virtual container. The program runs in this virtual container as if it were running on a real physical machine. With Docker, developers don't have to worry about environmental issues. Overall, Docker's interface is fairly simple, and users can easily create and use containers and put their own applications into containers. Containers can also be versioned, copied, shared, and modified just like managing common code[51]. So if this project uses docker it can be more convenient to deploy.

６

８

Bibliography

[1]Fielding, R.T. and Taylor, R.N., 2002. Principled design of the modern Web architecture. ACM Transactions on Internet Technology (TOIT), 2(2), pp.115-150. [2]Madsen, O.L., Møller-Pedersen, B. and Nygaard, K., 1993. Object-oriented programming in the BETA programming language. Addison-Wesley. [3]Erl, T., 2005. Service-oriented architecture (SOA): concepts, technology, and design. [4]Krafzig, D., Banke, K. and Slama, D., 2005. Enterprise SOA: service-oriented architecture best practices. Prentice Hall Professional. [5]Nelson, B.J., 1981. Remote procedure call. [6]Srinivasan, R., 1995. RPC: Remote procedure call protocol specification version 2 (No. RFC 1831). [7]Si, K.H. and Mimaroglu, T., Ubicom Inc, 2006. Universal serializer/deserializer. U.S. Patent 7,010,612. [8]Deo, S., 2011. protobuf-socket-rpc: Java and python protobuf rpc implementation using TCP/IP sockets (version 2.0). [9]Donoho, D.L. and Grimes, C., 2003. Hessian eigenmaps: Locally linear embedding techniques for high-dimensional data. Proceedings of the National Academy of Sciences, 100(10), pp.5591-5596. [10]Wang, S.Y., Chao, H.L., Liu, K.C., He, T.W., Lin, C.C. and Chou, C.L., 2008, July. Evaluating and Improving the TCP/UDP Performances of IEEE 802.11 (p)/1609 Networks. In Computers and Communications, 2008. ISCC 2008. IEEE Symposium on (pp. 163-168). IEEE. [11]Upadrasta, P.V., Intel Corp, 2004. Reliable/non-reliable transmission of voice using TCP/UDP based on network quality of service. U.S. Patent 6,771,594. [12]Huttunen, A., Swander, B., Volpe, V., DiBurro, L. and Stenberg, M., 2004. UDP encapsulation of IPsec ESP packets(No. RFC 3948). [13]Corbett, P., Feitelson, D., Fineberg, S., Hsu, Y., Nitzberg, B., Prost, J.P., Snirt, M., Traversat, B. and Wong, P., 1996. Overview of the MPI-IO parallel I/O interface. In Input/Output in Parallel and Distributed Computer Systems (pp. 127-146). Springer, Boston, MA. [14]Wang, S.C., Chang, W.W. and Hsu, Z.D., Industrial Technology Research Institute,

６

９

1998. Non-blocking peripheral access architecture having a register configure to indicate a path selection for data transfer between a master, memory, and an I/O device. U.S. Patent 5,799,207. [15]Kei, L.M. and Xiaohua, J., 2000, August. An efficient RPC scheme in mobile CORBA environment. In icpp (p. 575). IEEE. Zambon, G., 2012. Beginning JSP, JSF and Tomcat: Java Web Development. Apress. [16]Agrawal, S. and Gupta, R.D., 2014. Development and comparison of open source based Web GIS Frameworks on WAMP and Apache Tomcat Web Servers. The International Archives of Photogrammetry, Remote Sensing and Spatial Information Sciences, 40(4), p.1. [17]Welling, L. and Thomson, L., 2003. PHP and MySQL Web development. Sams Publishing. [18]Williams, H.E. and Lane, D., 2004. Web Database Applications with PHP and MySQL: Building Effective Database-Driven Web Sites. " O'Reilly Media, Inc.". [19]Yank, K., 2004. Build Your Own Database Driven Website Using PHP & MySQL. SitePoint Pty Ltd. [20]Tilkov, S. and Vinoski, S., 2010. Node. js: Using JavaScript to build high-performance network programs. IEEE Internet Computing, 14(6), pp.80-83. [21]Guinard, D. and Trifa, V., 2016. Building the web of things: with examples in node. js and raspberry pi. Manning Publications Co.. [22]Teixeira, P., 2012. Professional Node. js: Building Javascript based scalable software. John Wiley & Sons. [23]Zhang, D., Wei, Z. and Yang, Y., 2013, October. Research on lightweight MVC framework based on spring MVC and mybatis. In Computational Intelligence and Design (ISCID), 2013 Sixth International Symposium on (Vol. 1, pp. 350-353). IEEE. [24]Ho, C., 2012. Using MyBatis in Spring. In Pro Spring 3 (pp. 397-435). Apress. [25]Xiaoyu, F. and Wang, F., 2008. Research and Application of Database Access Based on Ibatis. Computer Development & Applications, 21(6), pp.51-53. [26]Johnson, R., Hoeller, J., Donald, K., Sampaleanu, C., Harrop, R., Risberg, T., Arendsen, A., Davison, D., Kopylenko, D., Pollack, M. and Templier, T., 2004. The spring framework–reference documentation. Interface, 21, p.27. [27]Johnson, R., Hoeller, J., Donald, K., Sampaleanu, C., Harrop, R., Risberg, T., Arendsen, A., Davison, D., Kopylenko, D., Pollack, M. and Templier, T., 2004. The spring framework–reference documentation. Interface, 21, p.27.

７

０

[28]Raible, M., 2004. Spring Live. SourceBeat, LLC. [29]Laddad, R., 2009. Aspectj in action: enterprise AOP with spring applications. Manning Publications Co.. [30]Adya, A., Liskov, B. and O'Neil, P., 2000. Generalized isolation level definitions. In Data Engineering, 2000. Proceedings. 16th International Conference on (pp. 67-78). IEEE. [31]Bamford, R.J. and Jacobs, K.R., Oracle Corp, 1999. Method and apparatus for providing isolation levels in a database system. U.S. Patent 5,870,758. [32]Deinum, M., Serneels, K., Yates, C., Ladd, S., Vervaet, E. and Vanfleteren, C., 2012. Pro Spring MVC: With Web Flow. Apress. [33]Li, S. and Huang, X., 2017, November. Dubbo's serialization protocol extension and optimization of its RPC protocol thrift. In Software Engineering and Service Science (ICSESS), 2017 8th IEEE International Conference on (pp. 721-726). IEEE. [34]Wang, X., Wang, S., Hao, Z. and Zhang, X., 2018, February. Research on the Construction of Regional Credit Bank Platform Based on Microservices. In Measuring Technology and Mechatronics Automation (ICMTMA), 2018 10th International Conference on (pp. 452-456). IEEE. [35]Lee, H., Won, S., Jin, J., Cho, J. and Ryu, S., 2012, October. SAFE: Formal specification and implementation of a scalable analysis framework for ECMAScript. In FOOL 2012: 19th International Workshop on Foundations of Object-Oriented Languages (p. 96). [36]Moser, M., SAP SE, 2009. Dynamic ECMAScript class loading. U.S. Patent 7,509,584. [37]Fedosejev, A., 2015. React. js Essentials. Packt Publishing Ltd. [38]Gackenheimer, C., 2015. What is react?. In Introduction to React (pp. 1-20). Apress, Berkeley, CA. [39]Voutilainen, J.P., Mikkonen, T. and Systä, K., 2016, June. Synchronizing application state using virtual DOM trees. In International Conference on Web Engineering (pp. 142-154). Springer, Cham. [40]Chen, C., Chen, F., Cao, D. and Ji, R., 2015, October. A cross-media sentiment analytics platform for microblog. In Proceedings of the 23rd ACM international conference on Multimedia (pp. 767-769). ACM. [41]Grover, D. and Kunduru, H.P., 2017. Promises in ES6. In ES6 for Humans (pp. 109-116).

７

１

Apress, Berkeley, CA. [42]Feigenbaum, L., Martin, S.J., Martin, S.L. and Torres, E., International Business Machines Corp, 2011. Generation of unique significant key from URL get/post content. U.S. Patent 7,987,509. [43]Dutta, S. and Xu, Z., Microsoft Corp, 2009. Single-roundtrip exchange for cross-domain data access. U.S. Patent Application 11/942,734. [44]Zhang, D., Wei, Z. and Yang, Y., 2013, October. Research on lightweight MVC framework based on spring MVC and mybatis. In Computational Intelligence and Design (ISCID), 2013 Sixth International Symposium on (Vol. 1, pp. 350-353). IEEE. [45]Richardson, L. and Ruby, S., 2008. RESTful web services. " O'Reilly Media, Inc.". [46]Rodriguez, A., 2008. Restful web services: The basics. IBM developerWorks, 33. [47]Tullis, T.S., 1998, April. A method for evaluating Web page design concepts. In CHI 98 conference summary on Human factors in computing systems (pp. 323-324). ACM. [48]Sorenson III, J.C., Kakulapati, G., McHugh, J.G. and Vermeulen, A.H., Amazon Technologies Inc, 2014. Management of object mapping information corresponding to a distributed storage system. U.S. Patent 8,688,912. [49] Valentini, G.L., Lassonde, W., Khan, S.U., Min-Allah, N., Madani, S.A., Li, J., Zhang, L., Wang, L., Ghani, N., Kolodziej, J. and Li, H., 2013. An overview of energy efficiency techniques in cluster computing systems. Cluster Computing, 16(1), pp.3-15. [50] Kusic, D., Kephart, J.O., Hanson, J.E., Kandasamy, N. and Jiang, G., 2009. Power and performance management of virtualized computing environments via lookahead control. Cluster computing, 12(1), pp.1-15. [51] Preeth, E.N., Mulerickal, F.J.P., Paul, B. and Sastri, Y., 2015, November. Evaluation of Docker containers based on hardware utilization. In Control Communication & Computing India (ICCC), 2015 International Conference on (pp. 697-700). IEEE.

７

２

Appendix A the source code from front end

Echarts.js import React from 'react'; // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入柱状图 import 'echarts/lib/chart/bar'; import 'echarts/lib/chart/line'; import 'echarts/lib/chart/lines'; import 'echarts/lib/chart/pie'; // 引入提示框和标题组件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/title'; import 'echarts/lib/component/dataset'; import 'echarts/lib/component/dataZoom'; import { Form, Icon, Input, Button, Select } from 'antd'; class MscCharts extends React.Component{ constructor(props){ super(props); this.state = { conductivity : "1", estatic : "60", einfinity : "21.43600845", tau : "2.73953464E-011", changeConductivity : "0" }; } setDatasetForEcharts(dataSet0,dataSet1,dataSet2,dataSet3,changeConductivity,changeTau,myChart){ //changeConductivity var percentChangeConductivity = 1+parseFloat(changeConductivity)/100; //changeTau 2.73953464E-011 var percentChangeTau = (1+ parseFloat(changeTau)/100)*2.73953464E-011;

７

３

var xYLogDataListForLine1 = []; var xYLogDataListForLine2 = []; //这是给第一条线设置 xy 数据的 for(var index in dataSet0){ var tempList = new Array(); tempList[0] = dataSet0[index]; tempList[1] = dataSet1[index]; xYLogDataListForLine1.push(tempList); } //这是给第二条线设置 xy 数据的 for(var index in dataSet0){ var tempList = new Array(); tempList[0] = dataSet0[index]; tempList[1] = dataSet2[index]; xYLogDataListForLine2.push(tempList); } const option = { title: { }, tooltip: { trigger: 'axis' }, legend: { data:['relative permittivity','conductivity'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {show:true} } }, xAxis: {

７

４

type: 'log' }, yAxis: { type:"log" } , series: [ { name:'relative permittivity', type:'line', showSymbol : false, data:xYLogDataListForLine1 }, { name:'conductivity', type:'line', showSymbol : false, data: xYLogDataListForLine2 } ] }; fetch("http://localhost:8081/msc-web/getDatasetByParams?conductivity="+percentChangeConductivity+"&estatic=60&einfinity=21.43600845&tau="+percentChangeTau ,{method:'GET'}).then(res=>res.json()).then( json=>{ option.legend.data.push('change relative permittivity') var xYLogDataListForChangeRP = []; //这是给第二条线设置 xy 数据的 for(var index in json.data[0]){ var tempList = new Array(); tempList[0] = json.data[0][index]; tempList[1] = json.data[1][index]; xYLogDataListForChangeRP.push(tempList); } var changeRPDataSet = { name:'change relative permittivity', type:'line', showSymbol : false,

７

５

data:xYLogDataListForChangeRP } option.series.push(changeRPDataSet) option.legend.data.push("change conductivity") var xYLogDataListForChangeCond = []; //这是给第二条线设置 xy 数据的 for(var index in json.data[0]){ var tempList = new Array(); tempList[0] = json.data[0][index]; tempList[1] = json.data[2][index]; xYLogDataListForChangeCond.push(tempList); } var changeConductivityDataSet = { name:'change conductivity', type:'line', showSymbol : false, data:xYLogDataListForChangeCond } option.series.push(changeConductivityDataSet) myChart.setOption(option); } ); var result = document.getElementById("result"); fetch("http://localhost:8081/msc-web/getSubResultByParams?conductivity="+percentChangeConductivity+"&estatic=60&einfinity=21.43600845&tau="+percentChangeTau ,{method:'GET'}).then(res=>res.json()).then( json=>{ //console.log(json.data); document.getElementById("result").value = json.data; } );

７

６

} setFormInputValue(){ this.props.form.setFieldsValue({ "conductivity" : this.state.conductivity, "estatic" : this.state.estatic, "einfinity" : this.state.einfinity, "tau" : this.state.tau, "changeConductivity" : this.state.changeConductivity }); } componentDidMount() { // 基于准备好的 dom，初始化 echarts 实例 //设置输入框的值 this.setFormInputValue(); var myChart = echarts.init(document.getElementById('main')); var myFetchOptions = { method : 'GET' } fetch("http://localhost:8081/msc-web/getDatasetByParams?conductivity=1.0&estatic=60&einfinity=21.43600845&tau=2.73953464E-011" ,myFetchOptions).then(res=>res.json()).then( json=>{ this.setDatasetForEcharts(json.data[0],json.data[1],json.data[2],json.data[3],0,0,myChart); } ); } handleSubmit(e){ e.preventDefault(); var formData= this.props.form.getFieldsValue();

７

７

var myChart = echarts.init(document.getElementById('main')); //数据正确获取，但是有待前端校验 fetch("http://localhost:8081/msc-web/getDatasetByParams?conductivity="+formData.conductivity+"&estatic=" +formData.estatic+"&einfinity="+formData.einfinity+"&tau="+formData.tau ,{method:'GET'}).then(res=>res.json()).then( json=>{ this.setDatasetForEcharts(json.data[0],json.data[1],json.data[2],json.data[3],formData.changeConductivity,formData.changeTau,myChart); } ); } handleChange(val){ console.log(val.key); fetch("http://localhost:8081/msc-web/getParametersByName?tissueName="+val.label ,{method:'GET'}).then(res=>res.json()).then( json=>{ console.log(json) this.setState({conductivity:json.conductivity, estatic:json.estatic, einfinity:json.einfinity,tau:json.tau}); {/*设置后台传来的参数*/} this.setFormInputValue(); } ); } render(){ const FormItem = Form.Item; const {getFieldDecorator} = this.props.form; const Option = Select.Option; return( <div> <Form layout="inline" onSubmit={this.handleSubmit.bind(this)}> {/*conductivity 输入框*/} <div>

７

８

<span style={{paddingLeft:50}}>conductivity</span> <span style={{paddingLeft:150}}>e-static</span> <span style={{paddingLeft:150}}>e-infinity</span> <span style={{paddingLeft:150}}>tau</span> </div> <FormItem style = {{paddingLeft : 4}}> {getFieldDecorator('conductivity', { rules: [{ required: true, message: 'Please input conductivity!' }], })( <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="conductivity" /> )} </FormItem> {/*estatic 输入框*/} <FormItem style = {{paddingLeft : 4}}> {getFieldDecorator('estatic', { rules: [{ required: true, message: 'Please input e-static!' }], })( <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="e-static" /> )} </FormItem> {/*einfinity 输入框*/} <FormItem style = {{paddingLeft : 4}}> {getFieldDecorator('einfinity', { rules: [{ required: true, message: 'Please input e-infinity!' }], })( <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="e-infinity" /> )} </FormItem> {/*tau 输入框*/} <FormItem style = {{paddingLeft : 4}}> {getFieldDecorator('tau', { rules: [{ required: true, message: 'Please input tau!' }], })( <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="tau" /> )} </FormItem>

７

９

<div> <div> <span style={{paddingLeft:50}}>change-conductivity</span> <span style={{paddingLeft:50}}>change-tau</span> </div> <FormItem style = {{paddingLeft : 4}}> {getFieldDecorator('changeConductivity', { rules: [{ required: true, message: 'Please input change-conductivity!' }], })( <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="change-conductivity" /> )} </FormItem> <FormItem style = {{paddingLeft : 4}}> {getFieldDecorator('changeTau', { rules: [{ required: true, message: 'Please input change-tau!' }], })( <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="change-tau" /> )} </FormItem> <Select labelInValue defaultValue={{ key: 'lucy' }} style={{ width: 120 }} onChange={this.handleChange.bind(this)}> <Option value="AdrenalGland">Adrenal Gland</Option> <Option value="Bile">Bile</Option> <Option value="Blood">Blood</Option> <Option value="BloodVesselWall">Blood Vessel Wall</Option> <Option value="BoneCancellous">Bone (Cancellous)</Option> <Option value="BoneCortical">Bone (Cortical)</Option> <Option value="BoneMarrowRed">Bone Marrow (Red)</Option> <Option value="BoneMarrowYellow">Bone Marrow (Yellow)</Option> <Option value="Brain">Brain</Option> <Option value="BrainGreyMatter">Brain (Grey Matter)</Option> <Option value="BrainWhiteMatter">Brain (White Matter)</Option> <Option value="BreastFat">Breast Fat</Option> <Option value="BreastGland">Breast Gland</Option> <Option value="Bronchi">Bronchi</Option> <Option value="Cartilage">Cartilage</Option> <Option value="Cerebellum">Cerebellum</Option> <Option value="CerebrospinalFluid">Cerebrospinal Fluid</Option>

８

０

<Option value="Cervix">Cervix</Option> <Option value="CommissuraAnterior">Commissura Anterior </Option> <Option value="CommissuraPosterior">Commissura Posterior</Option> <Option value="ConnectiveTissue">Connective Tissue</Option> <Option value="Diaphragm">Diaphragm</Option> <Option value="DuctusDeferens">Ductus Deferens</Option> <Option value="Dura">Dura</Option> <Option value="Epididymis">Epididymis</Option> <Option value="Esophagus">Esophagus</Option> <Option value="Eye">Eye</Option> <Option value="Fat">Fat</Option> <Option value="Gallbladder">Gallbladder</Option> <Option value="Heart">Heart</Option> <Option value="Hippocampus">Hippocampus</Option> <Option value="Hypophysis">Hypophysis</Option> <Option value="Hypothalamus">Hypothalamus</Option> <Option value="IntervertebralDisc">Intervertebral Disc</Option> <Option value="LargeIntestine">Large Intestine</Option> <Option value="Kidney">Kidney</Option> <Option value="Larynx">Larynx</Option> <Option value="Liver">Liver</Option> <Option value="Lung">Lung</Option> <Option value="Lymphnode">Lymphnode</Option> <Option value="Mandible">Mandible</Option> <Option value="MedullaOblongata">Medulla Oblongata</Option> <Option value="Meniscus">Meniscus</Option> <Option value="Midbrain">Midbrain</Option> <Option value="MucousMembrane">Mucous Membrane</Option> <Option value="Muscle">Muscle</Option> <Option value="Nerve">Nerve</Option> <Option value="Ovary">Ovary</Option> <Option value="Pancreas">Pancreas</Option> <Option value="Pons">Pons</Option> <Option value="Prostate">Prostate</Option> <Option value="SalivaryGland">Salivary Gland</Option> <Option value="SATSubcutaneousFat">SAT Subcutaneous Fat</Option> <Option value="Seminalvesicle">Seminal vesicle</Option> <Option value="Skin">Skin</Option> <Option value="SkullCancellous">Skull Cancellous</Option> <Option value="SmallIntestine">Small Intestine</Option> <Option value="SpinalCord">Spinal Cord</Option> <Option value="Spleen">Spleen</Option> <Option value="Stomach">Stomach</Option> <Option value="Testis">Testis</Option>

８

１

<Option value="Thalamus">Thalamus</Option> <Option value="Thymus">Thymus</Option> <Option value="ThyroidGland">Thyroid Gland</Option> <Option value="Tongue">Tongue</Option> <Option value="Tooth">Tooth</Option> <Option value="Trachea">Trachea</Option> <Option value="UrinaryBladderWall">Urinary Bladder Wall</Option> <Option value="Uterus">Uterus</Option> <Option value="Vagina">Vagina</Option> <Option value="Vertebrae">Vertebrae</Option> <Option value="Water">Water</Option> </Select> &nbsp; &nbsp; &nbsp; <FormItem> <Button type="primary" htmlType="submit" > submit </Button> </FormItem> </div> </Form> <div id="main" style={{ width: 900, height: 400 }}></div> <div> &nbsp;&nbsp;&nbsp;the difference: &nbsp; &nbsp; <input id="result" type="text"></input> </div> </div> ); } } MscCharts = Form.create()(MscCharts); export default MscCharts;

MscWebPage.js

８

２

import React from 'react'; import 'antd/dist/antd.css'; import MscCharts from './MscCharts'; import MscWebPageHeader from './MscWebPageHeader'; import MscWebPageFooter from './MscWebPageFooter'; import MscWebPageContent from './MscWebPageContent'; import MscWebPageSider from './MscWebPageSider' import {Layout} from 'antd'; class MscWebPage extends React.Component{ render(){ const { Header, Footer, Sider, Content } = Layout; return( <Layout> <MscWebPageHeader></MscWebPageHeader> <Layout> <MscWebPageSider></MscWebPageSider> <MscWebPageContent></MscWebPageContent> </Layout> <MscWebPageFooter style={{textAlign: 'center' }}></MscWebPageFooter> </Layout> ); } } export default MscWebPage;

MscWebPageContent.js import React from 'react'; import 'antd/dist/antd.css'; import {Row, Col,Card,Layout} from 'antd'; import MscCharts from './MscCharts'; export default class MscWebPageContent extends React.Component { render() { const { Content } = Layout; return ( <Content> <MscCharts></MscCharts> </Content>

８

３

); }; }

MscWebPageFooter.js import React from 'react'; import 'antd/dist/antd.css'; import {Row, Col,Layout} from 'antd'; export default class MscWebPageFooter extends React.Component { render() { const { Footer } = Layout; return ( <Footer> <Row> <Col span={2}></Col> <Col span={20}> &copy;&nbsp;2018 Mscproject Bowang and Fumie . All Rights Reserved. </Col> <Col span={2}></Col> </Row> </Footer> ); }; }

MscWebPageHeader.js import React from 'react'; import 'antd/dist/antd.css'; import { Breadcrumb,Menu, Icon , Layout} from 'antd'; export default class MscWebPageHeader extends React.Component {

８

４

render() { const { Header } = Layout; return ( <Header className="header"> <div className="logo" /> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} style={{ lineHeight: '64px' }} > <Menu.Item key="1">nav 1</Menu.Item> <Menu.Item key="2">nav 2</Menu.Item> <Menu.Item key="3">nav 3</Menu.Item> </Menu> </Header> ); }; }

MscWebPageSider.js

import React from 'react'; import { Layout,Menu,Icon} from 'antd'; import 'antd/dist/antd.css'; class MscWebPageSider extends React.Component{ render(){ const { Sider } = Layout; const { SubMenu } = Menu; return( <Sider width={200} style={{ background: '#fff' }}> <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} style={{ height: '100%', borderRight: 0 }}

８

５

> <SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}> <Menu.Item key="1">Line chart</Menu.Item> <Menu.Item key="2">option2</Menu.Item> <Menu.Item key="3">option3</Menu.Item> <Menu.Item key="4">option4</Menu.Item> </SubMenu> <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}> <Menu.Item key="5">option5</Menu.Item> <Menu.Item key="6">option6</Menu.Item> <Menu.Item key="7">option7</Menu.Item> <Menu.Item key="8">option8</Menu.Item> </SubMenu> <SubMenu key="sub3" title={<span><Icon type="notification" />subnav 3</span>}> <Menu.Item key="9">option9</Menu.Item> <Menu.Item key="10">option10</Menu.Item> <Menu.Item key="11">option11</Menu.Item> <Menu.Item key="12">option12</Menu.Item> </SubMenu> </Menu> </Sider> ); } } export default MscWebPageSider;

Index.js import React from 'react' import ReactDom from 'react-dom' import { HashRouter, Link, Route, Redirect, Switch } from 'react-router-dom'; import { createStore,applyMiddleware,compose } from 'redux' import { Provider } from 'react-redux'; import thunk from 'redux-thunk' import App from './App' import Login from './container/login/login'; import Register from './container/register/register'; import BossInfo from './container/bossinfo/bossinfo'; import reducers from './reducer' import AuthRoute from './component/authroute/authroute';

８

６

import MscWebPage from './container/msc/MscWebPage'; ReactDom.render( <HashRouter> <div> <Route path="/msc" component= {MscWebPage}></Route> </div> </HashRouter>, document.getElementById('root'));

Appendix B the source code from back end

TissueMapper package cn.fumie.mapper; import org.apache.ibatis.annotations.Param; import cn.fumie.pojo.Tissue; public interface TissueMapper { public Tissue getTissueInfoByName(@Param(value = "tissueName") String tissueName); }

TissueMapper.xml <?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"> <!-- namespace：命名空间，用于隔离 sql，还有一个很重要的作用，后面会讲 -->

８

７

<mapper namespace="cn.fumie.mapper.TissueMapper"> <select id="getTissueInfoByName" parameterType="String" resultType="cn.fumie.pojo.Tissue"> SELECT * from tissue_info where tissue = #{tissueName} </select> </mapper>

GetDatasetService package cn.fumie.service; import java.util.ArrayList; import java.util.List; public interface GetDatasetService { public ArrayList<List> getDatasetByParams(ArrayList<String> paramList); }

GetParametersByTissueNameService package cn.fumie.service; import cn.fumie.pojo.Tissue; public interface GetParametersByTissueNameService { public Tissue getParameters(String tissueName); }

GetSubResultService package cn.fumie.service;

８

８

import java.util.ArrayList; public interface GetSubResultService { public abstract double getSubResultByParamList(ArrayList<String> paramList); }

ComplexData package cn.fumie.pojo; public class ComplexData { private double realPart; private double virtualPart; //constructor public ComplexData(double realPart,double virtualPart) { this.realPart = realPart; this.virtualPart = virtualPart; } /* * + - * / */ // cmplx A + cmplx B public ComplexData add(ComplexData other){ double realTmp = this.realPart + other.getRealPart(); double virtualTmp = this.virtualPart + other.getVirtualPart(); return new ComplexData(realTmp, virtualTmp); } // - public ComplexData sub(ComplexData other) { double realTmp = this.realPart - other.getRealPart(); double virtualTmp = this.virtualPart - other.getVirtualPart();

８

９

return new ComplexData(realTmp, virtualTmp); } public ComplexData multiply(ComplexData other) { double realTmp; double virtualTmp; double a,b,c,d; a = this.realPart; b = this.virtualPart; c = other.getRealPart(); d = other.getVirtualPart(); realTmp = (a*c) - (b*d); virtualTmp = (b*c) + (a*d); return new ComplexData(realTmp, virtualTmp); } public ComplexData div(ComplexData other) { double realTmp; double virtualTmp; double a,b,c,d; a = this.realPart; b = this.virtualPart; c = other.getRealPart(); d = other.getVirtualPart(); realTmp = (a*c+b*d)/(c*c+d*d); virtualTmp = (b*c-a*d)/(c*c+d*d); return new ComplexData(realTmp, virtualTmp); } /** * gets and setters * @return */ public double getRealPart() { return realPart; }

９

０

public void setRealPart(double realPart) { this.realPart = realPart; } public double getVirtualPart() { return virtualPart; } public void setVirtualPart(double virtualPart) { this.virtualPart = virtualPart; } }

Tissue package cn.fumie.pojo; import java.io.Serializable; /** * @author Administrator * */ public class Tissue implements Serializable { private String tissue; private String conductivity; private String estatic; private String einfinity; private String tau; public Tissue() { } public String getTissue() { return tissue;

９

１

} public void setTissue(String tissue) { this.tissue = tissue; } public String getConductivity() { return conductivity; } public void setConductivity(String conductivity) { this.conductivity = conductivity; } public String getEstatic() { return estatic; } public void setEstatic(String estatic) { this.estatic = estatic; } public String getEinfinity() { return einfinity; } public void setEinfinity(String einfinity) { this.einfinity = einfinity; } public String getTau() { return tau; } public void setTau(String tau) { this.tau = tau; } @Override public String toString() { return "Tissue [tissue=" + tissue + ", conductivity=" + conductivity + ", estatic=" + estatic + ", einfinity=" + einfinity + ", tau=" + tau + "]"; }

９

２

}

GetDatasetServiceImpl package cn.fumie.service.impl; import java.util.ArrayList; import java.util.List; import org.springframework.stereotype.Service; import cn.fumie.pojo.ComplexData; import cn.fumie.service.GetDatasetService; @Service public class GetDatasetServiceImpl implements GetDatasetService { private static final double PI = 3.1415926536d; private static final double ep_0 = 8.854E-12d; private static ComplexData ep_cal_0(double omg, double omg_0, double ep_0, double ep_infty, double Dlt_ep_1, double tau_1_n1, double sg_0) { // 1 2 3 4 5 // ep_cal_0=(cmplx(ep_infty,0.0)+cmplx(Dlt_ep_1,0.0)/cmplx(1.0,tau_1_nl*omg/omg_0))+(cmplx(sg_0,0.0)/cmplx(0.0,omg*ep_0)) ComplexData ep_cal_0; ComplexData cmplx_1 = new ComplexData(ep_infty, 0.0d); ComplexData cmplx_2 = new ComplexData(Dlt_ep_1, 0.0d); ComplexData cmplx_3 = new ComplexData(1.0d, tau_1_n1 * omg / omg_0);

９

３

ComplexData cmplx_4 = new ComplexData(sg_0, 0.0d); ComplexData cmplx_5 = new ComplexData(0.0d, omg * ep_0); ComplexData tmp1 = cmplx_1.add(cmplx_2.div(cmplx_3)); ComplexData tmp2 = cmplx_4.div(cmplx_5); ep_cal_0 = tmp1.add(tmp2); return ep_cal_0; } @Override public ArrayList<List> getDatasetByParams(ArrayList<String> paramList) { Double omg_0, sg_0, es, ep_infty, tau_1, losst1, losst2; Double Dlt_ep_1, tau_1_nl; //最外层 list ArrayList<List> wrapDatasetList = new ArrayList<>(); //四个 dataset 存放各自的数据 List<Double> output1Dataset = new ArrayList<Double>(); List<Double> output2Dataset = new ArrayList<Double>(); List<Double> output3Dataset = new ArrayList<Double>(); List<Double> output4Dataset = new ArrayList<Double>(); //获取四个参数 sg_0 = Double.valueOf(paramList.get(0)); es = Double.valueOf(paramList.get(1)); ep_infty = Double.valueOf(paramList.get(2)); tau_1 = Double.valueOf(paramList.get(3)); omg_0 = 2.0 * PI * (1E9); Dlt_ep_1 = es - ep_infty; tau_1_nl = tau_1 * omg_0; for (int i = 1; i <= 6000; i++) { int frequency = i; double omg1 = 2.0 * PI * frequency * 1E8; double outPut1; double outPut2; double outPut3; double outPut4; losst1 = sg_0 / omg1 / ep_0 + omg1 * tau_1 * Dlt_ep_1 / (1 + (omg1 * tau_1) * (omg1 * tau_1)); losst2 = ep_infty + Dlt_ep_1 / (1 + (omg1 * tau_1) * (omg1 * tau_1));

９

４

// ! frequency, relative permittivity, conductivity, losstangent // write(20,*)frequency(1)*1e8,real(ep_cal_0(omg(1),omg_0,ep_0,ep_infty,Dlt_ep_1,tau_1_nl,sg_0)),& // -ep_0*omg(1)*aimag(ep_cal_0(omg(1),omg_0,ep_0,ep_infty,Dlt_ep_1,tau_1_nl,sg_0)),losst1/losst2 // outPut1: outPut1 = frequency * (1E8); output1Dataset.add(Double.valueOf(outPut1)); // outPut2: outPut2 = ep_cal_0(omg1, omg_0, ep_0, ep_infty, Dlt_ep_1, tau_1_nl, sg_0).getRealPart(); output2Dataset.add(Double.valueOf(outPut2)); // outPut3: outPut3 = -ep_0 * omg1 * (ep_cal_0(omg1, omg_0, ep_0, ep_infty, Dlt_ep_1, tau_1_nl, sg_0).getVirtualPart()); output3Dataset.add(Double.valueOf(outPut3)); // outPut4: outPut4 = losst1 / losst2; // System.out.println(outPut1 + "\t" + outPut2+"\t"+outPut3 + "\t" + // outPut4); output4Dataset.add(Double.valueOf(outPut4)); } wrapDatasetList.add(output1Dataset); wrapDatasetList.add(output2Dataset); wrapDatasetList.add(output3Dataset); wrapDatasetList.add(output4Dataset); return wrapDatasetList; } }

GetParametersByTissueNameServiceImpl package cn.fumie.service.impl; import org.springframework.beans.factory.annotation.Autowired;

９

５

import org.springframework.stereotype.Service; import cn.fumie.mapper.TissueMapper; import cn.fumie.pojo.Tissue; import cn.fumie.service.GetParametersByTissueNameService; @Service public class GetParametersByTissueNameServiceImpl implements GetParametersByTissueNameService { @Autowired private TissueMapper tissueMapper; @Override public Tissue getParameters(String tissueName) { Tissue tissue = tissueMapper.getTissueInfoByName(tissueName); return tissue; } }

GetSubResultServiceImpl package cn.fumie.service.impl; import java.util.ArrayList; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import cn.fumie.service.GetDatasetService; import cn.fumie.service.GetSubResultService; @Service public class GetSubResultServiceImpl implements GetSubResultService { @Autowired private GetDatasetService getDatasetService; //

９

６

http://localhost:8084/getDatasetByParams?conductivity=1.0&estatic=60&einfinity=21.43600845&tau=2.73953464E-011 @Override public double getSubResultByParamList(ArrayList<String> paramList) { ArrayList<String> baseParamList = new ArrayList<>(); baseParamList.add(paramList.get(0)); baseParamList.add(paramList.get(1)); // 21.43600845 einfinity baseParamList.add("21.43600845"); // tau 2.73953464E-011 baseParamList.add("2.73953464E-011"); ArrayList<List> resultListBase = getDatasetService.getDatasetByParams(baseParamList); ArrayList<List> toBeCalculate = getDatasetService.getDatasetByParams(paramList); // numerator and denominator double firstNumerator = 0; double tmpResultOfFirstNumerator; double secondNumerator = 0; double tmpResultOfSecondNumerator; double firstDenominator = 0; double tmpResultOfFirstDenomiator; double secondDenominator = 0; double tmpResultOfSecondDenomiator; // index 1 frequence of resultListBase ： relative permitivitty index:2 // conductivity // index 1 frequence of toBeCalculate ： relative permitivitty index:2 // conductivity for (int i = 0; i < resultListBase.get(0).size(); i++) { tmpResultOfFirstDenomiator = (Double) toBeCalculate.get(1).get(i); firstDenominator += Math.pow(tmpResultOfFirstDenomiator, 2); tmpResultOfSecondDenomiator = (Double) toBeCalculate.get(2).get(i); secondDenominator += Math.pow(tmpResultOfSecondDenomiator, 2); tmpResultOfFirstNumerator = (Double) toBeCalculate.get(1).get(i) - (Double) resultListBase.get(1).get(i); firstNumerator += Math.pow(tmpResultOfFirstNumerator, 2);

９

７

tmpResultOfSecondNumerator = (Double) toBeCalculate.get(2).get(i) - (Double) resultListBase.get(2).get(i); secondNumerator += Math.pow(tmpResultOfSecondNumerator, 2); } double result = Math.pow((firstNumerator/firstDenominator + secondNumerator/secondDenominator), 0.5); return result; } }

GetSubResultController package cn.fumie.controllers; import java.util.ArrayList; 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.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import cn.chat.common.utils.ChatResult; import cn.fumie.service.GetDatasetService; import cn.fumie.service.GetSubResultService; @Controller public class GetSubResultController { @Autowired private GetSubResultService getSubResultService; @RequestMapping("/getSubResultByParams") @ResponseBody public ChatResult getSubResult(@RequestParam(value = "conductivity") String conductivity, @RequestParam(value = "estatic") String estatic, @RequestParam(value = "einfinity") String einfinity, @RequestParam(value = "tau") String tau) {

９

８

Double result; ArrayList<String> paramList = new ArrayList<String>(); paramList.add(conductivity); paramList.add(estatic); paramList.add(einfinity); paramList.add(tau); result = getSubResultService.getSubResultByParamList(paramList); return ChatResult.ok(result); } }

LineChartsDataController package cn.fumie.controllers; import java.lang.reflect.Array; import java.util.ArrayList; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import cn.chat.common.utils.ChatResult; import cn.fumie.service.GetDatasetService; @Controller public class LineChartsDataController { // conductivity,1 // e-static,60 // e-infinity,21.43600845 // tau,2.73953464E-011 @Autowired

９

９

private GetDatasetService getDataService; @RequestMapping("/getDatasetByParams") @ResponseBody public ChatResult getDatasetByParams(@RequestParam(value="conductivity") String conductivity, @RequestParam(value="estatic") String estatic, @RequestParam(value="einfinity") String einfinity, @RequestParam(value="tau") String tau){ ArrayList<String> paramList = new ArrayList<String>(); paramList.add(conductivity); paramList.add(estatic); paramList.add(einfinity); paramList.add(tau); ArrayList<List> wrappedList = getDataService.getDatasetByParams(paramList); return ChatResult.ok(wrappedList); } }

ParametersController package cn.fumie.controllers; 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 cn.fumie.pojo.Tissue; import cn.fumie.service.GetParametersByTissueNameService; @Controller public class ParametersController { @Autowired private GetParametersByTissueNameService getParametersByTissueNameService;

１

０

@RequestMapping("getParametersByName") @ResponseBody public Tissue getParametersByName(String tissueName){ Tissue tissue = getParametersByTissueNameService.getParameters(tissueName); return tissue; } }

Tissue_info.sql /* Navicat MySQL Data Transfer Source Server : e3mall Source Server Version : 50549 Source Host : localhost:3306 Source Database : bob-video Target Server Type : MYSQL Target Server Version : 50549 File Encoding : 65001 Date: 2018-07-22 23:27:43 */ SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for tissue_info -- ---------------------------- DROP TABLE IF EXISTS `tissue_info`; CREATE TABLE `tissue_info` ( `id` int(255) NOT NULL AUTO_INCREMENT, `tissue` varchar(255) DEFAULT NULL, `conductivity` varchar(255) DEFAULT NULL, `estatic` varchar(255) DEFAULT NULL, `einfinity` varchar(255) DEFAULT NULL, `tau` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=159 DEFAULT CHARSET=utf8;

１

０

-- ---------------------------- -- Records of tissue_info -- ---------------------------- INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('AdrenalGland', '0.64111143', '61.7025', '54.749916', '6.45986e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Bile', '1.5769525', '72.1744', '33.449875', '1.61503e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Blood', '1.2556583', '62.8879', '30.560495', '2.09875e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('BloodVesselWall', '0.48223549', '46.2283', '23.076792', '2.22904e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('BoneCancellous', '0.18264350', '22.05', '10.862353', '3.76498e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('BoneCortical', '6.86449483E-02', '12.9226', '6.6928921', '3.18564e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('BoneMarrowRed', '0.16265631', '11.7155', '6.0512877', '3.21354e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('BoneMarrowYellow', '2.44240686E-02', '5.61835', '4.1296244', '2.7601e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Brain', '0.82626158', '58.1318', '35.184494', '6.82001e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('BrainGreyMatter', '0.59528196', '56.4237', '33.028919', '3.51227e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('BrainWhiteMatter', '0.34840527', '41.2657', '24.349447', '3.35099e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('BreastFat', '3.03109586E-02', '5.48102', '3.0944638', '2.4034e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('BreastGland', '0.80907768', '60.5428', '27.707203', '1.77064e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Bronchi', '0.56554735', '43.1761', '22.116007', '2.24651e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Cartilage', '0.49353179', '44.5443', '19.366798', '2.99404e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Cerebellum', '0.82626158', '58.1318', '35.184494', '6.82001e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('CerebrospinalFluid', '2.1439195', '70.392', '33.118412', '1.81442e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Cervix', '0.75898969', '50.7413', '24.792408', '1.91138e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('CommissuraAnterior', '0.34840527', '41.2657', '24.349447', '3.35099e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('CommissuraPosterior', '0.34840527', '41.2657', '24.349447', '3.35099e-11');

１

０

INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('ConnectiveTissue', '0.50000471', '46.7069', '16.763996', '2.06461e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Diaphragm', '0.72510523', '56.0591', '28.801765', '1.89781e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('DuctusDeferens', '0.48223549', '46.2283', '23.076792', '2.22904e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Dura', '0.75437397', '46.0105', '25.509676', '2.51721e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Epididymis', '0.93390799', '62.0537', '31.272825', '2.10959e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Esophagus', '0.91904330', '66.2692', '31.467064', '1.89506e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Eye', '1.0690882', '57.8264', '32.341209', '2.86942e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Fat', '7.03456402E-02', '11.4869', '6.8031087', '2.2056e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Gallbladder', '1.0422584', '60.7297', '28.154818', '1.58956e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Heart', '0.77810383', '65.0523', '38.051041', '4.09746e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Hippocampus', '0.59528196', '56.4237', '33.028919', '3.51227e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Hypophysis', '0.80907768', '60.5428', '27.707203', '1.77064e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Hypothalamus', '0.59528196', '56.4237', '33.028919', '3.51227e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('IntervertebralDisc', '0.86342996', '46.1697', '33.246803', '5.96754e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('LargeIntestine', '0.71657884', '61.102', '34.632797', '3.11084e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Kidney', '0.85727221', '67.4668', '39.836205', '6.04717e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Larynx', '0.49353179', '44.5443', '19.366798', '2.99404e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Liver', '0.52038151', '50.132', '27.957882', '3.55832e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Lung', '0.31964585', '23.3201', '13.864612', '3.34277e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Lymphnode', '0.60867411', '81.1771', '75.363014', '6.67747e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Mandible', '6.86449483E-02', '12.9226', '6.6928921', '3.18564e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('MedullaOblongata', '0.82626158', '58.1318', '35.184494', '6.82001e-11');

１

０

INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Meniscus', '0.49353179', '44.5443', '19.366798', '2.99404e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Midbrain', '0.82626158', '58.1318', '35.184494', '6.82001e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('MucousMembrane', '0.72510523', '56.0591', '28.801765', '1.89781e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Muscle', '0.72510523', '56.0591', '28.801765', '1.89781e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Nerve', '0.35997066', '34.7361', '20.963312', '3.64273e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Ovary', '0.79034734', '59.1994', '33.360531', '6.64076e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Pancreas', '0.80907768', '60.5428', '27.707203', '1.77064e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Penis', '0.48223549', '46.2283', '23.076792', '2.22904e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('PinealBody', '0.80907768', '60.5428', '27.707203', '1.77064e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Placenta', '1.2556583', '62.8879', '30.560495', '2.09875e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Pons', '0.82626158', '58.1318', '35.184494', '6.82001e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Prostate', '0.93390799', '62.0537', '31.272825', '2.10959e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('SalivaryGland', '0.69001675', '77.5258', '71.222160', '6.63725e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('SATSubcutaneousFat', '7.03456402E-02', '11.4869', '6.8031087', '2.2056e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Seminalvesicle', '0.93390799', '62.0537', '31.272825', '2.10959e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Skin', '0.51726604', '49.7762', '32.188160', '8.56641e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('SkullCancellous', '0.18264350', '22.05', '10.862353', '3.76498e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('SmallIntestine', '1.7017442', '65.7605', '39.162617', '4.57756e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('SpinalCord', '0.35997066', '34.7361', '20.963312', '3.64273e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Spleen', '0.84450853', '62.5545', '37.083855', '4.25834e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Stomach', '0.91904330', '66.2692', '31.467064', '1.89506e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Testis', '0.93390799', '62.0537', '31.272825', '2.10959e-11');

１

０

INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Thalamus', '0.59528196', '56.4237', '33.028919', '3.51227e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Thymus', '0.64591056', '53.369', '48.574684', '6.8067e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('ThyroidGland', '0.80907768', '60.5428', '27.707203', '1.77064e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Tongue', '0.69357103', '56.5134', '28.227257', '2.04259e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Tooth', '6.86449483E-02', '12.9226', '6.6928921', '3.18564e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Trachea', '0.56554735', '43.1761', '22.116007', '2.24651e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('UrinaryBladderWall', '0.30013996', '19.3283', '9.6647158', '2.08136e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Uterus', '0.96932393', '63.0542', '33.099937', '2.32533e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Vagina', '0.71657884', '61.102', '34.632797', '3.11084e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Vertebrae', '6.86449483E-02', '12.9226', '6.6928921', '3.18564e-11'); INSERT INTO `tissue_info`(tissue,conductivity,estatic,einfinity,tau) VALUES ('Water', '4.98608142E-06', '84.64', '5.8849688', '8.35721e-12');