Java前后端分离页面开发实例

最新推荐文章于 2024-01-26 16:19:10 发布

欧皇夏老板

最新推荐文章于 2024-01-26 16:19:10 发布

阅读量264

点赞数 1

分类专栏： web前端文章标签： java servlet 开发语言

本文链接：https://blog.csdn.net/weixin_44203782/article/details/129172766

版权

web前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

后台

//HttpResult类
package controller;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class HttpResult {
    private int code;
    private Object data;
    private String msg;
    private int totle;
}

登录界面后台
package controller;

import com.alibaba.fastjson.JSON;
import user.IUserService;
import user.User;
import user.UserService;
import utils.Md5;

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.io.PrintWriter;

@WebServlet("/userlogin")
public class UserLogin extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        IUserService userService=new UserService();
        req.setCharacterEncoding("utf8");
        resp.setCharacterEncoding("utf8");
        resp.setContentType("application/json;charset=utf-8");
        //允许跨域请求
        resp.setHeader("Access-Control-Allow-Headers", "*");
        //允许所有的方法访问  如post , get方法
        resp.setHeader("Access-Control-Allow-Method", "*");
        //允许所有的域
        resp.setHeader("Access-Control-Allow-Origin","*");
        PrintWriter writer = resp.getWriter();
        String u_name=req.getParameter("u_name");
        String passwd=req.getParameter("passwd");
        passwd= Md5.md5(passwd);
        User user=userService.login(u_name,passwd);
        if(user!=null){
            HttpResult result=new HttpResult(200,user,"登录成功",userService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }else {
            HttpResult result=new HttpResult(500,null,"登录失败",userService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }
        writer.close();

    }
}

查询商品后台代码如下


package controller;

import com.alibaba.fastjson.JSON;
import product.IProductService;
import product.Product;
import product.ProductService;
import user.User;

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.io.PrintWriter;
import java.util.List;

@WebServlet("/findproduct")
public class ProductFind extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        IProductService productService=new ProductService();
//        req.setCharacterEncoding("utf8");
//        resp.setCharacterEncoding("utf8");
//        resp.setContentType("application/json;charset=utf-8");
//        //
//        //允许跨域请求
//        resp.setHeader("Access-Control-Allow-Headers", "*");
//        //允许所有的方法访问  如post , get方法
//        resp.setHeader("Access-Control-Allow-Method", "*");
//        //允许所有的域
//        resp.setHeader("Access-Control-Allow-Origin","*");

        PrintWriter writer = resp.getWriter();
        int pageindex=Integer.parseInt(req.getParameter("pageindex"));
        int pagesize=Integer.parseInt(req.getParameter("pagesize"));
        List<Product> list=productService.findproduct(pageindex,pagesize);
        if(list.size()==0){
            HttpResult result=new HttpResult(500,null,"查找失败",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }else {
            HttpResult result=new HttpResult(200,list,"查找成功",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }
        writer.close();
    }
}

添加商品代码
package controller;

import com.alibaba.fastjson.JSON;
import product.IProductService;
import product.Product;
import product.ProductService;
import user.User;

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.io.PrintWriter;

@WebServlet("/addproduct")
public class ProductAdd extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        IProductService productService=new ProductService();
        req.setCharacterEncoding("utf8");
        resp.setCharacterEncoding("utf8");
        resp.setContentType("application/json;charset=utf-8");
        //允许跨域请求
        resp.setHeader("Access-Control-Allow-Headers", "*");
        //允许所有的方法访问  如post , get方法
        resp.setHeader("Access-Control-Allow-Method", "*");
        //允许所有的域
        resp.setHeader("Access-Control-Allow-Origin","*");
        PrintWriter writer = resp.getWriter();
        String productname=req.getParameter("productname");
        int  pid=Integer.parseInt(req.getParameter("pid"));
        double price=Double.parseDouble(req.getParameter("price"));
        int i=productService.addproduct(new Product(0,productname,pid,price));
        if(i==0){
            HttpResult result=new HttpResult(500,i,"添加失败",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }else {
            HttpResult result=new HttpResult(200,i,"添加成功",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }
        writer.close();

    }
}

删除商品
package controller;

import com.alibaba.fastjson.JSON;
import product.IProductService;
import product.ProductService;

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.io.PrintWriter;

