• Ajax、Axios、Vue、Element与其案例

    目录

    一.Ajax

    二.Axios

    三.Vue

    四.Element 

     五.增删改查案例

    一.依赖：数据库，mybatis，servlet，json-对象转换器

    二.资源：element+vue+axios

    三.pojo

     四.mapper.xml与mapper接口

    五.service

     六.servlet

    七.html页面

    建立web工程

    需要的依赖：

    1.     <dependency>
    2.       <groupId>javax.servlet</groupId>
    3.       <artifactId>javax.servlet-api</artifactId>
    4.       <version>3.1.0</version>
    5.     </dependency>
    6.     <dependency>
    7.       <groupId>com.alibaba</groupId>
    8.       <artifactId>fastjson</artifactId>
    9.       <version>1.2.62</version>
    10.     </dependency>

    一.Ajax

    AJAX(Asynchronous JavaScript And XML)：异步的js和xml
异步交互：与服务器交换数据并且更新部分网页的技术（局部刷新），操作无需等待服务器响应，直到数据响应回来才改变html页面
本案例使用ajax请求数据与处理响应数据，发送路径需要使用全路径

    01ajax.html:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. </body>
    9. <script>
    10.     xhttp = new XMLHttpRequest();
    11.     xhttp.open("GET", " http://localhost/web_demo5_ajax_war/ajaxServlet");
    12.     xhttp.send();
    13.     xhttp.onreadystatechange = function() {
    14.         if (this.readyState == 4 && this.status == 200) {
    15.             alert(this.responseText);
    16.         }
    17.     };
    18. </script>
    19. </html>
    1. @WebServlet("/ajaxServlet")
    2. public class AJAXServlet extends HttpServlet {
    3.     @Override
    4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    5.         response.getWriter().write("Hello,AJAX!");
    6.     }
    7.     @Override
    8.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    9.         this.doGet(request, response);
    10.     }
    11. }

     

    二.Axios

    Axios对原生的ajax封装，简化书写
使用准备：导入js文件，放到js文件里面，在本文件中引入js
本案例为使用axios用不同请求方式请求数据并处理响应数据

     02axios.html:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. </body>
    10. <script src="js/axios-0.18.0.js"></script>
    11. <script>
    12.     axios.get("http://localhost/web_demo5_ajax_war/axiosServlet?username=zhangsan").then(resp=>{alert(resp.data)})
    13.     axios.post("http://localhost/web_demo5_ajax_war/axiosServlet","username=zhangsan").then(resp=>{alert(resp.data)})
    14. </script>
    15. </html>
    1. @WebServlet("/axiosServlet")
    2. public class AxiosServlet extends HttpServlet {
    3.     @Override
    4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    5.         response.getWriter().write(request.getMethod());
    6.     }
    7.  
    8.     @Override
    9.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    10.         this.doGet(request, response);
    11.     }
    12. }

    浏览器弹窗为两种不同的请求方式

    三.Vue

    Vue是一套前端的框架，在js中简化Dom操作
使用需要：导入vue.js
    1.改变框里面的值，对应的路径也改变
    1.绑定表单中的输入使用:v-model="url"
    2.绑定超链接跳转路径属性使用:v-bind:href="url"或:href="url"
    3.展示绑定模型的内容使用:{{}}}
2.点击按钮调用不同方法
    1.绑定事件元素使用:v-on:click="show()或者@click="show()"
    2.引入方法:在js的Vue模块中使用methods
3.通过输入展示不同标签
    1.if else：使用v-if="条件"属性
    2.展示内容与否:使用v-show标签
