Vue入门级学习笔记

学习过程中使用到的Vue版本分享如下

链接：https://pan.baidu.com/s/1b9q_GjG6T58TeCEoW_1_AA
提取码：hawj

一.概述与入门案例

1.概述(了解)

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。他的设计体现一种思想
MVVM模式:

MVVM是Model-VIEW-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的VIEW 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式和MVC模式一样，主要目的是分离视图（VIEW）和模型（Model）

2.入门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="test">
        <!--Vue插值表达式，可以将Vue的data里面的数据显示到这里来，使用{
    
    {}}来获取值-->
        {
   
   {message}}
    </div>
</body>
<script>
    //创建Vue对象
    new Vue({
     
     
        el:"#test",//表示该Vue对象来接管id为test的区域
        data:{
     
     
            message:"Hello World"//这里message可以不写为message,可以随便写，但是前面的el与data是固定的
        }
    });
</script>
</html>

在这里插入图片描述

二.Vue语法讲解

1.插值表达式

Vue提供了完全的JS表达式支持，举例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="test">
        <h1>{
   
   {ok?"a":"b"}}</h1>
        <h1>{
   
   {num+1}}</h1>
    </div>
</body>
<script>
    //创建Vue对象
    new Vue({
     
     
        el:"#test",//表示该Vue对象来接管id为test的区域
        data:{
     
     
            ok:true,
            num:123
        }
    });
</script>
</html>

在这里插入图片描述
但是有一个限制，必须是单个表达式才可以生效，像下面这些就没有用:

