VUE基础及项目迭代

胖成范德彪

已于 2023-06-13 19:32:52 修改

阅读量391

点赞数

文章标签： vue.js javascript 前端

于 2023-06-08 20:56:45 首次发布

本文链接：https://blog.csdn.net/SurepMan/article/details/131115915

版权

A、创建VUE页面步骤

第一步：导包

在这里插入图片描述

第二步：在html导入

<script src="js/vue.min-v2.5.16.js"></script>

第三步：写代码

代码模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>
<div id="app">

</div>

<script>

  let app = new Vue({
    el:"#app",

    data:{

    },

    methods:{

    }
  })

</script>
</body>
</html>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>
<!--差值表达式-->
<div id="app">
  {{5+5}}--{{6*6}}--{{6==6}}<br>
  {{username}}<br>
  {{id}}<br>
  {{date}}<br>
  {{person.username}}<br>
  {{list}}<br>
</div>

<script>
  let app = new Vue({
    el:"#app", //这个vue要控制id为 app的div
    data:{
      username:"张sanf",
      id:1,
      date:new Date(),
      person:{username: "zhagnsan",id:2},
      list:['aa','bb','cc']
    }//专门给要操作的div提供数据
  })
</script>

</body>
</html>

在这里插入图片描述

1、第一个VUE程序

挂载点，数据对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>

<div id="app">
    <button @click="open">按钮</button>
</div>

<script>
    let app = new Vue({
        el: "#app",//控制div名字
        data: {},//数据区
        methods: {
            open: function () {
                alert("123123");
            }//open是键  function(){}方法是值

            //简写方法
            // open(){
            //    
            // }
        }//方法区
    })
    
</script>
    
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h4RT8Ut8-1686228880425)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230608121018361.png)]$

在这里插入图片描述

vue作用范围
选择器
数据对象，可以是数组，对象等

 {{message}}<br>
    {{address}}<br>
    {{person.name}}<br>

data:{
    message:"hello earsh",
    address:[11,33,22],
    person:{name:"zhangsan",age:19}
},

B、Vue事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>

<div id="app">
    {{name}}
    <button @click="open">按钮</button>
    <button @click="closeAll">按钮1</button>
    <button @click="add">按钮2</button>
    <button @click="change">改名</button>
</div>

<script>
    let app = new Vue({
        el: "#app",//控制div名字
        data: {name:"zhangsan"},//数据区
        methods: {
            open: function () {
                alert("123123");
            },//open是键  function(){}方法是值

            //简写方法
            // open(){
            //
            // }
            closeAll(){
                alert(222)
            },

            add(){//在methods区控制data区里的东西 用this.
                alert(this.name);
            },

            change(){
                this.name += "lisi"
            }

        }//方法区
    })

</script>


</body>
</html>

2、v-text和v-html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test</title>
  <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>
<div id="app">
  {{message}}
    <h1 v-text="message + '你好'"></h1>
    <span v-text="html"></span><br>
    <span v-html="html"></span>
</div>

<script>
    let app = new Vue({
        el:"#app",
        data:{
            message:"hello earsh",
            html:"<h2>xxxx</h2>"
        },
        methods:{

        }
    });
</script>
</body>
</html>

3、v-on

v-on用来处理事件，比如点击，失去焦点等等。可以简写为：简写为@

注意，一般需要绑定methods

this关键字可以获取data中数据

常见的事件:

    click: 点击一次;   当鼠标点击，触发事件

    dblclick: 双击；当鼠标双击，触发事件

    focus: 获取焦点；  当得到了光标，触发事件

    blur: 失去焦点;   当失去了光标，触发事件

    mouseover:鼠标移至；  鼠标移至某标签上方，触发事件
    monseenter

    mouserout:鼠标移出； 鼠标移出某标签上方，触发事件

    keyup:键盘按下；  键盘按下，触发事件
    input 内容发生改变

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test</title>
  <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>
<div id="app">
  <button @click="sub()">+</button>
  <span>{{message}}</span>
  <button @click="add()">-</button>
</div>

<script>
    let app = new Vue({
        el:"#app",
        data:{
            message:0
        },
        methods:{
            sub:function(){
                this.message--;

            },
            add:function(){
                this.message++;

            }
        }
    });
</script>
</body>
</html>

4、v-show和v-if

用来显示和隐藏元素，使用方法为

<img v-show="show" src="img/on.gif">

两个的区别为：v-show是css样式控制，v-if是删除dom元素

5、 v-bind 设置元素属性

v-bind:src=“imgaddr”

v-bind:class="isa?“a”:‘’

v-bind:class=“{active:activer}”

简写为:src

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test</title>
  <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>
<div id="app">
    <img :src="imgArr">//这里src前加了一个冒号
    <button @click="change">切换</button>

</div>

<script>
   let app = new Vue({想·  
       el:"#app",
       data:{
            show:true,
            age:19,
            imgArr:"img/on.gif"
       },
       methods:{
            change:function(){
                if(this.imgArr=="img/off.gif")
                {
                    this.imgArr = "img/on.gif";
                }else
                {
                    this.imgArr = "img/off.gif";
                }

            }
       }
   });
</script>
</body>
</html>

6、created

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min-v2.5.16.js"></script>

</head>
<body>
<div id="app">
<img :src="imgSrc">
    <button @click="next">  &gt; </button>
</div>

