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