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>
    
    展开全文
  • 组件案例-评论列表 实现效果 ...实现的逻辑是 ...2.在methods中定义的方法中 加载保存中 localStorage中的列表数据到list中 3.将 录入的信息 添加到list中,然后将数据保存到 localStorage中 4.调用父组件中的方法来刷新...

    组件案例-评论列表

    实现效果
    组件添加好后,我们通过点击 发表评论 来添加内容到 评论列表中。实现的逻辑是
    1.通过点击 发表评论 触发点击事件 调用组件中methods中定义的方法
    2.在methods中定义的方法中 加载保存中 localStorage中的列表数据到list中
    3.将 录入的信息 添加到list中,然后将数据保存到 localStorage中
    4.调用父组件中的方法来刷新列表数据

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    </head>
    
    <body>
      <div id="app">
    
    
        <cmt-box @func="loadComments"></cmt-box>
    
    
        <ul class="list-group">
          <li class="list-group-item" v-for="item in list" :key="item.id">
            <span class="badge">评论人: {{ item.user }}</span>
            {{ item.content }}
          </li>
        </ul>
    
    
      </div>
    
    
      <template id="tmpl">
        <div>
    
          <div class="form-group">
            <label>评论人:</label>
            <input type="text" class="form-control" v-model="user">
          </div>
    
          <div class="form-group">
            <label>评论内容:</label>
            <textarea class="form-control" v-model="content"></textarea>
          </div>
    
          <div class="form-group">
            <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
          </div>
    
        </div>
      </template>
    
      <script>
    
        var commentBox = {
          data() {
            return {
              user: '',
              content: ''
            }
          },
          template: '#tmpl',
          methods: {
            postComment() { // 发表评论的方法
          
              var comment = { id: Date.now(), user: this.user, content: this.content }
    
              // 从 localStorage 中获取所有的评论
              var list = JSON.parse(localStorage.getItem('cmts') || '[]')
              list.unshift(comment)
              // 重新保存最新的 评论数据
              localStorage.setItem('cmts', JSON.stringify(list))
    
              this.user = this.content = ''
    
              this.$emit('func')
            }
          }
        }
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            list: [
              { id: Date.now(), user: 'zs1', content: 'aaa' },
              { id: Date.now(), user: 'zs2', content: 'bbbb' },
              { id: Date.now(), user: 'zs3', content: 'cccc' }
            ]
          },
          beforeCreate(){ // 注意:这里不能调用 loadComments 方法,因为在执行这个钩子函数的时候,data 和 methods 都还没有被初始化好
    
          },
          created(){
            this.loadComments()
          },
          methods: {
            loadComments() { // 从本地的 localStorage 中,加载评论列表
              var list = JSON.parse(localStorage.getItem('cmts') || '[]')
              this.list = list
            }
          },
          components: {
            'cmt-box': commentBox
          }
        });
      </script>
    </body>
    
    </html>
    
    
    展开全文
  • vuex综合案例代码

    2020-09-02 09:09:11
    需求:两个组件A和B,vuex维护的公共数据是餐馆名:resturantName,默认值:飞歌餐馆, 那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称为A餐馆,则B页面显示的将会是A餐馆,反之B修改同理。...
  • 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库,...
  • 什么是vue脚手架

    万次阅读 2017-09-11 15:41:09
    通俗点讲透vue的脚手架的意思
  • git上看到一个基于vue的工程 不知道用什么IDE打开的 菜鸟初学Vue 望大神指点 ![图片说明](https://img-ask.csdn.net/upload/201611/18/1479438949_866064.png) git地址:https://github.com/bajian/vue-drawer
  • 阻止启动生产消息,常用作指令。 阻止启动生产消息 這又是什麽意思? 看下效果 Vue.config.productionTip = false Vue.config.productionTip = true 感覺多了一行信息 ...
  • vue-cli是什么

    万次阅读 2017-07-25 11:14:49
    vue-cli是什么vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种。 当然首先你的安装vue,webpack,node等一些必要的...
  • vue打包命令

    万次阅读 2019-01-05 14:30:03
    找到你的packe.json文件 找到 scripts 里面的命令 打包命令: npm run build
  • Vue.js 是什么?  Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API;  我们都知道单页面应用:页面切换快 ,首屏时间稍慢,SEO差 js 渲染  (多页面应用: 首屏时间快,SEO好 切换...
1 2 3 4 5 ... 20
收藏数 534,188
精华内容 213,675
关键字:

vue