legend3---30、不同类型的网站打包方案

一、总结

一句话总结：

单页面：webpack进行单页面打包，比如vue-cli，比如手机的前端页面

多页面静态页面：可以用webpack打包多页面，例如vue官网

多页面动态页面：比如各个后端语言对应的mvc框架

1、laravel中的inRandomOrder()用的是原生sql中的什么操作？

order by RAND()

User::where('can_be_visited', 4)->inRandomOrder()->limit(100)->get();
select * from `users` where `can_be_visited` = 4 order by RAND() limit 100

2、发表评论优化？

评论发表成功之后，没必要再从后台拿新的评论数据，可以直接评论成功后把数据加到评论对象中

3、在vue项目中，一些插件初始化的时候，会有开始没有效果，刷新之后有效果，如何解决？

应该把初始化插件的代码放到vue的mounted方法中，这个时候页面结构已经初始化好了

4、用dom.getBoundingClientRect()来获取元素的位置？

rectObject = object.getBoundingClientRect();有上下左右四个属性表示距离

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法：这个方法没有参数。
rectObject = object.getBoundingClientRect();

2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。
　rectObject.top：元素上边到视窗上边的距离;
　rectObject.right：元素右边到视窗左边的距离;
　rectObject.bottom：元素下边到视窗上边的距离;
　rectObject.left：元素左边到视窗左边的距离;

5、dom操作中的element的innerHTML属性和innerText属性？

innerHTML插入html，innerText插入文本

6、dom操作的appendChild使用注意？

dom操作的appendChild要插入node节点，可以用document.createElement来创建node节点

let node=document.createElement("div");
node.innerHTML=JSON.stringify(comment);
document.getElementById('news_1').appendChild(node);

7、遇到错误记得去看日志？

遇到错误记得去看日志，这样比较方便的知道什么错误

二、内容在总结中

博客对应课程的视频位置：

来源：oschina

链接：https://my.oschina.net/u/4404709/blog/4264108

标签

Vue.js

Webpack

visited

laravel

Vue CLI

element