Home Explore Help
Sign In
tianyunperfect
/
web-base--
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update

tianyunperfect 2 years ago
parent
d6a40d9f2f
commit
70689eeac0
3 changed files with 234 additions and 327 deletions
Unified View Show Diff Stats
  1. 20 0
      monkey/github-devMode.js
  2. 0 180
      simple-demo/bootstrapTest.html
  3. 214 147
      simple-demo/index.html

+ 20 - 0
monkey/github-devMode.js
View File 

@@ -0,0 +1,20 @@
 
+// ==UserScript==
 
+// @name              T-github-vscode模式
 
+// @author            tianyunperfect
 
+// @description       简介
 
+// @version           1.0.0
 
+// @update            2021-07-08 16:16:14
 
+// @match             https://github.com/*/*
 
+// @include           *www.baidu.com*
 
+// @require           https://git.tianyunperfect.cn/tianyunperfect/web-base/raw/master/monkey/util.js?a=1
 
+// @require           https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js
 
+
 
+
 
+// ==/UserScript==
 
+(async () => {
 
+    if (window.top !== window.self) {
 
+        return;
 
+    }
 
+    let url = location.href.replace("github.com","github1s.com");
 
+    addLink("#repository-container-header > div.d-flex.flex-wrap.flex-justify-end.mb-3.px-3.px-md-4.px-lg-5 > div > div","        转到vscode 模式",url)
 
+})();

+ 0 - 180
simple-demo/bootstrapTest.html
View File 

@@ -1,180 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-  <meta charset="UTF-8">
 
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>bootstrap - 增删改查</title>
 
-  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
 
-  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
-</head>
 
-<body>
 
-<!-- 表格 -->
 
-<div class="container" style="padding-top: 40px;">
 
-  <div class="form-group">
 
-    <div class="row">
 
-      <div class="col-md-8">
 
-        <input type="text" class="form-control swich" />
 
-      </div>
 
-      <div class="col-md-3">
 
-        <button class="btn btn-danger sreach">搜索</button>
 
-        <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button>
 
-      </div>
 
-    </div>
 
-  </div>
 
-  <table class="table table-bordered text-center">
 
-    <tr>
 
-      <td>编号</td>
 
-      <td>姓名</td>
 
-      <td>成绩</td>
 
-      <td>操作</td>
 
-    </tr>
 
-    <tr>
 
-      <td>1</td>
 
-      <td>张三</td>
 
-      <td>89</td>
 
-      <td>
 
-        <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
 
-        <button class="btn btn-danger del">删除</button>
 
-      </td>
 
-    </tr>
 
-    <tr>
 
-      <td>2</td>
 
-      <td>李四</td>
 
-      <td>91</td>
 
-      <td>
 
-        <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
 
-        <button class="btn btn-danger del">删除</button>
 
-      </td>
 
-    </tr>
 
-    <tr>
 
-      <td>3</td>
 
-      <td>刘一</td>
 
-      <td>80</td>
 
-      <td>
 
-        <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
 
-        <button class="btn btn-danger del">删除</button>
 
-      </td>
 
-    </tr>
 
-  </table>
 
-</div>
 
-<!-- 修改的模态框 -->
 
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
-  <div class="modal-dialog">
 
-    <div class="modal-content">
 
-      <div class="modal-header">
 
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
-        <h4 class="modal-title" id="myModalLabel">修改信息</h4>
 
-      </div>
 
-      <div class="modal-body">
 
-        <form>
 
-          <div class="form-group">
 
-            <input type="text" placeholder="编号" id="reusrnum" class="form-control" />
 
-          </div>
 
-          <div class="form-group">
 
-            <input type="text" placeholder="名字" id="reusrname" class="form-control" />
 
-          </div>
 
-          <div class="form-group">
 
-            <input type="text" placeholder="成绩" class="form-control" id="rescore" />
 
-          </div>
 
-        </form>
 
-
 
-      </div>
 
-      <div class="modal-footer">
 
-        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 
-        <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
 
-      </div>
 
-    </div>
 
-    <!-- /.modal-content -->
 
-  </div>
 
-  <!-- /.modal -->
 
-</div>
 
-<!-- 增加的模态框 -->
 
-<div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
-  <div class="modal-dialog">
 
-    <div class="modal-content">
 
-      <div class="modal-header">
 
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
-        <h4 class="modal-title" id="myModalLabel">增加信息</h4>
 
