《web应用技术》第十一次作业

Utils层 

package com.zyx.utils;

import com.alibaba.fastjson.JSONObject;
import com.zyx.pojo.Result;

import lombok.extern.slf4j.Slf4j;
import org.springframework.util.StringUtils;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebFilter(urlPatterns = "/*")
@Slf4j
public class FilterUtils  implements Filter {



    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest req=(HttpServletRequest)  servletRequest;
        HttpServletResponse res=(HttpServletResponse) servletResponse;

        String url=req.getRequestURI().toString();

        if(url.contains("login")){
            filterChain.doFilter(servletRequest, servletResponse);
            return;
        }

        if(url.contains("add")){
            filterChain.doFilter(servletRequest, servletResponse);
            return;
        }
        if(url.contains("edit")){
            filterChain.doFilter(servletRequest, servletResponse);
            return;
        }
        if(url.contains("show")){
            filterChain.doFilter(servletRequest, servletResponse);
            return;
        }
        String jwt=req.getHeader("token");
        log.info(jwt);

        if(!StringUtils.hasLength(jwt)){
            Result error=Result.error("NotLoginjwt");
            String notLogin= JSONObject.toJSONString(error);
            res.getWriter().write(notLogin);
            return;
        }

        try{
            JwtUtils.parseJWT(jwt);
        } catch(Exception e){
            e.printStackTrace();
            Result error=Result.error("NotLoginerror");
            String notLogin= JSONObject.toJSONString(error);
            res.getWriter().write(notLogin);
            return;
        }

        filterChain.doFilter(servletRequest, servletResponse);


    }


}

package com.zyx.utils;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

import java.util.Date;
import java.util.Map;

public class JwtUtils {
    private static String signKey="zhuyuxin";
    private static Long expire =43200000L;
    /*生成JWT令牌*/
    public static String generateJwt(Map<String,Object> claims){
        String jwt= Jwts.builder()
                .addClaims(claims)
                .signWith(SignatureAlgorithm.HS256,signKey)
                .setExpiration(new Date(System.currentTimeMillis()+expire))
                .compact();
        return jwt;
    }
    /*解析JWT令牌*/
    public static Claims parseJWT(String jwt) {
        Claims claims=Jwts.parser()
                .setSigningKey(signKey)
                .parseClaimsJws(jwt)
                .getBody();
        return claims;
    }

}

controller层

package com.zyx.controller;

import com.zyx.pojo.PageBean;
import com.zyx.pojo.Poet;
import com.zyx.pojo.Result;
import com.zyx.pojo.UserLogin;
import com.zyx.service.PageBeanService;
import com.zyx.utils.JwtUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;


@Slf4j
@RestController
public class PageBeanController {
    @Autowired
    private PageBeanService pageBeanService;

    @GetMapping("/findCondition/{page}/{pageSize}")
    public Result select(  @PathVariable Integer page, @PathVariable Integer pageSize, String author,String style) {
        PageBean pageBean=pageBeanService.page(page,pageSize,author,style);
        return Result.success(pageBean);
    }

    @GetMapping("/poet/{page}/{pageSize}")
    public Result select(  @PathVariable Integer page, @PathVariable Integer pageSize) {
        PageBean pageBean=pageBeanService.page(page,pageSize);
        return Result.success(pageBean);
    }

    @RequestMapping("/delete")
    public int deletePoet(Integer id){
        return pageBeanService.delete(id);
    }

    @RequestMapping("/update")
    public  Result updatePoet(@RequestBody Poet poet){
        boolean r = pageBeanService.update(poet);

        if(r) {
            // 成功  code==1
            return Result.success();
        } else {
            // 失败  code==0
            return Result.error("更新失败");
        }
    }

    @RequestMapping("/findById/{id}")
    public Result poetfindById(@PathVariable("id") Integer id) {
        return  Result.success(pageBeanService.poetfindById(id));
    }

