一、目录结构和注意事项

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;@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();/***根据用户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 {@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里的配置文件

目录结构

注意的细节

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/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><!--事务管理器--><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 {
@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";}
}

十二、前端页面

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） 最后给前端相应数据