@WebServlet("/delectproduct")
public class ProductDelect extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        IProductService productService=new ProductService();
        req.setCharacterEncoding("utf8");
        resp.setCharacterEncoding("utf8");
        resp.setContentType("application/json;charset=utf-8");
        //允许跨域请求
        resp.setHeader("Access-Control-Allow-Headers", "*");
        //允许所有的方法访问  如post , get方法
        resp.setHeader("Access-Control-Allow-Method", "*");
        //允许所有的域
        resp.setHeader("Access-Control-Allow-Origin","*");
        PrintWriter writer = resp.getWriter();
        int id=Integer.parseInt(req.getParameter("id"));
        int i=productService.delectproduct(id);
        if(i==0){
            HttpResult result=new HttpResult(500,i,"id输入错误，删除失败",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }else {
            HttpResult result=new HttpResult(200,i,"删除成功",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }
        writer.close();

    }
}

根据id查找商品用于修改
package controller;

import com.alibaba.fastjson.JSON;
import product.IProductService;
import product.Product;
import product.ProductService;

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.io.PrintWriter;

@WebServlet("/updateproduct1")
public class ProductUpdate1 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        IProductService productService=new ProductService();
        req.setCharacterEncoding("utf8");
        resp.setCharacterEncoding("utf8");
        resp.setContentType("application/json;charset=utf-8");
        resp.setContentType("application/json;charset=utf-8");
        //允许跨域请求
        resp.setHeader("Access-Control-Allow-Headers", "*");
        //允许所有的方法访问  如post , get方法
        resp.setHeader("Access-Control-Allow-Method", "*");
        //允许所有的域
        resp.setHeader("Access-Control-Allow-Origin","*");
        PrintWriter writer = resp.getWriter();
        int id=Integer.parseInt(req.getParameter("id"));
        Product product =productService.findbyid(id);
        if(null==product){
            HttpResult result=new HttpResult(500,product,"查找失败",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }else {
            HttpResult result=new HttpResult(200,product,"查找成功",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }
        writer.close();

    }
}

修改商品
package controller;

import com.alibaba.fastjson.JSON;
import product.IProductService;
import product.Product;
import product.ProductService;
import user.User;

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.io.PrintWriter;

@WebServlet("/updateproduct2")
public class ProductUpdate2 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        IProductService productService=new ProductService();
        req.setCharacterEncoding("utf8");
        resp.setCharacterEncoding("utf8");
        resp.setContentType("application/json;charset=utf-8");
        //允许跨域请求
        resp.setHeader("Access-Control-Allow-Headers", "*");
        //允许所有的方法访问  如post , get方法
        resp.setHeader("Access-Control-Allow-Method", "*");
        //允许所有的域
        resp.setHeader("Access-Control-Allow-Origin","*");
        PrintWriter writer = resp.getWriter();
        int id=Integer.parseInt(req.getParameter("id"));
        String productname=req.getParameter("productname");
        int pid=Integer.parseInt(req.getParameter("pid"));
        double price=Double.parseDouble(req.getParameter("price"));
        //int i=userService.updateuser(new User(id,u_name,passwd,nick_name));
        int i=productService.updateproduct(new Product(id,productname,pid,price));
        if(i==0){
            HttpResult result=new HttpResult(500,i,"修改失败",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }else {
            HttpResult result=new HttpResult(200,i,"修改成功",productService.totle());
            String json= JSON.toJSONString(result);
            writer.println(json);
        }
        writer.close();


    }
}

前端页面

登录界面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../assets/vue.min-v2.5.16.js"></script>
    <script src="../assets/axios.min.js"></script>
    <link href="../assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../assets/jquery-3.5.1.min.js"></script>
    <script src="../assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<div id="aaa">
    <h3 style="text-align: center">用户登录</h3>
    <div class="row">
        <div class="col-md-4 col-md-offset-4" >
            <label>用户名</label>
            <input type="text" class="form-control"v-model="u_name">
        </div>
        <div class="col-md-4 col-md-offset-4" style="margin-top: 30px">
            <label>密码</label>
            <input type="password" class="form-control"v-model="passwd">
        </div>
        <div class="col-md-4 col-md-offset-4" style="margin-top: 30px;text-align: center">
            <button class="btn btn-primary"@click="dologin()">登录</button>
            <button class="btn btn-danger" style="margin-left: 10px" @click="doclear()">重置</button>

        </div>

    </div>

</div>
<script>
    new Vue({
        el:"#aaa",
        data:{
          u_name:null,
          passwd:null
        },
        methods:{
            dologin(){
                url="http://localhost:8080/userlogin?u_name="+this.u_name+"&passwd="+this.passwd;
                axios.get(url).then(res=>{
                    console.log(res.data);
                    if(res.data.code==200){
                        //第一步，将用户的id保存到localstorage
                        //localstorage里的数据是以键值对的形式保存的
                        localStorage.setItem("uid",res.data.data.xid);
                        //第二步，跳转到主页
                        window.location.href="findproduct.html";
                    }else {
                        alert(res.data.msg)
                    }
                })
            },
            doclear(){

                this.u_name=null;
                this.passwd=null;
            }
        }
    })