    @RequestMapping("/insert")
    public  Result insert( @RequestBody Poet poet){
        boolean result = pageBeanService.insert(poet);
        if(result) {
            // 成功  code==1
            return Result.success();
        } else {
            // 失败  code==0
            return Result.error("添加失败");

        }
    }
    /*//采用form传参数
    @PostMapping("/login_session")
    public Result login(HttpServletRequest request, @RequestBody UserLogin userLogin) {
        UserLogin u = pageBeanService.getByNameAndPassword(userLogin);

        if (u!= null) {
            request.getSession().setAttribute("user", userLogin.getName());
            String user1 = (String) request.getSession().getAttribute("user");
            System.out.println("查询不为空。"+user1);
            return Result.success(u);
        }
        else{
            String user1 = (String) request.getSession().getAttribute("user");
            System.out.println("查询为空。"+user1);
            return Result.error("用户名或密码错误");
        }

    }

    @GetMapping("/logout")
    public Result logout(HttpServletRequest request) {
        //清理Session中保存的当前登录用户的id
        request.getSession().removeAttribute("user");
        return Result.success("退出成功");
    }

    @GetMapping("/index1")
    public Result index1(HttpServletRequest request ) {
        String user1 = (String) request.getSession().getAttribute("user");
        if (user1 != null) {
            System.out.println(Result.success());
            return Result.success();
        } else {
            return Result.error("无权限");

        }
    }
     */
    public Result login(@RequestBody UserLogin userLogin) {
        //调用业务层：登录功能
        UserLogin loginUser=pageBeanService.getByNameAndPassword(userLogin);
        //判断：登录用户是否存在
        if(loginUser !=null ){
            //自定义信息
            Map<String , Object> claims = new HashMap<>();
            claims.put("password",loginUser.getPassword());
            claims.put("name",loginUser.getName());

            //使用JWT工具类，生成身份令牌
            String token = JwtUtils.generateJwt(claims);
            System.out.println(token);

            Map<String, String> response = new HashMap<>();
            response.put("token", token);

            return Result.success(token);

        }
        return Result.error("用户名或密码错误");
    }
}

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查询出所有并分页控件显示</title>
  <link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">

<div id="app" style="width: 80%;align:center">
  <h1 align="center">诗人信息</h1>
  <p align="center">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">

      <el-form-item label="姓名">
        <el-input v-model="formInline.author" placeholder="姓名"></el-input>
      </el-form-item>

      <el-form-item label="风格">
        <el-input v-model="formInline.style" placeholder="风格"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <!--
        <el-button type="primary" @click="onSubmit">查询</el-button>
        -->
      </el-form-item>

      <el-form-item>

      </el-form-item>
      <el-form-item>

      </el-form-item>
      <el-form-item>

      </el-form-item>
      <el-form-item>

      </el-form-item>
      <el-form-item>

      </el-form-item>
      <el-form-item>

      </el-form-item>

      <el-form-item>
        <el-button type="danger" icon="el-icon-switch-button" @click="logout">退出</el-button>
      </el-form-item>

    </el-form>
  </p>

  <p align="right">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">

      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="insert">添加</el-button>

      </el-form-item>

    </el-form>
  </p>

  <el-table
          :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%;align:center;font-size: 20px">

    <el-table-column
            label="id"
            prop="id">
    </el-table-column>

    <el-table-column
            label="姓名"
            prop="author">
    </el-table-column>

    <el-table-column
            label="性别"
            prop="gender">
    </el-table-column>

    <el-table-column
            label="朝代"
            prop="dynasty">
    </el-table-column>

    <el-table-column
            label="头衔"
            prop="title">
    </el-table-column>

    <el-table-column
            label="风格"
            prop="style">
    </el-table-column>

    <el-table-column align="right">

      <template slot="header" slot-scope="scope">
        <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
      </template>

      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.row.id)">编辑</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button>
      </template>

    </el-table-column>
  </el-table>

  <p align="center">
    <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
  </p>
</div>

</div>
<!--    <div  v-else-if="tableData1.code==0" >-->
<!--    {{tableData1.code}}无权限访问-->

</div>

<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>


