VueJS ajax综合案例

- 日理万妓 2022-01-22 03:39 372阅读 0赞

# 一、目录结构和注意事项 #

## 1.目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70]

## 2.注意事项 ##

### （1）data.html里面的Vue ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 1]

### （2）箭头函数 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 2]

# 二、引入依赖 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 3]

<?xml version="1.0" encoding="UTF-8"?>
    
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
    
      <groupId>com.william</groupId>
      <artifactId>vue_demo_01</artifactId>
      <version>1.0-SNAPSHOT</version>
      <packaging>war</packaging>
    
      <name>vue_demo_01 Maven Webapp</name>
      
      <url>http://www.example.com</url>
    
      <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
        
        <spring.version>5.0.2.RELEASE</spring.version>
        <spring.security.version>5.0.1.RELEASE</spring.security.version>
      </properties>
    
      <dependencyManagement>
        <dependencies>
          <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${spring.version}</version>
          </dependency>
        </dependencies>
      </dependencyManagement>
    
      <dependencies>
        
        
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-context</artifactId>
        </dependency>
        
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-tx</artifactId>
          <version>${spring.version}</version>
        </dependency>
        
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-jdbc</artifactId>
          <version>${spring.version}</version>
        </dependency>
        
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-test</artifactId>
          <version>${spring.version}</version>
        </dependency>
        
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-webmvc</artifactId>
          <version>${spring.version}</version>
        </dependency>
        
        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis</artifactId>
          <version>3.4.5</version>
        </dependency>
        
        <dependency>
          <groupId>org.mybatis</groupId>
          <artifactId>mybatis-spring</artifactId>
          <version>1.3.1</version>
        </dependency>
        
        <dependency>
          <groupId>org.aspectj</groupId>
          <artifactId>aspectjweaver</artifactId>
          <version>1.8.7</version>
        </dependency>
        
        <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>druid</artifactId>
          <version>1.1.9</version>
        </dependency>
        
        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>4.12</version>
          <scope>test</scope>
        </dependency>
    
        
        
        <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>jsp-api</artifactId>
          <version>2.0</version>
          <scope>provided</scope>
        </dependency>
        
        <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>servlet-api</artifactId>
          <version>2.5</version>
          <scope>provided</scope>
        </dependency>
        
        <dependency>
          <groupId>log4j</groupId>
          <artifactId>log4j</artifactId>
          <version>1.2.17</version>
        </dependency>
        <dependency>
          <groupId>org.apache.logging.log4j</groupId>
          <artifactId>log4j-api</artifactId>
          <version>2.10.0</version>
        </dependency>
        <dependency>
          <groupId>org.apache.logging.log4j</groupId>
          <artifactId>log4j-core</artifactId>
          <version>2.10.0</version>
        </dependency>
        <dependency>
          <groupId>org.apache.logging.log4j</groupId>
          <artifactId>log4j-web</artifactId>
          <version>2.9.1</version>
        </dependency>
        <dependency>
          <groupId>org.slf4j</groupId>
          <artifactId>slf4j-api</artifactId>
          <version>1.7.25</version>
        </dependency>
        <dependency>
          <groupId>org.apache.logging.log4j</groupId>
          <artifactId>log4j-slf4j-impl</artifactId>
          <version>2.9.1</version>
        </dependency>
        <dependency>
          <groupId>org.apache.logging.log4j</groupId>
          <artifactId>log4j-jcl</artifactId>
          <version>2.9.1</version>
        </dependency>
        
        <dependency>
          <groupId>mysql</groupId>
          <artifactId>mysql-connector-java</artifactId>
          <version>5.1.6</version>
        </dependency>
        
        <dependency>
          <groupId>jstl</groupId>
          <artifactId>jstl</artifactId>
          <version>1.2</version>
        </dependency>
        <dependency>
          <groupId>taglibs</groupId>
          <artifactId>standard</artifactId>
          <version>1.1.1</version>
        </dependency>
        
        <dependency>
          <groupId>commons-fileupload</groupId>
          <artifactId>commons-fileupload</artifactId>
          <version>1.3.1</version>
        </dependency>
        <dependency>
          <groupId>commons-io</groupId>
          <artifactId>commons-io</artifactId>
          <version>2.5</version>
        </dependency>
        <dependency>
          <groupId>c3p0</groupId>
          <artifactId>c3p0</artifactId>
          <version>0.9.1.2</version>
        </dependency>
    
        
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-core</artifactId>
          <version>2.9.0</version>
        </dependency>
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.9.0</version>
        </dependency>
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-annotations</artifactId>
          <version>2.9.0</version>
        </dependency>
      </dependencies>
    
      <build>
        <finalName>vue_demo_01</finalName>
        <pluginManagement>
          <plugins>
            <plugin>
              <artifactId>maven-clean-plugin</artifactId>
              <version>3.1.0</version>
            </plugin>
            
            <plugin>
              <artifactId>maven-resources-plugin</artifactId>
              <version>3.0.2</version>
            </plugin>
            <plugin>
              <artifactId>maven-compiler-plugin</artifactId>
              <version>3.8.0</version>
            </plugin>
            <plugin>
              <artifactId>maven-surefire-plugin</artifactId>
              <version>2.22.1</version>
            </plugin>
            <plugin>
              <artifactId>maven-war-plugin</artifactId>
              <version>3.2.2</version>
            </plugin>
            <plugin>
              <artifactId>maven-install-plugin</artifactId>
              <version>2.5.2</version>
            </plugin>
            <plugin>
              <artifactId>maven-deploy-plugin</artifactId>
              <version>2.8.2</version>
            </plugin>
          </plugins>
        </pluginManagement>
      </build>
    </project>

