个人建站心得(Vue+nodejs+mysql)

问题与解决方法（持续更新！）

前端

HTML

复杂图片布局CSS也没办法？

• 用svg标签解决

图中三块三角形覆盖层代码展示：

<svg width="370" height="600" class="right-svg">
                <polyline points="0,0 370,0 370,320" style="fill:#009de0;"></polyline>
                <polyline points="302,263 0,600 370,523 370,320" style="fill:#000000;opacity: .15;"></polyline>
                <polyline points="0,600 370,523 370,600" style="fill:#000000;opacity: .25;"></polyline>
</svg>

CSS

css代码太多不好阅读？

• 利用less嵌套，层级明显方便阅读修改

类似于管理系统的布局怎么实现（左侧固定，右侧可单独向下滚动）

<div id="magazine">
    <head-view></head-view>
    <div class="mag-box">
      <div class="container">
        <div class="mag-inner">
          <div class="mag-left">
			ttw
          </div>
          <div class="mag-right">
            <div class="right-inner">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

#magazine {
    .mag-box {
      .container {
        max-width: 1300px;
        margin: 0 auto;
        .mag-inner {
          display: flex;

          .mag-left {
            width: 200px;
            height: calc(~"(100vh - 130px)");
            background-color: blueviolet;
          }
          .mag-right {
            width: 1200px;
            height: calc(~"(100vh - 130px)");
            background-color: burlywood;
            overflow: auto;
            .right-inner {
              height: 1300px;
              background-color: cadetblue;
            }
          }
        }
      }
    }
  }

思路：

1.整体布局使用flex

2.设置左右盒子的固定高度

3.右侧盒子设置overflow: auto; 溢出父盒子的子级可通过拉滚动条显示

js

如何声明二维数组？

• 用循环赋值【】

var i,ii;
i = ii = 0;
var sentence = [[]]
for (var t = 0; t <= 100; t++) {
              sentence[i][ii] = t;
              if (t % 10 == 0) {
                i++;
                sentence[i] = [];
                ii = -1;
              }
              ii++;
            }
console.log(sentence);

如何退出forEach循环？

使用break和return都有问题，所以try…catch…是最优解

var date = [1,2,3,4,5];
try {
        date.forEach((e, index, arr) => {
          if (e == 2) {
            arr[index] = 6;
            foreach.break = new Error("StopIteration");
          } else {
            arr[index] = 10;
          }
        });
      } catch (e) {
        if (e.message === "foreach is not defined") {
          console.log(date);
          return;
        }
      }

axios

访问第三方接口产生跨域问题

• 交给后端处理，后端用request请求第三方接口，得到数据后通过自身接口传给前端

VUE

获取输入框数据

除了用v-model还可以用ref（类似于原生dom，但ref更好用）

<template>
	  <div>
	      <input type="text" ref="getRef" />
	      <button @click="subButton">获取输入框数据</button>
	  </div>
	</template>
	<script>
    export default {
      name: "test",
      data() {
          return:{
          };
      },
      methods: {
	        subButton(){
	          console.log(this.$refs.getRef.value)
	        }
      	}
    }
  </script>

比较好用的vue日历组件

• vue-calendar-component

element-ui

无法修改element默认样式？

• 用less嵌套可以很好的覆盖element组件样式

后端

Nodejs

异步函数如何做到运行完成后再执行下一段函数？

• 利用Promise产生回调函数，将异步函数结果转为参数通过.then()传给下一段函数

const promise_request = (word)=>{
  return new Promise((resolve, reject)=> {
    request(`http://fanyi.youdao.com/translate?&doctype=json&type=AUTO&i=${word}`,function(err, response, body){
      if(err) return reject(err);
      var res = JSON.parse(body);
      var trans = '没找到';
      trans = res.translateResult[0][0].tgt;
      resolve(trans);
    })
  })
}
router.post('/youdao',(req,res)=>{
  let word=req.body.word;
  promise_request(word)
    .then(Content1 => {
        res.send({"code":"200","sucess":"翻译成功！","data":Content1});
    })
})

关于async和await实现异步转同步

const asy = function(x, time) {
    return new Promise((resolve, reject) =>{
        setTimeout(()=>{
            resolve(x)
        }, time)
    })
}

const add = async function() {
    const a = await asy(3, 5000)
    console.log(a)
    const b = await asy(4, 10000)
    console.log(b)
    const c =  await asy(5, 15000)
    console.log(a,b,c)
    const d = a + b +c  
    console.log(d)
}

add();

Mysql

前后端交互

前后端传数据

后端传往前端的json值中若有 - 或 " 都会有奇怪的问题出现？（未解决）

• 暂时利用值替换（replace）解决

项目部署和上线

项目轻松上线（下图是我正做的项目）

大佬讲得太细了（以下是大佬博客链接）

nodejs+vue项目部署上线总流程

在云服务器上（CentOS)上安装Nodejs

远程连接数据库时的权限问题

UI设计

小心得

• 文本或图片悬浮变色时，暗色要变亮（如黑色要变白些），亮色要变暗（如深蓝要变浅蓝）

鼠标悬浮时背景图变大

• 事先定死父子盒子的大小，子级设定背景图，父级设定溢出隐藏（overflow:hidden)，使用transform: scale(1.2);放大子盒子。