日积月累前端BUG之旅

一切不粘贴代码的行为，就如同不是以结婚为目的的谈恋爱，皆是口嗨，耍流氓。

2019

4/1

nodom模板无法渲染的语句原因

情景再现：写好了模板文件却无法加载文件
原因解析：<div x-router></div>格式错误<div x-router></div>语句应在同一行，不可将</div>写入下一行中
ps:来自我几个小时的哭泣，真想砸键盘。

4/11

mongodb链接报错

情景再现：Couldn't perform authentication: AuthType not set
原因解析: 从git上拉下来的分支，需要用户名和密码。知识水平有限。仅供参考。
解决方法：创建一个用户

user admin  # 连接数据库
db.createUser({user:"admin",pwd:"root",roles:["root"]})  # 创建一个root用户

image.png

5/7

文件上传思维出错

情景再现：在处理文件上传时，后台用node接收。以为multiparty库只能接受图片。
原因分析：对node库的不熟悉。
解决办法：合并两部分代码
后台index.js代码：

const express = require("express")
const path = require("path")
const multiparty = require("multiparty")    // 解析content-type为 multipart/form-data 的http请求，也用于文件上传

let port = 7777
var app = express()


app.post("/upload", function (req, res) {
    const form = new multiparty.Form    // 生成一个新的multiparty.Form表单
    form.uploadDir = path.resolve(__dirname, "../upload")   // 储存路径
    form.parse(req, function (error, field, files) {        //解析文件诸如图片，json,等等很多文件格式
        return res.send("上传成功").end()
    })
})
app.use(express.static(path.resolve(__dirname, "../static")))
app.listen(port)

前端index.html代码：

<form action="/upload" enctype="multipart/form-data" method="post" class="form">
  <input type="file" id="upfile" multiple="multiple" v-on:change="chooseFile" name="myfile">
  <input type="submit">
</form>

目录格式：

├─router
  ├─index.js
├─static
  ├─index.html
├─upload

ps：表单美化:1.可以在用a或button标签覆盖input标签。将input标签的css opacity: 0;
2.设置一个button'按钮，当用户点击时动态生成input标签。通过js调用点击。
第一种

<button type="button" href="" class="aupload" >
  选择文件
  <input type="file" id="upfile" multiple="multiple"  name="myfile">
</button>

缺点：需要设计者又良好的css排版能力。要确保button覆盖了input。
第二种：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <form action="/upload" enctype="multipart/form-data" method="post" class="form">
            <input type="file" name="myfile" hidden id="myfile">
            <button type="button" class="selectFile" @click="selectFile">选择文件</button>
            <button class="submit" @click="submitFile">上传文件</button>
        </form>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                selectFile() {
                    let input = document.getElementById("myfile")
                    input.click()
                },
                submitFile() {
                    let submit = document.createElement("input")
                    submit.type = "submit"
                    submit.click()
                }
            }
        })
    </script>
</body>

</html>

最后编辑于：2019.05.07 12:24:42