Vue基本案例使用以及Vue+ElementUI+cp30连接池实现学生管理系统的增删改查

Vue基本案例使用以及Vue+ElementUI+cp30连接池实现学生管理系统的增删改查

1-Vue基本用法

1.1 V-model进行双向事件的绑定

<!--1-v-model用来渲染 进行事件的交互-->
                    <input type="text" v-model="message">
                    {
  {message}}

1.2 V-on:事件名称 进行事件的绑定 简化成@click=“方法名称()”

<!--2事件处理:vue的事件绑定采用v-on:事件名称 简化成@事件进行绑定--->
                    <input type="button" value="+" @click="add()" >
                    {
  {num}}
                    <input type="button" value="-" @click="sub()">

1.3 钩子函数 生命周期 :常用的方法:created:当Vue实例创建后 再加载方法

在这里插入图片描述

1.4 V-bind:class 绑定样式 如果键与值相同 则可以直接写键 不用写值

<div :class="{active,hasError}" v-model="message">
                            {
  {message}}
                    </div>

1.5 计算属性 computed:计算属性

<!--5-计算属性本质就是方法 但是一定要返回数据 然后页面进行渲染时,
                    可以把这个方法当成一个变量来使用-->
                    <h2>
                        您的生日为:{
  {birth}}
                    </h2>

1.6 监听变量 watch

 watch:{
            message(newVal,oldVal){  //参数1:新值 参数2:旧值
                console.log("新值"+newVal+"旧值"+oldVal);
            }

        }

1.7 创建Vue实例: el:在哪个区间范围内 data:变量数据 methods:执行的方法

<script>
    new Vue({
    
        el:".d",
        data:{
    
            message:"张三",
            num: 1,
            hello:"" ,//初始化内容为空
            active:true,
            hasError:false,
            birthday:1529032123201,
        },
        methods:{
    
            add(){
      //添加数
                this.num +=1;
            },
            sub(){
      //减少数
                if(this.num <=1){
    
                    this.num = 1;
                }else{
    
                    this.num -=1;
                }


            }
        },
        computed:{
       //计算属性
            birth(){
    
                let dt = new Date(this.birthday);
                return dt.getFullYear()+"年"+(dt.getMonth()+1)+"月"+dt.getDate()+"日";
            }
        },
        //监听变量
        watch:{
    
            message(newVal,oldVal){
      //参数1:新值 参数2:旧值
                console.log("新值"+newVal+"旧值"+oldVal);
            }

        }
    })
</script>

2-Vue+Element UI +cp30连接池实现学生管理系统

2.1 cp30配置文件

创建resources文件夹 并Mark as resources root 标记为资源文件夹

c3p0-config.xml: 这个文件名绝对不能变

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
    <!-- 默认配置,如果没有指定则使用这个配置 -->
    <default-config>
        <property name="user">root</property>
        <property name="password">123456</property>
        <property name="jdbcUrl">jdbc:mysql://localhost:3306/chrisfeng</property>
        <property name="driverClass">com.mysql.jdbc.Driver</property>
    </default-config>
</c3p0-config>

2.2 下载对应的jar包

在这里插入图片描述

2.3 下载Vue需要的js文件以及实现异步加载的axios.js文件(axios需要依赖于vue.js)以及下载element ui需要的css样式以及js文件

  • 先安装node.js
  • 然后使用命令下载
npm i element-ui -S --save 下载element ui

在这里插入图片描述

2.4 把web下的index.jsp文件删掉 新建index.html文件

Element UI 官方网址: https://element.eleme.cn

**Vue官网:**https://cn.vuejs.org/v2/guide/

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <!--1.引入vue-->
    <script src="plugins/vue.min.js"></script>
    <!--2.引入axios-->
    <script src="plugins/axios.min.js"></script>
    <!-- 3.引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/lib/theme-chalk/index.css">
    <!-- 4.引入组件库 -->
    <script src="plugins/element-ui/lib/index.js"></script>
    <style>
        .el-row {
    
            margin-bottom: 20px;
        &:last-child {
    
             margin-bottom: 0;
         }
        }
        .el-col {
    
            border-radius: 4px;
        }
        .bg-purple-dark {
    
            background: #99a9bf;
        }
        .bg-purple {
    
            background: #ffffff;
        }
        .bg-purple-light {
    
            background: #e5e9f2;
        }
        .grid-content {
    
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
    
            padding: 10px 0;
            background-color: #f9fafc;
        }
        ::v-deep .el-table th,
        ::v-deep .el-table td {
    
            text-align: center !important;
        }
        .page{
    
            margin-top: 20px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .t{
    
            text-align: right;
        }

    </style>


</head>
<body>
<div id="d1">
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple-light">
                <!--表格-->
                <el-table
                        :data="tableData"
                        border
                        :header-cell-style="headContent"
                        :cell-style = "contentData"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="sid"
                            label="学号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="sname"
                            label="学生姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="学生性别"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="age"
                            label="学生年龄"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="addr"
                            label="学生地址"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="cname"
                            label="所在班级">
                    </el-table-colum
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值