<script>

    let app = new Vue({
        el:"#app",
        data:{
            num:1,
            imgSrc:"imgs/1.jpg"
        },
        methods:{
            next:function(){
                this.num++;

                if(this.num>3)
                {
                    this.num = 1;
                }

                this.imgSrc = "imgs/"+this.num+".jpg";
            }

        },
        created(){
            //页面创建就执行
            setInterval(this.next,1000)//进入页面后，每秒执行一次next()方法，调用next方法要用this
        }
    });
</script>
</body>
</html>

7、v-for

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test</title>
  <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="p in persons">{{p.name}} &nbsp; {{p.age}}</li>
    </ul>

</div>

<script>
   let app = new Vue({
       el:"#app",
       data:{
            persons:[{"name":"zhangsan","age":19},{"name":"lisi","age":20},{"name":"wangwu","age":20}]
       },
       methods:{

       }
   });
</script>
</body>
</html>

在这里插入图片描述

8、v-model 双向绑定

案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test</title>
  <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>
<div id="app">
    姓名：<input type="text" v-model="username">  年龄：<input type="text" @keyup.enter="add" v-model="age"> <button @click="add">添加</button>
    <ul>
        <li v-for="(p,index) in persons">
            {{p.name}} &nbsp; {{p.age}}
            <button  @click="remove(index)">删除</button>
        </li>
    </ul>

</div>

<script>
   let app = new Vue({
       el:"#app",
       data:{
            username:"",
            age:null,
            persons:[{"name":"zhangsan","age":19},{"name":"lisi","age":20},{"name":"wangwu","age":20}]
       },
       methods:{
            add:function(){
                this.persons.push({"name":this.username,age:this.age});
                this.username="";
                this.age=null;
            },
           remove:function(index){
                this.persons.splice(index,1);
           }
       }
   });
</script>
</body>
</html>

9、Vue 对集合添加删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>
<div id="app">
    姓名：<input v-model="username" type="text"><br>
    年龄：<input v-model="age" type="text"><br>
    <button @click="add">添加</button>


<!--//person是循环出来的每一个对象，index是循环出来的索引-->
    <ul>
        <li v-for="(person,index) in personList">
            {{index+1}}--{{person.username}}--{{person.age}}
            <button @click="remove(index)" >删除</button>
        </li>
    </ul>


</div>

<script>

    let app = new Vue({
        el: "#app",

        data: {
            username:"",
            age:"",
            personList:[]
        },

        methods: {
            add(){
                let person={"username":this.username,"age":this.age};
                this.personList.push(person);
                this.username="";
                this.age="";
            },
            remove(index){
                //删除 就是操作personList，索引到相对应位置，删除
                this.personList.splice(index,1);
            }
        }
    })


</script>
</body>
</html>

2、项目迭代

导包啊导包

<script src="/day01/js/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="/day01/bootstrap/css/bootstrap.css">
<script src="/day01/bootstrap/js/bootstrap.js"></script>
<script src="/day01/js/axios.min.js"></script>
<script src="/day01/js/vue.min-v2.5.16.js"></script>

2.1、登录注册修改

不再将值存到session中，转而存到浏览器的【本地存储空间中】

在这里插入图片描述

2.1.1、 LoginServlet类

登录成功后，将实体类中的

 private Object data;

属性赋值为

userDb.getUserUsername()

完整代码如下：

resp.getWriter().write(JSON.toJSONString(new ResData(200, "登录成功", userDb.getUserUsername())));

2.1.2、login.jsp

jsp中接受到Servlet中的转发，调用localStorage.setItem()方法，将需要的转发值存入浏览器的【本地存储空间中】

完整代码如下：

login() {
    let params = new URLSearchParams();
    params.append("username", this.username);
    params.append("password", this.password)
    axios.post("/day01/user/login", params)
        .then(response => {
            console.log(response.data);
            let resp = response.data;
            if (resp.code === 200) {
                alert(resp.msg);
                localStorage.setItem("username",resp.data);//调用方法
                location.href = "/day01/index.jsp";
            } else {
                this.msg = resp.msg;
            }
        })
}

2.1.3、index.jsp

导包啊导包

在index.jsp中取用户名的值，展示登录用户的姓名欢迎该用户登陆

<div id="app">
    欢迎用户：{{username}}登录
</div>

<script>
    let app = new Vue({
        el:"#app",

        data:{
            username:"",
        },

        methods:{

        },

        created(){
            this.username = localStorage.getItem("username");
        }

    })
</script>

在这里插入图片描述

好看的表格css样式

前置条件：要导入bootstrap包

  <table class="table table-striped table-bordered table-hover table-condensed">
     
   </table>

2.2、迭代流程差异

2.2.1、原本的流程

第一步

<a href="/day01/opus/list" target="buttom">图书信息</a>

向浏览器提交路径

第二步

@WebServlet("/opus/list")

加了以上注解后，Servlet类响应括号里的路径信息，执行Servlet类里的程序

第三步

//共享
req.setAttribute("opusList", opusList);
//转发页面进行展示
req.getRequestDispatcher("/opus/list.jsp").forward(req, resp);

将想要的值共享，并转发到相对应的jsp页面

