学生管理系统

最新推荐文章于 2022-12-11 16:29:05 发布
最新推荐文章于 2022-12-11 16:29:05 发布
阅读量338 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41375318/article/details/104014072
版权

01-Vue高级使用-自定义组件

  • 学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如 就是对的封装。

  • 本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。

  • 定义格式

    Vue.component(组件名称, {
 props:组件的属性,
 data: 组件的数据函数,
 template: 组件解析的标签模板
})

  • 代码实现

    <!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>

02-Vue高级使用-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>

03-Vue高级使用-异步操作

  • 在Vue中发送异步请求，本质上还是AJAX。我们可以使用axios这个插件来简化操作！

  • 使用步骤
    1.引入axios核心js文件。
    2.调用axios对象的方法来发起异步请求。
    3.调用axios对象的方法来处理响应的数据。

  • axios常用方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ymNe8dl9-1601978496716)(.\img\axios常用方法.png)]

  • 代码实现

    • html代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="div">
        {{name}}
        <button @click="send()">发起请求</button>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"张三"
        },
        methods:{
            send(){
                // GET方式请求
                // axios.get("testServlet?name=" + this.name)
                //     .then(resp => {
                //         alert(resp.data);
                //     })
                //     .catch(error => {
                //         alert(error);
                //     })

                // POST方式请求
                axios.post("testServlet","name="+this.name)
                    .then(resp => {
                        alert(resp.data);
                    })
                    .catch(error => {
                        alert(error);
                    })
            }
        }
    });
</script>
</html>
    • java代码
    package com.itheima;

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;
@WebServlet("/testServlet")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //获取请求参数
        String name = req.getParameter("name");
        System.out.println(name);

        //响应客户端
        resp.getWriter().write("请求成功");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

04-Vue高级使用-高级使用的小结

  • 自定义组件：本质上，组件是带有一个名字且可复用的 Vue 实例，我们可以自己来定义。

    Vue.component(组件名称, {
 props:组件的属性,
 data: 组件的数据函数,
 template: 组件解析的标签模板
})

  • 生命周期：核心八个阶段
    beforeCreate：创建前
    created：创建后
    beforeMount：载入前
    mounted：载入后
    beforeUpdate：更新前
    updated：更新后
    beforeDestroy：销毁前
    destroyed：销毁后

  • 异步操作：通过 axios 插件来实现。

*Major*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于PHP的学生管理系统期末大作业
06-11
基于PHP开发的学生管理系统，可运行源码。 信息化已经渗透到我们生活的方方面面，学校信息化的发展也是一种不可避免的趋势。伴随着高等院校招生规模的不断扩大，传统人工管理信息的方法不但不能满足这种管理上的...
Vue+Element基础介绍
qq_40658986的博客
07-04 5436
Vue+Element基础介绍
ElementUI+Vue
0424
06-15 2676
element ui 一.基本概念 1.前后端分离 1.1.什么是前后端分离 前端代码后后端代码分开运行，后端有后端的服务器去运行，前端有前端的服务器去运行，前端和后端通过 HTTP Restful 方式进行交互，通常是前端向后端发送AJAX请求获取数据。 注意：有些人认为 前段人员写前段，后端人员写后端就是前后端分离了，其实这样说不准确，前后端分离不是前后端分工，只有前端代码和后端代码分开各自都有独立的容器运行这才是前后端分离，谁写前端谁写后端其实并不重要。 1.2.为什么要前后端分离 责任分离，擅长的
VUE&Element简单介绍。
yzh2776680982的博客
12-11 3394
▶ 概述Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。元素 - 全球最受欢迎的 Vue UI 框架 (eleme.cn)进入官网能看到如下页面接下来直接点击 `组件` ，页面如下。
Vue + Element-UI —— 项目实战（一）
热门推荐
HuoZhiyan 的博客
06-01 1万+
Element-ui + Vue 项目
Vue + element项目搭建与使用
u014071806的博客
06-29 5975
Vue项目搭建与使用新建vue项目引入 element第一个请求（axios）vue路由vue项目打包部署自定义组件vuex入门mockjs的使用 新建vue项目 1.首先我们需要下载node.js，之后，我们才可以使用npm包管理工具，安装过程这里就不详细介绍了。 2.其次，我们需要安装vue-cli脚手架构建工具，安装命令 npm install -g vue-cli，等待安装完成。 3.接下来，就可以进入你要创建项目的目录。比如，我要将项目新建在D盘根目录 你也可以进入你要创建项目的目录，按住sh
python 学生管理系统
02-22
python 学生管理系统 mysql thiker
php学生管理系统
10-21
主要为大家详细介绍了php学生管理系统的具体实现代码，感兴趣的小伙伴们可以参考一下
JAVA-GUI学生管理系统
07-08
JAVA-GUI学生管理系统
学生管理系统（Mysql数据库版）
04-07
学习了Mysql之后，在以前的文件系统上的学生管理系统上进行的改进版本。经过本人测试，可以使用。分享给大家，希望可以对大家有所帮助。
网页用户管理系统，js的dom实现
02-25
一个用js和xml写的网页用户管理系统，相当的不错。初始账户是weihao，密码是123456，进去后可以看见所有用户。
基于DOM-XML学生信息管理系统报告
12-22
基于DOM-XML学生信息管理系统报告 参考下
Javaweb学生管理系统
05-15
Javaweb学生管理系统,简单的系统。用于课程设计。数据库已在文件中。
c#学生管理系统
11-02
c#学生管理系统，和毕业设计差不多了，大一时做的，里面有详细的文档说明，如果觉得可以，请评分 学生信息管理系统是一个教育单位不可缺少的部分，它的内容对于学校的决策者和管理者来说都至关重要。 本文介绍了学生...
学生管理系统-网页版
12-21
简单的学生管理系统 实现了增删改查 分页 登陆 Mybatis JS ElementUI
前端实战项目：vue+elementUI管理平台
fy03164598的博客
03-30 6714
一、创建一个项目文件夹，命名为my-demo 1.1进入项目文件夹路径，用命令行打开，输入以下命令行： vue init webpack my-ele-demo 等待一段时间后，再根据个人需求完成基础项目配置即可完成项目的创建。 1.2完成后在编辑器中打开项目，然后在终端中执行命令： npm run dev 即可打开在网页中打开项目，当出现一下页面时，就代表我们的项目已经可以跑起来了... 对于第一次接触vue项目的同学，我们需要了解到的是一些文件信息，我为大家做了一些解释，有过项目经
UI素材|最全面的移动端 UI KIT 模板
awayaya1的博客
10-07 927
什么是UI组件 UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。 组件的优势 1、保证一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 2、反馈用户 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变
使用vue+element构建项目
weixin_48996679的博客
05-12 556
vue +element Ui 构建项目
Vue+Element
Major_S的博客
09-30 279
Vue+ElementVue+ElementVue+Element 10-1 Vue快速入门 10-2 Vue常用指令 10-3 Element基本使用 10-4 学生列表案例 10-5 Vue高级使用 10-6 学生管理系统
aspnet学生管理系统
最新发布
01-08
ASP.NET学生管理系统是一个基于ASP.NET技术开发的学生信息管理系统。它旨在为学校或教育机构提供一个方便快捷的方式来管理学生的信息和数据。 该系统包括学生基本信息的录入和查询功能，教学计划的制定和管理，成绩...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值