</script>
</body>
</html>

查找商品包含分页，下拉列表

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../assets/vue.min-v2.5.16.js"></script>
    <script src="../assets/axios.min.js"></script>
    <link href="../assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../assets/jquery-3.5.1.min.js"></script>
    <script src="../assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

    <div id="aaa" class="container">
        <table class="table table-striped">
            <thead>
            <tr>
                <th><b>序号</b></th>
                <th><b>产品名</b></th>
                <th><b>产地</b></th>
                <th><b>单价</b></th>
                <th><b>操作</b></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="u in usrs">
                <td>{{u.id}}</td>
                <td>{{u.productname}}</td>
                <td>{{u.pid}}</td>
                <td>{{u.price}}</td>
                <td>
                    <button class="btn btn-link" @click=" findbyid(u.id)">修改</button>
                    <button class="btn btn-link" @click="dodelect(u.id)">删除</button>
                </td>
            </tr>
            </tbody>

        </table>
        <button class="btn btn-danger"@click="doadd()"style="margin-left: 500px">新增</button>
        <div>
            <ul class="pagination" v-for="p in pagenum">
                <li class="active" v-if="p==pageindex"><a href="#" @click="doGo(p)">{{p}}</a></li>
                <li v-else="p==pageindex"><a href="#" @click="doGo(p)">{{p}}</a></li>
            </ul>
        </div>


    </div>
    <script>
        new Vue({
           el:"#aaa",
            data:{
               usrs:null,
               // usrs2:null,
                //用于分页
                pageindex:1,//第几页
                pagesize:3,//每页几条
                pagetotle:0,//总条数
                pagenum:0,//总页数
            },
            methods:{
               //封装方法
               //请求用户列表
                requeuserlist(url){
                    axios.get(url).then(res=>{
                        console.log(res.data)
                        this.usrs=res.data.data;
                        this.pagetotle=res.data.totle;
                        //计算有多少页,向上取整ceil,向下取整floor,四舍五入round
                        this.pagenum=Math.ceil(this.pagetotle/this.pagesize);
                    })
                },
                //分页点击
                doGo(p){
                    uidd=localStorage.getItem("uid");
                    this.pageindex=p;
                    url="http://localhost:8080/findproduct?pageindex="+p+"&pagesize="+this.pagesize+"&xid="+uidd;
                    this.requeuserlist(url);
                },
                //添加页面
                doadd(){

                   window.location.href="addproduct.html"
                },
                //删除用户
                dodelect(id){
                    uidd=localStorage.getItem("uid");
                    url="http://localhost:8080/delectproduct?id="+id+"&xid="+uidd;
                    axios.get(url).then(res=>{
                        if(res.data.code==200){
                            url="http://localhost:8080/findproduct?pageindex=1&pagesize="+this.pagesize+"&id="+id+"&xid="+uidd;
                            this.requeuserlist(url);
                            alert("删除成功")
                        }else {
                            alert("未知错误请联系管理员")
                        }

                    })
                },
                findbyid(id){

                    window.location.href="updateproduct.html?id="+id;

                }

            },
            created:function () {
                //测试从localstorage中获取数据，通过key获得value
                uid=localStorage.getItem("uid");
                alert("用户id："+uid);
                    url="http://localhost:8080/findproduct?pageindex="+this.pageindex+"&pagesize="+this.pagesize+"&xid="+uid;
                    this.requeuserlist(url);

                    // url2="http://localhost:8080/findplace?pageindex=1&pagesize=10";
                    // axios.get(url2).then(res=>{
                    //     console.log(res.data)
                    //     this.usrs2=res.data.data.palcename
                    //     //this.id=2//下拉列表项被选中
                    // })
            }
        });
    </script>


</body>
</html>

添加商品页面

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../assets/vue.min-v2.5.16.js"></script>
    <script src="../assets/axios.min.js"></script>
    <link href="../assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../assets/jquery-3.5.1.min.js"></script>
    <script src="../assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">

    <div id="aaa">
        <h3 style="text-align: center">新增商品</h3>
        <div class="row"  style="margin-top: 30px;">
            <div class="col-md-4 col-md-offset-4">
                <label>商品名称：</label>
                <input type="text" class="form-control" v-model="productname">
            </div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="col-md-4 col-md-offset-4">
                <label>商品产地：</label>