4.遍历模型：使用v-for=""属性
    在此案例中addr为局部变量名称，根据情况选择是否使用索引
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <div id="app">
    9.     <input v-model="url"><br>
    10.     <a v-bind:href="url">{{url}}</a><br>
    11.     <a :href="url">{{url}}</a><br><br><br>
    12.  
    13.     <input type="button" value="按钮1" v-on:click="show()"><br>
    14.     <input type="button" value="按钮2" @click="show()"><br><br><br>
    15.  
    16.     <div v-if="count==1">div1</div>
    17.     <div v-else-if="count==2">div2</div>
    18.     <div v-else>div3</div>
    19.     <div v-show="count==4">div4</div>
    20.     <input v-model="count"><br><br><br>
    21.  
    22.     <div v-for="addr in addrs">
    23.         {{addr}}<br>
    24.     </div>
    25.     <div v-for="(addr,i) in addrs">
    26.         {{i+1}}--{{addr}}<br>
    27.     </div>
    28. </div>
    29. <script src="js/vue.js"></script>
    30. <script>
    31.     new Vue({//创建vue核心对象
    32.         el:"#app",//作用范围
    33.         methods:{//方法
    34.             show(){
    35.                 alert("按钮被点击")
    36.             }
    37.         },
    38.         data(){//模型数据
    39.             return {
    40.                 url:"https://www.baidu.com",
    41.                 count:1,
    42.                 addrs:["北京","上海","西安"]
    43.             }
    44.         },
    45.         mounted(){//页面加载完成后的方法
    46.             alert("加载完成")
    47.         }
    48.     })
    49. </script>
    50. </body>
    51. </html>

     

    四.Element 

    1.复制粘贴element-ui文件
