Vue.js框架+Axios发送异步请求+elementui前端布局框架

一、Vue

1.什么是vue?

1.JavaScript框架

2.简化Dom操作

3.响应式数据驱动

2.如何使用vue？

官网：介绍 — Vue.js

开发环境版本，包含了有帮助的命令行警告https://unpkg.com/vue@2/dist/vue.js

1.引入Vue文件

2.在body定义一个双标签

3.定义自己的js代码--创建Vue对象--el：把Vue对象挂载到双标签上，data用于定义数据

2.1EL挂载属性作用？

Vue实例的作用范围是什么？

Vue会管理el选项命中的元素及内部的后代元素。

是否可以使用其他选择器?

可以使用，但是建议使用ID选择器

是否可以设置其他的dom元素？

可以使用其他双标签，不能使用HTML和Body

2.2data定义vue的数据

语法：

data：{

key：value，

............

}

//（value类型可以是Number、boolean、String、Object、Arrays、underfined）

3.Vue中常用的指令

vue中的属性，这些指令可以使用在dom属性上。可以调用vue中成员。所有的指令都是以v-开始

3.1v-text和v-html--文本值

设置标签的文本值（textContext）

v-html可以解析内容中的标签，v-text和{{}}无法解析

3.2v-on/@事件--绑定事件

为元素绑定事件 [onclick ondblclick onblur onfocus onchange onsubmit等]

v-on:触发的是vue对象method属性中方法名

v-on:可以缩写为@

如果方法中调用vue对象中成员必须使用this

3.3v-show和v-if(不)满足条件(隐藏)显示

满足条件显示，不满足隐藏

根据表达值的真假,切换元素的显示和隐藏

v-if:通过删除标签和添加标签来控制标签的显示和隐藏

v-show:通过style样式来控制标签的显示和隐藏display:none。

如果频繁的显示和隐藏使用v-show

3.4v-else和v-else-if判断

3.5v-bind/：绑定标签属性(src,title,class)

设置元素的属性(比如:src,title,class)

v-bind:可以缩写为:

3.6v-for循环指令

根据数据生成列表结构

v-for="(元素变量名，索引) in 数组"

3.7v-model双向绑定表单元素

获取和设置表单元素的值(双向数据绑定)

比如表单元素（input、radio、select）使用，

双向绑定数据，可以快速获取或设置表单元素内容

v-model表示双向绑定。表单元素内容改变-vue数据跟着改变。 vue数据变化对应的表单元素的内容跟着变化