第四步

 <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>id</th>
            <th>书名</th>
            <th>类型名称</th>
            <th>作者</th>
            <th>简介</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作人</th>
            <th colspan="2" >操作 <a href="/day01/opus/addPage"><button>添加 </button> </a> </th>
        </tr>
        <c:forEach items="${pageInfo.list}" var="opus">

            <tr>
                <td>${opus.opusId}</td>
                <td>${opus.opusName}</td>
                <td>${opus.typesName}</td>
                <td>${opus.userUsername}</td>
                <td>${opus.opusIntro}</td>
                <td>${opus.opusCreatetime}</td>
                <td>${opus.opusUpdatetime}</td>
                <td>${opus.opusOperator}</td>
                <td><a href="/day01/opus/remove?id=${opus.opusId}"> <button>删除</button></a> </td>
                <td><a href="/day01/opus/updatePage?id=${opus.opusId}"> <button>修改</button></a> </td>
            </tr>
        </c:forEach>

    </table>

jsp文件对共享数据进行展示

2.2.2、现在迭代的版本流程(Vue)

第一步

<a href="/day01/types/list.jsp" target="buttom">类型信息</a>

直接访问jsp文件

第二步

让jsp去提交链接，访问servlet，并转发过来对象的json数据

        created(){
            axios.get("/day01/types/list")//向响应/types/list路径的servlet提交链接
                .then(response=>{
                    let resp = response.data;
                    this.typesList = resp.data;
                })
        }

servlet类

@WebServlet("/types/list")
public class ListServlet extends HttpServlet {
    private ITypesService typesService;

    public ListServlet() {
        typesService = new TypesServiceImpl();
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {


        List<Types> typesList = typesService.queryList();
        System.out.println(typesList);
//        req.setAttribute("typesList", typesList);
//        req.getRequestDispatcher("/types/list.jsp").forward(req, resp);
        resp.getWriter().write(JSON.toJSONString(new ResData(200,"ok", typesList)));

    }
}

第三步

由jsp页面进行展示

代码由Vue实现

完整代码如下：

<div id="app">
    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>id</th>
            <th>类型名称</th>
            <th>类型简介</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作人</th>
        </tr>
<%--        <c:forEach items="{{typesList}}" var="types">--%>

            <tr v-for="types in typesList ">
                <td>{{types.typesId}}</td>
                <td>{{types.typesName}}</td>
                <td>{{types.typesIntro}}</td>
                <td>{{types.typesCreatetime}}</td>
                <td>{{types.typesUpdatetime}}</td>
                <td>{{types.typesOperator}}</td>
            </tr>
<%--        </c:forEach>--%>

    </table>
</div>

<script>
    let app = new Vue({
        el:"#app",

        data:{
            typesList:[],//集合是方括号
        },

        methods:{

        },

        created(){
            axios.get("/day01/types/list")
                .then(response=>{
                    let resp = response.data;
                    this.typesList = resp.data;
                })
        }

    })
</script>

在这里插入图片描述

2.3、增

2.3.1、opus/list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="/day01/js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="/day01/bootstrap/css/bootstrap.css">
    <script src="/day01/bootstrap/js/bootstrap.js"></script>
    <script src="/day01/js/axios.min.js"></script>
    <script src="/day01/js/vue.min-v2.5.16.js"></script>

</head>
<body>
<div style="text-align: center" id="app">
    <%--    <form action="/day01/opus/list" method="get">--%>
    <%--        <input type="text" name="name" value="${param.name}" placeholder="输入书名模糊搜索">--%>
    <%--        <input type="submit" value="搜索">--%>
    <%--    </form>--%>

    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>id</th>
            <th>书名</th>
            <th>类型名称</th>
            <th>作者</th>
            <th>简介</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作人</th>
            <th>操作 <a href="/day01/opus/add.jsp">
                <button>添加</button>
            </a></th>
        </tr>


        <tr v-for="opus in pageInfo.list">
            <td>{{opus.opusId}}</td>
            <td>{{opus.opusName}}</td>
            <td>{{opus.typesName}}</td>
            <td>{{opus.userUsername}}</td>
            <td>{{opus.opusIntro}}</td>
            <td>{{opus.opusCreatetime}}</td>
            <td>{{opus.opusUpdatetime}}</td>
            <td>{{opus.opusOperator}}</td>
            <td>
                <button @click="remove(opus.opusId)" class="btn btn-warning">删除</button>
                </a>
                <button @click="updatePage(opus.opusId)" class="btn btn-info">修改</button>
                </a>
            </td>
        </tr>

    </table>

    <%--    展示为第一页时，首页和上一页不展示--%>
    <button v-show="pageInfo.pageNum!=1" @click="queryList(1)" class="btn btn-primary btn-sm">首页</button>
    <button v-show="pageInfo.pageNum!=1" @click="queryList(pageInfo.pageNum-1)" class="btn btn-primary btn-sm">上一页
    </button>


    <%--    &lt;%&ndash;展示为尾页时，下一页和尾页不展示&ndash;%&gt;--%>
    <button v-show="pageInfo.pageNum!=pageInfo.pages" @click="queryList(pageInfo.pageNum+1)"
            class="btn btn-primary btn-sm">下一页
    </button>
    <button v-show="pageInfo.pageNum!=pageInfo.pages" @click="queryList(pageInfo.pages)" class="btn btn-primary btn-sm">
        尾页
    </button>