-      </div>
 
-      <div class="modal-body">
 
-        <form>
 
-          <div class="form-group">
 
-            <input type="text" placeholder="编号" id="reusrnum" class="form-control" />
 
-          </div>
 
-          <div class="form-group">
 
-            <input type="text" placeholder="名字" id="reusrname" class="form-control" />
 
-          </div>
 
-          <div class="form-group">
 
-            <input type="text" placeholder="成绩" class="form-control" id="rescore" />
 
-          </div>
 
-        </form>
 
-
 
-      </div>
 
-      <div class="modal-footer">
 
-        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 
-        <button type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
 
-      </div>
 
-    </div>
 
-    <!-- /.modal-content -->
 
-  </div>
 
-  <!-- /.modal -->
 
-</div>
 
-<script>
 
-
 
-  //删除的功能
 
-  $(document).on("click", ".del", function () {
 
-    $(this).parents("tr").remove()
 
-  })
 
-  //改的功能
 
-  var _this = null
 
-  $(document).on("click", ".rev", function () {
 
-    var _arr = []
 
-    _this = $(this).parents("tr")
 
-    $(this).parents("tr").find("td:not(:last)").each(function () {
 
-      _arr.push($(this).text())
 
-    })
 
-    $("#myModal").find("input").each(function (i) {
 
-      $(this).val(_arr[i])
 
-    })
 
-  })
 
-
 
-  $(document).on("click", ".olk", function () {
 
-    var _arr = []
 
-    $("#myModal").find("input").each(function () {
 
-      _arr.push($(this).val())
 
-    })
 
-    _this.find("td:not(:last)").each(function (i) {
 
-      $(this).text(_arr[i])
 
-    })
 
-  })
 
-  //增加的功能
 
-  $(document).on("click", ".aad", function () {
 
-    var _arr = []
 
-    var str = ""
 
-    $("#myModel").find("input").each(function () {
 
-      _arr.push($(this).val())
 
-
 
-    })
 
-
 
-    str = '<tr><td>' + _arr[0] + '</td><td>' + _arr[1] + '</td><td>' + _arr[2] + '</td><td><button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button> <button class="btn btn-danger del">删除</button></td></tr>'
 
-    $(".table").append(str)
 
-
 
-  })
 
-  //查的功能
 
-  $(".sreach").click(function () {
 
-    var oS = $(".swich").val()
 
-    if (oS.length == 0) {
 
-      alert("请输入点东西")
 
-    } else if ($("table tr td:contains('" + oS + "')").length == 0) {
 
-      alert("找不到数据")
 
-    } else {
 
-      $(".table tr:not(:first)").hide()
 
-      $(".table tr:contains('" + oS + "')").show().find("input").prop("checked", true)
 
-    }
 
-
 
-  })
 
-</script>
 
-</body>
 
-</html>

+ 214 - 147
simple-demo/index.html
View File 

@@ -3,189 +3,256 @@
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <title>Vue Demo</title>
 
     <title>Vue Demo</title>
 
-    <link rel="stylesheet" href="css/bootstrap.min.css">
 
-    <link rel="stylesheet" href="css/main.css">
 
-    <script src="js/jquery.min.js"></script>
 
-    <script src="js/bootstrap.min.js"></script>
 
     <script src="js/axios.min.js"></script>
 
     <script src="js/axios.min.js"></script>
 
-    <script src="js/pages.js"></script>
 
+    <link rel="stylesheet" href="elementUI/index.css">
 
     <script src="js/vue.min.js"></script>
 
     <script src="js/vue.min.js"></script>
 
+    <script src="elementUI/index.js"></script>
 
+    <link rel="stylesheet" href="css/main.css">
 
     <script src="js/util.js"></script>
 
     <script src="js/util.js"></script>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
+<template>
 
+    <div class="app-container" id="app">
 
+        <el-form :inline="true" :model="param" class="demo-form-inline">
 
+            <el-form-item label="名字">
 
+                <el-input v-model="param.name" placeholder="名字"/>
 
+            </el-form-item>
 
+            <el-form-item label="日期">
 
+                <el-input v-model="param.date"/>
 
+            </el-form-item>
 
+            <el-form-item>
 
+                <el-button type="primary" @click="queryList">查询</el-button>
 
+            </el-form-item>
 
+        </el-form>
 
+        <template>
 
+            <!--添加-->
 
