VueJS ajax综合案例

最新推荐文章于 2024-05-15 09:15:00 发布

L-李俊漩

最新推荐文章于 2024-05-15 09:15:00 发布

阅读量3.3k

点赞数

分类专栏： vue 文章标签： vue综合案例分析

本文链接：https://blog.csdn.net/sinat_39179993/article/details/90815684

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、目录结构和注意事项

1.目录结构

在这里插入图片描述

2.注意事项

（1）data.html里面的Vue

在这里插入图片描述

（2）箭头函数

在这里插入图片描述

二、引入依赖

在这里插入图片描述

<?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>
  <!-- FIXME change it to the project's website -->
  <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>
    <!-- spring相关的jar包 -->
    <!-- 容器 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
    </dependency>
    <!-- 事务 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- JDBC -->
    <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>
    <!-- springMVC -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- mybatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.5</version>
    </dependency>
    <!-- mybatis与Spring整合 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!-- AOP切面 -->
    <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>

    <!-- servletAPI -->
    <!-- JSP应用 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
    <!-- servlet应用 -->
    <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>
    <!-- mysql -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.6</version>
    </dependency>
    <!-- JSTL -->
    <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>

    <!--引入json的依赖-->
    <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><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <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

在这里插入图片描述

<?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里的配置文件

目录结构

在这里插入图片描述

注意的细节

在这里插入图片描述

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>
    <!--创建sqlSessionFactory对象-->
    <bean id="SqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--引入数据源-->
        <property name="dataSource" ref="dataSource"></property>
       <!--配置别名-->
        <property name="typeAliasesPackage" value="com.william.domain"></property>
    </bean>
    <!--创建dao接口的动态代理对象-->
    <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切面-->
   <aop:config>
       <aop:advisor advice-ref="txadvice" pointcut="execution(* com.william.service.Impl.*.*(..))"></aop:advisor>
   </aop:config>
</beans>

八、dp.properties

在这里插入图片描述

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

九、Spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--开启注解扫描-->
    <context:component-scan base-package="com.william.controller"></context:component-scan>
    <!--mvc注解驱动-->
    <mvc:annotation-driven></mvc:annotation-driven>
</beans>

十、web.xml

在这里插入图片描述

<!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

目录结构

在这里插入图片描述

@RequestBody注解

在这里插入图片描述

小细节

在这里插入图片描述

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

在这里插入图片描述

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>
  <!-- Tell the browser to be responsive to screen width -->
  <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">

 <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Main content -->
    <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">&times;</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>
                <!-- /.modal-content -->
              </div>

              <!-- /.modal-dialog -->
            </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">&times;</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>
                        <!-- /.box-body -->
                        <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>
                        <!-- /.box-footer -->
                      </form>
                    </div>

                  </div>
                </div>
                <!-- /.modal-content -->
              </div>

              <!-- /.modal-dialog -->
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </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页面

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

(4) 调用AccountServiceImpl实现类

在这里插入图片描述

（5）调用AccountDao

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

L-李俊漩

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
VueJS ajax综合案例

一、目录结构和注意事项1.目录结构2.注意事项（1）data.html里面的Vue（2）箭头函数二、引入依赖<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XM...
复制链接

扫一扫