VueJS ajax综合案例

一、目录结构和注意事项

1.目录结构

2.注意事项

（1）data.html里面的Vue

（2）箭头函数

二、引入依赖

  4.0.0

  com.william
  vue_demo_01
  1.0-SNAPSHOT
  war

  vue_demo_01 Maven Webapp
  
  http://www.example.com

  
    UTF-8
    1.7
    1.7
    
    5.0.2.RELEASE
    5.0.1.RELEASE
  

  
    
      
        org.springframework
        spring-context
        ${spring.version}
      
    
  

  
    
    
    
      org.springframework
      spring-context
    
    
    
      org.springframework
      spring-tx
      ${spring.version}
    
    
    
      org.springframework
      spring-jdbc
      ${spring.version}
    
    
    
      org.springframework
      spring-test
      ${spring.version}
    
    
    
      org.springframework
      spring-webmvc
      ${spring.version}
    
    
    
      org.mybatis
      mybatis
      3.4.5
    
    
    
      org.mybatis
      mybatis-spring
      1.3.1
    
    
    
      org.aspectj
      aspectjweaver
      1.8.7
    
    
    
      com.alibaba
      druid
      1.1.9
    
    
    
      junit
      junit
      4.12
      test
    

    
    
    
      javax.servlet
      jsp-api
      2.0
      provided
    
    
    
      javax.servlet
      servlet-api
      2.5
      provided
    
    
    
      log4j
      log4j
      1.2.17
    
    
      org.apache.logging.log4j
      log4j-api
      2.10.0
    
    
      org.apache.logging.log4j
      log4j-core
      2.10.0
    
    
      org.apache.logging.log4j
      log4j-web
      2.9.1
    
    
      org.slf4j
      slf4j-api
      1.7.25
    
    
      org.apache.logging.log4j
      log4j-slf4j-impl
      2.9.1
    
    
      org.apache.logging.log4j
      log4j-jcl
      2.9.1
    
    
    
      mysql
      mysql-connector-java
      5.1.6
    
    
    
      jstl
      jstl
      1.2
    
    
      taglibs
      standard
      1.1.1
    
    
    
      commons-fileupload
      commons-fileupload
      1.3.1
    
    
      commons-io
      commons-io
      2.5
    
    
      c3p0
      c3p0
      0.9.1.2
    

    
    
      com.fasterxml.jackson.core
      jackson-core
      2.9.0
    
    
      com.fasterxml.jackson.core
      jackson-databind
      2.9.0
    
    
      com.fasterxml.jackson.core
      jackson-annotations
      2.9.0
    
  

  
    vue_demo_01
    
      
        
          maven-clean-plugin
          3.1.0
        
        
        
          maven-resources-plugin
          3.0.2
        
        
          maven-compiler-plugin
          3.8.0
        
        
          maven-surefire-plugin
          2.22.1
        
        
          maven-war-plugin
          3.2.2
        
        
          maven-install-plugin
          2.5.2
        
        
          maven-deploy-plugin
          2.8.2
        
      
    
  

三、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 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 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 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

    
       select * from account
    
    
        select * from account where id =#{id}
    
    
        update account set name=#{name},money=#{money} where id =#{id}
    
    
        insert into account values(null,#{name},#{money})
    
    
        delete from account where id =#{id}
    

七、spring里的配置文件

目录结构

注意的细节

1.applicationContext-dao.xml

2.applicationContext-service.xml

八、dp.properties

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

九、Spring-mvc.xml

十、web.xml

  Archetype Created Web Application
  
  
    contextConfigLocation
    classpath:spring/*
  
  

  CharacterEncodingFilter
  org.springframework.web.filter.CharacterEncodingFilter
  
    encoding
    utf-8
  

  
    CharacterEncodingFilter
    /*
  
  
  
    org.springframework.web.context.ContextLoaderListener
  
  
  
    DispatcherServlet
    org.springframework.web.servlet.DispatcherServlet
    
      contextConfigLocation
      classpath:Spring-mvc.xml
    
      1
  
  
    DispatcherServlet
    *.do
  

十一、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 findAll(){
                List 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页面

  
  
  
  
  
  
  
  




 
  

    
    

      

        

          

            

              添加
            
            

              
              

                

                

                  
id
                  
用户名
                  
余额
                  
操作
                
                
                

                

                  
{{account.id}}
                  
{{account.name}}
                  
{{account.money}}
                  

                    修改
                    删除
                
                
              
            
            
            

              

                

                  

                    
                      ×
                    
修改--用户信息
                  
                  

                    
                    

                        

                          

                            账户名
                            

                              
                            
                          
                          

                            余额

                            

                              
                            
                          

                        
                        

                          关闭
                          修改
                        
                    

                  
                
                
              

              
            
            
            

              

                

                  

                    
                      ×
                    
添加--用户信息
                  
                  


                    

                      

                        

                          

                            账户名称

                            

                              
                            
                          
                          

                            余额

                            

                              
                            
                          

                        
                        
                        

                          关闭
                          添加
                        
                        
                      
                    

                  
                
                
              

              
            
            
          
          
        
        
      
      
    
    
  

十三、功能实现步骤分解

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

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

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

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

(4) 调用AccountServiceImpl实现类

（5）调用AccountDao

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

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