+            <el-row>
 
+                <el-button @click="createOne()">添加</el-button>
 
+            </el-row>
 
+            <!--数据-->
 
+            <el-table
 
+                    :data="tableData"
 
+                    border
 
+                    style="width: 100%"
 
+            >
 
+                <el-table-column
 
+                        fixed
 
+                        prop="date"
 
+                        label="日期"
 
+                        width="150"
 
+                />
 
+                <el-table-column
 
+                        prop="name"
 
+                        label="姓名"
 
+                        width="150"
 
+                />
 
+                <el-table-column
 
+                        prop="email"
 
+                        label="email地址"
 
+                        width="300"
 
+                />
 
+                <el-table-column
 
+                        fixed="right"
 
+                        label="操作"
 
+                        width="100"
 
+                >
 
+                    <template slot-scope="scope">
 
+                        <el-button
 
+                                type="text"
 
+                                size="small"
 
+                                @click="editOne(scope.row)"
 
+                        >编辑
 
+                        </el-button>
 
+                        <el-button
 
+                                size="small"
 
+                                type="text"
 
+                                @click="deleteAlert(scope.row.id)"
 
+                        >删除
 
+                        </el-button>
 
+                    </template>
 
+                </el-table-column>
 
+            </el-table>
 
 
 
-<div class="container" id="app">
 
-
 
-    <div class="col-md-12 col-md-offset-3">
 
-        <h1>Vue demo</h1>
 
-        <div>
 
-            <div class="row">
 
-                <div class="col-md-2" style="text-align: left;font-size: 16px;line-height: 30px;">
 
-                    查询：
 
-                </div>
 
-                <div class="col-md-5" style="text-align: left;">
 
-                    <label>
 
-                        <input type="text" class="form-control" v-model="search"></input>
 
-                    </label>
 
+            <!--编辑层-->
 
+            <el-dialog title="编辑" :visible.sync="dialogFormVisible">
 
+                <el-form :model="editNews">
 
+                    <el-form-item label="姓名" :label-width="formLabelWidth">
 
+                        <el-input v-model="editNews.name" autocomplete="off"/>
 
+                    </el-form-item>
 
+                    <el-form-item label="Email" :label-width="formLabelWidth">
 
+                        <el-input v-model="editNews.email" placeholder=""/>
 
+                    </el-form-item>
 
+                </el-form>
 
+                <div slot="footer" class="dialog-footer">
 
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
 
+                    <el-button type="primary" @click="saveOne">确 定</el-button>
 
                 </div>
 
                 </div>
 
-                <button type="button" class="btn btn-success" @click="editBook(book)">新增</button>
 
-            </div>
 
-            <table class="table table-hover ">
 
-                <br/>
 
-                <thead>
 
-                <tr>
 
-                    <th>序号</th>
 
-                    <th>书名</th>
 
-                    <th>作者</th>
 
-                    <th>价格</th>
 
-                    <th>操作</th>
 
-                </tr>
 
-                </thead>
 
-                <tbody>
 
-                <tr v-for='book in books'>
 
-                    <td>{{book.id}}</td>
 
-                    <td>{{book.author}}</td>
 
-                    <td>{{book.name}}</td>
 
-                    <td>{{book.price}}</td>
 
-                    <td class="text-left">
 
-                        <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
 
-                        <button type="button" class="btn btn-success" @click="editBook(book)">修改</button>
 
-                    </td>
 
-                </tr>
 
-                </tbody>
 
-            </table>
 
-            <div id="pageDiv"></div>
 
-        </div>
 
-    </div>
 
+            </el-dialog>
 
 
 
-    <!-- Modal -->
 
-    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
 
-         aria-labelledby="exampleModalCenterTitle"
 
-         aria-hidden="true">
 
-        <div class="modal-dialog modal-dialog-centered" role="document">
 
-            <div class="modal-content">
 
-                <div class="modal-header">
 
-                    <h5 class="modal-title" v-if="isUpdate">修改</h5>
 
-                    <h5 class="modal-title" v-else>新增</h5>
 
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 
-                        <span aria-hidden="true">&times;</span>
 
-                    </button>
 
-                </div>
 
-                <div class="modal-body">
 
-                    <form>
 
-                        <div class="form-group row">
 
-                            <label class="col-sm-2 col-form-label">书名</label>
 