<body><div id="app">=<button v-on:click="fun1()">点击1</button><button @click="fun2()">点击2</button><input type="text" v-model="name" />{{name}}</div>
</body>
<script>let app = new Vue({el: "#app",data: {msg: "<font color='red'>千万别睡觉.</font>",name:"admin"},//定义vue的方法methods: {fun1() {this.name="刘德华"},fun2() {alert("*************"+this.name)}}})
</script>

二、axios发送异步请求

用于发送ajax异步请求，之前使用的是jquery完成ajax异步请求。

$.get(url,[data],[callback],[type])

$.post(url,[data],[callback],[type])

企业种Vue配合axios来完成异步请求。

axios.get(url?key=value&key=value,...).then(function(msg){})

axios.post(url,[data]).then(function(msg){})

1.axios的使用步骤

1.引入axios的文件

<%--引入vue--%>

<script src="js/vue.js"></script>

<%--引入axios文件--%>

<script src="js/axios.min.js"></script>

2.创建div标签

<%--标签就使用div.--%>

编号:{{user.id}} <br>

姓名:{{user.name}} <br>

年龄:{{user.age}} <br>

</div>

3.创建vue对象并把该对象挂载到div标签上

let app=new Vue({

el:"#app",//挂载

data:{

user:{}

methods:{

fun(){

//异步请求数据

// axios.get("/AjaxServlet?name=刘德华&age=18").then(function(msg){})

//axios会把响应的结果做了再次封装

// axios.get("/AjaxServlet?name=刘德华&age=18").then(msg=>{

// //浏览器控制台输出

// this.user=msg.data;

// })

axios.post("/AjaxServlet",{"name":"zxy","age":18}).then(msg=>{

console.log(msg)

})。。。

2.传递参数的种类

1.query String params:查询字符串参数。地址栏传递

2.form data:表单参数。表单的提交传递

3.request payload：请求载荷，它传递的是json数据

（request对象中getParamater方法只能接受上面前两种传递的参数。无法接受第三种传递的参数。如果现在想接受第三种传递的参数值，那么你需要把第三种传参方法转化为上面的两种。qs工具。）

网页中引入qs文件

<%--导入qs文件--%>

<script src="js/qs.min.js"></script>

三、elementui

它是一款前端布局的框架，它可以帮你完成一些简单的布局效果。

引入相应的文件

<%--引入elementui的css样式--%>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<%--引入vue文件:必须先引入vue--%>

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<%--引入elementui的js文件--%>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

:data使用vue中data属性中数据

四、elementui+vue+后端代码

1. 异步请求axios:

语法: axios.get(url?key=value&key=value).then(msg=>{})

axios.post(url,{key:value,key:value}).then(msg=>{})

注意:{key:value...}默认为json对象参数。而request.getParamter无法接受这种参数

需要把json对象转化为表单数据。 Qs.stringify(json)

2. elementui前端布局。--引入elementui的css和js文件，注意先引入vue的js文件。

常见:elementui组件。表格按钮对话框表单消息框

登录login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head><title>登录</title><%--引入elementui的css样式--%><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><%--引入vue文件:必须先引入vue--%><script src="https://unpkg.com/vue@2/dist/vue.js"></script><%--引入elementui的js文件--%><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="js/qs.min.js"></script><script src="js/axios.min.js"></script></head>
<body><div id="app" style="width: 350px;height:300px;margin:auto;margin-top: 100px"><h3 align="center">登录</h3><el-inputplaceholder="请输入用户名"v-model="name"clearable></el-input><br><br><el-inputplaceholder="请输入密码"v-model="password"show-password></el-input><br><br><span style="color: red" v-if="t">用户名或密码错误</span><el-button type="primary" @click="dl()" style="width: 350px">登录</el-button></div>
<script>let app = new Vue({el:"#app",data:{name:"",password:"",t:false},methods:{dl(){axios.get("/userServlet?method=login&name="+this.name+"&password="+this.password).then(msg=>{if (msg.data){this.t=false;location.href="homePage.jsp";}else {this.t=true;}})}}})
</script>
</body>
</html>

1.先引入文件

2.elementui组件_登录和注册框

3.Vue挂载_登录方法点击触发的事件，通过axios携带数据发送请求

增删改分页

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>首页</title><%--引入elementui的css样式--%><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><%--引入vue文件:必须先引入vue--%><script src="https://unpkg.com/vue@2/dist/vue.js"></script><%--引入elementui的js文件--%><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="js/qs.min.js"></script><script src="js/axios.min.js"></script>
</head>
<body><div id="h" align="center">
<%--表头--%><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item @click.native="my_add()">新增</el-dropdown-item></el-dropdown-menu></el-dropdown><span>${sessionScope.user.name}</span></el-header>
<%--显示所有的信息表格--%><el-table:data="tableData"borderstyle="margin: auto"><el-table-columnprop="id"label="编号"width="120"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="120"></el-table-column><el-table-columnprop="sex"label="性别"width="120"></el-table-column><el-table-columnprop="phone"label="手机号"width="180"></el-table-column><el-table-columnprop="email"label="邮箱"width="180"></el-table-column><el-table-columnlabel="操作"width="180"><template slot-scope="scope"><el-button type="primary" @click="my_update(scope.row.id)">编辑</el-button><el-button type="danger" @click="open(scope.row.id)">删除</el-button></template></el-table-column></el-table>
<%--新增学生信息对话框--%><el-dialog title="新增学生信息" :visible.sync="FormVisible"><el-form :model="addForm"><el-form-item label="姓名" :label-width="formLabelWidth"><el-input v-model="addForm.name" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" :label-width="formLabelWidth"><el-input v-model="addForm.age" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" :label-width="formLabelWidth"><el-select v-model="addForm.sex" placeholder="请选择您的性别"><el-option label="男" value="男"></el-option><el-option label="女" value="女"></el-option></el-select></el-form-item><el-form-item label="手机号" :label-width="formLabelWidth"><el-input v-model="addForm.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="邮箱" :label-width="formLabelWidth"><el-input v-model="addForm.email" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="FormVisible = false">取 消</el-button><el-button type="primary" @click="confirmAdd()">确 定</el-button></div></el-dialog>
<%--修改学生信息对话框--%><el-dialog title="修改学生信息" :visible.sync="dialogFormVisible"><el-form :model="editForm"><el-form-item label="姓名"><el-input v-model="editForm.name" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄"><el-input v-model="editForm.age" autocomplete="off"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="editForm.sex" placeholder="请选择您的性别"><el-option label="男" value="男"></el-option><el-option label="女" value="女"></el-option></el-select></el-form-item><el-form-item label="手机号"><el-input v-model="editForm.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="邮箱"><el-input v-model="editForm.email" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="confirmUpdate()">确 定</el-button></div></el-dialog>
<%--分页--%><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="pageSizes":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="sumTotal"></el-pagination></div>
<script>let h = new Vue({el:"#h",mounted(){this.initdata()},data:{//表格数据tableData:[],//控制修改对话框的显示和隐藏dialogFormVisible:false,FormVisible:false,//修改数据的表单//修改的表单对象editForm:{},addForm:{},// 显示的当前页码currentPage:1,// 数组元素为显示的选择每页显示个数的选项pageSizes:[3,4,6],// 默认每页的条数pageSize:3,// 总条数-- 后台获取sumTotal:undefined},methods:{//数组元素为显示的选择每页显示个数的选项的几条handleSizeChange(val) {this.pageSize=val;this.initdata();},//当前所在的页handleCurrentChange(val) {this.currentPage=val;this.initdata();},//初始化的信息initdata(){axios.get("/StuServlet?method=select&current="+this.currentPage+"&pageSize="+this.pageSize).then(msg=>{this.tableData=msg.data.list;//把传过来的当前页记录赋给表格的数据this.sumTotal=msg.data.count;//把传过来的总数据给总条数})},//新增my_add(){this.FormVisible=true;//点击添加，弹出对话框},//新增确定confirmAdd(){axios.post("/StuServlet?method=insert",Qs.stringify(this.addForm)).then(msg=>{if (msg.data === 1){this.$message.success("添加成功");this.FormVisible=false;this.initdata();}else {this.$message.error("添加失败");}})},//修改操作my_update(id){//先找到当前要修改的信息，给列表框显示出来axios.get("/StuServlet?method=edit&id="+id).then(msg=>{this.editForm=msg.data;this.dialogFormVisible=true;})},//修改提交重新加载整个页面confirmUpdate(){axios.post("/StuServlet?method=update",Qs.stringify(this.editForm)).then(msg=>{if (msg.data === 1){//row传过来给msg为影响1行就代表修改成功this.$message.success("修改成功");//弹出提示信息this.dialogFormVisible=false;//把数据对话框关闭this.initdata();//重新加载页面显示数据}else {this.$message.error("修改失败");}})},//删除条数所在信息open(id){axios.get("/StuServlet?method=del&id="+id).then(msg=>{this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.initdata();this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});})}}})
</script>
</body>
</html>