    总计{{pageInfo.pages}}页/当前{{pageInfo.pageNum}}
    <input name="num" v-model="num">
    <button @click="queryList(num)" class="btn btn-info">跳转</button>


</div>

<script>
    let app = new Vue({
        el: "#app",

        data: {

            num: 1,
            pageInfo: {},
        },

        methods: {
            queryList(pageNum) {
                let params = new URLSearchParams();
                params.append("pageNum", pageNum);

                //异步
                axios.post("/day01/opus/list", params)
                    .then(response => {
                        let resp = response.data;
                        this.pageInfo = resp.data;
                        this.num = this.pageInfo.pageNum;
                    })
            },

            remove(opusId){
                axios.get("/day01/opus/remove?opusId="+opusId)
                    .then(response=>{
                        let resp = response.data;
                        if(resp.code === 200){
                            alert("删除成功");
                            this.queryList(1);//继续调用 重新查询数据，渲染数据
                        }else {
                            alert(resp.msg);
                        }
                    })
            },

            updatePage(opusId){
                // localStorage.setItem("opusId",opusId);//存在本地数据库
                // location.href="/day01/opus/update.jsp";

                //或者过一次后端，或者vue-cli路由
                location.href="/day01/opus/updatePage?id="+opusId

            }


        },

        created() {
            //第一次进来，访问第一页
            this.queryList(1);
        }
    })
</script>


</body>
</html>

2.3.2、servlet/opus/ListServlet

package com.woniu.javaweb.servlet.opus;

import com.alibaba.fastjson.JSON;
import com.woniu.javaweb.entity.Opus;
import com.woniu.javaweb.entity.PageInfo;
import com.woniu.javaweb.entity.ResData;
import com.woniu.javaweb.entity.User;
import com.woniu.javaweb.service.IOpusService;
import com.woniu.javaweb.service.impl.OpusServiceImpl;
import com.woniu.javaweb.util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet("/opus/list")
public class ListServlet extends HttpServlet {

    private IOpusService opusService;

    public ListServlet() {
        opusService = new OpusServiceImpl();
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("请求到达ListServlet");

        resp.setContentType("application/json;charset=utf-8");

        String pageNumStr = req.getParameter("pageNum");
        String pageSizeStr = req.getParameter("pageSize");//默认3
        String name = req.getParameter("name");

        HttpSession session=req.getSession();
        User user=(User) session.getAttribute("user");

        //如果前端是第一次来，没有输入页码，那后端默认就给第一页，就按照前端要求的页码取数据
        Integer pageNum = StringUtils.isBlank(pageNumStr) ? 1 : Integer.valueOf(pageNumStr);
        //如果前端没有要求条数，默认就是每一页3条，如果输入值了，就按照输入的值来
        Integer pageSize = StringUtils.isBlank(pageSizeStr) ? 3 : Integer.valueOf(pageSizeStr);

        //总条数，是从数据库查询的
        Integer total = opusService.queryCount(name,user.getUserId());
        //根据总条数，计算总页数
        Integer pages = total % pageSize == 0 ? total / pageSize : (total / pageSize) + 1;

        //获取所有图书数据
        List<Opus> opusList = opusService.queryList(pageNum, pageSize, name,user.getUserId());
        PageInfo pageInfo = new PageInfo(pageNum, pageSize, total, pages, opusList);

        resp.getWriter().write(JSON.toJSONString(new ResData(200,"ok",pageInfo )));
    }

}

2.3.3、opus/add.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/5/30 0030
  Time: 9:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="/day01/js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="/day01/bootstrap/css/bootstrap.css">
    <script src="/day01/bootstrap/js/bootstrap.js"></script>
    <script src="/day01/js/axios.min.js"></script>
    <script src="/day01/js/vue.min-v2.5.16.js"></script>

</head>
<body>

<div id="app">
    <h1>添加图书</h1>

    书名：<input type="text" v-model="name"><br>
    类型：
    <select v-model="opusTypeid">
        <option value="">---请选择---</option>
            <option v-for="types in typesList" :value="types.typesId">{{types.typesName}}</option>
            <%--            <option value="2">奇幻</option>--%>
            <%--            <option value="3">武侠</option>--%>
            <%--            <option value="4">仙侠</option>--%>
            <%--            <option value="5">都市</option>--%>
            <%--            <option value="6">现实</option>--%>


    </select>
    <br>
    简介：<input type="text" v-model="intro"><br>
    <button @click="add" class="btn btn-primary">添加</button>
    <button @click="reset" class="btn btn-primary">重置</button>

</div>

<script>
    let app = new Vue({
        el: "#app",

        data: {
            name:"",
            opusTypeid:"",
            intro:"",
            typesList: [],
        },

        methods: {
            add(){
              let params = new URLSearchParams();
              params.append("name",this.name);
              params.append("opusTypeid",this.opusTypeid);
              params.append("intro",this.intro);

              if(!this.name){
                  alert("书名没有输入");
                  return;
              }
              if(!this.opusTypeid){
                  alert("类型没有选择");
                  return;
              }
              if(!this.intro){
                  alert("简介没有写");
                  return;
              }


              axios.post("/day01/opus/add",params)
                  .then(response=>{
                      let resp = response.data;
                      if(resp.code === 200){
                          location.href="/day01/opus/list.jsp";
                      }else {
                          alert("添加失败")
                      }
                  })

            },

            reset(){
                this.name="";
                this.opusTypeid="";
                this.intro="";

            }
        },

        created() {
            axios.get("/day01/types/list")
                .then(response => {
                    let resp = response.data;
                    this.typesList = resp.data
                })
        }
    })

</script>

</body>
</html>

2.3.4、servlet/opus/AddServlet

package com.woniu.javaweb.servlet.opus;

import com.alibaba.fastjson.JSON;
import com.woniu.javaweb.entity.Opus;
import com.woniu.javaweb.entity.ResData;
import com.woniu.javaweb.entity.User;
import com.woniu.javaweb.service.IOpusService;
import com.woniu.javaweb.service.impl.OpusServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/opus/add")
public class AddServlet extends HttpServlet {