-                            <div class="col-sm-10"><input type="text" class="form-control" v-model="book.name"></div>
 
-                        </div>
 
-                        <div class="form-group row">
 
-                            <label class="col-sm-2 col-form-label">作者</label>
 
-                            <div class="col-sm-10"><input type="text" class="form-control" v-model="book.author"></div>
 
-                        </div>
 
-                        <div class="form-group row">
 
-                            <label class="col-sm-2 col-form-label">价格</label>
 
-                            <div class="col-sm-10"><input type="text" class="form-control" v-model="book.price"></div>
 
-                        </div>
 
-                    </form>
 
-                </div>
 
-                <div class="modal-footer ">
 
-                    <div class="col-sm-3 offset-9">
 
-                        <button class="btn btn-primary btn-block" v-on:click="updatedBook()" v-if="isUpdate">修改</button>
 
-                        <button class="btn btn-primary btn-block" v-on:click="addBook()" v-else>添加</button>
 
-                    </div>
 
+            <!--删除提示-->
 
+            <el-dialog
 
+                    title="提示"
 
+                    :visible.sync="dialogVisible"
 
+                    width="30%"
 
+                    :before-close="handleClose"
 
+            >
 
+                <span>真的要删吗？</span>
 
+                <div slot="footer" class="dialog-footer">
 
+                    <el-button @click="dialogVisible = false">取 消</el-button>
 
+                    <el-button type="primary" @click="deleteOne">确 定</el-button>
 
                 </div>
 
                 </div>
 
+            </el-dialog>
 
+
 
+            <!--分页-->
 
+            <div class="block">
 
+                <el-pagination
 
+                        :current-page="param.page"
 
+                        :page-sizes="[10, 20, 30, 40]"
 
+                        :page-size="param.size"
 
+                        layout="total, sizes, prev, pager, next, jumper"
 
+                        :total="total"
 
+                        @size-change="handleSizeChange"
 
+                        @current-change="handleCurrentChange"
 
+                />
 
             </div>
 
             </div>
 
-        </div>
 
+        </template>
 
     </div>
 
     </div>
 
-</div>
 
-
 
-
 
+</template>
 
 <script>
 
 <script>
 
-    let initBook = {
 
-        id: 0,
 
-        author: '1',
 
-        name: '1',
 
-        price: '1'
 
+    let _app = {
 
+        fetchList: function (query) {
 
+            return axios({
 
+                url: 'https://yapi.tianyunperfect.cn/mock/11/article/list',
 
+                method: 'get',
 
+                params: query
 
+            })
 
+        },
 
+        fetchOne: function (id) {
 
+            return axios({
 
+                url: '/article/detail',
 
+                method: 'get',
 
+                params: {id}
 
+            })
 
+        },
 
+        saveOne: function (data) {
 
+            return axios({
 
+                url: '/article/save',
 
+                method: 'post',
 
+                data
 
+            })
 
+        },
 
+        deleteOne: function (id) {
 
+            return axios({
 
+                url: '/article/delete',
 
+                method: 'post',
 
+                params: {id}
 
+            })
 
+        }
 
     }
 
     }
 