<script>
  new Vue({
    el:"#app",
    data: {
      search: '',
      currentPage: 1,
      pageSize: 3,
      total: null,
      token:localStorage.getItem("token"),
      tableData: [],
      tableData1:[],
      tableData2:[],
      formInline: {
        name: '',
        style: ''
      }
    },
    methods: {

      logout(){
        window.open('http://localhost:8080/login.html')
      },

      insert(){
        window.open('http://localhost:8080/add.html')
      },

      handleEdit(id) {

        window.open('http://localhost:8080/edit.html?id='+id)
        console.log(index, row);
      },

      handleDelete(id) {
        var _thisd = this;
        if (window.confirm("确定要删除该条数据吗？？？")) {
          axios.post('/delete?id=' + id,{},{headers:{"token":this.token}})
                  .then(function (response) {
                    alert("删除成功")
                    _thisd.findAll();
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
        }
        console.log(index, row);
      },

      handleSizeChange(val) {
        this.pageSize = val;
        this.findAll();
        console.log(`每页 ${val} 条`);

      },

      handleCurrentChange(val) {
        this.currentPage = val;
        this.findAll();
        console.log(`当前页: ${val}`);

      },

      onSubmit() {
        /*
        var url = `/poet1/${this.currentPage}/${this.pageSize}?author=${encodeURIComponent(this.formInline.author)}`
         */
        var url = `/poet1/${this.currentPage}/${this.pageSize}?author=${encodeURIComponent(this.formInline.author)}&style=${encodeURIComponent(this.formInline.style)}`

        console.log(this.formInline.author);
        console.log(this.formInline.style);

        axios.get(url,{headers:{"token":this.token}})
                .then(res =>{
                  this.tableData = res.data.data.rows;
                  this.total=res.data.data.total;
                  console.log(this.tableData);
                  console.log(this.total);
                  console.log(this.token);
                })
                .catch(error=>{
                  console.error(error);
                })

      },
      /*deleteId:function (id) {
            var _thisd = this;
            if (window.confirm("确定要删除该条数据吗？？？")) {
                axios.post('/deletePoet?id=' + id)
                    .then(function (response) {
                        alert("删除成功")
                        _thisd.findAll();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },*/

      /*findAll() {

        var url = `/poet/${this.currentPage}/${this.pageSize}`

        axios.get(url)
                .then(res =>{
                  this.tableData = res.data.data.rows;
                  this.total=res.data.data.total;
                  console.log(this.tableData);
                  console.log(this.total);
                })
                .catch(error=>{
                  console.error(error);
                })

      }

    },
    */
      findAll() {
        /*var url1 = `/index1`*/
        axios.get(url1)
                .then(response => {
                  this.tableData1 = response.data;
                  console.log(this.tableData1);

                })
                .catch(error=>{
                  console.error(error);
                })
        var url = `/poet/${this.currentPage}/${this.pageSize}`
        axios.get(url,{headers:{"token":this.token}})
                .then(res => {
                  this.tableData = res.data.data.rows;
                  this.total = res.data.data.total;
                  console.log(this.tableData);
                  console.log(this.total);
                })
                .catch(error => {
                  console.error(error);
                })


      },
    },
    created(){
      this.findAll();
    }

  })

</script>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录后信息放在session中</title>
    <!-- 引入组件库 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="js/element.css">

</head>
<body>
<div id="app" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <el-alert
            v-if="showError"
            title="账号或密码错误"
            type="error"
            center
            show-icon
            style="position: absolute; top: 50%; left: 50%; transform: translate(-42%, -400%);">
    </el-alert>

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit" style="font-size: 20px; padding: 10px 20px; width: 200px;">登录</el-button>
        </el-form-item>
    </el-form>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            showError: false,

            form: {
                name: '',
                password: ''
            },
            tableData: []
        },
        methods:{
            onSubmit() {
                var url = `/login`
                console.log(this.form.name);
                console.log(this.form.password);

                axios.post(url, {
                    name: this.form.name,
                    password: this.form.password
                })
                    .then(response => {
                        this.tableData = response.data;
                        console.log(this.tableData);
                        const token=response.data.data;
                        localStorage.setItem("token",token);

                        console.log(token);
                        if(this.tableData.data!=null) {
                            location.href = 'show.html'
                        }

                        if(response.data.code==0){
                            this.tableData=response.data;
                            this.showError=true;
                            setTimeout(() => {
                                this.showError = false; // 隐藏错误提示
                            }, 3000);
                        }
                    })
                    .catch(error=>{
                        console.error(error);
                    })
            }
        }

    })