<!--                <input type="text" class="form-control" v-model="pid">-->
                <select class="form-control" style="width: 240px;"v-model="id">
                    <option v-for="u in usrs" :label="u.palcename" :value="u.id"></option>
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="col-md-4 col-md-offset-4">
                <label>商品单价：</label>
                <input type="text" class="form-control" v-model="price">
            </div>
        </div>

        <div class="row" style="margin-top: 30px;">
            <div class="col-md-4 col-md-offset-4" style="text-align: center;">
                <button class="btn btn-primary" @click="dotest()">添加商品</button>
                <button class="btn btn-warning" style="margin-left: 10px;" @click="doback()">返回首页</button>
            </div>
        </div>
    </div>

<script>
    new Vue({
        el:'#aaa',
        data:{
            id:null,
            usrs:null,
            productname:null,
            pid:null,
            price:null,

        },
        methods:{
            dotest(){
                uidd=localStorage.getItem("uid");
                    url="http://localhost:8080/addproduct?productname="+this.productname+"&pid="+this.id+"&price="+this.price+"&xid="+uidd;
                    axios.get(url).then(res=>{
                        console.log(res.data.code)
                            if(res.data.code == 200){
                                //添加成功
                                window.location.href="findproduct.html"
                                alert(res.data.msg)
                            } else {
                                alert(res.data.msg)
                            }
                    })

            },
            doback(){
                window.location.href="findproduct.html"
            }
        },
        created:function () {
            uidd=localStorage.getItem("uid");
            //url="http://localhost:8080/findalluser?pageindex="+this.pageindex+"&pagesize="+this.pagesize;
            url="http://localhost:8080/findplace?pageindex=1&pagesize=10&xid="+uidd;
            axios.get(url).then(res=>{
                console.log(res.data)
                this.usrs=res.data.data
                this.id=2//下拉列表项被选中
            })

        }

    });
</script>
</body>

</html>

修改界面

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../assets/vue.min-v2.5.16.js"></script>
    <script src="../assets/axios.min.js"></script>
    <link href="../assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../assets/jquery-3.5.1.min.js"></script>
    <script src="../assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">

    <div id="aaa">
        <h3 style="text-align: center">修改商品</h3>
        <div class="row"  style="margin-top: 30px;">
            <div class="col-md-4 col-md-offset-4">
                <label>商品名称：</label>
                <input type="text" class="form-control" v-model="productname">
            </div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="col-md-4 col-md-offset-4">
                <label>商品产地：</label>
                <select class="form-control" style="width: 240px;"v-model="id">
                    <option v-for="u in usrs" :label="u.palcename" :value="u.id"></option>
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="col-md-4 col-md-offset-4">
                <label>单价：</label>
                <input type="text" class="form-control" v-model="price">
            </div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="col-md-4 col-md-offset-4" style="text-align: center;">
                <button class="btn btn-primary" @click="dotest()">修改商品</button>
                <button class="btn btn-warning" style="margin-left: 10px;" @click="doback()">返回首页</button>
            </div>
        </div>
    </div>

<script>
    new Vue({
        el:'#aaa',
        data:{
            id:null,
            usrs:null,
            productname:null,
            pid:null,
            price:null,
            uid:null,//接收跳转传递的id
        },
        methods:{
            dotest(){
                uidd=localStorage.getItem("uid");
                    url="http://localhost:8080/updateproduct2?id="+this.uid+"&productname="+this.productname+"&pid="+this.id+"&price="+this.price+"&xid="+uidd;
                    axios.get(url).then(res=>{
                        console.log(res.data.code)
                            if(res.data.code == 200){
                                //修改成功
                                window.location.href="findproduct.html"
                                alert(res.data.msg)
                            } else {
                                alert(res.data.msg)
                            }
                    })

            },
            doback(){
                window.location.href="findproduct.html"
            },

        },
        created:function () {
            uidd=localStorage.getItem("uid");
            url=window.location.href;
            this.uid=url.substring(url.indexOf("id=")+3)
            console.log(this.uid)
            console.log("********")
            url1="http://localhost:8080/findplace?pageindex=1&pagesize=10&id="+this.uid+"&xid="+uidd;
            axios.get(url1).then(res=>{
                console.log(res.data)
                this.usrs=res.data.data
                this.id=this.pid//下拉列表项被选中
            })

            //请求根据id获得用户信息的数据接口（servlet）
            axios.get("http://localhost:8080/updateproduct1?id="+this.uid+"&xid="+uidd).then(res=>{
                console.log(res.data)
                //数据回显
                this.productname=res.data.data.productname;
                this.price=res.data.data.price;
                this.pid=res.data.data.pid;

            })
        }

    });
</script>
</body>

</html>