+
 
     const vm = new Vue({
 
     const vm = new Vue({
 
         el: "#app",
 
         el: "#app",
 
         // 计算函数 动态变化的数据
 
         // 计算函数 动态变化的数据
 
         data: {
 
         data: {
 
-            book: deepClone(initBook),
 
-            books: [deepClone(initBook)],
 
-            search: "",
 
-            page: 1,
 
-            pageSize: 10,
 
-            totalPage: 1
 
+            tableData: [],
 
+            // 删除层隐藏
 
+            dialogVisible: false,
 
+            // 弹出层隐藏
 
+            dialogFormVisible: false,
 
+            // 弹出层内容
 
+            editNews: {
 
+                name: '',
 
+                email: ''
 
+            },
 
+            // 弹出层大小
 
+            formLabelWidth: '120px',
 
+            // 删除使用的id
 
+            id: '',
 
+            // 查询参数
 
+            param: {
 
+                name: '',
 
+                date: '',
 
+                page: 1,
 
+                size: 10
 
+            },
 
+            // 查询返回总条数
 
+            total: 0
 
         },
 
         },
 
         watch: {},
 
         watch: {},
 
         // 计算属性（过滤） 查询功能
 
         // 计算属性（过滤） 查询功能
 
-        computed: {
 
-            isUpdate() {
 
-                return this.book.id !== undefined && this.book.id !== 0;
 
-            }
 
-        },
 
+        computed: {},
 
         mounted: function () {
 
         mounted: function () {
 
             this.queryList();
 
             this.queryList();
 
         },
 
         },
 
         methods: {
 
         methods: {
 
-            modelShow() {
 
-                $('#exampleModalCenter').modal('show');
 
+            // 修改页面展示数据大小
 
+            handleSizeChange(val) {
 
+                this.param.size = val
 
+                this.queryList()
 
             },
 
             },
 
-            modelHide() {
 
-                $('#exampleModalCenter').modal('hide');
 
+            // 修改页码
 
+            handleCurrentChange(val) {
 
+                this.param.page = val
 
+                this.queryList()
 
             },
 
             },
 
-            refresh_pagination: function () {
 
-                $('#pageDiv').pagination({
 
-                    pages: this.totalPage,  // 页数
 
-                    edges: 2, // 边缘页数，不用修改
 
-                    cssStyle: 'pagination',
 
-                    displayedPages: 5, // 展示相连页数，不用修改
 
-                    onPageClick: function () {
 
-                        //点击时调用
 
-                        this.queryList();
 
-                    }
 
-                });
 
-            },
 
-            queryList: function () {
 
-                // 获取数据，刷新页数
 
-                axios.post("/api/list", this.book).then(res => {
 
-                    if (res.success) {
 
-                        this.totalPage = 10;
 
-                        this.books = res.data;
 
-                        this.refresh_pagination();
 
+            // 点击编辑，从后台获取数据
 
+            editOne(row) {
 
+                console.log(row)
 
+                _app.fetchOne(row.id).then(res => {
 
+                    if (res.flag) {
 
+                        this.editNews = res.data
 
                     }
 
                     }
 
                 })
 
                 })
 
+                this.dialogFormVisible = true
 
             },
 
             },
 
-            addBook: function () {
 
-                axios.post("/api/add", this.book).then(res => {
 
-                    if (res.success) {
 
-                        this.queryList();
 
-                    }
 
-                })
 
+            // 获取删除行的id
 
+            deleteAlert(id) {
 
+                this.id = id
 
+                this.dialogVisible = true
 
             },
 
             },
 
-            delBook: function (book) {
 
-                axios.post("/api/delete", book).then(res => {
 
-                    if (res.success) {
 
-                        this.queryList();
 
+            // 删除
 
+            deleteOne() {
 
+                _app.deleteOne(this.id).then(res => {
 
+                    if (res.flag) {
 
+                        this.dialogFormVisible = false
 
+                        this.queryList()
 
+                    } else {
 
+                        alert('删除失败')
 
                     }
 
                     }
 
                 })
 
                 })
 
+                this.dialogVisible = false
 
             },
 
             },
 
-            // 修改按钮
 
-            editBook: function (book) {
 
-                console.log(this.book)
 
-                this.book = deepClone(book);
 
-                console.log(this.book)
 
-                $('#exampleModalCenter').modal('show');
 
-                console.log(this.book)
 
+            // 关闭提示框时，提示是否要关闭
 
+            handleClose(done) {
 
+                this.$confirm('确认关闭？')
 
+                    .then(() => {
 
+                        done()
 
+                    })
 
+                    .catch(() => {
 
+                    })
 
             },
 
             },
 
-            // 修改完成后的 确认按钮点击事件
 
-            updatedBook: function () {
 
-                // 异步请求
 
-                axios.post("/api/update", this.book).then(res => {
 
-                    if (res.success) {
 
-                        this.queryList();
 
+            // 点击添加按钮清空
 
+            createOne() {
 
+                this.editNews = {}
 
+                this.dialogFormVisible = true
 
+            },
 
+            // 点击确定后发送请求
 
+            saveOne() {
 
+                _app.saveOne(this.editNews).then(res => {
 
+                    if (res.flag) {
 
+                        this.dialogFormVisible = false
 
+                        this.queryList()
 
+                    } else {
 
+                        this.$message('添加失败')
 
                     }
 
                     }
 
                 })
 
                 })
 
+            },
 
+            // 获取数据
 
+            queryList() {
 
+                _app.fetchList(this.param).then(res => {
 
+                    this.tableData = res.list;
 
+                    this.total = res.total;
 
+                })
 
             }
 
             }
 
         },
 
         },