<!-- 这是语句，不是表达式 -->
{
    
    {
    
     var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{
    
    {
    
     if (ok) {
    
     return message } }}

2.v-on指令事件绑定

友情说明:下面的v-on:可以统一使用@来代替。
1.点击事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="test">
        {
   
   {message}}
       <input type="button" v-on:click="fun1()" value="点击修改"></button>
    </div>
</body>
<script>
    //创建Vue对象
    new Vue({
     
     
        el:"#test",//表示该Vue对象来接管id为test的区域
        data:{
     
     
            message:"jack"
        },
        methods:{
     
     
            fun1:function () {
     
     
                this.message="I am jack"
            }
        }
    });
</script>
</html>

在这里插入图片描述
2.键盘事件
这里给出一个样例，使得只能写数字，其它无法生效。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="test">
       <input type="text" v-on:keydown="fun1($event)" />
    </div>
</body>
<script>
    //创建Vue对象
    new Vue({
     
     
        el:"#test",//表示该Vue对象来接管id为test的区域
        data:{
     
     
            message:"jack"
        },
        methods:{
     
     
            fun1:function (event) {
     
     
                var keyCode = event.keyCode
                if(keyCode<48||keyCode>57){
     
     
                    event.preventDefault();
                }
            }
        }
    });
</script>
</html>

(只能输入数字，其他的无法输入)
在这里插入图片描述
3.鼠标事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="test" v-on:mouseover="fun_div($event)" style="width: 300px;height: 300px;background-color: red">
        <textarea v-on:mouseover="fun_text($event)"></textarea>
    </div>
</body>
<script>
    //创建Vue对象
    new Vue({
     
     
        el:"#test",//表示该Vue对象来接管id为test的区域
        data:{
     
     
            message:"jack"
        },
        methods:{
     
     
            fun_div:function (event) {
     
     
                alert("移到了div上")
            },
            fun_text:function (event) {
     
     
                alert("移到文本区")
                event.stopPropagation();//阻止传播行为
            }
        }
    });
</script>
</html>

不加阻止传播行为的代码:
在这里插入图片描述
加上阻止传播行为的代码

3.Vue事件修饰符

Vue.js 为 v-ON 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。
常用的是.prevent和.stop,还有.capture，.self，.once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
	<[email protected]与@click.stop位置不是固定的-->
	<[email protected]相当于event.preventDefault()-->
    <form action="http://www.baidu.com" method="get" @submit.prevent>
        <input type="submit" value="提交"/>
    </form>
    <[email protected]相当于event.stopPropagation()-->
    <div @click="fun1">
        <a @click.stop href="http://www.baidu.com">百度</a>
    </div>
</div>
<script>
    new Vue({
     
     
        el:'#app', //表示当前vue对象接管了div区域
        methods:{
     
     
            fun1:function(){
     
     
                alert("hello world");
            }
        }
    });
</script>
</body>
</html>

4.使用v-html,v-text,v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <div v-text="message"></div>
    <div v-html="message"></div>
</div>
<script>
    new Vue({
     
     
        el:'#app', //表示当前vue对象接管了div区域
        data:{
     
     
            message:"<h1>I am Jack</h1>"
        }
        ,
    });
</script>
</body>
</html>

在这里插入图片描述
接下来使用v-bind给标签的属性赋值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <font size="20" v-bind:color="c1">jack</font>
    <font size="20" v-bind:color="c2">tom</font>
</div>
<script>
    new Vue({
     
     
        el:'#app', //表示当前vue对象接管了div区域
        data:{
     
     
            c1:"red",
            c2:"green"
        }
    });
</script>
</body>
</html>

在这里插入图片描述

5.按键修饰符

Vue 允许为 v-ON 在监听键盘事件时添加按键修饰符

全部的按键别名：
	.enter
	.tab
	.delete (捕获 "删除" 和 "退格" 键)
	.esc
	.space
	.up
	.down
	.left
	.right
	.ctrl
	.alt
	.shift
	.meta

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <input type="text" @keydown.space="fun()"/>
</div>
<script>
    new Vue({
     
     
        el:'#app', //表示当前vue对象接管了div区域
        data:{
     
     

        },
        methods:{
     
     
            fun:function () {
     
     
                alert("按下空格")
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述

6.使用v-for

1.遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <li v-for="(item,index) in list">
        <td>索引:{
   
   {index}}</td>
        <td>值:{
   
   {item}}</td>
    </li>
</div>
<script>
    new Vue({
     
     
        el:'#app', //表示当前vue对象接管了div区域
        data:{
     
     
            list:[1,2,3,4,5]
        }
    });
</script>
</body>
</html>

在这里插入图片描述
2.遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
      <li v-for="(value,key) in product">
          <td>{
   
   {key}}</td>
          <td>{
   
   {value}}</td>
      </li>
</div>
<script>
    new Vue({
     
     
        el:'#app', //表示当前vue对象接管了div区域
        data:{
     
     
            product:{
     
     name:"电视", price:"3000"},
        }
    });
</script>
</body>
</html>

在这里插入图片描述
3.遍历对象数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
            <tr>
                <td>序号</td>
                <td>类型</td>
                <td>价格</td>
            </tr>
        <tbody>
            <tr v-for="(product,index) in products">
                <td>{
   
   {index+1}}</td>
                <td>{
   
   {product.name}}</td>
                <td>{
   
   {product.price}}</td>
            </tr>
        </tbody>
    </table>


</div>
<script>
    new Vue({
     
     
        el:'#app', //表示当前vue对象接管了div区域
        data:{
     
     
            products:[
                {
     
     name:"电视", price:"3000"},
                {
     
     name:"手机", price:"2000"},
                {
     
     name:"玩具", price:"1000"}
            ]
        }
    });
</script>
</body>
</html>

在这里插入图片描述

7.使用v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model的使用</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    用户名:<input type="text" v-model="user.username"/>
    密码:<input type="text" v-model="user.password"/>
</div>
<script>
    new Vue({
     
     
        el:'#app', //表示当前vue对象接管了div区域
        data:{
     
     
            user:{
     
     
                username:"jack",
                password:"1234"
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述

8.使用v-if与v-show

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-if与v-show</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <span v-if="flag">I am jack</span><br>
    <span v-show="flag">jackt</span><br>
    <button @click="toggle">切换</button>
</div>
<script>
    new Vue({
     
     
        el:'#app', //表示当前vue对象接管了div区域
        data:{
     
     
            flag:false
        },
        methods:{
     
     
            toggle:function(){
     
     
                this.flag=!this.flag;
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述

三.Vue的ajax介绍

参考学习:https://github.com/axios/axios
分享axios-0.18.0.js
链接：https://pan.baidu.com/s/1J5hGrsBPwWzuOdwZvaGyrQ
提取码：qf4n

引入axios可以使用

<!--1.网页导入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--2.本地导入-->
<script src="js/axios-0.18.0.js"></script>

axios提供如下方法来支持各种请求方式:

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

下面给出我们常用的get与post请求的实例代码，最后我们给出一个具体案例来详细演示。
1.get请求示例

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){
    
    
console.log(response);
})
.catch(function(err){
    
    
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
    
    
params:{
    
    
ID:12345
}
})
.then(function(response){
    
    
console.log(response);
})
.catch(function(err){
    
    
console.log(err);
});

2.post请求示例

axios.post('/user',{
    
    
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
    
    
console.log(res);
})
.catch(function(err){
    
    
console.log(err);
});

四.案例演示

事先创建好Maven工程项目

1.创建表

DROP TABLE IF EXISTS `USER`;
CREATE TABLE `USER` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `age` int(11) DEFAULT NULL,
  `username` varchar(20) DEFAULT NULL,
  `PASSWORD` varchar(50) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `sex` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

INSERT INTO `USER` VALUES ('1', '33', '张老师', '123', '[email protected]', '男 ');
INSERT INTO `USER` VALUES ('2', '31', '刘老师', '123', '[email protected]', '女');
INSERT INTO `USER` VALUES ('3', '17', '赵工', '213', '[email protected]', '女');
INSERT INTO `USER` VALUES ('4', '40', '高管', '213', '[email protected]', 'female');
INSERT INTO `USER` VALUES ('5', '28', '李总', '312', '[email protected]', 'male');
INSERT INTO `USER` VALUES ('6', '34', '王董', '312', '[email protected]', 'male');
INSERT INTO `USER` VALUES ('7', '55', '孙老板', '4321', '[email protected]', '男');
INSERT INTO `USER` VALUES ('8', '19', '陈秘书', '4321', '[email protected]', '女');

2.pom文件导包

<properties>
	<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
	<maven.compiler.source>1.8</maven.compiler.source>
	<maven.compiler.target>1.8</maven.compiler.target>
	<spring.version>5.0.2.RELEASE</spring.version>
	<slf4j.version>1.6.6</slf4j.version>
	<log4j.version>1.2.12</log4j.version>
	<mybatis.version>3.4.5</mybatis.version>
</properties>
<dependencies> <!-- spring -->
	<dependency>
		<groupId>org.aspectj</groupId>
		<artifactId>aspectjweaver</artifactId>
		<version>1.6.8</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-context</artifactId>
		<version>${spring.version}</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-context-support</artifactId>
		<version>${spring.version}</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-orm</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.springframework</groupId>
		<artifactId>spring-tx</artifactId>
		<version>${spring.version}</version>
	</dependency>
	<dependency>
		<groupId>junit</groupId>
		<artifactId>junit</artifactId>
		<version>4.12</version>
		<scope>test</scope>
	</dependency>
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>javax.servlet-api</artifactId>
		<version>3.1.0</version>
		<scope>provided</scope>
	</dependency>
	<dependency>
		<groupId>javax.servlet.jsp</groupId>
		<artifactId>jsp-api</artifactId>
		<version>2.0</version>
		<scope>provided</scope>
	</dependency>
	<dependency>
		<groupId>jstl</groupId>
		<artifactId>jstl</artifactId>
		<version>1.2</version>
	</dependency> <!-- log start -->
	<dependency>
		<groupId>log4j</groupId>
		<artifactId>log4j</artifactId>
		<version>${log4j.version}</version>
	</dependency>
	<dependency>
		<groupId>org.slf4j</groupId>
		<artifactId>slf4j-api</artifactId>
		<version>${slf4j.version}</version>
	</dependency>
	<dependency>
		<groupId>org.slf4j</groupId>
		<artifactId>slf4j-log4j12</artifactId>
		<version>${slf4j.version}</version>
	</dependency> <!-- log end -->
	<dependency>
		<groupId>org.mybatis</groupId>
		<artifactId>mybatis</artifactId>
		<version>${mybatis.version}</version>
	</dependency>
	<dependency>
		<groupId>org.mybatis</groupId>
		<artifactId>mybatis-spring</artifactId>
		<version>1.3.0</version>
	</dependency>
	<dependency>
		<groupId>c3p0</groupId>
		<artifactId>c3p0</artifactId>
		<version>0.9.1.2</version>
	</dependency>
	<dependency>
		<groupId>com.github.pagehelper</groupId>
		<artifactId>pagehelper</artifactId>
		<version>5.1.2</version>
	</dependency>
	<dependency>
		<groupId>mysql</groupId>
		<artifactId>mysql-connector-java</artifactId>
		<version>5.1.5</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>

3.实体类和持久层与业务逻辑层

1.User.java

package service.impl;
import dao.IUserDao;
import domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import service.IUserService;
import java.util.List;
@Service
public class UserServiceImpl implements IUserService {
    
    
    @Autowired
    private IUserDao userDao;
    @Override
    public List<User> findAll() {
    
    
        return userDao.findAll();
    }
    @Override
    public User findById(Integer userId) {
    
    
        return userDao.findById(userId);
    }
    @Override
    public void updateUser(User user) {
    
    
        userDao.updateUser(user);
    }
}

2.UserDao

package dao;
import domain.User;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import java.util.List;
public interface IUserDao {
    
    
    /**
     * 查询用户列表
     */
    @Select("select * from user")
    List<User> findAll();
    /**
     * 根据id查询
     * @param userId
     * @return
     */
    @Select("select * from user where id = #{userId} ")
    User findById(Integer userId);
    /**
     * 更新用户
     * @param user
     */
    @Update("update user set username=#{username},password=#{password},age=#{age},sex=#{sex},email=#{email} where id=#{id}")
    void updateUser(User user);
}

3.UserService

package service;
import domain.User;
import java.util.List;
public interface IUserService {
    
    
    /**
     * 查询用户列表
     */
    List<User> findAll();
    /**
     * 根据id查询
     * @param userId
     * @return
     */
    User findById(Integer userId);
    /**
     * 更新用户
     * @param user
     */
    void updateUser(User user);
}

4.UserServiceImpl

package service.impl;
import dao.IUserDao;
import domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import service.IUserService;
import java.util.List;
@Service
public class UserServiceImpl implements IUserService {
    
    
    @Autowired
    private IUserDao userDao;
    @Override
    public List<User> findAll() {
    
    
        return userDao.findAll();
    }
    @Override
    public User findById(Integer userId) {
    
    
        return userDao.findById(userId);
    }
    @Override
    public void updateUser(User user) {
    
    
        userDao.updateUser(user);
    }
}

4.配置文件

1.db.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/student
jdbc.username=root
jdbc.password=1234

2.applicationContext.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:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       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/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
                            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
    <!-- 配置 spring 创建容器时要扫描的包 -->
    <context:component-scan base-package="com.jack">
        <!--制定扫包规则，不扫描@Controller 注解的 JAVA 类，其他的还是要扫描 -->
        <context:exclude-filter type="annotation"
                                expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!-- 加载配置文件 -->
    <context:property-placeholder location="classpath:db.properties"/>
    <!-- 配置 MyBatis 的 Session 工厂 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 数据库连接池 -->
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!-- 配置数据源 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"></property>
        <property name="jdbcUrl" value="${jdbc.url}"></property>
        <property name="user" value="${jdbc.username}"></property>
        <property name="password" value="${jdbc.password}"></property>
    </bean>
    <!-- 配置 Mapper 扫描器 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.jack.dao"/>
    </bean>
    <!-- 配置事务管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!-- 配置事务的通知 -->
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
    	<tx:attributes>
    		<tx:method name="*" propagation="REQUIRED" read-only="false"/>
    		<tx:method name="find*" propagation="SUPPORTS" read-only="true"/>
    	</tx:attributes>
    </tx:advice>
    <!-- 配置aop -->
    <aop:config>
    	<aop:pointcut expression="execution(* com.jack.service.impl.*.*(..))" id="pt1"/>
    	<aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"/>
    </aop:config>
</beans>

3.springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
    <!-- 配置创建 spring 容器要扫描的包 -->
    <context:component-scan base-package="com.jack.controller"></context:component-scan>
    <mvc:annotation-driven></mvc:annotation-driven>
</beans>

5. 静态资源文件分享

链接：https://pan.baidu.com/s/1Qn9qgMlyDGzLqEfK-SBdVA
提取码：ewuo
全放在webapp文件目录下

6.控制层的编写

package com.jack.controller;
import com.jack.domain.User;
import com.jack.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
@RequestMapping("/user")
@ResponseBody
public class UserController {
    
    

    @Autowired
    private IUserService userService;

    /**
     * 查询所有
     * @return
     */
    @RequestMapping("/findAll")
    public List<User> findAll(){
    
    
        System.out.println("test");
        return userService.findAll();
    }

    /**
     * 根据id查询
     * @param id
     * @return
     */
    @RequestMapping("/findById")
    public User findById(Integer id){
    
    
        return userService.findById(id);
    }

    /**
     * 更新
     * @param user
     */
    @RequestMapping("/updateUser")
    public void updateUser(@RequestBody User user){
    
    
        System.out.println(user);
        userService.updateUser(user);
    }
}

http://localhost:8080/user/findAll.do访问测试如下:
在这里插入图片描述
http://localhost:8080/user/findById.do?id=1访问测试如下:

五.Vue生命周期介绍

参见Vue生命周期测试

六.测试查询所有

var vm = new Vue({
    
    
    el:"#app",
    data:{
    
    
        user:{
    
    
            id:"",
            username:"",
            password:"",
            email:"",
            age:"",
            sex:""
        },
        userList:[]
    },
    methods:{
    
    
        findAll:function(){
    
    
            //在当前方法中定义一个变量，表明是vue对象
            axios.get('/user/findAll.do')
                .then(function (response) {
    
    
                    vm.userList = response.data;//响应数据给userList赋值
                    console.log(response);
                })
                .catch(function (error) {
    
    
                    console.log(error);
                })
        },
        findById:function (userid) {
    
    

        },
        update:function () {
    
    //post请求

        }
    },
    //注意created这里要写在methods外面，
    //如果不清楚这个函数可以参考上一小节的Vue生命周期
    created:function(){
    
    
        this.findAll();
    },
})

在这里插入图片描述

七.实现Id查询与更新

完善下面两个函数:

findById:function (userid) {
    
    
    //在当前方法中定义一个变量，表明是vue对象
    axios.get('/user/findById.do',{
    
    params:{
    
    id:userid}})
        .then(function (response) {
    
    
            vm.user = response.data;//响应数据给userList赋值
            $("#myModal").modal("show");
        })
        .catch(function (error) {
    
    
            console.log(error);
        })
},
update:function () {
    
    //post请求
    axios.post('/user/updateUser.do', vm.user)
        .then(function (response) {
    
    
            vm.findAll();
        })
        .catch(function (error) {
    
    
            console.log(error);
        });
}

在这里插入图片描述