    private IOpusService opusService;

    public AddServlet() {
        opusService = new OpusServiceImpl();
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //获取参数
        String name = req.getParameter("name");
        String typesId = req.getParameter("opusTypeid");
        String intro = req.getParameter("intro");

        //判断

        //添加到数据库
        Opus opus = new Opus();
        opus.setOpusName(name);
        opus.setOpusTypeid(Integer.valueOf(typesId));
        opus.setOpusIntro(intro);

        //todo 这里没写完
        HttpSession session = req.getSession();
        User user = (User) session.getAttribute("user");
        opus.setOpusAuthorid(user.getUserId());
        opus.setOpusOperator(user.getUserUsername());
//        opus.setUserUsername("admin");
        opusService.add(opus);

        //跳转到列表页面
//        resp.sendRedirect(req.getContextPath()+"/opus/list");

        resp.getWriter().write(JSON.toJSONString(new ResData(200, "ok", null)));

    }
}

2.4、删

2.4.1、servlet/opus/RemoveServlet

package com.woniu.javaweb.servlet.opus;

import com.alibaba.fastjson.JSON;
import com.woniu.javaweb.entity.Opus;
import com.woniu.javaweb.entity.ResData;
import com.woniu.javaweb.entity.User;
import com.woniu.javaweb.service.IOpusService;
import com.woniu.javaweb.service.impl.OpusServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/opus/remove")
public class RemoveServlet extends HttpServlet {
    private IOpusService opusService;

    public RemoveServlet() {
        opusService = new OpusServiceImpl();
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        //获取要删除的图书id
        String id = req.getParameter("opusId");

        //查询出这本书属于谁
        Opus opus = opusService.queryById(Integer.valueOf(id));
        Integer authorid = opus.getOpusAuthorid();

        //查询当前登录的人是谁
        HttpSession session = req.getSession();
        User user = (User)session.getAttribute("user");
        if(!authorid.equals(user.getUserId())){
            resp.getWriter().write(JSON.toJSONString(new ResData(30001, "不能删除他人添加的书", null)));
            return;
        }
        opusService.removeById(Integer.valueOf(id));
//        resp.sendRedirect(req.getContextPath()+"/opus/list");
        resp.getWriter().write(JSON.toJSONString(new ResData(200, "ok", null)));
    }
}

2.5、查

2.5.1、servlet/opus/ListServlet

package com.woniu.javaweb.servlet.opus;

import com.alibaba.fastjson.JSON;
import com.woniu.javaweb.entity.Opus;
import com.woniu.javaweb.entity.PageInfo;
import com.woniu.javaweb.entity.ResData;
import com.woniu.javaweb.entity.User;
import com.woniu.javaweb.service.IOpusService;
import com.woniu.javaweb.service.impl.OpusServiceImpl;
import com.woniu.javaweb.util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet("/opus/list")
public class ListServlet extends HttpServlet {

    private IOpusService opusService;

