分类 Web 下的文章 - Lan小站-嗯，不错！

2021-01-22

vue3 router踩坑之未加子路由导致的页面不在指定区域内打开寒假到了，少不了的是寒假项目，这次随便选了一个简单的设备管理系统原题目要求比较简单，就是一个简单的asp增删改查吧，但是奈何由于比赛，完全没学asp于是准备直接前后端分离，asp只用来提供数据算了，返回一个json，其他的全部交给前端处理。所以这段时间也一直在学Vue，这不学的太快了，2天几乎把vue3看完了。然后今天整合这两天写的两个页面是出了问题，中心页面的子页面会直接占满全屏登录页面：后台首页：用的是Vue3+elementplus，能写出这样的东西，对我来说已经心满意足了。这两块我是分开写的，就是通过修改main.js里面的配置去启动这两个页面，所以也不知道为什么一开始没有遇到那个问题。然后总感觉自己是不是少学了什么，于是又去B站上找了套视频看了一下原来路由里面还有一个子路由，如果要是子页面的话就必须把路由加到副路由的里面，就像这样。

2021年01月22日
695 阅读
2 评论
0 点赞

2021-01-20

element登录表单验证rule 自定义验证规则：export default { data() { let verUserName = (rule, value, callback) => { if (value == 1) { return callback(new Error('用户名不能等于1')) } } return { formData: { username: '', password: '', }, rules: { username: [ {validator: verUserName, trigger: 'blur'} ] } }; }, methods: { login: () => { console.log(1) } } }

2021年01月20日
450 阅读
0 评论
0 点赞

2021-01-17

npm镜像的设置与查看，使用搭建环境时通过如下代码将npm设置为淘宝镜像npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global设置当前地址（设置为默认地址）npm config set registry https://registry.npmjs.org/查看镜像的配置结果npm config get registrynpm config get disturl使用nrm工具切换淘宝源npx nrm use taobao如果之后需要切换回官方源可使用npx nrm use npmpackage.json版本号里面的^表示，版本更新后面两位版本(3.x.x)，如果是~则表示更新最后一位（3.1.x），如果不加符合就表示等于学习Vue的第一天，一个下午肝了70多节，感觉不错，很久没这样学习了

2021年01月17日
863 阅读
0 评论
0 点赞

2021-01-05

通过jQuery获取页面中radio选中的值 <tr> <td class="tdtext" colspan="3">2、廉洁自律，不利用岗位职权方便谋取私利。</td> <td class="trss"><input name="radio17" type="radio" value="5" required/></td> <td class="trss"><input name="radio17" type="radio" value="4" /></td> <td class="trss"><input name="radio17" type="radio" value="3" /></td> <td class="trss"><input name="radio17" type="radio" value="2" /></td> <td class="trss"><input name="radio17" type="radio" value="1" /></td> </tr>使用jQuery通过name属性获取值 var value17 = $('input[name="radio17"]:checked').val()

2021年01月05日
596 阅读
1 评论
0 点赞

2020-08-06

vue+axios实现评论留言板效果如图这里的评论数据以及添加数据都是用的FastAPI，然后再用axios发送请求，获取评论以及添加评论。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工程快捷报备系统——By：Lan</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <link rel="stylesheet" href="static/css/bootstrap.min.css"> <style> .content { margin-top: 1.5rem; } </style> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <ul class="nav nav-tabs"> <li> <a href="./index.html">健康报备</a> </li> <li> <a href="./who.html">谁没报备</a> </li> <li> <a href="./ele.html">电费查询</a> </li> <li class="active"> <a href="./comment.html">留言板</a> </li> </ul> <div class="content" id="box"> <form action="" role="form"> <div class="form-group"> <label class="col-sm-1 control-label">昵称</label> <div class="col-sm-11"> <input v-model='newNick' type="text" class="form-control" id="nikename" v-model='newComment' placeholder="请输入昵称"> </div> <div class="form-group"> <label for="content" class="col-sm-1 control-label">内容</label> <div class="col-sm-11"> <textarea id="content" v-model='newComment' class="form-control" rows="3"></textarea> </div> </div> <div class="form-group" style="text-align: center;"> <input type="button" name="" value="添加" @click='addcomment' class="btn btn-primary"> <input type="reset" name="" value="重置" class="btn btn-danger"> </div> </div> </form> <table class="table table-bordered table-hover"> <caption class="text-success"> <h4>评论列表</h4> </caption> <thead> <tr class="text-info"> <th class="text-center">昵称</th> <th class="text-center">内容</th> <th class="text-center">时间</th> </tr> </thead> <tbody> <tr v-for="(item,index) in list" :key="index" class="text-warning text-center"> <td>{{item.nick }}</td> <td>{{item.comment}}</td> <td>{{item.add_Time | fmtTime('-')}}</td> </tr> <tr v-if="list.length === 0"> <td colspan="3">暂无评论，快来评论吧！</td> </tr> </tbody> </table> </div> </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="./static/js/bootstrap.min.js"></script> <script> Vue.filter('fmtTime', function(sourceTime, sep) { sourceTime = new Date(sourceTime); let y = sourceTime.getFullYear(); let m = sourceTime.getMonth() + 1; let d = sourceTime.getDate(); let h = sourceTime.getHours(); let M = sourceTime.getMinutes(); return y + sep + m + sep + d + ' ' + h + ':' + M; }); var app = new Vue({ el: '#box', data: { newNick: '', newComment: '', list: [], searchVal: '' }, mounted() { this.getcomment(); }, methods: { getcomment() { axios.get('/get_comment/', { params: { page: 1 } }) .then(res => { this.list = res.data; }) .catch(err => { console.error('获取数据失败' + err); }) }, addcomment() { axios.get('/add_comment/', { params: { nick: this.newNick, comment: this.newComment } }) .then(res => { alert('添加成功'); // 添加成功之后，重新获取列表数据 this.getcomment(); this.newComment = ''; }) .catch(err => { console.error(err); }) } }, }) </script> </body> </html>

2020年08月06日
866 阅读
0 评论
0 点赞

2020-07-03

axios发生get，post请求只要可以发送请求，即可做爬虫经过前段时间学习，了解到还有axios这么个东西。学的越多，你不会的也就越多，网络这块感觉永无止境呀。然后试着用一言接口试了一下<h2 id='onesentence'>{{num}}</h2> <script> axios.get('https://v1.hitokoto.cn') .then(function(response) { let data = document.getElementById('onesentence'); data.innerText = response.data.hitokoto; console.log(response.data.hitokoto); }) .catch(function(error) { console.log(error); }); </script> 以下内容摘自https://www.kancloud.cn/yunye/axios/234845cdn安装axios：cdn安装axios：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>执行GET请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });// 可选地，上面的请求可以这样做axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 执行POST请求axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });执行多个并发请求： function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function(acct, perms) { // 两个请求现在都执行完成 }));

2020年07月03日
951 阅读
0 评论
0 点赞

2020-06-24

2020年06月24日
3,972 阅读
2 评论
0 点赞