</script>



</body>
</html>

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

</head>
<body>
<div id="app">
  <table border="1">

    <tr>
      <td>id</td>
      <td><input type="text" v-model="poet.id"> </td>
    </tr>
    <tr>
      <td>姓名</td>
      <td><input type="text" v-model="poet.author"> </td>
    </tr>
    <tr>
      <td>性别</td>
      <td><input type="text" v-model="poet.gender"></td>
    </tr>
    <tr>
      <td>朝代</td>
      <td><input type="text" v-model="poet.dynasty"></td>
    </tr>
    <tr>
      <td>头衔</td>
      <td><input type="text" v-model="poet.title"></td>
    </tr>
    <tr>
      <td>风格</td>
      <td><input type="text" v-model="poet.style"></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="button" @click="addpoet" value="增加"> </td>
    </tr>
  </table>

</div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      token:localStorage.getItem("token"),
      poet: {
        "id":"",
        "author":"",
        "gender":"",
        "dynasty":"",
        "title":"",
        "style":""
      }        //详情

    },
    methods: {

      addpoet() {
        var url = 'insert'
        axios.post(url,this.poet,{headers:{"token":this.token}})
                .then(res => {
                  var baseResult = res.data
                  if(baseResult.code == 1) {
                    // 成功
                    location.href = 'show.html'
                  } else {
                    // 失败
                    alert(baseResult.message)
                  }
                })
                .catch(err => {
                  console.error(err);
                })
      }
    },

  })
</script>

</html>

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

</head>
<body>
<div id="app">
  <table border="1">
    <tr>
      <td>编号</td>
      <td><input type="text" v-model="this.id"> </td>
    </tr>
    <tr>
      <td>姓名</td>
      <td><input type="text" v-model="poet.author"> </td>
    </tr>
    <tr>
      <td>性别</td>
      <td>
        <input type="text"  v-model="poet.gender" >
      </td>
    </tr>
    <tr>
      <td>朝代</td>
      <td><input type="text" v-model="poet.dynasty"> </td>
    </tr>
    <tr>
      <td>头衔</td>
      <td><input type="text" v-model="poet.title"> </td>
    </tr>
    <tr>
      <td>风格</td>
      <td><input type="text" v-model="poet.style"> </td>
    </tr>

    <tr>
      <td></td>
      <td><input type="button" @click="updatePoet" value="更新"> </td>

    </tr>
  </table>
</div>


</body>
<script>
  new Vue({
    el: '#app',
    data: {
      token:localStorage.getItem("token"),
      id: '',
      poet: {},        //详情
    },
    methods: {
      selectById() {
        //${this.id}
        var url = `findById/${this.id}`  //注意这里是反引号
        //反引号（backticks，也称为模板字符串或模板字面量）是ES6（ECMAScript 2015）中引入的一种新字符串字面量功能，
        // 它允许您在字符串中嵌入表达式。反引号用`（键盘上通常位于Tab键上方）来界定字符串的开始和结束。
        axios.get(url,{headers:{"token":this.token}})
                .then(response => {
                  var baseResult = response.data
                  if(baseResult.code == 1) {
                    this.poet = baseResult.data
                  }
                })
                .catch( error => {})
      },
      updatePoet() {
        var url = 'update'
        axios.put(url,this.poet,{headers:{"token":this.token}})
                .then(res => {
                  var baseResult = res.data
                  if(baseResult.code == 1) {
                    // 成功
                    location.href ='show.html'
                  } else {
                    // 失败
                    alert(baseResult.message)
                  }
                })
                .catch(err => {
                  console.error(err);
                })
      },


    },
    created() {
      // 获得参数id值
      this.id = location.href.split("?id=")[1]
      // 通过id查询详情
      this.selectById()
    },

  })



</script>

</html>