    public ListServlet() {
        opusService = new OpusServiceImpl();
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("请求到达ListServlet");
        //第一版
//        //设置编码
//        req.setCharacterEncoding("UTF-8");
//        resp.setCharacterEncoding("UTF-8");
//        resp.setContentType("text/html;charset=utf-8");
//
//        //获取所有图书数据
//        List<Opus> opusList = opusService.queryList();
//        System.out.println(opusList);
//        //共享
//        req.setAttribute("opusList", opusList);
//        //转发页面进行展示
//        req.getRequestDispatcher("/opus/list.jsp").forward(req, resp);

        //第二版：分页
        //设置编码
//        req.setCharacterEncoding("UTF-8");
//        resp.setCharacterEncoding("UTF-8");
//        resp.setContentType("text/html;charset=utf-8");

//        String pageNumStr = req.getParameter("pageNum");
//        String pageSizeStr = req.getParameter("pageSize");//默认3
//        String name = req.getParameter("name");
//
//        HttpSession session=req.getSession();
//        User user=(User) session.getAttribute("user");
//
//        //如果前端是第一次来，没有输入页码，那后端默认就给第一页，就按照前端要求的页码取数据
//        Integer pageNum = StringUtils.isBlank(pageNumStr) ? 1 : Integer.valueOf(pageNumStr);
//        //如果前端没有要求条数，默认就是每一页3条，如果输入值了，就按照输入的值来
//        Integer pageSize = StringUtils.isBlank(pageSizeStr) ? 3 : Integer.valueOf(pageSizeStr);
//
//        //总条数，是从数据库查询的
//        Integer total = opusService.queryCount(name,user.getUserId());
//        //根据总条数，计算总页数
//        Integer pages = total % pageSize == 0 ? total / pageSize : (total / pageSize) + 1;
//
//        //获取所有图书数据
//        List<Opus> opusList = opusService.queryList(pageNum, pageSize, name,user.getUserId());
//        PageInfo pageInfo = new PageInfo(pageNum, pageSize, total, pages, opusList);
//
//        req.setAttribute("pageInfo", pageInfo);
//
//        System.out.println(opusList);
//        //共享
//        req.setAttribute("opusList", opusList);
//        //转发页面进行展示
//        req.getRequestDispatcher("/opus/list.jsp").forward(req, resp);

        //第三版
        resp.setContentType("application/json;charset=utf-8");

        String pageNumStr = req.getParameter("pageNum");
        String pageSizeStr = req.getParameter("pageSize");//默认3
        String name = req.getParameter("name");

        HttpSession session=req.getSession();
        User user=(User) session.getAttribute("user");

        //如果前端是第一次来，没有输入页码，那后端默认就给第一页，就按照前端要求的页码取数据
        Integer pageNum = StringUtils.isBlank(pageNumStr) ? 1 : Integer.valueOf(pageNumStr);
        //如果前端没有要求条数，默认就是每一页3条，如果输入值了，就按照输入的值来
        Integer pageSize = StringUtils.isBlank(pageSizeStr) ? 3 : Integer.valueOf(pageSizeStr);

        //总条数，是从数据库查询的
        Integer total = opusService.queryCount(name,user.getUserId());
        //根据总条数，计算总页数
        Integer pages = total % pageSize == 0 ? total / pageSize : (total / pageSize) + 1;

        //获取所有图书数据
        List<Opus> opusList = opusService.queryList(pageNum, pageSize, name,user.getUserId());
        PageInfo pageInfo = new PageInfo(pageNum, pageSize, total, pages, opusList);

//        req.setAttribute("pageInfo", pageInfo);

//        req.getRequestDispatcher("/opus/list.jsp").forward(req, resp);
        resp.getWriter().write(JSON.toJSONString(new ResData(200,"ok",pageInfo )));
    }

}

2.5.2、opus/list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="/day01/js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="/day01/bootstrap/css/bootstrap.css">
    <script src="/day01/bootstrap/js/bootstrap.js"></script>
    <script src="/day01/js/axios.min.js"></script>
    <script src="/day01/js/vue.min-v2.5.16.js"></script>

</head>
<body>
<div style="text-align: center" id="app">
    <%--    <form action="/day01/opus/list" method="get">--%>
    <%--        <input type="text" name="name" value="${param.name}" placeholder="输入书名模糊搜索">--%>
    <%--        <input type="submit" value="搜索">--%>
    <%--    </form>--%>

    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>id</th>
            <th>书名</th>
            <th>类型名称</th>
            <th>作者</th>
            <th>简介</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作人</th>
            <th>操作 <a href="/day01/opus/add.jsp">
                <button>添加</button>
            </a></th>
        </tr>

        <%--        <c:forEach items="${pageInfo.list}" var="opus">--%>

        <tr v-for="opus in pageInfo.list">
            <td>{{opus.opusId}}</td>
            <td>{{opus.opusName}}</td>
            <td>{{opus.typesName}}</td>
            <td>{{opus.userUsername}}</td>
            <td>{{opus.opusIntro}}</td>
            <td>{{opus.opusCreatetime}}</td>
            <td>{{opus.opusUpdatetime}}</td>
            <td>{{opus.opusOperator}}</td>
            <td>
                <button @click="remove(opus.opusId)" class="btn btn-warning">删除</button>
                </a>
                <button @click="updatePage(opus.opusId)" class="btn btn-info">修改</button>
                </a>
            </td>
        </tr>
        <%--        </c:forEach>--%>

    </table>

    <%--    展示为第一页时，首页和上一页不展示--%>
    <button v-show="pageInfo.pageNum!=1" @click="queryList(1)" class="btn btn-primary btn-sm">首页</button>
    <button v-show="pageInfo.pageNum!=1" @click="queryList(pageInfo.pageNum-1)" class="btn btn-primary btn-sm">上一页
    </button>


    <%--    &lt;%&ndash;展示为尾页时，下一页和尾页不展示&ndash;%&gt;--%>
   
    <button v-show="pageInfo.pageNum!=pageInfo.pages" @click="queryList(pageInfo.pageNum+1)"
            class="btn btn-primary btn-sm">下一页
    </button>
    <button v-show="pageInfo.pageNum!=pageInfo.pages" @click="queryList(pageInfo.pages)" class="btn btn-primary btn-sm">
        尾页
    </button>


    总计{{pageInfo.pages}}页/当前{{pageInfo.pageNum}}