# 三、Account类 #

package com.william.domain;
    
    /**
     * @author ：lijunxuan
     * @date ：Created in 2019/6/4  21:15
     * @description ：
     * @version: 1.0
     */
    public class Account {
        private Integer id;
        private String name;
        private Float money;
    
        @Override
        public String toString() {
            return "Account{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", money=" + money +
                    '}';
        }
    
        public Integer getId() {
            return id;
        }
    
        public void setId(Integer id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public Float getMoney() {
            return money;
        }
    
        public void setMoney(Float money) {
            this.money = money;
        }
    }

# 四、AccountDao接口 #

package com.william.dao;
    
    import com.william.domain.Account;
    
    import java.util.List;
    
    public interface AccountDao {
        /**
         * 查询所用用户信息
         * @return
         */
        public List<Account> findAll();
        /**
         *根据用户ID查询
         * @return
         */
        Account findById(Integer id);
    
        /**
         * 更新用户数据
         * @param account
         */
        void update(Account account);
    
        /**
         * 添加用户数据
         * @param account
         */
        void insert(Account account);
    
        /**
         * 删除用户信息
         * @param id
         */
        void delete(Integer id);
    }

# 五、service #

## 1.accountService接口 ##

package com.william.service;
    
    import com.william.domain.Account;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    
    public interface AccountService {
        /**
         * 查询所用用户信息
         * @return
         */
        public List<Account> findAll();
    
        /**
         * 根据ID查询用户信息
         * @return
         */
        Account findById(Integer id);
    
        void update(Account account);
    
        void insert(Account account);
    
        void delete(Integer id);
    }

## 2.AccountServiceImpl实现类 ##

package com.william.service.Impl;
    
    import com.william.dao.AccountDao;
    import com.william.domain.Account;
    import com.william.service.AccountService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    /**
     * @author ：lijunxuan
     * @date ：Created in 2019/6/4  21:21
     * @description ：
     * @version: 1.0
     */
    @Service
    public class AccountServiceImpl implements AccountService {
        @Autowired
        AccountDao accountDao;
        @Override
        public List<Account> findAll() {
            return accountDao.findAll();
        }
    
        @Override
        public Account findById(Integer id) {
            return accountDao.findById(id);
        }
    
        @Override
        public void update(Account account) {
            accountDao.update(account);
        }
    
        @Override
        public void insert(Account account) {
            accountDao.insert(account);
        }
    
        @Override
        public void delete(Integer id) {
            accountDao.delete(id);
        }
    }

# 六、AccountDao.xml #

![在这里插入图片描述][20190605155024427.png]

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper
            PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.william.dao.AccountDao">
        <select id="findAll" resultType="account">
           select * from account
        </select>
        <select id="findById" parameterType="int" resultType="account">
            select * from account where id =#{id}
        </select>
        <update id="update" parameterType="account">
            update account set name=#{name},money=#{money} where id =#{id}
        </update>
        <insert id="insert" parameterType="account">
            insert into account values(null,#{name},#{money})
        </insert>
        <delete id="delete" parameterType="int">
            delete from account where id =#{id}
        </delete>
    </mapper>

# 七、spring里的配置文件 #

## 目录结构 ##

![在这里插入图片描述][20190605155212130.png]

## 注意的细节 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 4]

## 1.applicationContext-dao.xml ##

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:context="http://www.springframework.org/schema/context"
           xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
    
    <context:property-placeholder location="classpath:dp.properties"></context:property-placeholder>
        
       <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
           <property name="driverClassName" value="${jdbc.driver}"></property>
           <property name="url" value="${jdbc.url}"></property>
           <property name="username" value="${jdbc.user}"></property>
           <property name="password" value="${jdbc.password}"></property>
       </bean>
        
        <bean id="SqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
            
            <property name="dataSource" ref="dataSource"></property>
           
            <property name="typeAliasesPackage" value="com.william.domain"></property>
        </bean>
        
        <bean id="Mapper" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
            <property name="basePackage" value="com.william.dao"></property>
        </bean>
    
    </beans>

## 2.applicationContext-service.xml ##

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:context="http://www.springframework.org/schema/context"
           xmlns:tx="http://www.springframework.org/schema/tx"
           xmlns:aop="http://www.springframework.org/schema/aop"
    
           xsi:schemaLocation="http://www.springframework.org/schema/beans
           http://www.springframework.org/schema/beans/spring-beans.xsd
           http://www.springframework.org/schema/context
           http://www.springframework.org/schema/context/spring-context.xsd
           http://www.springframework.org/schema/tx
           http://www.springframework.org/schema/tx/spring-tx.xsd
           http://www.springframework.org/schema/aop
           http://www.springframework.org/schema/aop/spring-aop.xsd
          ">
        
        <context:component-scan base-package="com.william.service"></context:component-scan>
        
        <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
            <property name="dataSource" ref="dataSource"></property>
        </bean>
        
        <tx:advice id="txadvice" transaction-manager="transactionManager">
            <tx:attributes>
                <tx:method name="find*" read-only="true" propagation="SUPPORTS"/>
                <tx:method name="get*" read-only="true" propagation="SUPPORTS"/>
                <tx:method name="query*" read-only="true" propagation="SUPPORTS"/>
                <tx:method name="select*" read-only="true" propagation="SUPPORTS"/>
                <tx:method name="*" />
            </tx:attributes>
        </tx:advice>
        
       <aop:config>
           <aop:advisor advice-ref="txadvice" pointcut="execution(* com.william.service.Impl.*.*(..))"></aop:advisor>
       </aop:config>
    </beans>

# 八、dp.properties #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 5]

jdbc.driver=com.mysql.jdbc.Driver
    jdbc.url=jdbc:mysql://localhost:3306/web04
    jdbc.user=root
    jdbc.password=root

# 九、Spring-mvc.xml #

# 十、web.xml #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 6]

<!DOCTYPE web-app PUBLIC
     "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
     "http://java.sun.com/dtd/web-app_2_3.dtd" >
    <web-app>
      <display-name>Archetype Created Web Application</display-name>
      
      <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/*</param-value>
      </context-param>
      
    <filter>
      <filter-name>CharacterEncodingFilter</filter-name>
      <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
      <init-param>
        <param-name>encoding</param-name>
        <param-value>utf-8</param-value>
      </init-param>
    </filter>
      <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
      </filter-mapping>
      
      <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
      </listener>
      
      <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:Spring-mvc.xml</param-value>
        </init-param>
          <load-on-startup>1</load-on-startup>
      </servlet>
      <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>*.do</url-pattern>
      </servlet-mapping>
    </web-app>

# 十一、AccountController #

## 目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 7]

## @RequestBody注解 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 8]

## 小细节 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 9]

package com.william.controller;
    
    import com.william.domain.Account;
    import com.william.service.AccountService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.util.List;
    
    /**
     * @author ：lijunxuan
     * @date ：Created in 2019/6/4  21:58
     * @description ：
     * @version: 1.0
     */
    @RestController
    @RequestMapping("/account")
    public class AccountController {
    @Autowired
        AccountService accountService;
                @RequestMapping("/findAll")
            public List<Account> findAll(){
                    List<Account> accountList = accountService.findAll();
                    return accountList;
                }
                @RequestMapping("/findById")
                public Account findById(Integer id){
                 Account account =accountService.findById(id);
                    return account;
                }
                @RequestMapping("/update")
        public String update(@RequestBody Account account){
                    System.out.println(account);
                    accountService.update(account);
                    return "ok" ;
                }
                @RequestMapping("/insert")
                public String insert(@RequestBody Account account){
                    System.out.println(account);
                    accountService.insert(account);
                    return "insert ok";
                }
                @RequestMapping("/delete")
                public String delete(Integer id){
                    System.out.println(id);
                    accountService.delete(id);
                    return "delete success";
                }
    }

# 十二、前端页面 #

## 1.需要引入的js ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 10]

## 2.data.html页面 ##

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>AdminLTE 2 | Data Tables</title>
      
      <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
      <link rel="stylesheet" href="../css/bootstrap.min.css">
      <script src="../js/jquery-1.9.1.js"></script>
      <script src="../js/bootstrap.min.js"></script>
    
    </head>
    <body class="hold-transition skin-blue sidebar-mini">
    
     
      <div class="content-wrapper">
        
        <section class="content">
          <div class="row">
            <div class="col-xs-12">
              <div class="box" id="app">
                <div class="box-header">
                  <button type="button"  class="btn btn-success" @click="insertModelShow()">添加</button>
                </div>
                <div class="box-body">
                  
                  <table id="data_table" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                      <th>id</th>
                      <th>用户名</th>
                      <th>余额</th>
                      <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="account in accountList">
                      <td>{
       {account.id}}</td>
                      <td>{
       {account.name}}</td>
                      <td>{
       {account.money}}</td>
                      <td>
                        <button type="button" class="btn btn-info" @Click="updateModelShow(account.id)">修改</button>
                        <button type="button" class="btn btn-danger" @Click="delete1(account.id)">删除</button></td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                
                <div id="update_modal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">修改--用户信息</h4>
                      </div>
                      <div class="modal-body">
                        <input type="hidden" class="form-control" >
                        <div class="box-body">
                            <div class="box-body">
                              <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">账户名</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" v-model="account.name" placeholder="name">
                                </div>
                              </div>
                              <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">余额</label>
    
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" v-model="account.money"  placeholder="money">
                                </div>
                              </div>
    
                            </div>
                            <div class="box-footer">
                              <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                              <button type="button" class="btn btn-outline" @click="update" data-dismiss="modal">修改</button>
                            </div>
                        </div>
    
                      </div>
                    </div>
                    
                  </div>
    
                  
                </div>
                
                <div id="add_modal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">添加--用户信息</h4>
                      </div>
                      <div class="modal-body">
    
                        <div class="box-body">
                          <form class="form-horizontal">
                            <div class="box-body">
                              <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">账户名称</label>
    
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="inputEmail3" placeholder="name" v-model="account.name">
                                </div>
                              </div>
                              <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">余额</label>
    
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="inputPassword3" placeholder="money"  v-model="account.money">
                                </div>
                              </div>
    
                            </div>
                            
                            <div class="box-footer">
                              <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                              <button type="button" class="btn btn-outline" @click="insert"  data-dismiss="modal">添加</button>
                            </div>
                            
                          </form>
                        </div>
    
                      </div>
                    </div>
                    
                  </div>
    
                  
                </div>
                
              </div>
              
            </div>
            
          </div>
          
        </section>
        
      </div>
    </div>
    </body>
    <script src="../js/vue-v2.6.10.js"></script>
    <script src="../js/axios-v0.19.0.js"></script>
    <script type="text/javascript">
      new Vue({
          el:"#app",
          data:{
              accountList:[],
              account:{}
          },
          methods:{
              /**
               * 查找所有用户信息
               */
              findAll:function () {
                  var _this=this;
                  axios.get("/account/findAll.do").then(function (response){
                      console.log(response.data);
                      //this 不是vue  this是axios
                      _this.accountList=response.data;
                  }).catch(function (err) {
                      console.log(err);
                  });
              },
              /**
               * 通过id查询用户数据
               * 使用v-modal进行双向绑定
               * @param id
               */
              updateModelShow:function(id){
               axios.get("/account/findById.do?id="+id).then( (res)=>{
                   console.log(res.data);
                   this.account=res.data;
               }).catch((r)=> {
                   console.log(r);
                  });
               $("#update_modal").modal("show");
    
         },
              /**
               * 更新用户数据
               */
              update:function () {
                  axios.post("/account/update.do",this.account).then((res)=>{
                      //console.log(res.data);
                      this.findAll();
    
                  }).catch((r)=>{
                      console.log(r);
                  });
              },
              /**
               * 通过视图层修改用户信息
               * 视图层再调用insert方法，添加用户信息
               *
               *
               */
              insertModelShow:function(){
                  $("#add_modal").modal("show");
                  this.account={};
              },
              /**
               * 插入用户信息
               */
              insert:function(){
                axios.post("/account/insert.do",this.account).then((res)=>{
                    this.findAll();
                }).catch((r)=>{
                    console.log(r);
                });
              },
              /**
               * 删除用户信息
               * @param id
               */
              delete1:function (id) {
                  axios.get("/account/delete.do?id="+id).then((res)=>{
    
                      this.findAll();
                  }).catch((r)=>{
                     console.log(r);
                  });
              }
    
          },
          /**
           * 钩子函数
           */
          created:function(){
              this.findAll();
          }
    
      });
    </script>
    </html>

# 十三、功能实现步骤分解 #

## 1进入界面首先会加载页面查询所有用户信息 ##

### （1）在页面输入请求后进入data.html页面 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 11]

## （2）调用findAll向后端发送请求 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 12]

## （3） AccountController接收前端发送过来的请求 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 13]

## (4) 调用AccountServiceImpl实现类 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 14]

## （5）调用AccountDao ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 15]

## （6）AccountDao.xml映射文件查询数据 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 16]

## （7） 最后给前端相应数据 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 17]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70]: /images/20220122/70f2137fc16542a8b380c136839470be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 1]: /images/20220122/97b44a12ee674f1d961c34702155eabe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 2]: /images/20220122/36e0073bc047463180d588abbb4b8ab4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 3]: /images/20220122/ea4dcbf02beb4b73aa34b3c5b5ba7b19.png
[20190605155024427.png]: /images/20220122/827bfaa518174eec88f1c5fe9cfa8992.png
[20190605155212130.png]: /images/20220122/d8ac73ce585242bcbcd4ae0d32496944.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 4]: /images/20220122/b10e3334b80b45f59480ae664799b597.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 5]: /images/20220122/65275cde36b942fba994f13968da9d96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 6]: /images/20220122/39523adb739f4ef299f660d08fb33765.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 7]: /images/20220122/241d740390ef45cf850ee658c08d401a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 8]: /images/20220122/4cc50521293c42d69abfc9d4430b1b18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 9]: /images/20220122/9a01e790c71e4b54923f000fd6b7e202.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 10]: /images/20220122/85f67b263927407d8f7df0afd5ef03a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 11]: /images/20220122/1e5b19ffe6804a0e90ab7f63f0768640.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 12]: /images/20220122/f89a2a277e4a40cabfb39be42fd8d1d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 13]: /images/20220122/a6a6c4ed64244167ae72b31a77a42539.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 14]: /images/20220122/efa78780e18c4dff93d9a23ffa51f88c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 15]: /images/20220122/66d8b4ae8e6f49ce8c9d44bde2bb89cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 16]: /images/20220122/2dfb4a87925d4858867341380cb92ec0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 17]: /images/20220122/0bcfcff44e364b4fa7c77fa3b30a812a.png