vue_vuex - CSDN
vue 订阅
VUE 是 iOS 和 Android 平台上的一款 Vlog 社区与编辑工具,允许用户通过简单的操作实现 Vlog 的拍摄、剪辑、细调、和发布,记录与分享生活。 [1]  还可以在社区直接浏览他人发布的 Vlog,与 Vloggers 互动。 [2] 展开全文
VUE 是 iOS 和 Android 平台上的一款 Vlog 社区与编辑工具,允许用户通过简单的操作实现 Vlog 的拍摄、剪辑、细调、和发布,记录与分享生活。 [1]  还可以在社区直接浏览他人发布的 Vlog,与 Vloggers 互动。 [2]
信息
软件大小
46.7 MB
开发商
VUE VIDEO CO., LTD.
软件名称
VUE Vlog
更新时间
2019年3月30日
软件版本
3.1.4
软件平台
iOS,Android
软件语言
英文、简体中文
VUE产生背景
随着手机摄像头的发展,越来越多的人开始使用手机拍照和摄像。摄像一般来说要比拍照门槛高,但是视频传播的信息量又远大于照片。VUE 就诞生在这样的背景下,希望用拍照一样简单的操作,帮助用户在手机上拍摄精美的短视频。
收起全文
精华内容
参与话题
  • Vue2.x经典后台管理系统案例讲解

    千人学习 2020-07-17 14:01:00
    包括如何搭建环境,vuejs常用指令,使用ElementUI快速搭建页面,各类表单的创建和验证,vue组件使用,数据传递的各种方式,前端如何模拟数据,以及如何与后端接口联调等等。 为了让大家能构造出一个规范...
  • vue是什么

    万次阅读 多人点赞 2018-12-17 10:57:43
    vue 为什么要用vue 传统的网页形式是浏览器脚本语言js连接了各种各样的Html,css,但缺乏正规的组织形式,比如在页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在...

    vue

    为什么要用vue

    传统的网页形式是浏览器脚本语言js连接了各种各样的Html,css,但缺乏正规的组织形式,比如在页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在HTML中,那么要对它们进行处理会十分的费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题,比如juqery中使用的

    $('#xxx').parent().parent().parent()
    

    一开始很好查找,但当页面结构发生变化,也就是说DOM的关联与嵌套层次要发生改变,那么之前的代码可能就会变成这样了:

    $('#xxx').parent().parent().parent().parent().parent()
    

    这样产品迭代后,对dom节点的查找操作等行为会有很大的性能损耗。

    vue是一款友好的、多用途的且高性能的js框架,它可以帮你创建可维护性和可测试性更强的代码库。官网对vue的优点描述是这样的:
    在这里插入图片描述

    1.易用:

    学习曲线平缓,api简洁,容易上手。学习过程较react来说比较容易,不那么痛苦

    2.灵活:

    如果你已经有一个现成的服务端框架,你可以将vue作为其中的一部分嵌入,带来更加丰富的交互系统 ,或者你希望将更多业务逻辑放到前端来实现,那么vue的核心库及其生态系统也可以满足你的各式需求,vue允许你将网页分割成可复用的组件,每个组件都可以包含自身的html,css,js文件,以用来渲染网页中相应的地方。

    3.高效:

    • 虚拟dom: 其数据全部在内存中,只有js引擎参与其中
      而真实dom会有浏览器渲染层在其中

    你的知道浏览器的虚拟DOM与真实DOM的区别(注意:需不需要虚拟DOM,其实与框架的DOM操作机制有关):

    虚拟DOM不会进行排版与重绘操作

    虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分(注意!),最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗

    真实DOM频繁排版与重绘的效率是相当低的

    虚拟DOM有效降低大面积(真实DOM节点)的重绘与排版,因为最终与真实DOM比较差异,可以只渲染局部(同2)

    使用虚拟DOM的损耗计算:

    总损耗 = 虚拟DOM增删改 + (与Diff算法效率有关)真实DOM差异增删改 + (较少的节点)排版与重绘

    直接使用真实DOM的损耗计算:

    总损耗 = 真实DOM完全增删改 + (可能较多的节点)排版与重绘

    只能说 虚拟DOM 只是减少了一些情况下, 对真实DOM操作的 次数.

    虚拟DOM只是个 JavaScript object

    它会在 对比 后再选择更新哪些DOM, 而不会像有些时候, 全部删除再重建.

    获取/修改 大量DOM元素的时候,就会先在 虚拟DOM 里 取值 对比.

    虚拟dom是在内存中维护的dom树,是在实体dom之上的一层抽象。有了这层抽象,不管是查询操作还是修改操作,都是先操作内存中的虚拟dom,在这个过程中可以做很多优化,从而减少对实体dom的操作。举两个例说明,1. 查询一个text标签的值,可以直接从虚拟dom中查找得到,根本不需要查询实体dom。2. 在一次操作中,要修改列表中的两条记录,要修改的元素会先把变更同步到虚拟dom上,然后根据最新的虚拟dom,一次性渲染出最终的实体dom,如果没有虚拟dom,两条记录的修改至少要对应两次对实体dom的操作,显然操作实体dom越频繁,网页速度越慢。

    对于vue.js的Virtual DOM,目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架,引入Virtual DOM会加大Vue.js本身的代码尺寸,也会消耗更多CPU(手机上会更耗电)(注意:消耗更多的CPU并不意味着会更卡,因为JavaScript计算是后台计算,他的计算量还不至于让DOM操作变得卡顿),并且在操作单个DOM元素的时候,反而多了一道计算工序,会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素,肯定操作的DOM量级普遍较大,平均一下还是比较划算的。

    4.社区和第三方组件库丰富

    vue是什么

    1.Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

    这里渐进式框架也就是上边vue特点中的灵活一项,使用vue,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;

    比如说刚开始用数据绑定做一个表单,后来控制整个页面的dom,再后来用router控制路由做单页应用,组件配合,vuex与数据配合等等,使用vue,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用。

    模块与可复用组件

    2.Vue 只关注视图层, 采用自底向上增量开发的设计。

    • 视图层:

    那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。

    我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层。

    • MVVM

    是Model-View-ViewModel 的缩写,由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。

    在这里插入图片描述
    在这里插入图片描述
    Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

    • MVC

    控制器负责对模型中的数据进行更新,而视图向模型中请求数据;当有用户的行为触发操作时,会有控制器更新模型,并通知视图进行更新,在这时视图向模型请求新的数据
    在这里插入图片描述

    3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    • 响应的数据绑定:

    就是vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,在图上是以input 标签的v-model属性来声明的,因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue.js测试 -</title>
    	<script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		<input type="text" name="" value="" placeholder="在这里输入文字,下面会跟着变化" v-model="message">
    		<hr>
    		<p>{{ message }}</p>
    	</div>
    	<script type="text/javascript">
    		var app = new Vue({
    		  el: '#app',
    		  data: {
    		    message: 'Hello Vue!'
    		  }
    		})
    	</script>
    </body>
    </html>
    
    
    • 组合的视图组件:

    Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑).

    组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行(组件化)

    在这里插入图片描述

    • 组件化优点:
      提高开发效率
      方便重复使用
      简化调试步骤
      提升整个项目的可维护性
      便于协同开发
    展开全文
  • VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业...
  • Vue2.x从入门到实战

    万人学习 2019-06-24 13:10:47
    课程从Vue2.x版本的入门,一直到实战课程共58集。包括内部指令、全局API、选项、实例和内置组件、Vue-cli、Vue-router、vuex。后有一门Vue实战,带你作一个快餐店的收银系统。
  • Vue.js 2.0之全家桶系列视频课程

    万人学习 2020-07-15 21:01:25
    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,...
  • Vue&综合案例

    2020-07-01 14:35:17
    Vue&综合案例 Vue 高级使用 自定义组件 学完了 Element 组件后,我们会发现组件其实就是自定义的标签。例如<el-button>就是对<button>的封装。 本质上,组件是带有一个名字且可复用的 Vue 实例,...

    Vue&综合案例

    Vue 高级使用

    自定义组件

    • 学完了 Element 组件后,我们会发现组件其实就是自定义的标签。例如<el-button>就是对<button>的封装。
    • 本质上,组件是带有一个名字且可复用的 Vue 实例,我们完全可以自己定义。
    • 定义格式
      在这里插入图片描述

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自定义组件</title>
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <div id="div">
            <my-button>我的按钮</my-button>
        </div>
    </body>
    <script>
        Vue.component("my-button",{
            // 属性
            props:["style"],
            // 数据函数
            data: function(){
                return{
                    msg:"我的按钮"
                }
            },
            //解析标签模板
            template:"<button style='color:red'>{{msg}}</button>"
        });
    
        new Vue({
            el:"#div"
        });
    </script>
    </html>
    

    效果:
    在这里插入图片描述

    Vue 生命周期

    在这里插入图片描述

    • 生命周期的八个阶段
      在这里插入图片描述

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>生命周期</title>
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
    </body>
    <script>
        let vm = new Vue({
    				el: '#app',
    				data: {
    					message: 'Vue的生命周期'
    				},
    				beforeCreate: function() {
    					console.group('------beforeCreate创建前状态------');
    					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
    					console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
    					console.log("%c%s", "color:red", "message: " + this.message);//undefined
    				},
    				created: function() {
    					console.group('------created创建完毕状态------');
    					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
    					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
    					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    				},
    				beforeMount: function() {
    					console.group('------beforeMount挂载前状态------');
    					console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
    					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
    				},
    				mounted: function() {
    					console.group('------mounted 挂载结束状态------');
    					console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
    					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
    				},
    				beforeUpdate: function() {
    					console.group('beforeUpdate 更新前状态===============》');
    					let dom = document.getElementById("app").innerHTML;
    					console.log(dom);
    					console.log("%c%s", "color:red", "el     : " + this.$el);
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data);
    					console.log("%c%s", "color:red", "message: " + this.message);
    				},
    				updated: function() {
    					console.group('updated 更新完成状态===============》');
    					let dom = document.getElementById("app").innerHTML;
    					console.log(dom);
    					console.log("%c%s", "color:red", "el     : " + this.$el);
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data);
    					console.log("%c%s", "color:red", "message: " + this.message);
    				},
    				beforeDestroy: function() {
    					console.group('beforeDestroy 销毁前状态===============》');
    					console.log("%c%s", "color:red", "el     : " + this.$el);
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data);
    					console.log("%c%s", "color:red", "message: " + this.message);
    				},
    				destroyed: function() {
    					console.group('destroyed 销毁完成状态===============》');
    					console.log("%c%s", "color:red", "el     : " + this.$el);
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data);
    					console.log("%c%s", "color:red", "message: " + this.message);
    				}
    			});
    
    		
    			// 销毁Vue对象
    			//vm.$destroy();
    			//vm.message = "hehe";	// 销毁后 Vue 实例会解绑所有内容
    
    			// 设置data中message数据值
    			vm.message = "good...";
    </script>
    </html>
    

    Vue 异步操作

    • 在 Vue 中发送异步请求,本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作!
    • 使用步骤
      1. 引入 axios 核心 js 文件。
      2. 调用 axios 对象的方法来发起异步请求。
      3. 调用 axios 对象的方法来处理响应的数据。
    • axios 常用方法
      在这里插入图片描述

    综合案例 学生管理系统

    案例效果

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    登录功能实现

    • 三层架构
      1.sql语句
      select * from user where name = #{name} and password = #{password}
      2.编写dao层(实现目的:通过java拿到数据库的数据)
      3.编写service层,让service调用dao,实现业务逻辑
      4.编写控制层(servlet),调用service中的方法,获取数据,响应前端
    • 前端实现步骤
      1.获取到用户输入的数据(或则说你想要传递给后端的数据)
      2.利用异步请求通过后端拿到数据
      3.展示数据(页面跳转、列表数据展示、alert弹窗)

    登录功能具体步骤

    • sql语句
    SELECT * FROM user WHERE username=#{username} AND password=#{password}
    
    • 编写DAO层
    public interface UserMapper {
        /*
            登录方法
         */
        @Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}")
        public abstract List<User> login(User user);
    }
    
    
    • 编写servie层
      1.接口编写
    /*
        业务层约束接口
     */
    public interface UserService {
        /*
            登录方法
         */
        public abstract List<User> login(User user);
    }
    
    	2.实现类
    
    
    public class UserServiceImpl implements UserService {
        @Override
        public List<User> login(User user) {
            InputStream is = null;
            SqlSession sqlSession = null;
            List<User> list = null;
            try{
                //1.加载核心配置文件
                is = Resources.getResourceAsStream("MyBatisConfig.xml");
    
                //2.获取SqlSession工厂对象
                SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
    
                //3.通过SqlSession工厂对象获取SqlSession对象
                sqlSession = sqlSessionFactory.openSession(true);
    
                //4.获取UserMapper接口的实现类对象
                UserMapper mapper = sqlSession.getMapper(UserMapper.class);
    
                //5.调用实现类对象的登录方法
                list = mapper.login(user);
    
            }catch (Exception e) {
                e.printStackTrace();
            } finally {
                //6.释放资源
                if(sqlSession != null) {
                    sqlSession.close();
                }
                if(is != null) {
                    try {
                        is.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
            //7.返回结果到控制层
            return list;
        }
    }
    
    	3.控制层(servlet)
    
    package com.itheima.controller;
    
    import com.itheima.bean.User;
    import com.itheima.service.UserService;
    import com.itheima.service.impl.UserServiceImpl;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.List;
    
    @WebServlet("/userServlet")
    public class UserServlet extends HttpServlet {
        private UserService service = new UserServiceImpl();
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //设置请求和响应编码
            req.setCharacterEncoding("UTF-8");
            resp.setContentType("text/html;charset=UTF-8");
    
            //1.获取请求参数
            String username = req.getParameter("username");
            String password = req.getParameter("password");
    
            //2.封装User对象
            User user = new User(username,password);
    
            //3.调用业务层的登录方法
            List<User> list = service.login(user);
    
            //4.判断是否查询出结果
            if(list.size() != 0) {
                //将用户名存入会话域当中
                req.getSession().setAttribute("username",username);
                //响应给客户端true
                resp.getWriter().write("true");
            }else {
                //响应给客户端false
                resp.getWriter().write("false");
            }
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            doGet(req,resp);
        }
    }
    

    filter类:

    package com.itheima.filter;
    
    import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /*
        检查登录
     */
    @WebFilter(value = {"/index.html"})
    public class LoginFilter implements Filter{
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
    
        }
    
        @Override
        public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) {
            try{
                //1.将请求和响应对象转换为和HTTP协议相关
                HttpServletRequest request = (HttpServletRequest) servletRequest;
                HttpServletResponse response = (HttpServletResponse) servletResponse;
    
                //2.获取会话域对象中数据
                Object username = request.getSession().getAttribute("username");
    
                //3.判断用户名
                if(username == null || "".equals(username)) {
                    //重定向到登录页面
                    response.sendRedirect(request.getContextPath() + "/login.html");
                    return;
                }
    
                //4.放行
                filterChain.doFilter(request,response);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
        @Override
        public void destroy() {
    
        }
    }
    
    

    User类:

    package com.itheima.bean;
    /*
        用户实体类
     */
    public class User {
        private String username; //账号
        private String password; //密码
    
        public User() {
        }
    
        public User(String username, String password) {
            this.username = username;
            this.password = password;
        }
    
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password;
        }
    }
    
    

    登录页面:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <script src="js/vue.js" type="text/javascript"></script>
        <script src="js/axios-0.18.0.js" type="text/javascript"></script>
        <script src="element-ui/lib/index.js"></script>
        <style lang="scss" scoped>
            .login-box {
                border: 1px solid #DCDFE6;
                width: 350px;
                margin: 120px auto;
                padding: 35px 35px 15px 35px;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                box-shadow: 0 0 25px #909399;
            }
    
            .login-title {
                text-align: center;
                margin: 0 auto 40px auto;
                color: #303133;
            }
        </style>
    </head>
    
    <body>
    <div id="app">
        <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
            <h3 class="login-title">欢迎登录</h3>
            <el-form-item label="账号" prop="username">
                <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data: {
                form: {
                    username: '',
                    password: '',
                },
                rules: { //校验规则
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                }
            },
            methods: {
                onSubmit(formName) {
                    // 为表单绑定验证功能
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            //请求服务器完成登录功能
                            axios.post("userServlet","username=" + this.form.username + "&password=" + this.form.password)
                                .then(resp => {
                                    if(resp.data) {
                                        //登录成功,跳转到首页
                                        location.href = "index.html";
                                    }else {
                                        //登录失败,跳转到登录页面
                                        alert("登录失败,请检查用户名和密码");
                                        location.href = "login.html";
                                    }
                                })
                        } else {
                            return false;
                        }
                    });
                }
            }
        });
    </script>
    </html>
    

    学生信息的增删改查功能实现

    DAO层:

    package com.itheima.mapper;
    
    import com.itheima.bean.Student;
    import org.apache.ibatis.annotations.Delete;
    import org.apache.ibatis.annotations.Insert;
    import org.apache.ibatis.annotations.Select;
    import org.apache.ibatis.annotations.Update;
    
    import java.util.List;
    
    /*
        学生持久层接口
     */
    public interface StudentMapper {
        /*
            查询全部方法
         */
        @Select("select * from student")
        List<Student> selectAll();
    
        /*
            添加数据方法
         */
        @Insert("insert into student values(#{number},#{name},#{birthday},#{address})")
        void addStu(Student stu);
    
        /*
            修改数据方法
         */
        @Update("update student set number=#{number},name=#{name},birthday=#{birthday} where id=#{id}")
        void updateStu(Student stu);
    
        /*
            删除数据方法
         */
        @Delete("delete from student where number=#{number}")
        void deleteStu(String number);
    }
    
    

    service层接口:

    package com.itheima.service;
    
    import com.github.pagehelper.Page;
    import com.itheima.bean.Student;
    
    /*
        学生业务层接口
     */
    public interface StudentService {
        /*
            分页查询方法
         */
        public abstract Page selectByPage(Integer currentPage, Integer pageSize);
    
        /*
            添加数据方法
         */
        public abstract void addStu(Student stu);
    
        /*
            修改数据方法
         */
        public abstract void updateStu(Student stu);
    
        /*
            删除数据方法
         */
        public abstract void deleteStu(String number);
    }
    
    

    service层实现类:

    package com.itheima.service.impl;
    
    import com.github.pagehelper.Page;
    import com.github.pagehelper.PageHelper;
    import com.itheima.bean.Student;
    import com.itheima.mapper.StudentMapper;
    import com.itheima.service.StudentService;
    import org.apache.ibatis.io.Resources;
    import org.apache.ibatis.session.SqlSession;
    import org.apache.ibatis.session.SqlSessionFactory;
    import org.apache.ibatis.session.SqlSessionFactoryBuilder;
    
    import java.io.IOException;
    import java.io.InputStream;
    
    /*
        学生业务层实现类
     */
    public class StudentServiceImpl implements StudentService {
        /*
            删除数据方法
         */
        @Override
        public void deleteStu(String number) {
            InputStream is = null;
            SqlSession sqlSession = null;
            try{
                //1.加载核心配置文件
                is = Resources.getResourceAsStream("MyBatisConfig.xml");
                //2.获取SqlSession工厂对象
                SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
                //3.通过SqlSession工厂对象获取SqlSession对象
                sqlSession = sqlSessionFactory.openSession(true);
                //4.获取StudentMapper接口实现类对象
                StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
                //5.调用实现类对象删除方法
                mapper.deleteStu(number);
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                //6.释放资源
                if(sqlSession != null) {
                    sqlSession.close();
                }
                if(is != null) {
                    try {
                        is.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    
        /*
            修改数据方法
         */
        @Override
        public void updateStu(Student stu) {
            InputStream is = null;
            SqlSession sqlSession = null;
            try{
                //1.加载核心配置文件
                is = Resources.getResourceAsStream("MyBatisConfig.xml");
                //2.获取SqlSession工厂对象
                SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
                //3.通过SqlSession工厂对象获取SqlSession对象
                sqlSession = sqlSessionFactory.openSession(true);
                //4.获取StudentMapper接口实现类对象
                StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
                //5.调用实现类对象修改方法
                mapper.updateStu(stu);
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                //6.释放资源
                if(sqlSession != null) {
                    sqlSession.close();
                }
                if(is != null) {
                    try {
                        is.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    
        /*
            添加数据方法
         */
        @Override
        public void addStu(Student stu) {
            InputStream is = null;
            SqlSession sqlSession = null;
            try{
                //1.加载核心配置文件
                is = Resources.getResourceAsStream("MyBatisConfig.xml");
                //2.获取SqlSession工厂对象
                SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
                //3.通过SqlSession工厂对象获取SqlSession对象
                sqlSession = sqlSessionFactory.openSession(true);
                //4.获取StudentMapper接口实现类对象
                StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
                //5.调用实现类对象添加方法
                mapper.addStu(stu);
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                //6.释放资源
                if(sqlSession != null) {
                    sqlSession.close();
                }
                if(is != null) {
                    try {
                        is.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    
        /*
            分页查询功能
         */
        @Override
        public Page selectByPage(Integer currentPage, Integer pageSize) {
            InputStream is = null;
            SqlSession sqlSession = null;
            Page page = null;
            try{
                //1.加载核心配置文件
                is = Resources.getResourceAsStream("MyBatisConfig.xml");
                //2.获取SqlSession工厂对象
                SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
                //3.通过SqlSession工厂对象获取SqlSession对象
                sqlSession = sqlSessionFactory.openSession(true);
                //4.获取StudentMapper接口实现类对象
                StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
                //5.设置分页参数
                page = PageHelper.startPage(currentPage, pageSize);
                //6.调用实现类对象查询全部方法
                mapper.selectAll();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                //7.释放资源
                if(sqlSession != null) {
                    sqlSession.close();
                }
                if(is != null) {
                    try {
                        is.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
    
            //8.返回结果到控制层
            return page;
        }
    }
    
    

    控制层(servlet):

    package com.itheima.controller;
    
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.github.pagehelper.Page;
    import com.github.pagehelper.PageInfo;
    import com.itheima.bean.Student;
    import com.itheima.service.StudentService;
    import com.itheima.service.impl.StudentServiceImpl;
    import org.apache.commons.beanutils.BeanUtils;
    import org.apache.commons.beanutils.ConvertUtils;
    import org.apache.commons.beanutils.Converter;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.text.ParseException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.Map;
    
    @WebServlet("/studentServlet")
    public class StudentServlet extends HttpServlet {
        private StudentService service = new StudentServiceImpl();
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //设置请求和响应编码
            req.setCharacterEncoding("UTF-8");
            resp.setContentType("text/html;charset=UTF-8");
    
            //1.获取方法名
            String method = req.getParameter("method");
            if(method.equals("selectByPage")) {
                //分页查询功能
                selectByPage(req,resp);
            }else if(method.equals("addStu")) {
                //添加数据功能
                addStu(req,resp);
            } else if(method.equals("updateStu")) {
                //修改数据功能
                updateStu(req,resp);
            } else if(method.equals("deleteStu")) {
                //删除数据功能
                deleteStu(req,resp);
            }
        }
    
        /*
            删除数据功能
         */
        private void deleteStu(HttpServletRequest req, HttpServletResponse resp) {
            //获取请求参数
            String number = req.getParameter("number");
    
            //调用业务层的删除方法
            service.deleteStu(number);
    
            //响应客户端
            try {
                resp.getWriter().write("true");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /*
            修改数据功能
         */
        private void updateStu(HttpServletRequest req, HttpServletResponse resp) {
            //获取请求参数
            Map<String, String[]> map = req.getParameterMap();
    
            //封装Student对象
            Student stu = new Student();
    
            //注册日期转换器方法
            dateConvert();
    
            try {
                BeanUtils.populate(stu,map);
            } catch (Exception e) {
                e.printStackTrace();
            }
    
            //调用业务层的修改方法
            service.updateStu(stu);
    
            //响应客户端
            try {
                resp.getWriter().write("true");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /*
            添加数据功能
         */
        private void addStu(HttpServletRequest req, HttpServletResponse resp) {
            //获取请求参数
            Map<String, String[]> map = req.getParameterMap();
    
            //封装Student对象
            Student stu = new Student();
    
            //注册日期转换器方法
            dateConvert();
    
            try {
                BeanUtils.populate(stu,map);
            } catch (Exception e) {
                e.printStackTrace();
            }
    
            //调用业务层的添加方法
            service.addStu(stu);
    
            //响应客户端
            try {
                resp.getWriter().write("true");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /*
            分页查询功能
         */
        private void selectByPage(HttpServletRequest req, HttpServletResponse resp) {
            //获取请求参数
            String currentPage = req.getParameter("currentPage");
            String pageSize = req.getParameter("pageSize");
    
            //调用业务层的查询方法
            Page page = service.selectByPage(Integer.parseInt(currentPage), Integer.parseInt(pageSize));
    
            //封装PageInfo
            PageInfo info = new PageInfo(page);
    
            //将info转成json,响应给客户端
            try {
                String json = new ObjectMapper().writeValueAsString(info);
                resp.getWriter().write(json);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
    
        /*
            日期转换
         */
        private void dateConvert() {
            ConvertUtils.register(new Converter() {
                public Object convert(Class type, Object value) {
                    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
                    try {
                        return simpleDateFormat.parse(value.toString());
                    } catch (ParseException e) {
                        e.printStackTrace();
                    }
                    return null;
                }
            }, Date.class);
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            doGet(req,resp);
        }
    }
    
    

    学生类:

    package com.itheima.bean;
    
    import java.sql.Date;
    
    /*
        学生实体类
     */
    public class Student {
        private String number;  //学号
        private String name;    //姓名
        private Date birthday;  //生日
        private String address; //地址
    
        public Student() {
        }
    
        public Student(String number, String name, Date birthday, String address) {
            this.number = number;
            this.name = name;
            this.birthday = birthday;
            this.address = address;
        }
    
        public String getNumber() {
            return number;
        }
    
        public void setNumber(String number) {
            this.number = number;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public Date getBirthday() {
            return birthday;
        }
    
        public void setBirthday(Date birthday) {
            this.birthday = birthday;
        }
    
        public String getAddress() {
            return address;
        }
    
        public void setAddress(String address) {
            this.address = address;
        }
    }
    
    

    主页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>学生管理系统</title>
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <script src="js/vue.js"></script>
        <script src="element-ui/lib/index.js"></script>
        <style>
            .el-header{
                background-color: #545c64;
            }
            .header-img{
                width: 100px;
                margin-top:20px;
            }
        </style>
    </head>
    <body>
    <div id="div">
        <el-container>
            <!-- 头部-->
            <el-header class="el-header">
                <el-container>
                    <div>
                        <el-image src="img/export.png" class="header-img"></el-image>
                    </div>
                    <el-menu
                        :default-active="activeIndex2"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="white"
                        active-text-color="#ffd04b"
                        style="margin-left: auto;">
                        <el-menu-item index="1">处理中心</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">我的工作台</template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                            <el-menu-item index="2-3">选项3</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="3"><a href="index.html" target="_self">首页</a></el-menu-item>
                    </el-menu>
                </el-container>
            </el-header>
    
            <!-- 中间部分 -->
            <el-container style="height: 580px; border: 1px solid #eee">
                <!-- 侧边栏 -->
                <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                  <el-menu :default-openeds="['1']">
                    <el-submenu index="1">
                      <template slot="title"><i class="el-icon-menu"></i>学工部</template>
                      <el-menu-item-group>
                          <el-menu-item index="1-1" @click="findAll"><i class="el-icon-help"></i>在校学生管理</el-menu-item>
                        <el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item>
                        <el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item>
                      </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>咨询部</template>
                        <el-menu-item-group>
                          <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
                          <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
                          <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                      <el-submenu index="3">
                        <template slot="title"><i class="el-icon-menu"></i>教研部</template>
                        <el-menu-item-group>
                          <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item>
                          <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item>
                          <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                  </el-menu>
                </el-aside>
                
                <el-container>
                  <!-- 主区域部分 -->
                  <el-main>
                      <iframe :src="iframeSrc" frameborder="false" style="top:80px;left: 120px; width: 100%;height:500px"></iframe>
                  </el-main>
                </el-container>
              </el-container>
        </el-container>
    </div>
    </body>
    <script>
        new Vue({
            el:"#div",
            data: {
                iframeSrc: "manager.html"
            },
            methods:{
                findAll:function () {
                    this.iframeSrc = "stuList.html"
                }
            }
        });
    </script>
    </html>
    

    学生列表页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>学生管理系统</title>
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <script src="js/vue.js"></script>
        <script src="element-ui/lib/index.js"></script>
        <script src="js/axios-0.18.0.js"></script>
    </head>
    <body>
    <div id="div">
        <b style="color: red; font-size: 20px;">学生列表</b>
        <div style="float: right;">
            <el-button type="primary" @click="showAddStu">添加学生</el-button>
        </div>
        <el-table :data="tableData">
            <el-table-column prop="number" label="学号" width="120">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="birthday" label="生日" width="140">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="props">
                  <el-button type="warning" @click="showEditStu(props.row)">编辑</el-button>
                  <el-button type="danger" @click="deleteStu(props.row)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
    
        <!--
            分页组件
              @size-change: 当改变每页条数时触发的函数
              @current-change:当改变页码时触发的函数
              current-page :默认的页码
              :page-sizes:每页条数选择框中显示的值
              :page-size : 默认的每页条数
              layout: 分页组件的布局
                  total(总条数), sizes(每页条数), prev(上一页), pager(所有的页码), next(下一页), jumper(跳转页码)
              :total: 总条数
        -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-sizes="[3,5,8]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
    
        <el-dialog title="添加学生信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref: 在获取表单对象时使用
            -->
            <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生学号" prop="number">
                    <el-input v-model="formData.number"></el-input>
                </el-form-item>
                <el-form-item label="学生姓名" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="学生生日" prop="birthday">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="formData.birthday" type="date"></el-input>
                </el-form-item>
                <el-form-item label="学生地址" prop="address">
                    <el-input v-model="formData.address"></el-input>
                </el-form-item>
                <el-form-item align="right">
                    <el-button type="primary" @click="addStu()">添加</el-button>
                    <el-button @click="resetForm('addForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    
        <el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')" >
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref: 在获取表单对象时使用
            -->
            <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生学号" prop="number">
                    <el-input v-model="editFormData.number"></el-input>
                </el-form-item>
                <el-form-item label="学生姓名" prop="name">
                    <el-input v-model="editFormData.name"></el-input>
                </el-form-item>
                <el-form-item label="学生生日" prop="birthday">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="editFormData.birthday" type="date"></el-input>
                </el-form-item>
                <el-form-item label="学生地址" prop="address">
                    <el-input v-model="editFormData.address"></el-input>
                </el-form-item>
    
                <el-form-item align="right">
                    <el-button type="warning" @click="updateStu()">修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    </body>
    <script>
        new Vue({
            el:"#div",
            data:{
                dialogTableVisible4add: false,  //添加窗口显示状态
                dialogTableVisible4edit: false, //编辑窗口显示状态
                formData:{},//添加表单的数据
                editFormData: {},//编辑表单的数据
                tableData:[],//表格数据
                pagination: {
                    currentPage: 1, //当前页
                    pageSize: 5,    //每页显示条数
                    total: 0        //总条数
                },
                rules: {
                    number: [
                        {required: true, message: '请输入学号', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    birthday: [
                        {required: true, message: '请选择日期', trigger: 'change'}
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                        {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
                    ],
                }
            },
            methods:{
                //分页查询功能
                selectByPage(){
                    axios.post("studentServlet","method=selectByPage&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)
                        .then(resp => {
                            //将查询出的数据赋值tableData
                            this.tableData = resp.data.list;
                            //设置分页参数
                            //当前页
                            this.pagination.currentPage = resp.data.pageNum;
                            //总条数
                            this.pagination.total = resp.data.total;
                        })
                },
                //改变每页条数时执行的函数
                handleSizeChange(pageSize) {
                    //修改分页查询的参数
                    this.pagination.pageSize = pageSize;
                    //重新执行查询
                    this.selectByPage();
                },
                //改变页码时执行的函数
                handleCurrentChange(pageNum) {
                    //修改分页查询的参数
                    this.pagination.currentPage = pageNum;
                    //重新执行查询
                    this.selectByPage();
                },
                showAddStu() {
                    //弹出窗口
                    this.dialogTableVisible4add = true;
                },
                //添加学生功能
                addStu(){
                    let param = "method=addStu&number=" + this.formData.number + "&name=" + this.formData.name +
                            "&birthday=" + this.formData.birthday + "&address=" + this.formData.address;
                    axios.post("studentServlet",param)
                        .then(resp => {
                           if(resp.data){
                               //调用分页查询
                               this.selectByPage();
                           }
                        });
                    //关闭添加窗口
                    this.dialogTableVisible4add = false;
                },
                resetForm(addForm) {
                    //双向绑定,输入的数据都赋值给了formData, 清空formData数据
                    this.formData = {};
                    //清除表单的校验数据
                    this.$refs[addForm].resetFields();
                },
                showEditStu(row) {
                    //1. 弹出窗口
                    this.dialogTableVisible4edit = true;
    
                    //2. 显示表单数据
                    this.editFormData = {
                        number:row.number,
                        name:row.name,
                        birthday:row.birthday,
                        address:row.address,
                    }
                },
                //修改数据功能
                updateStu() {
                    let param = "method=updateStu&number=" + this.editFormData.number + "&name=" + this.editFormData.name +
                        "&birthday=" + this.editFormData.birthday + "&address=" + this.editFormData.address;
                    axios.post("studentServlet",param)
                        .then(resp => {
                           if(resp.data){
                               //调用分页查询方法
                               this.selectByPage();
                           }
                        });
                    //关闭编辑窗口
                    this.dialogTableVisible4edit = false;
                },
                //删除数据功能
                deleteStu(row) {
                    if(confirm("确定要删除" + row.number + "数据?")) {
                        let param = "method=deleteStu&number=" + row.number;
                        axios.post("studentServlet",param)
                            .then(resp => {
                                if(resp.data){
                                    //调用分页查询方法
                                    this.selectByPage();
                                }
                            });
                    }
                }
            },
            mounted(){
                //调用分页查询功能
                this.selectByPage();
            }
        });
    </script>
    </html>
    
    展开全文
  • VUEX综合案例

    2020-04-08 10:26:00
    1、Vuex分成五个部分: State:单一状态树,共同维护的一个状态,state里面可以是很多个全局状态 Getters:状态获取,获取数据并渲染 Mutations:触发同步事件,处理数据的唯一途径,state的改变或赋值只能在这里 ...

    1、Vuex分成五个部分:

    State:单一状态树,共同维护的一个状态,state里面可以是很多个全局状态
    Getters:状态获取,获取数据并渲染
    Mutations:触发同步事件,处理数据的唯一途径,state的改变或赋值只能在这里
    Actions:提交mutation,数据的异步操作
    Module:将vuex进行分模块
    在这里插入图片描述

    2、使用步骤

    2.1 安装
    npm install vuex -S

    2.2 创建store模块,分别维护state/actions/mutations/getters
    store文件夹
    index.js
    state.js
    actions.js
    mutations.js
    getters.js

    2.3 在store/index.js文件中新建vuex的store实例,并注册上面引入的各大模块
    除了index.js以外其他四个js文件都需要引入下面这个模块
    index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import getters from './getters'
    import actions from './actions'
    import mutations from './mutations'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
         state,
         getters,
         actions,
         mutations
     })
    
     export default store
    

    2.4 在main.js中导入并使用store实例
    main.js

    import store from './store'
    
    new Vue({
        el: '#app',
        router,
        store, //在main.js中导入store实例
        components: {
            App
        },
        template: '<App/>',
        data: {
           
        }      
     })
    

    2.5 state.js

    export default{
      //定义变量,名字自定义
          htname:'aaa', //后面基本上用的是这个变量
          hhname:'bbb',
    }
    

    2.6 mutations.js

    export default {
      sethtname: (state, payload) => {
        state.htname = payload.htname;
      },
    }
    

    2.7 action.js

    export default {
      sethtnameAsync: (context, payload) => {
        console.log('哦哦哦');
        setTimeout(() => {
          console.log('嗯嗯嗯');
          context.commit('sethtname', payload);
        }, 3000);
        console.log('哈哈哈');
      },
      doAjax:(context, payload) => {
        //vuex是不能被vue实例的
        let _this =payload._this;
        let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
        // let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
         console.log(url);
        _this.axios.post(url,{}).then((response) => {
            console.log('doAjax............');
            console.log(response);
          }).catch((response)=>{
            console.log(response);
          });
        },
      }
    

    2.8 getters.js 获取数据并且渲染

    export default{
       gethtname: (state) => {
             return state.htname;
         }
    }
    

    2.9 显示页面VuePage1.vue

    <template>
      <div>
        <h2>第一个vuex页面:</h2>
        <h3>{{ht}}</h3>
        <button @click="hscht">换诗词</button>
        <button @click="hschtAsync">一个月后换诗词</button>
        <button @click="doAjax">测试vuex中使用ajax</button>
      </div>
    </template>
    <script>
      export default{
        data(){
          return{
          };
        },
        methods: {
          hscht() {
              this.$store.commit('sethtname',{
                htname:'bbb',
              });
          },
           hschtAsync() {
               this.$store.dispatch('sethtnameAsync',{
                htname:'ccc',
              });
          },
          doAjax(){
            this.$store.dispatch('doAjax',{
              _this:this,
            });
          }
        },
        computed: {
          ht() {
            // return this.$store.state.htname;   //不推荐这种方式
            return this.$store.getters.gethtname;
          }
        },
      }
    </script>
    <style>
    </style>
    
    展开全文
  • vuex综合案例代码

    2020-09-02 09:09:11
    需求:两个组件A和B,vuex维护的公共数据是餐馆名:resturantName,默认值:飞歌餐馆, 那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称为A餐馆,则B页面显示的将会是A餐馆,反之B修改同理。...
  • Vue教程(综合小案例)

    2020-09-21 20:03:38
    Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ ...

    1.VueJS 概述与快速入门

    1.1 VueJS介绍
    Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑
    定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
    官网:https://cn.vuejs.org/
    1.2 MVVM模式
    MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为
    抽象化,让我们将视图 UI 和业务逻辑分开
    MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model) Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,
    也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端
    开发更加高效、便捷

    在这里插入图片描述
    1.3 VueJS 快速入门

    <!DOCTYPE html> <html><head><meta charset="utf-8" /> <title>快速入门</title>
    
    
    <script src="js/vuejs-2.5.16.js"></script> </head> <body><div id="app"> {{message}} </div> <script> new Vue({ el:'#app', //表示当前vue对象接管了div区域 data:{message:'hello world' //注意不要写分号结尾 } }); </script> </body> </html>
    

    1.4 插值表达式
    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对
    象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新。
    Vue.js 都提供了完全的 JavaScript 表达式支持。

    {{ number + 1 }} {{ ok ? 'YES' : 'NO' }}
    

    这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个
    表达式,所以下面的例子都不会生效。

    <!-- 这是语句,不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效,请使用三元表达式 --> {{ if (ok) { return message } }}
    
    **2.VueJS 常用系统指令**
    2.1 v-on
    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码
    2.1.1 v-on:click
    
    <!DOCTYPE html> <html><head><meta charset="utf-8" /> <title>事件处理 v-on示例1</title>
    
    <script src="js/vuejs-2.5.16.js"></script> 
    </head> 
    <body>
    <div id="app"> {{message}} <button v-on:click="fun1('good')">点击改变</button> </div> <script> new Vue({ el:'#app', //表示当前vue对象接管了div区域
     data:{message:'hello world'
      //注意不要写分号结尾 },
      methods:{ fun1:function(msg){ this.message=msg; } } });
       </script> 
       </body> 
       </html>
    
    
    

    2.1.2 v-on:keydown

    <!DOCTYPE html> <html><head>
    <meta charset="utf-8" />
    <title>事件处理 v-on示例2</title>
     <script src="js/vuejs-2.5.16.js"></script>
      </head> 
      <body>
      <div id="app">
       <input type="text"v-on:keydown="fun2('good',$event)">
        </div>
         <script> 
         new Vue({ el:'#app', 
         //表示当前vue对象接管了div区域 
         methods:{ fun2:function(msg,event){ if(! ((event.keyCode>=48&&event.keyCode<=57)||event.keyCode==8||event.keyCode==46)){ event.preventDefault(); } } } }); 
         </script>
          </body> 
          </html>
    

    2.1.3 v-on:mouseover

    <!DOCTYPE html> <html><head><meta charset="utf-8" /> <title>事件处理 v-on示例3</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body>
    
    <div id="app"> 
    <div v-on:mouseover="fun1" id="div"> 
    <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
     </div> 
     </div> 
    <script> new Vue({ el:'#app', //表示当前vue对象接管了div区域 
    methods:{ fun1:function(){ alert("div"); },
    fun2:function(event){ alert("textarea");
     event.stopPropagation();//阻止冒泡 } } }); 
     </script> 
     </body> 
     </html>
    
    

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

    .stop
    .prevent
    .capture
    .self
    .once

    <!DOCTYPE html> <html>
    
    <head><meta charset="utf-8" /> 
    <title>v-on 事件修饰符</title>
     <script src="js/vuejs-2.5.16.js"></script> 
     </head> 
     <body>
     <div id="app">
      <form @submit.prevent action="http://www.itcast.cn" method="get">
       <input type="submit" value="提交"/> 
       </form> 
       <div @click="fun1"> 
       <a @click.stop href="http://www.itcast.cn">itcast</a> 
       </div> 
       </div> 
       <script>
        new Vue({ el:'#app', //表示当前vue对象接管了div区域 
        methods:{ fun1:function(){ alert("hello itcast"); } } }); 
        </script> 
        </body> 
        </html>
    

    2.1.5 按键修饰符
    Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
    全部的按键别名:

    .enter
    .tab
    .delete (捕获 “删除” 和 “退格” 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

    <!DOCTYPE html> <html><head>
    <meta charset="utf-8" />
     <title>v-on 按钮修饰符</title> 
     <script src="js/vuejs-2.5.16.js"></script> 
     </head>
      <body>
      <div id="app">
       <input type="text" v-on:keyup.enter="fun1"> </div> 
       <script> 
       new Vue({ el:'#app', //表示当前vue对象接管了div区域 
       methods:{ fun1:function(){ alert("你按了回车"); } } });
        </script> 
        </body>
         </html>
    
    
    <p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
    

    v-on简写方式

    <!-- 完整语法 --> <a v-on:click="doSomething">...</a> 
    <!-- 缩写 --> 
    <a @click="doSomething">...</a>
    

    2.2 v-text与v-html

    <!DOCTYPE html>
     <html><head>
     <meta charset="utf-8" />
      <title>v-html与v-text</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>隔壁老王</h1>" } });
     </script> 
     </body>
      </html>
    

    2.3 v-bind
    插值语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind指令

    <!DOCTYPE html>
     <html><head>
     <meta charset="utf-8" /> 
     <title>v-bind</title>
      <script src="js/vuejs-2.5.16.js"></script> 
      </head> 
      <body>
      <div id="app">
       <font size="5" v-bind:color="ys1">隔壁老王</font>
        <font size="5" :color="ys2">屌丝程序员</font>
         <hr>
          <a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a> 
          </div>
           <script> 
           new Vue({ el:'#app', //表示当前vue对象接管了div区域 
           data:{ys1:"red", ys2:"green", id:1 } });
            </script> 
            </body> 
            </html>
    

    v-bind简写方式

    <!-- 完整语法 -->
     <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>
    

    2.4 v-model

    <!DOCTYPE html> 
    <html>
    <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" id="username" v-model="user.username"><br>
      密码:<input type="password" id="password" v-model="user.password"><br> 
      <input type="button" @click="fun" value="获取"> </div> 
      <script> 
      new Vue({ el:'#app', //表示当前vue对象接管了div区域 
      data:{user:{username:"",password:""} },
      methods:{ fun:function(){
       alert(this.user.username+" "+this.user.password); 
       this.user.username="tom"; 
      this.user.password="11111111"; } } }); 
      </script> 
      </body>
       </html>
    

    2.5 v-for

    操作array

    <!DOCTYPE html> 
    <html>
    <head>
    <meta charset="utf-8" /> 
    <title>v-model</title> 
    <script src="js/vuejs-2.5.16.js"></script>
     </head> 
     <body>
     <div id="app"> 
     <ul><li v-for="(item,index) in list">{{item+" "+index}}</li> 
     </ul> 
     </div> 
     <script> 
     new Vue({ el:'#app', //表示当前vue对象接管了div区域
    data:{list:[1,2,3,4,5,6] } }); 
    </script> 
    </body>
     </html>
    

    操作对象

    <!DOCTYPE html> 
    <html>
    <head>
    <meta charset="utf-8" /> 
    <title>v-for示例1</title> 
    <script src="js/vuejs-2.5.16.js"></script> 
    </head> 
    <body>
    <div id="app">
     <ul><li v-for="(value,key) in product">{{key}}--{{value}}</li> </ul> 
     </div> 
     <script>
      new Vue({ el:'#app', //表示当前vue对象接管了div区域 
      data:{product:{id:1,pname:"电视机",price:6000} } });
       </script>
        </body>
         </html>
    

    操作对象数组

    <!DOCTYPE html> 
    <html><head>
    <meta charset="utf-8" /> 
    <title>v-for示例1</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>
    <tr v-for="p in products"> 
    <td>{{p.id}} </td>
     <td>{{p.pname}} </td> 
     <td>{{p.price}} </td>
      </tr> 
      </table> 
      </div> 
      <script>
       new Vue({ el:'#app', //表示当前vue对象接管了div区域
        data:{products:[{id:1,pname:"电视机",price:6000},
        {id:2,pname:"电冰箱",price:8000}, 
        {id:3,pname:"电风扇",price:600}] } });
         </script> 
         </body> 
         </html>
    

    2.6 v-if与v-show

    v-if是根据表达式的值来决定是否渲染元素

    v-show是根据表达式的值来切换元素的display css属性

    <!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">播客</span> 
     <span v-show="flag">itcast</span> 
     <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>
    

    3.VueJS生命周期
    每个 Vue 实例在被创建之前都要经过一系列的初始化过程

    在这里插入图片描述
    vue在生命周期中有这些状态,
    beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue
    在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会。那么,在这些vue钩子
    中,vue实例到底执行了那些操作,我们先看下面执行的例子

    <head>
    <meta charset="utf-8" /> 
    <title>生命周期</title>
     <script src="js/vuejs-2.5.16.js"></script> 
     </head>
      <body>
      <div id="app"> {{message}} </div>
       <script> 
       var vm = new Vue({ el: "#app", data: { message: 'hello world' },
       beforeCreate: function() { console.log(this); showData('创建vue实例前', this); },
       created: function() { showData('创建vue实例后', this); },
       beforeMount: function() { showData('挂载到dom前', this); },
       mounted: function() { showData('挂载到dom后', this); },
       beforeUpdate: function() { showData('数据变化更新前', this); },
       updated: function() { showData('数据变化更新后', this); },
       beforeDestroy: function() { vm.test = "3333"; showData('vue实例销毁前', this); },
       destroyed: function() { showData('vue实例销毁后', this); } }); 
       function realDom() { console.log('真实dom结构:' + document.getElementById('app').innerHTML); }function showData(process, obj) { console.log(process);
    
    
    console.log('data 数据:' + obj.message) console.log('挂载的对象:') 
    console.log(obj.$el) realDom(); 
    console.log('------------------') 
    console.log('------------------') }vm.message="good..."; vm.$destroy(); 
    </script> 
    </body> 
    </html>
    

    vue对象初始化过程中,会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容
    beforeCreate :数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象
    created :数据已经绑定到了对象实例,但是还没有挂载对象
    beforeMount: 模板已经编译好了,根据数据和模板已经生成了对应的元素对象,将数据对象关联到了对象的
    el属性,el属性是一个HTMLElement对象,也就是这个阶段,vue实例通过原生的createElement等方法来创
    建这个html片段,准备注入到我们vue实例指明的el属性所对应的挂载点
    mounted:将el的内容挂载到了el,相当于我们在jquery执行了(el).html(el),生成页面上真正的dom,上面我们
    就会发现dom的元素和我们el的元素是一致的。在此之后,我们能够用方法来获取到el元素下的dom对象,并
    进 行各种操作
    当我们的data发生改变时,会调用beforeUpdate和updated方
    beforeUpdate :数据更新到dom之前,我们可以看到$el对象已经修改,但是我们页面上dom的数据还
    没有发生改变
    updated: dom结构会通过虚拟dom的原则,找到需要更新页面dom结构的最小路径,将改变更新到
    dom上面,完成更新
    beforeDestroy,destroed :实例的销毁,vue实例还是存在的,只是解绑了事件的监听还有watcher对象数据
    与view的绑定,即数据驱动

    4.VueJS ajax

    4.1 vue-resource
    vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新
    到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,在这里大家了解一下vue-resource就可以。
    vue-resource的github: https://github.com/pagekit/vue-resource
    **

    4.2 axios

    **
    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
    axios的github:https://github.com/axios/axios

    4.2.1 引入axios

    首先就是引入axios,如果你使用es6,只需要安装axios模块之后

    import axios from 'axios'; //安装方法 npm install axios //或bower install axios
    

    当然也可以用script引入

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    4.2.2 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){ cons
     ole.log(response); })
     .catch(function(err){ console.log(err); });
    

    **

    4.2.3 post请求

    **

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

    为方便起见,为所有支持的请求方法提供了别名

    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]])
    
    
    
    展开全文
  • vuejs (3)- 综合案例

    2020-07-16 16:28:55
    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) ...
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-11-18 11:33:25
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • Vue + Spring Boot 项目实战(一):项目简介

    万次阅读 多人点赞 2020-09-03 22:26:42
    白卷是一款使用 Vue+Spring Boot 开发的前后端分离项目。除用于入门练手之外,亦可作为搭建小型 Web 项目的脚手架。
  • 什么是VUE?为什么用VUE

    万次阅读 多人点赞 2018-05-24 13:28:01
    Vue.js新手入门指南 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做...
  • 什么是vue?为什么用vue

    万次阅读 多人点赞 2019-02-12 15:45:47
    综合:https://segmentfault.com/a/1190000015560315 https://blog.csdn.net/liang377122210/article/details/71545459 ...这几篇都写得非常好 1.Vue.js是什么? vue就是一个js库,...
  • git上看到一个基于vue的工程 不知道用什么IDE打开的 菜鸟初学Vue 望大神指点 ![图片说明](https://img-ask.csdn.net/upload/201611/18/1479438949_866064.png) git地址:https://github.com/bajian/vue-drawer
  • 一.Vue基本介绍 1.vue是渐进式的JavaScript框架 2.作者:尤雨溪(一位华裔前Google工程师) 3.作用:动态构建用户界面 二:Vue的特点 1.遵循MVVM模式(m->model(数据对象) v->view(视图) vm->view ...
  • 这个系列我们一起学习的是Vue.js基础知识。你没看错,是基础知识。所以,哪怕你入行不久,相信你在的大白话风格下,也能学会。但还是希望你有开发过html,css,javascript的项目经验,...什么是MVVM3.Vue.js的优点4....
  • vue框架简介

    万次阅读 2019-06-15 04:50:36
    什么是vue 是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue的核心库只关注视图层 vue的兼容性 Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript ...
  • 初识 Vue.js 中的 *.Vue文件

    万次阅读 多人点赞 2018-05-23 00:23:49
    什么是Vue.js?vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计。(自底向上设计方法是根据系统功能要求,从具体的器件、逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对...
  • awesome-vue

    千次阅读 2017-03-26 19:36:58
    Vue.js  https://github.com/vuejs/awesome-vue A curated list of awesome things related to Vue.js Resources Official ResourcesExternal ResourcesJob PortalCommunityPodcastsOfficia
1 2 3 4 5 ... 20
收藏数 731,466
精华内容 292,586
关键字:

vue