2.引文件使用：然后去官网复制粘贴即可
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.  
    7. </head>
    8. <body>
    9. <div id="app">
    10.     <el-row>
    11.         <el-button>默认按钮</el-button>
    12.         <el-button type="primary">主要按钮</el-button>
    13.         <el-button type="success">成功按钮</el-button>
    14.         <el-button type="info">信息按钮</el-button>
    15.         <el-button type="warning">警告按钮</el-button>
    16.         <el-button type="danger">危险按钮</el-button>
    17.     </el-row>
    18. </div>
    19. </body>
    20. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    21. <script src="js/vue.js"></script>
    22. <script src="element-ui/lib/index.js"></script>
    23. <script>
    24.   new Vue({
    25.     el:"#app"
    26.   })
    27. </script>
    28. </html>

     五.增删改查案例

    新建Web项目

    一.依赖：数据库，mybatis，servlet，json-对象转换器
    1.     <dependency>
    2.       <groupId>mysql</groupId>
    3.       <artifactId>mysql-connector-java</artifactId>
    4.       <version>5.1.32</version>
    5.     </dependency>
    6.     <dependency>
    7.       <groupId>org.mybatis</groupId>
    8.       <artifactId>mybatis</artifactId>
    9.       <version>3.5.5</version>
    10.     </dependency>
    11.     <dependency>
    12.       <groupId>javax.servlet</groupId>
    13.       <artifactId>javax.servlet-api</artifactId>
    14.       <version>3.1.0</version>
    15.       <scope>provided</scope>
    16.     </dependency>
    17.     <dependency>
    18.       <groupId>com.alibaba</groupId>
    19.       <artifactId>fastjson</artifactId>
    20.       <version>1.2.62</version>
    21.     </dependency>

    二.资源：element+vue+axios

    三.pojo

    brand类中使用到了getStatusStr方法：由status返回字符串，交给别的类调用

    1. public class Brand {
    2.     private Integer id;
    3.     private String brandName;
    4.     private String companyName;
    5.     private Integer ordered;
    6.     private String description;
    7.     private Integer status;
    8.     public Brand() {
    9.     }
    10.     public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) {
    11.         this.id = id;
    12.         this.brandName = brandName;
    13.         this.companyName = companyName;
    14.         this.ordered = ordered;
    15.         this.description = description;
    16.         this.status = status;
    17.     }
    18.     public Integer getId() {
    19.         return id;
    20.     }
    21.     public void setId(Integer id) {
    22.         this.id = id;
    23.     }
    24.     public String getBrandName() {
    25.         return brandName;
    26.     }
    27.     public void setBrandName(String brandName) {
    28.         this.brandName = brandName;
    29.     }
    30.     public String getCompanyName() {
    31.         return companyName;
    32.     }
    33.     public void setCompanyName(String companyName) {
    34.         this.companyName = companyName;
    35.     }
    36.     public Integer getOrdered() {
    37.         return ordered;
    38.     }
    39.     public void setOrdered(Integer ordered) {
    40.         this.ordered = ordered;
    41.     }
    42.     public String getDescription() {
    43.         return description;
    44.     }
    45.     public void setDescription(String description) {
    46.         this.description = description;
    47.     }
    48.     public Integer getStatus() {
    49.         return status;
    50.     }
    51.     public String getStatusStr(){
    52.         if(this.status==1){ return "启用"; }
    53.         return "禁用";
    54.     }
    55.     public void setStatus(Integer status) {
    56.         this.status = status;
    57.     }
    58.     @Override
    59.     public String toString() {
    60.         return "Brand{" +
    61.                 "id=" + id +
    62.                 ", brandName='" + brandName + '\'' +
    63.                 ", companyName='" + companyName + '\'' +
    64.                 ", ordered=" + ordered +
    65.                 ", description='" + description + '\'' +
    66.                 ", status=" + status +
    67.                 '}';
    68.     }
    69. }

    pagebean类用于存放一页的数据与总数量

    1. public class PageBean<T> {
    2.     private int totalCount;
    3.     private List rows;
    4.     public PageBean() {
    5.     }
    6.     public PageBean(int totalCount, List rows) {
    7.         this.totalCount = totalCount;
    8.         this.rows = rows;
    9.     }
    10.     public int getTotalCount() {
    11.         return totalCount;
    12.     }
    13.     public void setTotalCount(int totalCount) {
    14.         this.totalCount = totalCount;
    15.     }
    16.     public List getRows() {
    17.         return rows;
    18.     }
    19.     public void setRows(List rows) {
    20.         this.rows = rows;
    21.     }
    22. }

     四.mapper.xml与mapper接口

     使用到了批量删除、模糊查询、分页查询

    1. <?xml version="1.0" encoding="UTF-8" ?>
    2. <!DOCTYPE mapper
    3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    5. <mapper namespace="org.example.mapper.BrandMapper">
    6.     <resultMap id="brandResultMap" type="Brand">
    7.         <id column="id" property="id"/>
    8.         <result column="brand_name" property="brandName"/>
    9.         <result column="company_name" property="companyName"/>
    10.     </resultMap>
    11.     <delete id="deleteByIds">
    12.         delete from tb_brand where id in
    13.         <foreach collection="array" item="id" separator="," open="(" close=")">
    14.             #{id}
    15.         </foreach>;
    16.     </delete>
    17.     <select id="selectByPageAndCondition" resultMap="brandResultMap">
    18.         select *
    19.         from tb_brand
    20.         <where>
    21.             <if test="brand.status!=null">
    22.                 and  status=#{brand.status}
    23.             </if>
    24.             <if test="brand.companyName!=null and brand.companyName!=''">
    25.                 and company_name like #{brand.companyName}
    26.             </if>
    27.             <if test="brand.brandName!=null and brand.brandName!=''">
    28.                 and brand_name like #{brand.brandName}
    29.             </if>
    30.         </where>
    31.         limit #{begin},#{size}
    32.     </select>
    33.     <select id="selectCountByCondition" resultType="java.lang.Integer">
    34.         select count(*) from tb_brand
    35.         <where>
    36.             <if test="status!=null">
    37.                 and  status=#{status}
    38.             </if>
    39.             <if test="companyName!=null and companyName!=''">
    40.                 and company_name like #{companyName}
    41.             </if>
    42.             <if test="brandName!=null and brandName!=''">
    43.                 and brand_name like #{brandName}
    44.             </if>
    45.         </where>
    46.     </select>
    47. </mapper>
    1. public interface BrandMapper {
    2.     //添加数据
    3.     @Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
    4.     void add(Brand brand);
    5.     //删除数据
    6.     @Delete("delete from tb_brand where id=#{id}")
    7.     void deleteById(int id);
    8.     //更新数据
    9.     @Update("update tb_brand set brand_name=#{brandName}," +
    10.             "company_name=#{companyName}," +
    11.             "ordered=#{ordered}," +
    12.             "description=#{description}," +
    13.             "status=#{status} " +
    14.             "where id=#{id}")
    15.     void update(Brand brand);
    16.     //删除选中数据
    17.     void deleteByIds(int[] ids);
    18.     //条件分页查询
    19.     int selectCountByCondition(Brand brand);
    20.     List<Brand> selectByPageAndCondition(@Param("begin") int begin, @Param("size") int size, @Param("brand") Brand brand);
    21.  
    22. }

    五.service
    1. public class BrandService {
    2.     SqlSessionFactory factory = SqlSessionFactoryUtil.getssf();
    3.     public void add(Brand brand) {
    4.         SqlSession sqlsession=factory.openSession(true);
    5.         sqlsession.getMapper(BrandMapper.class).add(brand);
    6.         sqlsession.close();
    7.     }
    8.     public void deleteById(int id) {
    9.         SqlSession sqlsession=factory.openSession(true);
    10.         sqlsession.getMapper(BrandMapper.class).deleteById(id);
    11.         sqlsession.close();
    12.     }
    13.     public void update(Brand brand) {
    14.         SqlSession sqlsession=factory.openSession(true);
    15.         sqlsession.getMapper(BrandMapper.class).update(brand);
    16.         sqlsession.close();
    17.     }
    18.     public void deleteByIds(int[] ids) {
    19.         SqlSession sqlsession=factory.openSession(true);
    20.         sqlsession.getMapper(BrandMapper.class).deleteByIds(ids);
    21.         sqlsession.close();
    22.     }
    23.     public PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
    24.         SqlSession sqlsession=factory.openSession(true);
    25.         BrandMapper mapper=sqlsession.getMapper(BrandMapper.class);
    26.         String brandName=brand.getBrandName();
    27.         if(brandName!=null && !brandName.isEmpty()) brand.setBrandName("%"+brandName+"%");
    28.         String companyName=brand.getCompanyName();
    29.         if(companyName!=null && !companyName.isEmpty()) brand.setCompanyName("%"+companyName+"%");
    30.  
    31.         PageBean<Brand> pageBean=new PageBean<>(mapper.selectCountByCondition(brand),
    32.                         mapper.selectByPageAndCondition((currentPage-1)*pageSize,pageSize,brand));
    33.         sqlsession.close();
    34.         return pageBean;
    35.     }
    36. }

     六.servlet

    服务类中使用反射判别不同的请求路径去访问不同方法

    1. public class BaseServlet extends HttpServlet {
    2.     @Override
    3.     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    4.         String uri=req.getRequestURI();
    5.         String methodName=uri.substring(uri.lastIndexOf('/')+1);
    6.         Classextends BaseServlet> cls=this.getClass();
    7.         try{
    8.             Method method=cls.getMethod(methodName,HttpServletRequest.class,HttpServletResponse.class);
    9.             method.invoke(this,req,resp);
    10.         }catch (Exception e){
    11.             e.printStackTrace();
    12.         }
    13.     }
    14. }

    分页+模糊查询同时使用到了post+get方法

    1. @WebServlet("/brand/*")
    2. public class BrandServlet extends BaseServlet{
    3.     private final BrandService service =new BrandService();
    4.     public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    5.         System.out.println("add...");
    6.         service.add(JSON.parseObject(request.getReader().readLine(),Brand.class));
    7.         response.getWriter().write("success");
    8.     }
    9.     public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
    10.         System.out.println("deleteById...");
    11.         service.deleteById(Integer.parseInt(request.getParameter("id")));
    12.         response.getWriter().write("success");
    13.     }
    14.     public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
    15.         System.out.print("update...");
    16.         service.update(JSON.parseObject(request.getReader().readLine(),Brand.class));
    17.         response.getWriter().write("success");
    18.     }
    19.     public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
    20.         System.out.print("deleteMany...");
    21.         service.deleteByIds(JSON.parseObject(request.getReader().readLine(),int[].class));
    22.         response.getWriter().write("success");
    23.     }
    24.     //post+get方式来实现分页查询+条件查询，条件查询可有可无
    25.     public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    26.         System.out.println("brand selectByPageAndCondition...");
    27.         response.setContentType("text/json;charset=UTF-8");
    28.         response.getWriter().write(
    29.                 JSON.toJSONString(
    30.                         service.selectByPageAndCondition(
    31.                                 Integer.parseInt(request.getParameter("currentPage")),
    32.                                 Integer.parseInt(request.getParameter("pageSize")),
    33.                                 JSON.parseObject(request.getReader().readLine(),Brand.class)
    34.                         )));
    35.     }
    36. }

    七.html页面
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <div id="app">
    9.     <!--查询表单-->
    10.     <el-form :inline="true" :model="brandSelect" class="demo-form-inline">
    11.         <el-form-item label="当前状态">
    12.             <el-select v-model="brandSelect.status" placeholder="当前状态">
    13.                 <el-option label="启用" value="1"></el-option>
    14.                 <el-option label="禁用" value="0"></el-option>
    15.             </el-select>
    16.         </el-form-item>
    17.         <el-form-item label="企业名称">
    18.             <el-input v-model="brandSelect.companyName" placeholder="企业名称"></el-input>
    19.         </el-form-item>
    20.         <el-form-item label="品牌名称">
    21.             <el-input v-model="brandSelect.brandName" placeholder="企业名称"></el-input>
    22.         </el-form-item>
    23.         <el-form-item>
    24.             <el-button type="primary" @click="selectAll">查询</el-button>
    25.         </el-form-item>
    26.     </el-form>
    27.     <!--新增与批量删除按钮-->
    28.     <el-row>
    29.         <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
    30.         <el-button type="primary" plain @click="handleAdd">新增</el-button>
    31.     </el-row>
    32.     <!--添加数据与修改数据的对话框表单-->
    33.     <el-dialog
    34.             title="编辑品牌"
    35.             :visible.sync="dialogVisible"
    36.             width="30%">
    37.         <el-form ref="form" :model="brand" label-width="80px">
    38.             <el-form-item label="品牌名称">
    39.                 <el-input v-model="brand.brandName"></el-input>
    40.             </el-form-item>
    41.             <el-form-item label="企业名称">
    42.                 <el-input v-model="brand.companyName"></el-input>
    43.             </el-form-item>
    44.             <el-form-item label="排序">
    45.                 <el-input v-model="brand.ordered"></el-input>
    46.             </el-form-item>
    47.             <el-form-item label="备注">
    48.                 <el-input type="textarea" v-model="brand.description"></el-input>
    49.             </el-form-item>
    50.             <el-form-item label="状态">
    51.                 <el-switch v-model="brand.status"
    52.                            active-color="#13ce66"
    53.                            inactive-color="#ff4949"
    54.                            active-value="1"
    55.                            inactive-value="0">
    56.                 </el-switch>
    57.             </el-form-item>
    58.             <!--点击事件设立一下-->
    59.             <el-form-item>
    60.                 <template v-if="method=='修改'">
    61.                     <el-button type="primary" @click="updateBrand">提交修改</el-button>
    62.                 </template>
    63.                 <template v-else>
    64.                     <el-button type="primary" @click="addBrand">提交添加</el-button>
    65.                 </template>
    66.                 <el-button @click=cancelUpdate>取消</el-button>
    67.             </el-form-item>
    68.         </el-form>
    69.     </el-dialog>
    70.     <!--表格-->
    71.     <el-table
    72.             :data="tableData"
    73.             style="width: 100%"
    74.             stripe
    75.             @selection-change="handleSelectionChange">
    76.         <el-table-column
    77.                 type="selection">
    78.         </el-table-column>
    79.         <el-table-column
    80.                 label="排序"
    81.                 type="index">
    82.         </el-table-column>
    83.         <el-table-column
    84.                 prop="brandName"
    85.                 label="品牌名称"
    86.                 align="center">
    87.         </el-table-column>
    88.         <el-table-column
    89.                 prop="companyName"
    90.                 label="企业名称"
    91.                 align="center">
    92.         </el-table-column>
    93.         <el-table-column
    94.                 prop="ordered"
    95.                 align="center"
    96.                 label="排序">
    97.         </el-table-column>
    98.         <!--取值为statusStr，找到Brand里面的对应的get方法-->
    99.         <el-table-column
    100.                 prop="statusStr"
    101.                 align="center"
    102.                 label="当前状态">
    103.         </el-table-column>
    104.         <el-table-column label="操作" align="center">
    105.             <template slot-scope="scope">
    106.                 <el-button
    107.                         type="primary"
    108.                         @click="handleEdit(scope.$index, scope.row)">编辑
    109.                 </el-button>
    110.                 <el-button
    111.                         type="danger"
    112.                         @click="handleDelete(scope.$index, scope.row)">删除
    113.                 </el-button>
    114.             </template>
    115.         </el-table-column>
    116.     </el-table>
    117.     <!--分页-->
    118.     <el-pagination
    119.             @size-change="handleSizeChange"
    120.             @current-change="handleCurrentChange"
    121.             :current-page="currentPage"
    122.             :page-sizes="[5, 10, 15, 20]"
    123.             :page-size="100"
    124.             layout="total, sizes, prev, pager, next, jumper"
    125.             :total="totalCount">
    126.     </el-pagination>
    127. </div>
    128. <script src="js/axios-0.18.0.js"></script>
    129. <script src="js/vue.js"></script>
    130. <script src="element-ui/lib/index.js"></script>
    131. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    132. <script>
    133.     new Vue({
    134.         el: "#app",
    135.         mounted() {
    136.             this.selectAll();
    137.         },
    138.         data() {
    139.             return {
    140.                 //表内数据与查询的数据
    141.                 tableData: [],
    142.                 brandSelect: {
    143.                     status: '',
    144.                     brandName: '',
    145.                     companyName: '',
    146.                     description: '',
    147.                     id: '',
    148.                     ordered: '',
    149.                 },
    150.                 //add与update表单显示开关，方法选择，使用的模型
    151.                 dialogVisible: false,
    152.                 method: '',
    153.                 brand: {},
    154.                 //复选框数据，选中的要删除的数据
    155.                 multipleSelection: [],
    156.                 selectedIds: [],
    157.                 //分页数据
    158.                 pageSize: 5,
    159.                 totalCount: 100,
    160.                 currentPage: 1,
    161.             }
    162.         },
    163.         methods: {
    164.             //添加功能与修改功能
    165.             handleAdd() {
    166.                 this.method = '添加';
    167.                 this.brand = {
    168.                     status: '',
    169.                     brandName: '',
    170.                     companyName: '',
    171.                     description: '',
    172.                     id: '',
    173.                     ordered: '',
    174.                 };
    175.                 this.dialogVisible = true
    176.             },
    177.             handleEdit(index, row) {
    178.                 this.method = '修改'
    179.                 this.brand = this.tableData[index];
    180.                 this.brand.status = String(this.brand.status)
    181.                 this.dialogVisible = true;
    182.             },
    183.             addBrand() {
    184.                 axios.post("http://localhost/web_demo6_war/brand/add", this.brand).then(resp => {
    185.                     if (resp.data == "success") {
    186.                         this.dialogVisible = false;
    187.                         this.$message({
    188.                             message: '添加成功',
    189.                             type: 'success'
    190.                         });
    191.                         this.selectAll();
    192.                     }
    193.                 })
    194.             },
    195.             updateBrand() {
    196.                 axios.post("http://localhost/web_demo6_war/brand/update", this.brand).then(resp => {
    197.                     if (resp.data == "success") {
    198.                         this.dialogVisible = false;
    199.                         this.$message({
    200.                             message: '修改成功',
    201.                             type: 'success'
    202.                         });
    203.                         this.selectAll();
    204.                     }
    205.                 })
    206.             },
    207.             cancelUpdate() {
    208.                 this.dialogVisible = false
    209.                 this.$message({
    210.                     message: '已取消修改',
    211.                 });
    212.                 this.selectAll()
    213.             },
    214.  
    215.             //删除功能
    216.             handleDelete(index, row) {
    217.                 this.$confirm('此操作将永久删除改公司信息, 是否继续?', '提示', {
    218.                     confirmButtonText: '确定',
    219.                     cancelButtonText: '取消',
    220.                     type: 'warning'
    221.                 }).then(() => {
    222.                     axios.get("http://localhost/web_demo6_war/brand/deleteById?id=" + this.tableData[index].id).then(resp => {
    223.                         if (resp.data == "success") {
    224.                             this.$message({
    225.                                 message: '删除成功',
    226.                                 type: 'success'
    227.                             });
    228.                             this.selectAll();
    229.                         }
    230.                     })
    231.                 }).catch(() => {
    232.                     this.$message({
    233.                         type: 'info',
    234.                         message: '已取消删除'
    235.                     });
    236.                 });
    237.             },
    238.  
    239.             //批量删除功能
    240.             handleSelectionChange(val) {
    241.                 this.multipleSelection = val;
    242.                 console.log(this.multipleSelection);
    243.             },
    244.             deleteByIds() {
    245.                 for (let i = 0; i < this.multipleSelection.length; i++) {
    246.                     let selectedElement = this.multipleSelection[i];
    247.                     this.selectedIds[i] = selectedElement.id;
    248.                 }
    249.                 this.$confirm('此操作将永久删除改公司信息, 是否继续?', '提示', {
    250.                     confirmButtonText: '确定',
    251.                     cancelButtonText: '取消',
    252.                     type: 'warning'
    253.                 }).then(() => {
    254.                     if (this.selectedIds.length != 0) {
    255.                         axios.post("http://localhost/web_demo6_war/brand/deleteByIds", this.selectedIds).then(resp => {
    256.                             if (resp.data == "success") {
    257.                                 this.$message({
    258.                                     message: '删除成功',
    259.                                     type: 'success'
    260.                                 });
    261.                                 this.selectAll();
    262.                             }
    263.                         })
    264.                         this.selectedIds = [];
    265.                     } else {
    266.                         this.$message({
    267.                             message: '需要选中几个数据',
    268.                             type: 'warning'
    269.                         });
    270.                     }
    271.                 }).catch(() => {
    272.                     this.$message({
    273.                         type: 'info',
    274.                         message: '已取消删除'
    275.                     });
    276.                 });
    277.             },
    278.  
    279.  
    280.             //分页工具条方法
    281.             handleSizeChange(val) {
    282.                 console.log(`每页 ${val} 条`);
    283.                 this.pageSize = val;
    284.                 this.selectAll();
    285.             },
    286.             handleCurrentChange(val) {
    287.                 console.log(`当前页: ${val}`);
    288.                 this.currentPage = val;
    289.                 this.selectAll();
    290.             },
    291.             //查询分页：
    292.             selectAll() {
    293.                 axios.post("http://localhost/web_demo6_war/brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
    294.                     this.brandSelect).then(resp => {
    295.                     this.tableData = resp.data.rows;
    296.                     this.totalCount = resp.data.totalCount;
    297.                     console.log(this.tableData);
    298.                 })
    299.             },
    300.         }
    301.     })
    302. </script>
    303. </body>
    304. </html>

     

      

    在本文的最后，说一些最近的感想：

    学习这类技术似乎不能太认真，或许会浪费大把的时间

    “作数”或许就行了！

  • 相关阅读:
    【PMTU】TCP的MTU探测
    红队打靶：Nyx: 1打靶思路详解（vulnhub）
    Jest 如何支持异步及时间函数
    CenterPoint 源码流程解读（一）
    总建面64万平，配3所幼儿园+54班九年制学校，坪山江岭竹元规划
    leetcode day12 二叉树的最大深度
    Android耗电量测试
    Shell 一键替换当前目录下所有文件的指定内容
    使用Selenium的WebDriver进行长截图
    ubuntu18.04编译GB28181Server
  • 原文地址：https://blog.csdn.net/m0_63186780/article/details/136537695