master

分支 (1)

管理

管理

master

learn-vue
/
demo_017.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="layer-v3.1.1/layer/layer.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <form>
            dname: <input type="text" v-model="dname">
            loc: <input type="text" v-model="loc">
            <button type="button" @click="add">add</button>
        </form>
        <table class="table table-hover">
            <tr>
                <td>did</td>
                <td>dname</td>
                <td>loc</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in deptList">
                <td>{{item.did}}</td>
                <td>{{item.dname}}</td>
                <td>{{item.loc}}</td>
                <td>
                    <a @click="del(item.did)">delete</a>
                    |
                    <a @click="upd(item)">update</a>
                </td>
            </tr>
        </table>


        <div id="updateDiv" style="display: none;">
            <input type="hidden" v-model="update_did">
            dname: <input type="text" v-model="update_dname"><br />
            loc: <input type="text" v-model="update_loc"><br />
            <button type="button" @click="upd2">修改</button>
        </div>

    </div>


    <script>
        var app = new Vue({
            el: "#app",
            created() {
               this.findAll();
            },
            data: {
                winId: null,
                dname: null,
                loc: null,
                update_did: null,
                update_dname: null,
                update_loc: null,
               deptList: [
                   {did:1, dname:"开发部", loc: "西安"},
                   {did:2, dname:"测试部", loc: "宝鸡"},
                   {did:3, dname:"鼓励师部", loc: "咸阳"},
               ]
            },
            methods: {
                add() {
                  axios.post("http://localhost:8888/depts/save", {
                      "dname":this.dname,
                      "loc":this.loc
                  }).then(() => {
                      this.findAll();
                      this.dname = this.loc = '';
                  });
                },
                findAll() {
                    // 向后端服务器发送ajax请求。请求所有的dept数据。

                    /*
                        同源策略：
                        两个url，是否同源，只看三个方面：  协议 + ip地址 + 端口
                        比如： http://192.168.1.2:80 和 http://192.168.1.2:80/abc/index.html 就是同源的
                        比如： http://192.168.1.2:80 和 https://192.168.1.2:80 就是不同源的
                        比如： http://192.168.1.2:80 和 http://192.168.1.2:81 就是不同源的

                        同源的url之间，可以发起ajax请求。
                        不同源的url，可以向不同源的url发送ajax请求， 不同源的后端服务也能接受请求，也能处理请求，
                        也能把响应数据发回给不同源的前端。
                    */

                    // 目前这个请求，是ajax跨域请求，ajax跨域请求默认是不被允许的。
                    // 为了允许跨域请求，需要在后端程序中，进行处理。前端不用写任何额外的代码。
                    axios.get("http://localhost:8888/depts")
                    .then((response) => {
                            this.deptList = response.data;
                    });
                },
                del(did) {

                    layer.confirm('确认删除？？', {
                            btn: ['删除','点错了'] //按钮
                        },
                        function(){
                             /*
                                当我们发送的请求，不是GET POST请求的时候，(且在请求头中有额外的请求头被加入)
                                那么浏览器就自动会进行一次预检请求，预检请求的请求方式是：OPTIONS.

                                然后，后端程序，默认只处理GET、POST、PUT、DELETE请求，不会处理其他请求OPTIONS
                            */
                            axios.delete("http://localhost:8888/depts/"+did)
                            .then(() => {
                                layer.msg('删除!!!');
                                this.findAll();
                            });


                        },
                        function(){
                            layer.msg('下次小心点！');
                        }
                    );

                },
                upd(item) {

                    this.update_did = item.did;
                    this.update_dname = item.dname;
                    this.update_loc = item.loc;

                    this.winId = layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['420px', '240px'], //宽高
                        content: $("#updateDiv")
                    });
                },
                upd2() {
                    axios.put("http://localhost:8888/depts", {
                        "did": this.update_did,
                        "dname": this.update_dname,
                        "loc": this.update_loc
                    }).then(() => {
                        this.findAll();
                        layer.msg("修改成功");
                        layer.close(this.winId);
                    });
                }
            }
        });
    </script>


</body>
</html>