    <input name="num" v-model="num">
    <button @click="queryList(num)" class="btn btn-info">跳转</button>



</div>

<script>
    let app = new Vue({
        el: "#app",

        data: {

            num: 1,
            pageInfo: {},
        },

        methods: {
            queryList(pageNum) {
                let params = new URLSearchParams();
                params.append("pageNum", pageNum);

                //异步
                axios.post("/day01/opus/list", params)
                    .then(response => {
                        let resp = response.data;
                        this.pageInfo = resp.data;
                        this.num = this.pageInfo.pageNum;
                    })
            },

            remove(opusId){
                axios.get("/day01/opus/remove?opusId="+opusId)
                    .then(response=>{
                        let resp = response.data;
                        if(resp.code === 200){
                            alert("删除成功");
                            this.queryList(1);//继续调用 重新查询数据，渲染数据
                        }else {
                            alert(resp.msg);
                        }
                    })
            },

            updatePage(opusId){
                // localStorage.setItem("opusId",opusId);//存在本地数据库
                // location.href="/day01/opus/update.jsp";

                //或者过一次后端，或者vue-cli路由
                location.href="/day01/opus/updatePage?id="+opusId

            }


        },

        created() {
            //第一次进来，访问第一页
            this.queryList(1);
        }
    })
</script>


</body>
</html>

2.6、改

2.6.2、opus/list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="/day01/js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="/day01/bootstrap/css/bootstrap.css">
    <script src="/day01/bootstrap/js/bootstrap.js"></script>
    <script src="/day01/js/axios.min.js"></script>
    <script src="/day01/js/vue.min-v2.5.16.js"></script>

</head>
<body>
<div style="text-align: center" id="app">
    <%--    <form action="/day01/opus/list" method="get">--%>
    <%--        <input type="text" name="name" value="${param.name}" placeholder="输入书名模糊搜索">--%>
    <%--        <input type="submit" value="搜索">--%>
    <%--    </form>--%>

    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>id</th>
            <th>书名</th>
            <th>类型名称</th>
            <th>作者</th>
            <th>简介</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作人</th>
            <th>操作 <a href="/day01/opus/add.jsp">
                <button>添加</button>
            </a></th>
        </tr>

        <%--        <c:forEach items="${pageInfo.list}" var="opus">--%>

        <tr v-for="opus in pageInfo.list">
            <td>{{opus.opusId}}</td>
            <td>{{opus.opusName}}</td>
            <td>{{opus.typesName}}</td>
            <td>{{opus.userUsername}}</td>
            <td>{{opus.opusIntro}}</td>
            <td>{{opus.opusCreatetime}}</td>
            <td>{{opus.opusUpdatetime}}</td>
            <td>{{opus.opusOperator}}</td>
            <td>
                <button @click="remove(opus.opusId)" class="btn btn-warning">删除</button>
                </a>
                <button @click="updatePage(opus.opusId)" class="btn btn-info">修改</button>
                </a>
            </td>
        </tr>
        <%--        </c:forEach>--%>

    </table>

    <%--    展示为第一页时，首页和上一页不展示--%>
    <button v-show="pageInfo.pageNum!=1" @click="queryList(1)" class="btn btn-primary btn-sm">首页</button>
    <button v-show="pageInfo.pageNum!=1" @click="queryList(pageInfo.pageNum-1)" class="btn btn-primary btn-sm">上一页
    </button>


    <%--    &lt;%&ndash;展示为尾页时，下一页和尾页不展示&ndash;%&gt;--%>
   
    <button v-show="pageInfo.pageNum!=pageInfo.pages" @click="queryList(pageInfo.pageNum+1)"
            class="btn btn-primary btn-sm">下一页
    </button>
    <button v-show="pageInfo.pageNum!=pageInfo.pages" @click="queryList(pageInfo.pages)" class="btn btn-primary btn-sm">
        尾页
    </button>


    总计{{pageInfo.pages}}页/当前{{pageInfo.pageNum}}


    <input name="num" v-model="num">
    <button @click="queryList(num)" class="btn btn-info">跳转</button>



</div>

<script>
    let app = new Vue({
        el: "#app",

        data: {

            num: 1,
            pageInfo: {},
        },

        methods: {
            queryList(pageNum) {
                let params = new URLSearchParams();
                params.append("pageNum", pageNum);

                //异步
                axios.post("/day01/opus/list", params)
                    .then(response => {
                        let resp = response.data;
                        this.pageInfo = resp.data;
                        this.num = this.pageInfo.pageNum;
                    })
            },

            remove(opusId){
                axios.get("/day01/opus/remove?opusId="+opusId)
                    .then(response=>{
                        let resp = response.data;
                        if(resp.code === 200){
                            alert("删除成功");
                            this.queryList(1);//继续调用 重新查询数据，渲染数据
                        }else {
                            alert(resp.msg);
                        }
                    })
            },

            updatePage(opusId){
                // localStorage.setItem("opusId",opusId);//存在本地数据库
                // location.href="/day01/opus/update.jsp";

                //或者过一次后端，或者vue-cli路由
                location.href="/day01/opus/updatePage?id="+opusId

            }


        },

        created() {
            //第一次进来，访问第一页
            this.queryList(1);
        }
    })
</script>


</body>
</html>

2.6.3、opus/update.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/5/30 0030
  Time: 11:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>update</title>

    <script src="/day01/js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="/day01/bootstrap/css/bootstrap.css">
    <script src="/day01/bootstrap/js/bootstrap.js"></script>
    <script src="/day01/js/axios.min.js"></script>
    <script src="/day01/js/vue.min-v2.5.16.js"></script>

</head>
<body>

<div id="app">
    <div class="row">
        <div class="col-md-3">
            <h1>修改图书</h1>


            <%--    <input type="hidden" v-model="id" value="${opus.opusId}">--%>
            书名：<input type="text" v-model="opus.opusName"><br>
            类型：
            <select v-model="opus.opusTypeid">
                <%--        <c:forEach var="types" items="${typesList}">--%>
                <option value="">---请选择---</option>
                <%--            <option value="${types.typesId}" ${types.typesId == opus.opusTypeid?"selected":""}>${types.typesName}</option>--%>
                <option v-for="types in typesList" :value="types.typesId">{{types.typesName}}</option>
                <%--        </c:forEach>--%>

