devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：寸_铁 | 2024-07-15 01:16:44

赞

踩

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数据变化对应的表单元素的内容跟着变化

  1. <body>
  2.     <div id="app">=
  3.         <button v-on:click="fun1()">点击1</button>
  4.         <button @click="fun2()">点击2</button>
  5.         <input type="text" v-model="name" />
  6.         {{name}}
  7.     </div>
  8. </body>
  9. <script>
  10.     let app = new Vue({
  11.         el: "#app",
  12.         data: {
  13.             msg: "<font color='red'>千万别睡觉.</font>",
  14.             name:"admin"
  15.         },
  16.         //定义vue的方法
  17.         methods: {
  18.             fun1() {
  19.                 this.name="刘德华"
  20.             },
  21.             fun2() {
  22.                 alert("*************"+this.name)
  23.             }
  24.         }
  25.     })
  26. </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.--%>

<div id="app">

<button @click="fun()">点击</button>

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

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

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

</div>

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

<script>

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

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <head>
  6.   <title>登录</title>
  7.   <%--引入elementui的css样式--%>
  8.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  9.   <%--引入vue文件:必须先引入vue--%>
  10.   <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  11.   <%--引入elementui的js文件--%>
  12.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  13.   <script src="js/qs.min.js"></script>
  14.   <script src="js/axios.min.js"></script>
  15.  
  16. </head>
  17. <body>
  18.   <div id="app" style="width: 350px;height:300px;margin:auto;margin-top: 100px">
  19.     <h3 align="center">登录</h3>
  20.     <el-input
  21.           placeholder="请输入用户名"
  22.           v-model="name"
  23.           clearable>
  24.     </el-input>
  25.     <br><br>
  26.     <el-input
  27.           placeholder="请输入密码"
  28.           v-model="password"
  29.           show-password>
  30.     </el-input>
  31.     <br><br>
  32.     <span style="color: red" v-if="t">用户名或密码错误</span>
  33.     <el-button type="primary" @click="dl()" style="width: 350px">登录</el-button>
  34.   </div>
  35. <script>
  36.   let app = new Vue({
  37.     el:"#app",
  38.     data:{
  39.       name:"",
  40.       password:"",
  41.       t:false
  42.     },
  43.     methods:{
  44.       dl(){
  45.         axios.get("/userServlet?method=login&name="+this.name+"&password="+this.password).then(msg=>{
  46.           if (msg.data){
  47.             this.t=false;
  48.             location.href="homePage.jsp";
  49.           }else {
  50.             this.t=true;
  51.           }
  52.         })
  53.       }
  54.     }
  55.   })
  56. </script>
  57. </body>
  58. </html>

1.先引入文件

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

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

