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

最新推荐文章于 2024-04-29 13:11:22 发布

南巷的花猫

最新推荐文章于 2024-04-29 13:11:22 发布

阅读量1k

点赞数 1

分类专栏： JavaWeb 文章标签： java

本文链接：https://blog.csdn.net/qq_42662411/article/details/108975173

版权

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

最低0.47元/天解锁文章

南巷的花猫

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue基本案例使用以及Vue+ElementUI+cp30连接池实现学生管理系统的增删改查

Vue基本案例使用以及Vue+ElementUI+cp30连接池实现学生管理系统的增删改查1-Vue基本用法1.1 V-model进行双向事件的绑定 <input type="text" v-model="message"> {{message}}1.2 V-on:事件名称进行事件的绑定简化成@click=“方法名称()”<!-
复制链接

扫一扫