            </select>
            <br>
            简介：<input type="text" v-model="opus.opusIntro"><br>
            <%--    <input type="submit" value="修改">--%>
            <%--    <input type="reset" value="重置">--%>
            <button @click="update" class="btn btn-primary btn-block">修改</button>
            <button @click="reset" class="btn btn-primary btn-block">重置</button>
        </div>
    </div>


</div>

<script>
    let app = new Vue({
        el: "#app",

        data: {
            id:${id},
            typesList: [],
            opus: {},

        },

        methods: {
            update() {
                let params = new URLSearchParams();
                params.append("id", this.opus.opusId);
                params.append("name", this.opus.opusName);
                params.append("opusTypeid", this.opus.opusTypeid);
                params.append("intro", this.opus.opusIntro);
                axios.post("/day01/opus/update", params)
                    .then(response => {
                        let resp = response.data;
                        if (resp.code === 200) {
                            alert("修改成功");
                            location.href = "/day01/opus/list.jsp";
                        } else {
                            alert(resp.msg);
                        }
                    })

            },

            reset() {
                this.opus.opusName = "";
                this.opus.opusTypeid = "";
                this.opus.opusIntro = "";
            },

        },

        mounted() {
            //页面加载完成后，要修改的图书信息  获取下拉菜单的数据
            // let opusId = localStorage.getItem("opusId");
            // axios.get("/day01/opus/queryById?opusId=" + opusId)
            axios.get("/day01/opus/queryById?opusId=" + this.id)
                .then(response => {
                    let resp = response.data;
                    this.opus = resp.data;
                })

            axios.get("/day01/types/list")
                .then(response => {
                    let resp = response.data;
                    this.typesList = resp.data;
                })
        }
    })
</script>


</body>
</html>

2.6.4、servlet/opus/UpdatePageServlet

package com.woniu.javaweb.servlet.opus;

import com.woniu.javaweb.entity.Opus;
import com.woniu.javaweb.entity.Types;
import com.woniu.javaweb.service.IOpusService;
import com.woniu.javaweb.service.ITypesService;
import com.woniu.javaweb.service.impl.OpusServiceImpl;
import com.woniu.javaweb.service.impl.TypesServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
 * 共享页面，跳转到修改页面
 */
@WebServlet("/opus/updatePage")
public class UpdatePageServlet extends HttpServlet {

    private IOpusService opusService;
    private ITypesService typesService;

    public UpdatePageServlet() {
        opusService = new OpusServiceImpl();
        typesService = new TypesServiceImpl();
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        //设置编码
//        req.setCharacterEncoding("UTF-8");
//        resp.setCharacterEncoding("UTF-8");

//        //要知道修改哪一条记录 前端会传一个要修改的id
//        String id = req.getParameter("id");
//
//        Opus opus = opusService.queryById(Integer.valueOf(id));
//        //todo 应该判断一个，这条记录是否存在
//
//        req.setAttribute("opus", opus);
//        List<Types> typesList = typesService.queryList();
//        req.setAttribute("typesList",typesList);
//
//        req.getRequestDispatcher("/opus/update.jsp").forward(req,resp);
        //第二个方法：或者过一次后端，或者vue-cli路由
        /**
         * list.jsp页面，点击修改，把id传过来
         * servlet中共享id，转发到update.jsp
         */
        String id = req.getParameter("id");
        req.setAttribute("id", id);
        req.getRequestDispatcher("/opus/update.jsp").forward(req, resp);

    }
}

2.6.5、servlet/opus/UpdateServlet

package com.woniu.javaweb.servlet.opus;

import com.alibaba.fastjson.JSON;
import com.woniu.javaweb.entity.Opus;
import com.woniu.javaweb.entity.ResData;
import com.woniu.javaweb.service.IOpusService;
import com.woniu.javaweb.service.impl.OpusServiceImpl;
import com.woniu.javaweb.util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/opus/update")
public class UpdateServlet extends HttpServlet {

    private IOpusService opusService;

    public UpdateServlet() {
        opusService  = new OpusServiceImpl();
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //设置编码
//        req.setCharacterEncoding("UTF-8");
//        resp.setCharacterEncoding("UTF-8");


        //第一个方法 存在本地数据库
        String id = req.getParameter("id");
        String name = req.getParameter("name");
        String opusTypeid = req.getParameter("opusTypeid");
        String intro = req.getParameter("intro");
        if(StringUtils.isBlank(id) || StringUtils.isBlank(name) || StringUtils.isBlank(opusTypeid)
        || StringUtils.isBlank(intro)){
            resp.getWriter().write(JSON.toJSONString(new ResData(10001, "必填项为空", null)));
            return;
        }


        Opus opus = new Opus();
        opus.setOpusId(Integer.valueOf(id));
        opus.setOpusName(name);
        opus.setOpusTypeid(Integer.valueOf(opusTypeid));
        opus.setOpusIntro(intro);

        opusService.updateById(opus);

//        resp.sendRedirect(req.getContextPath()+"/opus/list");
        resp.getWriter().write(JSON.toJSONString(new ResData(200, "修改成功", null)));

        //第二个方法：或者过一次后端，或者vue-cli路由

    }

}