增删改分页

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <html>
  4. <head>
  5.     <title>首页</title>
  6.     <%--引入elementui的css样式--%>
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8.     <%--引入vue文件:必须先引入vue--%>
  9.     <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  10.     <%--引入elementui的js文件--%>
  11.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  12.     <script src="js/qs.min.js"></script>
  13.     <script src="js/axios.min.js"></script>
  14. </head>
  15. <body>
  16.     <div id="h" align="center">
  17. <%--表头--%>
  18.         <el-header style="text-align: right; font-size: 12px">
  19.             <el-dropdown>
  20.                 <i class="el-icon-setting" style="margin-right: 15px"></i>
  21.                 <el-dropdown-menu slot="dropdown">
  22.                     <el-dropdown-item @click.native="my_add()">新增</el-dropdown-item>
  23.                 </el-dropdown-menu>
  24.             </el-dropdown>
  25.             <span>${sessionScope.user.name}</span>
  26.         </el-header>
  27. <%--显示所有的信息表格--%>
  28.         <el-table
  29.                 :data="tableData"
  30.                 border
  31.                 style="margin: auto">
  32.             <el-table-column
  33.                     prop="id"
  34.                     label="编号"
  35.                     width="120">
  36.             </el-table-column>
  37.             <el-table-column
  38.                     prop="name"
  39.                     label="姓名"
  40.                     width="180">
  41.             </el-table-column>
  42.             <el-table-column
  43.                     prop="age"
  44.                     label="年龄"
  45.                     width="120">
  46.             </el-table-column>
  47.             <el-table-column
  48.                     prop="sex"
  49.                     label="性别"
  50.                     width="120">
  51.             </el-table-column>
  52.             <el-table-column
  53.                     prop="phone"
  54.                     label="手机号"
  55.                     width="180">
  56.             </el-table-column>
  57.             <el-table-column
  58.                     prop="email"
  59.                     label="邮箱"
  60.                     width="180">
  61.             </el-table-column>
  62.             <el-table-column
  63.                     label="操作"
  64.                     width="180">
  65.                 <template slot-scope="scope">
  66.                     <el-button type="primary" @click="my_update(scope.row.id)">编辑</el-button>
  67.                     <el-button type="danger" @click="open(scope.row.id)">删除</el-button>
  68.                 </template>
  69.             </el-table-column>
  70.         </el-table>
  71. <%--新增学生信息对话框--%>
  72.         <el-dialog title="新增学生信息" :visible.sync="FormVisible">
  73.             <el-form :model="addForm">
  74.                 <el-form-item label="姓名" :label-width="formLabelWidth">
  75.                     <el-input v-model="addForm.name" autocomplete="off"></el-input>
  76.                 </el-form-item>
  77.                 <el-form-item label="年龄" :label-width="formLabelWidth">
  78.                     <el-input v-model="addForm.age" autocomplete="off"></el-input>
  79.                 </el-form-item>
  80.                 <el-form-item label="性别" :label-width="formLabelWidth">
  81.                     <el-select v-model="addForm.sex" placeholder="请选择您的性别">
  82.                         <el-option label="男" value="男"></el-option>
  83.                         <el-option label="女" value="女"></el-option>
  84.                     </el-select>
  85.                 </el-form-item>
  86.                 <el-form-item label="手机号" :label-width="formLabelWidth">
  87.                     <el-input v-model="addForm.phone" autocomplete="off"></el-input>
  88.                 </el-form-item>
  89.                 <el-form-item label="邮箱" :label-width="formLabelWidth">
  90.                     <el-input v-model="addForm.email" autocomplete="off"></el-input>
  91.                 </el-form-item>
  92.             </el-form>
  93.             <div slot="footer" class="dialog-footer">
  94.                 <el-button @click="FormVisible = false">取 消</el-button>
  95.                 <el-button type="primary" @click="confirmAdd()">确 定</el-button>
  96.             </div>
  97.         </el-dialog>
  98. <%--修改学生信息对话框--%>
  99.         <el-dialog title="修改学生信息" :visible.sync="dialogFormVisible">
  100.             <el-form :model="editForm">
  101.                 <el-form-item label="姓名">
  102.                     <el-input v-model="editForm.name" autocomplete="off"></el-input>
  103.                 </el-form-item>
  104.                 <el-form-item label="年龄">
  105.                     <el-input v-model="editForm.age" autocomplete="off"></el-input>
  106.                 </el-form-item>
  107.                 <el-form-item label="性别">
  108.                     <el-select v-model="editForm.sex" placeholder="请选择您的性别">
  109.                         <el-option label="男" value="男"></el-option>
  110.                         <el-option label="女" value="女"></el-option>
  111.                     </el-select>
  112.                 </el-form-item>
  113.                 <el-form-item label="手机号">
  114.                     <el-input v-model="editForm.phone" autocomplete="off"></el-input>
  115.                 </el-form-item>
  116.                 <el-form-item label="邮箱">
  117.                     <el-input v-model="editForm.email" autocomplete="off"></el-input>
  118.                 </el-form-item>
  119.             </el-form>
  120.             <div slot="footer" class="dialog-footer">
  121.                 <el-button @click="dialogFormVisible = false">取 消</el-button>
  122.                 <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
  123.             </div>
  124.         </el-dialog>
  125. <%--分页--%>
  126.         <el-pagination
  127.                 @size-change="handleSizeChange"
  128.                 @current-change="handleCurrentChange"
  129.                 :current-page="currentPage"
  130.                 :page-sizes="pageSizes"
  131.                 :page-size="pageSize"
  132.                 layout="total, sizes, prev, pager, next, jumper"
  133.                 :total="sumTotal">
  134.         </el-pagination>
  135.     </div>
  136. <script>
  137.     let h = new Vue({
  138.         el:"#h",
  139.         mounted(){
  140.           this.initdata()
  141.         },
  142.         data:{
  143.         //表格数据
  144.             tableData:[],
  145.         //控制修改对话框的显示和隐藏
  146.             dialogFormVisible:false,
  147.             FormVisible:false,
  148.         //修改数据的表单
  149.             //修改的表单对象
  150.             editForm:{},
  151.             addForm:{},
  152.         // 显示的当前页码
  153.             currentPage:1,
  154.         // 数组元素为显示的选择每页显示个数的选项
  155.             pageSizes:[3,4,6],
  156.         // 默认每页的条数
  157.             pageSize:3,
  158.         // 总条数-- 后台获取
  159.             sumTotal:undefined
  160.         },
  161.         methods:{
  162.             //数组元素为显示的选择每页显示个数的选项的几条
  163.             handleSizeChange(val) {
  164.                this.pageSize=val;
  165.                this.initdata();
  166.             },
  167.             //当前所在的页
  168.             handleCurrentChange(val) {
  169.                 this.currentPage=val;
  170.                 this.initdata();
  171.             },
  172.             //初始化的信息
  173.             initdata(){
  174.                 axios.get("/StuServlet?method=select&current="+this.currentPage+"&pageSize="+this.pageSize).then(msg=>{
  175.                    this.tableData=msg.data.list;//把传过来的当前页记录赋给表格的数据
  176.                    this.sumTotal=msg.data.count;//把传过来的总数据给总条数
  177.                 })
  178.             },
  179.  
  180.             //新增
  181.             my_add(){
  182.                 this.FormVisible=true;//点击添加，弹出对话框
  183.             },
  184.             //新增确定
  185.             confirmAdd(){
  186.                 axios.post("/StuServlet?method=insert",Qs.stringify(this.addForm)).then(msg=>{
  187.                     if (msg.data === 1){
  188.                         this.$message.success("添加成功");
  189.                         this.FormVisible=false;
  190.                         this.initdata();
  191.                     }else {
  192.                         this.$message.error("添加失败");
  193.                     }
  194.                 })
  195.             },
  196.  
  197.             //修改操作
  198.             my_update(id){
  199.                 //先找到当前要修改的信息，给列表框显示出来
  200.                 axios.get("/StuServlet?method=edit&id="+id).then(msg=>{
  201.                     this.editForm=msg.data;
  202.                     this.dialogFormVisible=true;
  203.                 })
  204.             },
  205.                 //修改提交重新加载整个页面
  206.                 confirmUpdate(){
  207.                     axios.post("/StuServlet?method=update",Qs.stringify(this.editForm)).then(msg=>{
  208.                         if (msg.data === 1){//row传过来给msg为影响1行就代表修改成功
  209.                             this.$message.success("修改成功");//弹出提示信息
  210.                             this.dialogFormVisible=false;//把数据对话框关闭
  211.                             this.initdata();//重新加载页面显示数据
  212.                         }else {
  213.                             this.$message.error("修改失败");
  214.                         }
  215.                     })
  216.                 },
  217.             //删除条数所在信息
  218.             open(id){
  219.                 axios.get("/StuServlet?method=del&id="+id).then(msg=>{
  220.                     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  221.                         confirmButtonText: '确定',
  222.                         cancelButtonText: '取消',
  223.                         type: 'warning'
  224.                     }).then(() => {
  225.                         this.initdata();
  226.                         this.$message({
  227.                             type: 'success',
  228.                             message: '删除成功!'
  229.                         });
  230.                     }).catch(() => {
  231.                         this.$message({
  232.                             type: 'info',
  233.                             message: '已取消删除'
  234.                         });
  235.                     });
  236.                 })
  237.             }
  238.         }
  239.     })
  240. </script>
  241. </body>
  242. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/827209
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号