本文共 12393 字，大约阅读时间需要 41 分钟。

学习过程中使用到的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.入门案例

    
               
   
        
            {
  {message}}    
   

二.Vue语法讲解

1.插值表达式

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

    
               
   
        
    
{
  {ok?"a":"b"}}
        
    
{
  {num+1}}
    
   

但是有一个限制，必须是单个表达式才可以生效，像下面这些就没有用:

   {
   {
    var a = 1 }}
   {
   {
    if (ok) {
    return message } }}

2.v-on指令事件绑定

友情说明:下面的v-on:可以统一使用@来代替。

1.点击事件

    
               
   
            {
  {message}}       
        
   

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

(只能输入数字，其他的无法输入)

3.鼠标事件

不加阻止传播行为的代码:

加上阻止传播行为的代码

3.Vue事件修饰符

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

常用的是.prevent和.stop,还有.capture，.self，.once

    
           
   
	
    	
        
    
        
         
    
    
        
    
        
     百度    
    
   

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

接下来使用v-bind给标签的属性赋值：

    
           
   
    
    jack    
    tom
   

5.按键修饰符

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

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

6.使用v-for

1.遍历数组

    
           
   
    
    
        索引:{
  {index}}        值:{
  {item}}    
   

2.遍历对象

    
           
   
      
    
          {
  {key}}          {
  {value}}      
   

3.遍历对象数组

    
           
   
    
    
                 
      
                       
序号
                       
类型
                       
价格
                  
             
     
                  
                       
{
  {index+1}}
                       
{
  {product.name}}
                       
{
  {product.price}}
                  
             
        
   

7.使用v-model

    
           
   
        用户名:
        密码:
    
   

8.使用v-if与v-show

    
           
   
    
    I am jack
    
    
    jackt
    
    
    切换
   

三.Vue的ajax介绍

参考学习:https://github.com/axios/axios

分享axios-0.18.0.js

链接：https://pan.baidu.com/s/1J5hGrsBPwWzuOdwZvaGyrQ

提取码：qf4n

引入axios可以使用

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', 'zzz@itcast.cn', '男 ');INSERT INTO `USER` VALUES ('2', '31', '刘老师', '123', 'lll@itcast.cn', '女');INSERT INTO `USER` VALUES ('3', '17', '赵工', '213', 'zg@itcast.cn', '女');INSERT INTO `USER` VALUES ('4', '40', '高管', '213', 'gg@itcast.cn', 'female');INSERT INTO `USER` VALUES ('5', '28', '李总', '312', 'lz@jxjt.com', 'male');INSERT INTO `USER` VALUES ('6', '34', '王董', '312', 'wd@jxjt.com', 'male');INSERT INTO `USER` VALUES ('7', '55', '孙老板', '4321', 'slb@xzjt.com', '男');INSERT INTO `USER` VALUES ('8', '19', '陈秘书', '4321', 'cms@xzjt.com', '女');

2.pom文件导包

   	
    
     UTF-8
    	
    
     1.8
    	
    
     1.8
    	
    
     5.0.2.RELEASE
    	
    
     1.6.6
    	
    
     1.2.12
    	
    
     3.4.5
    
   
    
    	
    		
     
      org.aspectj
     		
     
      aspectjweaver
     		
     
      1.6.8
     	
    	
    		
     
      org.springframework
     		
     
      spring-context
     		
     
      ${spring.version}
     	
    	
    		
     
      org.springframework
     		
     
      spring-context-support
     		
     
      ${spring.version}
     	
    	
    		
     
      org.springframework
     		
     
      spring-orm
     		
     
      ${spring.version}
     	
    	
    		
     
      org.springframework
     		
     
      spring-test
     		
     
      ${spring.version}
     	
    	
    		
     
      org.springframework
     		
     
      spring-webmvc
     		
     
      ${spring.version}
     	
    	
    		
     
      org.springframework
     		
     
      spring-tx
     		
     
      ${spring.version}
     	
    	
    		
     
      junit
     		
     
      junit
     		
     
      4.12
     		
     
      test
     	
    	
    		
     
      javax.servlet
     		
     
      javax.servlet-api
     		
     
      3.1.0
     		
     
      provided
     	
    	
    		
     
      javax.servlet.jsp
     		
     
      jsp-api
     		
     
      2.0
     		
     
      provided
     	
    	
    		
     
      jstl
     		
     
      jstl
     		
     
      1.2
     	
     
    	
    		
     
      log4j
     		
     
      log4j
     		
     
      ${log4j.version}
     	
    	
    		
     
      org.slf4j
     		
     
      slf4j-api
     		
     
      ${slf4j.version}
     	
    	
    		
     
      org.slf4j
     		
     
      slf4j-log4j12
     		
     
      ${slf4j.version}
     	
     
    	
    		
     
      org.mybatis
     		
     
      mybatis
     		
     
      ${mybatis.version}
     	
    	
    		
     
      org.mybatis
     		
     
      mybatis-spring
     		
     
      1.3.0
     	
    	
    		
     
      c3p0
     		
     
      c3p0
     		
     
      0.9.1.2
     	
    	
    		
     
      com.github.pagehelper
     		
     
      pagehelper
     		
     
      5.1.2
     	
    	
    		
     
      mysql
     		
     
      mysql-connector-java
     		
     
      5.1.5
     	
    	
    		
     
      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
     	
    
   

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;@Servicepublic class UserServiceImpl implements IUserService {
       @Autowired    private IUserDao userDao;    @Override    public List
   
     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
   
     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
   
     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;@Servicepublic class UserServiceImpl implements IUserService {
       @Autowired    private IUserDao userDao;    @Override    public List
   
     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.Driverjdbc.url=jdbc:mysql://localhost:3306/studentjdbc.username=rootjdbc.password=1234

2.applicationContext.xml

3.springmvc.xml

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")@ResponseBodypublic class UserController {
       @Autowired    private IUserService userService;    /**     * 查询所有     * @return     */    @RequestMapping("/findAll")    public List
   
     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生命周期介绍

参见

六.测试查询所有

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);        });}

转载地址：http://tllzi.baihongyu.com/