一、目錄結(jié)構(gòu)和注意事項(xiàng)

1.目錄結(jié)構(gòu)

2.注意事項(xiàng)

（1）data.html里面的Vue

（2）箭頭函數(shù)

二、引入依賴

<?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><!--提取版本號(hào)--><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相關(guān)的jar包 --><!-- 容器 --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId></dependency><!-- 事務(wù) --><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><!-- 測(cè)試 --><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><!-- 數(shù)據(jù)源 --><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.9</version></dependency><!-- 單元測(cè)試 --><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><!-- servletAPI --><!-- JSP應(yīng)用 --><dependency><groupId>javax.servlet</groupId><artifactId>jsp-api</artifactId><version>2.0</version><scope>provided</scope></dependency><!-- servlet應(yīng)用 --><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;@Overridepublic 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();/***根據(jù)用戶ID查詢* @return*/Account findById(Integer id);/*** 更新用戶數(shù)據(jù)* @param account*/void update(Account account);/*** 添加用戶數(shù)據(jù)* @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();/*** 根據(jù)ID查詢用戶信息* @return*/Account findById(Integer id);void update(Account account);void insert(Account account);void delete(Integer id); }

2.AccountServiceImpl實(shí)現(xiàn)類

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 {@AutowiredAccountDao accountDao;@Overridepublic List<Account> findAll() {return accountDao.findAll();}@Overridepublic Account findById(Integer id) {return accountDao.findById(id);}@Overridepublic void update(Account account) {accountDao.update(account);}@Overridepublic void insert(Account account) {accountDao.insert(account);}@Overridepublic void delete(Integer id) {accountDao.delete(id);} }

六、AccountDao.xml

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//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里的配置文件

目錄結(jié)構(gòu)

注意的細(xì)節(jié)

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><!--配置數(shù)據(jù)源--><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><!--創(chuàng)建sqlSessionFactory對(duì)象--><bean id="SqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><!--引入數(shù)據(jù)源--><property name="dataSource" ref="dataSource"></property><!--配置別名--><property name="typeAliasesPackage" value="com.william.domain"></property></bean><!--創(chuàng)建dao接口的動(dòng)態(tài)代理對(duì)象--><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/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/txhttp://www.springframework.org/schema/tx/spring-tx.xsdhttp://www.springframework.org/schema/aophttp://www.springframework.org/schema/aop/spring-aop.xsd"><!--開啟注解掃描--><context:component-scan base-package="com.william.service"></context:component-scan><!--事務(wù)管理器--><bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><property name="dataSource" ref="dataSource"></property></bean><!--事務(wù)增強(qiáng)--><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注解驅(qū)動(dòng)--><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><!--監(jiān)聽器--><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

目錄結(jié)構(gòu)

@RequestBody注解

小細(xì)節(jié)

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 { @AutowiredAccountService 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";} }

十二、前端頁(yè)面

1.需要引入的js

2.data.html頁(yè)面

<!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"><!--數(shù)據(jù)表格--><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">關(guān)閉</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">關(guān)閉</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查詢用戶數(shù)據(jù)* 使用v-modal進(jìn)行雙向綁定* @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");},/*** 更新用戶數(shù)據(jù)*/update:function () {axios.post("/account/update.do",this.account).then((res)=>{//console.log(res.data);this.findAll();}).catch((r)=>{console.log(r);});},/*** 通過視圖層修改用戶信息* 視圖層再調(diào)用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);});}},/*** 鉤子函數(shù)*/created:function(){this.findAll();}}); </script> </html>

十三、功能實(shí)現(xiàn)步驟分解

1進(jìn)入界面首先會(huì)加載頁(yè)面查詢所有用戶信息

（1）在頁(yè)面輸入請(qǐng)求后進(jìn)入data.html頁(yè)面

（2）調(diào)用findAll向后端發(fā)送請(qǐng)求

（3） AccountController接收前端發(fā)送過來(lái)的請(qǐng)求

(4) 調(diào)用AccountServiceImpl實(shí)現(xiàn)類

（5）調(diào)用AccountDao

（6）AccountDao.xml映射文件查詢數(shù)據(jù)

（7） 最后給前端相應(yīng)數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的VueJS ajax综合案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。